ב-HTML קיים אלמנט רשימה אשר באמצעותו נוכל לסדר אוסף של פריטים בתצוגת רשימה, טקסט או קישורים למשל
ישנם 3 סוגים של רשימות ב-HTML:
- רשימה ממוספרת\ממוינת – Ordered List
- רשימת בולטים – Unordered List
- רשימה עם הגדרות – Definition List
רשימה ממוספרת
זוהי רשימה אשר הפריטים שבה ממוספרים לפי הסדר.
על מנת ליצור רשימה ממוספרת יש להשתמש בתגית פותחת ol.
את הפריטים שברשימה נשים בתוך תגית li (כל אחד מהפריטים).
לבסוף נסגור את הרשימה באמצעות תגית סוגרת ol:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello, World!</title>
<h1>this is an example of our basic HTML Document with List</h1>
</head>
<body>
<p>this is an example of link, click <a href="https://www.technow.co.il">here</a>
<br/>
<br/>
this is my image:
<br/>
<br/>
<a href="https://www.g4a.co.il/">
<img src="logo.png" alt="text" style="height: 100px;" style="width: 100px;">
</a>
<br/>
to do list:
<br/>
<ol>
<li>Eat breakfast</li>
<li>Take a nice walk</li>
<li>Program</li>
<li>Eat dinner</li>
<li>Go to sleep</li>
</ol>
</p>
</body>
</html>
במידה וניסיתם זאת בעצמכם, שמתם לב כי הפריטים מוספרו באופן אוטומטי:
רשימת בולטים
זוהי רשימה שבמקום מספור, הפריטים מסומנים בבולטים שחורים.
על מנת לפתוח רשימה נשתמש בתגית ul, כאשר בדומה לרשימה ממוספרת,
גם כאן הפריטים יהיו בתוך תגית li.
את הרשימה נסגור באמצעות תגית סוגרת ul:
<ul>
<li>Eat breakfast</li>
<li>Take a nice walk</li>
<li>Program</li>
<li>Eat dinner</li>
<li>Go to sleep</li>
</ul>
רשימה עם הגדרות
סוג נוסף של רשימה אשר קיים ב-HTML הוא Definition List.
לרשימה זו נוכל להתייחס כאל רשימת מונחים, כלומר שיש לה צמדי מפתח–ערך (key–value).
על מנת ליצור רשימה ממוספרת יש להשתמש בתגית פותחת dl.
נשים מפתח בתגית dt, כאשר את התיאור נשים בתגית dd.
את הרשימה נסגור באמצעות תגית סוגרת dl:
<dl>
<dt>Lemon</dt>
<dd>- Yellow sour fruit</dd>
<dt>Strawberry</dt>
<dd>- Red sweet fruit</dd>
</dl>
רשימה כתפריט ניווט ב-HTML
נוכל להשתמש ברשימה כתפריט ניווט לדף האינטרנט שלנו.
למעשה, כל מה שנצטרך לעשות זה לשים קישורים בתוך תגיות הפריטים:
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="https://www.technow.co.il">Ask Questions</a></li>
</ul>
הוספת טבלאות ב-HTML
אלמנט שימושי נוסף שקיים ב-HTML הוא טבלה (Table).
נוכל להוסיף טבלה באופן שמעט מזכיר רשימות.
את הטבלה נקים באמצעות תגית פותחת table.
כל שורה (row) נכניס בתוך תגית th.
את השורה הראשונה שהיא למעשה הכותרות של העמודות, נגדיר כך שכל עמודה תהיה בתגית th.
לאחר מכן נוכל להכניס את הרשומות בתגיות td,
כאשר את הטבלה נסגור באמצעות תגית סוגרת table כמובן:
<table>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>1</td>
<td>Alfredo</td>
<td>Mustakis</td>
</tr>
<tr>
<td>2</td>
<td>Mariuma</td>
<td>Salvador</td>
</tr>
<tr>
<td>3</td>
<td>Roland</td>
<td>Magen</td>
</tr>
<tr>
<td>4</td>
<td>Hilary</td>
<td>Washington</td>
</tr>
</table>
דוגמא זו תייצר לנו טבלה סטנדרטית.
כמובן שנוכל להעניק מאפיינים לטבלה באמצעות התגית style.
נוסיף את התגית לאזור ה-Head וניתן לה מאפיינים שישפרו את מראה הטבלה שיצרנו:
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
על מנת שנוכל לקבל את התוצאה הבאה:
בפרק הבא של המדריך נלמד כיצד להוסיף טפסים וכפתורים לדף האינטרנט שלנו.
