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

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

קפיצה אל: ניווט, חיפוש

תוכן עניינים

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

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

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


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

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

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

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

דוגמה:

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


פלט:

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


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

  • התג 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>


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

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