שפת HTML – הקדמה, מבנה השפה ושאלות נפוצות

שפת HTML – הקדמה, מבנה השפה ושאלות נפוצות

  • פרסומת

מהי שפת HTML?

  • HTML זה ראשי תיבות של: Hyper Text Markup Language
  • HTML אינה שפת תיכנות, אלא שפת הגדרה המורכבת מתגיות. שפה כזאת נקראת גם שפת קידוד
  • HTML משתמשת בתגיות כדי ליצור ולהגדיר דפי אינטרנט.

למה משתמשים בשפת HTML?

בעזרת שפת ה- HTML ניתן ליצור דפי אינטרנט ואתרים שלמים. השפה, שאותה נלמד כאן בהמשך, מתורגמת על ידי הדפדפנים (לדוגמה Firefox ו- Internet Explorer) לדפי האינטרנט שאנו רגילים לראות.
דפדפן זו בעצם תוכנה שיודעת "לדבר" את שפת ה- HTML ולתרגם אותה לשפתנו, כלומר, לצורה ויזואלית.

מבלבל קצת? בואו נראה דוגמה:

כתיבה בשפת HTML

צרו מסמך טקסט חדש, ושמרו אותו בשם myWebsite.html. לאחר מכן פתחו אותו בעזרת תוכנה לעריכת טקסט (כמו "כתבן") והזינו אליו את הקוד הבא:

<p>This is a paragraph</p>

שמרו את הקובץ, ולחצו עליו פעמיים. הדף יפתח בדפדפן שלכם, והפלט של הקוד שכתבנו יראה כך:

קובץ html המוצג בדפדפן כרום

הערה: שימו לב שבכתיבת פיסקה, יש גם תגית פתיחה וגם תגית סגירה

כך למעשה כותבים פיסקה ב-HTML. תגיות ה- <p></p> הם בעצם קיצור של Paragraph באנגלית. אם נרצה לרדת שורה ב- HTML, עלינו לכתוב את הקוד הבא:

<p>This is the first line<br />And this is the second line</p>

והפלט של הקוד יראה כך:

קובץ HTML המוצג בדפדפן כרום

הערה: שימו לב שלתגית אין תגית סגירה נוספת, משום שהיא תגית סגורה ואינה דורשת תגית נוספת. שפת ה-HTML משתמשת בשני סוגים של תגיות כמו שראינו, ולכל סוג יש תכלית שונה.

אלמנטים

כל מסמך HTML מורכב מאלמנטים. האלמנטים במסמך HTML יוצרים מבנה היררכי. להלן מספר דוגמאות לאלמנטים המוגדרים כחלק מהשפה:

תגית פתיחה תגית סגירה שימוש
<p> </p> פסקה
<img /> ללא תמונה
<div> </div> חלוקת אזורים
  • תגיות (באנגלית HTML Tags) הינן מילות מפתח המוקפות בסוגריים חדות משני צידיהן. לדוגמה:
  • התגיות בשפת HTML באות בדרך כלל בזוגות. לדוגמה:
  • התגית הראשונה נקראת "תגית פתיחה" והתגית השניה נקראת "תגית סגירה".
  • תגית פתיחה ותגית סגירה יוצרות אלמנט:
  • אפשר להוסיף הגדרות לכל אלמנט בעזרת אטריביוטים.

אטריביוטים

בעזרת אטריביוטים ניתן להגדיר כל אלמנט בצורה אישית. לדוגמה, אם נרצה להגדיר את הצבע של פסקה מסוימת ככחול, ניתן לעשות זאת כך:

<p color="blue">This is a blue paragraph</p>

חשוב לציין שלא זאת הדרך להגדיר צבע של פסקאות. כל הגדרה של נראות (צבע, הדגשה, הצללה וכו׳) נעשית על ידי שימוש בשפה אחרת הנקראת CSS. שפת HTML נועדה אך ורק בשביל להגדיר את המבנה ההיררכי של המסמך, ואת המידע שמכיל כל אלמנט. הגדרת הניראות בעזרת HTML הינה טעות נפוצה המובילה לבעיות רבות אם המסמך מורכב, ומבטל את היתרון שבפיצול השפות. לכל שפה יש את המטרה שלה, ואסור לערבב בינהן, גם אם זה מאד מפתה באותו הרגע…

שאלות נפוצות

מה ההבדל בין HTML לבין XHTML?

שתי השפות משמשות לאותה מטרה, שהיא להגדיר לדפדפן איך להציג דף אינטרנט מסויים. ההבדל הוא ש- HTML היא שפה ישנה יותר, המאפשרת יותר חופשיות בקוד ולפיכך הרבה פחות יציבה. XHTML לעומת זאת היא שפה חדישה יותר, והרבה יותר "נוקשה". לפיכך, היא מתירה הרבה פחות טעויות בקוד מה שגורם לה להיות הרבה יותר יציבה.

העתיד נמצא עם XHTML…

אז למה ללמוד HTML? למה לא פשוט ללמוד XHTML וזהו?

מבנה השפות הוא בעצם אותו מבנה, רק ש- XHTML לא מתירה טעויות בקוד, כש-HTML כן.

באתר WebDesk.co.il אנו מביאים הסבר מפורט על HTML, כשבלימוד השפה XHTML אנו פשוט מסבירים מה הטעויות שצריך להימנע מהן. אין טעם לחזור על מבנה השפה שוב (טבלאות, רשימות, Syntax וכו') שכן המבנה הוא אותו מבנה.

הבינאום האינטרנטי (W3 Consortium) ממליץ על שימוש בשפה XHTML.