האם הצלחתה לבנות מספר דפים משלך? אם לא, הנה דוגמה:
<html>
<head>
<title>אתר האינטרנט שלי</title>
</head>
<body>
<h1>כותרת</h1>
<p>טקסט, טקסט, טקסט, טקסט</p>
<h2>כותרת משנה</h2>
<p>טקסט, טקסט, טקסט, טקסט</p>
</body>
</html>
עכשיו הגיע הזמן להכיר שבעה אלמנטים חדשים.
באותה דרך בה הדגשתה טקסט על ידי הכנסתו בין התג הפותח <em> והתג הסוגר <em/>, אתה יכול ליצור הבלטה חזקה יותר עם התג הפותח <strong> והתג הסוגר <strong/>.
דוגמה 1:
<strong>זו תהיה הדגשה חזקה יותר</strong>
בדפדפן זה יראה כך:
בצורה דומה, אתה יכול ליצור טקסט קטן יותר באמצעות small:
דוגמה 2:
<small>זה יהיה בקטן</small>
בדפדפן זה יראה כך:
אתה יכול בקלות להשתמש במספר אלמנטים בו זמנית כל עוד אתה נמנע מלחפוף בין האלמנטים. זה מתואר בצורה טובה על ידי דוגמה:
דוגמה 3:
אם אתה רוצה להדגיש טקסט מוקטן, זה חייב להתבצע כך:
<em><small>הדגשת טקסט מוקטן</small></em>
ולא כך:
<em><small>הדגשת טקסט מוקטן</small></em>
ההבדל בין הדוגמאות הוא שבדוגמה הראשונה, אנחנו סוגרים אחרון את התג שפתחנו ראשון. כך אנחנו נמנעים מלבלבל את עצמנו ואת הדפדפן.
כפי שהוזכר בשיעור 3 ישנם אלמנטים שנפתחים ונסגרים באותו תג. אלמנטים אלו נקראים אלמנטים ריקים, הם אינם קשורים לקטע טקסט מסויים ומהווים תוויות מבודדות. דוגמה לתג כזה הוא </ br> שיוצר מעבר שורה כפוי:
דוגמה 4:
טקסט<br />ועוד טקסט בשורה חדשה
בדפדפן זה יראה כך:
שים לב שהתג נכתב כשילוב של תג פותח ותג סוגר עם רווח שלאחריו אלכסון סוגר: </ br>.
אלמנט נוסף שנפתח ונסגר באותו תג הוא </ hr> שמשמש למתיחת קו אופקי ("hr" הוא קיצור של "horizontal rule"):
דוגמה 5:
<hr />
בדפדפן זה יראה כך:
דוגמאות של אלמנטים שצריכים תג פותח ותג סוגר (רוב האלמנטים) הם: ul, ol ו-li. אלמנטים אלו משמשים ליצירת רשימות.
ul הוא קיצור ל-"unordered list" ויוצר תבליטים לכל פריט ברשימה. ol הוא קיצור של "ordered list" והוא ממספר כל פריט ברשימה וכדי ליצור פריטים ברשימה עליך להשתמש בתג ("li ("list item. מבולבל?, ראה דוגמה:
דוגמה 7:
<ul>
<li>רשימת פריטים</li>
<li>רשימת פריטים נוספת</li>
</ul>
בדפדפן זה יראה כך:
דוגמה 8:
<ol>
<li>רשימת פריטים ראשונה</li>
<li>רשימת פריטים שנייה</li>
</ol>
בדפדפן זה יראה כך:
זה הכל לעכשיו. שוב, התנסה ובנה דפים בעצמך תוך שימוש בשבעת האלמנטים החדשים שלמדתה בשיעור זה:
<strong>הדגשה חזקה יותר</strong>
<small>טקסט מוקטן</small>
<br /> מעבר שורה
<hr /> קו אופקי
<ul>רשימה<ul>
<ol>רשימה מסודרת<ol>
<li>רשימת פריטים</li>