HTML/שבירת שורה וקו אופקי

אלמנטים ריקים

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

<tagname />
פסקה ראשונה
שורה ב
<br />

תג ריק הוא שילוב של תג פותח ותג סוגר.

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

שבירת שורה

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

דוגמה:

<p>
שורה א
שורה ב
<br />
שורה ג
שורה ד שורה ה 
<br /> 
שורה ו שורה ז
</p>

פלט:

שורה א שורה ב
שורה ג שורה ד שורה ה
שורה ו שורה ז

התג br הוא תג מסוג שורה. הווה אומר: הוא אינו יכול להופיע כצאצא ישיר של body, אלא רק בתוך צאצא מסוג גוש כדוגמת p.

קו אופקי

ב-HTML יש אפשרות להוסיף קו אופקי להפרדה בין חלקים במסמך. עושים זאת על-ידי שימוש בתג הריק <hr />.

דוגמה:

<p>
פסקה ראשונה
שורה ב
<br />
שורה ג
שורה ד
</p>
<p> פסקה שניה </p>
<hr />
<p> פסקה שלישית </p>

פלט:

פסקה ראשונה שורה ב
שורה ג שורה ד

פסקה שניה

פסקה שלישית

<hr /> הוא אלמנט מסוג גוש, ולכן אסור לו להופיע בתוך פיסקאות (p). מאידך מותר לו להופיע ישירות בתוך body.

מבנה המסמך

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

<!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>
<p>
פסקה ראשונה
שורה ב
<br />
שורה ג
שורה ד
</p>
<p> פסקה שניה </p>
<hr />
<p> פסקה שלישית </p>
  </body>
</html>

ניווט

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

שבירת שורה וקו אופקי
תרגילים

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