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

מתוך ויקיספר, אוסף ספרי הלימוד והמדריכים החופשי.

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

[עריכה] כותרות

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

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

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

[עריכה] פיסקאות

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

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

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

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

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

[עריכה] הדגשה

אם רוצים להדגיש טקסט יש להקיף אותו בתג b.

דוגמה:

<p>
רגיל רגיל רגיל
<b>מודגש</b>
רגיל
</p>

פלט:

[עריכה] קינון אלמנטים

בסופו של דבר תצטרכו להכניס אלמנט בתוך אלמנט. על פי תקן XHTML, התגית האחרונה שנפתחה תמיד תהיה הראשונה שתסגר (זה נקרא LIFO - Last In First Out). הסיבה שכל כך חשוב לסגור תגיות בסדר הנכון, היא שאם לא נעשה זאת הדפדפן עלול "להתבלבל" - והדפדפן לא מחויב לעמוד באף תקן במקרה כזה, אז התוצאות יכולות להיות כל דבר. מכיוון שיש דפדפנים רבים בשוק (Internet Explorer, Mozilla Firefox, 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>

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

[עריכה] ניווט