HTML/שימוש במבנה המסמך

אחרי שלמדנו שימוש בתגים הבסיסיים, נלמד איך להשתמש בהם בתוך מבנה המסמך המחייב של HTML.

הביטו בדוגמת קוד HTML:

<h3>
  כותרת רמה שלוש
</h3>
<p> פסקה ראשונה</p>
<p> 
  פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה
  <b>
    פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה
  </b>
</p>

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

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

מבנה המסמך שלהלן מתאים למסמכים בעברית.

מבנה המסמך

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="he" xml:lang="he" dir="rtl">
  <head>
    <title>כותרת משמעותית למסמך שמעידה על תוכנו</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="content-language" content="he" />
  </head>
  <body>
    ...
  </body>
</html>

במקום לכתוב כל פעם מחדש את מבנה המסמך, מומלץ לשמור את המבנה בקובץ במקום נגיש, ובעת שכותבים מסמך HTML חדש, להעתיק את המבנה ולשנות רק את האלמנטים title ו- body.

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

ניקח את דוגמת קוד HTML מלמעלה ונכניס אותה בתוך אלמנט ה-body במבנה המסמך. בנוסף נחליף את הטקסט באלמנט title לכותרת שמייצגת נאמנה את המסמך.

קוד במבנה

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="he" xml:lang="he" dir="rtl">
  <head>
    <title>נסיון ראשון עם HTML</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="content-language" content="he" />
  </head>
  <body>
    <h3>
      כותרת רמה שלוש
    </h3>
    <p> פסקה ראשונה</p>
    <p> 
      פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה
      <b>
        פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה
      </b>
    </p>
  </body>
</html>

אם אתה יודע ליצור ולערוך קבצים, תוכל להעתיק את הדוגמה האחרונה, ולשמור אותה בקובץ עם סיומת html ובקידוד utf8. אם לא, קרא את הפרק הבא.

קצת על מבנה המסמך

השורה הראשונה במבנה שמה: הצהרת סוג המסמך או Document Type Declaration או DTD. הצהרה זו מגדירה שהמסמך הוא מסוג XHTML 1.0 STRICT. היא אינה חלק מהמסמך, אלא כותרת, הצהרה.
השורה השנייה כבר נחשבת מסמך HTML, והיא הצהרה על אלמנט html שהוא אלמנט השורש, האלמנט הראשי של מסמך html. המאפיין xmlns שלו הוא חובה בדיוק כמו שהוא מופיע כאן. אין להשמיט אותו ואין לשנות אותו. שני המאפיינים הנוספים lang ו- xml:lang מצהירים על השפה שבה כתוב המסמך.
השורה השלישית היא האלמנט head ובו כל התוכן שלא מוצג למשתמש. בתוכה האלמנט title שחובה בשימוש, והאלמנטים meta ששולחים מידע חשוב כמו קידוד המסמך ושפת המסמך לדפדפן.
אם נתקלתם פעם במסמך שהעברית שלו הפוכה, שנראה כמו ג'יבריש וצריך למצוא לו קידוד אחר, סימן שכותב הדף השמיט את האלמנטים meta או את המאפיין lang ו- xml:lang באלמנט ה-html.

הערות

מבנה המסמך הוא מחייב! למידע נוסף למשתמשים מתקדמים ראה: XHTML10STRICT/מבנה המסמך.
הכותרת (אלמנט title) לא מופיעה במסמך עצמו, והיא בדרך כלל מופיעה בשורת הכותרת של הדפדפן (למעלה). למשל כותרת המסמך הזה היא: 'ויקיספר - HTML/שימוש במבנה המסמך'.
חובה להשתמש בכותרת! חובה להשתמש באלמנט title ולא לתת לתוכן שלו להיות ריק!
השורה הראשונה במבנה (DOCTYPE) אינה חלק מהמסמך, אינה תג ואין צורך לסגור אותה. (היא הצהרת סוג המסמך).
מכיוון ששורת xml שתפקידה לזהות את הקידוד אינה מומלצת, כדאי מאוד לשמור את כל המסמכים בקידוד utf8.

ניווט

הפרק הקודם:
עיצוב בסיסי

שימוש במבנה המסמך
תרגילים

הפרק הבא:
שימוש בפנקס הרשימות