מבוא ל HTML

מסמך HTML מורכב מתגיות המגדירות את מבנה העמוד ואת התוכן שיופיע בו. להלן מבנה בסיסי ודוגמאות לטקסט ולרשימות.

מבנה מסמך HTML

התגית html פותחת את המסמך וסוגרת אותו. כל מה שבין תגית הפתיחה לתגית הסגירה שייך למסמך. בתוך המסמך נבחין בשני חלקים:

• head מכילה מידע שאינו גוף המסמך, כגון כותרת העמוד וקשרים למסמכים אחרים.
• title מגדירה את כותרת העמוד המופיעה בלשונית הדפדפן. היא נמצאת בתוך head.
• body מכילה את גוף העמוד ואת התוכן שיוצג בדפדפן.

<!DOCTYPE html>
<html>
<head>
    <title>Page title</title>
</head>
<body>
    Page content
</body>
</html>

טקסט וכותרות

ניתן לקבוע רמות שונות של כותרות בעזרת התגיות h1 עד h6. הכותרת h1 היא בדרך כלל הגדולה ביותר, ו־h6 הקטנה ביותר.

<h1>Main heading</h1>
<h3>Medium heading</h3>
<h6>Small heading</h6>

התגית font עם המאפיין size שימשה לקביעת גודל הטקסט. תגית זו מיושנת ואינה מומלצת ב־HTML מודרני.

<font size="7">Large text</font>

פסקאות ומעבר שורה

התגית p משמשת לכתיבת פסקה. הדפדפן מציג בדרך כלל רווח מעל הפסקה ומתחתיה.

<p>A paragraph of text.</p>

התגית br משמשת למעבר לשורה חדשה. אפשר לכתוב אותה כך:

<br />

<p>First line<br />Second line</p>

רשימות

ניתן להציג רשימה ממוספרת, רשימה לא ממוספרת או רשימת הגדרות.

רשימה ממוספרת

התגית ol מגדירה רשימה ממוספרת, והתגית li מגדירה פריט ברשימה. כל פריט מוצג בשורה נפרדת.

<ol>
    <li>Mathematics</li>
    <li>Statistics</li>
    <li>Probability</li>
</ol>

ניתן לציין את המאפיין start כדי לקבוע את מספר ההתחלה. אם לא מציינים אותו, המספור מתחיל ב־1.

<ol start="2">
    <li>Mathematics</li>
    <li>Statistics</li>
</ol>

המאפיין type קובע את צורת המספור: למשל 1 למספרים, a לאותיות קטנות, A לאותיות גדולות ו־i לספרות רומיות קטנות. המאפיין reversed הופך את סדר המספור ליורד.

<ol type="i" reversed>
    <li>Mathematics</li>
    <li>Statistics</li>
</ol>

רשימה לא ממוספרת

התגית ul מגדירה רשימה לא ממוספרת, והתגית li מגדירה כל אחד מהפריטים. הרשימה מוצגת בדרך כלל עם תבליטים.

<ul>
    <li>Mathematics</li>
    <li>Statistics</li>
    <li>Probability</li>
</ul>

המאפיין type שימש לקביעת סוג התבליט, למשל circle, disc או square. מאפיין זה מיושן ב־HTML מודרני.

רשימת הגדרות

התגית dl מגדירה רשימת הגדרות. התגית dt מגדירה את המונח, והתגית dd מגדירה את התיאור שלו. ניתן לציין יותר מתיאור אחד למונח.

<dl>
    <dt>Student</dt>
    <dd>A person who learns.</dd>
    <dt>Teacher</dt>
    <dd>A person who teaches.</dd>
</dl>