HTML/עיצוב בסיסי

תזכורת: חובה לסגור את כל התגים עם תג סוגר!

כותרות

כותרות מגדירים ב־HTML על ידי שימוש בששה תגים: h1, h2, h3, h4, h5, h6 כאשר h1 זוהי הכותרת הראשית ביותר, הגדולה ביותר ו־h6 זוהי הכותרת ברמה הנמוכה ביותר, והקטנה ביותר.

דוגמא

דוגמה לשימוש בכותרת משנית h2:

<h2>כותרת משנית</h2>

פלט. כך זה נראה בדרך־כלל:

כותרת משנית

פיסקאות

ברוב המקרים יש לחלק את גוף הטקסט לפסקאות בעזרת התג p. פסקאות מופרדות אחת מהשניה בעזרת רווח גדול יחסית בין שורה לשורה.

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

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

פלט. כך זה נראה בדרך-כלל:

כותרת רמה שלוש

פסקה ראשונה

פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה

פסקה שלישית פסקה שלישית פסקה שלישית פסקה שלישית

שימו לב ש־HTML מתעלם ממעברי השורה שלנו בפסקה השניה!
לעומת זאת הוא שם מעברי שורה בין הפסקה השניה לפסקה השלישית שם לא שמנו מעבר שורה!
גם בתוך הפסקה השניה הוא מוסיף מעבר שורה משלו כשנגמר המקום בשורה ללא קשר אם ואיפה שמנו אנחנו מעברי שורה!
כך HTML אמור לעבוד ונסביר עוד על תכונה זו בהמשך.

קינון אלמנטים

בסופו של דבר תצטרכו להכניס אלמנט בתוך אלמנט. על פי תקן XHTML, התגית האחרונה שנפתחה תמיד תהיה הראשונה שתסגר (זה נקרא LIFO - Last In First Out). הסיבה שכל כך חשוב לסגור תגיות בסדר הנכון, היא שאם לא נעשה זאת הדפדפן עלול "להתבלבל" – והדפדפן לא מחויב לעמוד באף תקן במקרה כזה, אז התוצאות יכולות להיות כל דבר. מכיוון שיש דפדפנים רבים בשוק (Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Konqueror, Opera הם הדפדפנים הנפוצים ביותר) לא ניתן לבדוק את האתר שכתבתם על כל אחד מהם. למזלנו, אם ניצמד לתקן אנחנו בטוחים בכל אחד מהדפדפנים.

בניסוח אחר: בגרסה זו של HTML (כל גירסאות XHTML למעשה) חובה לשמור על קינון האלמנטים. מה הכוונה בקינון? אלמנטים חייבים להיות אחד בתוך השני, ולא לחפוף אחד את השני. אלמנט שנפתח בתוך אלמנט אחר חייב גם להסגר בו!

דוגמה טובה פחות לאלמנטים שאינם מקוננים (חופפים):

<p>
<b>
טקסט
</p>
</b>

דוגמה טובה שבה האלמנטים מקוננים:

<p>
  <b>
    טקסט
  </b>
</p>

כאן ניתן לומר בבירור שהטקסט נמצא בתוך האלמנט b שנמצא בתוך האלמנט p. זו הכוונה במקונן היטב.

הרחבה

מעברי שורה ורווחים

ראינו כאן ש־HTML מתעלם ממעברי שורה. למעשה הוא לא מתעלם רק מהם אלא מכל מה שנקרא רווחים לבנים. הכוונה לתווים הבאים:

• TAB/טאב: תו שמשמש להזחת טקסט.
• CR/LF: שני תווים שמשמשים לחוד או ביחד מעבר שורה.
• SPACE/רווח: התו המוכר רווח.

HTML לוקח כל רצף של רווח לבן אחד או יותר והופך אותך לרווח (SPACE) אחד. למשל:

ראשון        שני



שלישי
         

        רביעי

שקול ל:

ראשון שני שלישי רביעי

האמור נכון בכלל ב־HTML אך בשל ענייני תאימות אין להכניס טאבים ומעברי שורה לערכי מאפיינים (עליהם נלמד בהמשך). כמו כן עדיף לא להכניס יותר מרווח (SPACE) אחד ברציפות לערכי מאפיינים.

דוגמאות פלט של כותרות

דוגמה לששת סוגי הכותרות:

<h1>כותרת ראשית</h1>
<h2>כותרת משנית</h2>
<h3>כותרת רמה שלישית</h3>
<h4>כותרת רמה רביעית</h4>
<h5>כותרת רמה חמישית</h5>
<h6>כותרת רמה שישית</h6>

פלט. כך זה נראה בדרך-כלל:

כותרת ראשית

כותרת משנית

כותרת רמה שלישית

כותרת רמה רביעית

כותרת רמה חמישית

כותרת רמה שישית

הערות ב- HTML

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

<!-- זוהי הערה -->

ניווט

הפרק הקודם: היכרות

עיצוב בסיסי תרגילים

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