שיעור 6: כמה אלמנטים נוספים
האם הצלחתה לבנות מספר דפים משלך? אם לא, הנה דוגמה:
<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>