יצירת רשימות באמצעות HTML
נכתב ע"י יוחאי ירמיהו 2 תגובות
באמצעות רשימות נוכל ליצור קבוצות של אלמנטים ולהציג אותם בעמוד. קיימים סוגים שונים של רשימות כמו רשימות של מספרים, רשימות עם עיגולים וריבועים ונדבר על מרבית סוג הרשימות במדריך של היום.
איך לבנות אתר בחינם בשעה וחצי?
יש לי הצעה מעניינת עבורך, יצרתי הדרכה מלאה של למעלה משעה וחצי שתלמד אותך איך לבנות אתר מ-0 בחינם כולל רכישת אחסון ודומיין. נשמע מעניין? אשמח לשלוח לך אותה למייל.
יצירת רשימה ללא חשיבות לסדר
כאשר אין חשיבות לסדר של הרשימה אנחנו נוכל ליצור את הרשימה באמצעות תגית ul ובתוך התגית הזאת אנחנו ניצור תגיות נוספת של li וכל תגית li תהיה פריט אחד ברשימה שאנחנו יוצרים.
- פריט 1 ברשימה
- פריט 2 ברשימה
- פריט 3 ברשימה
<ul>
<li>פריט 1 ברשימה</li>
<li>פריט 2 ברשימה</li>
<li>פריט 3 ברשימה</li>
<ul>
בנוסף לרשימה המוצגת מעל יש לנו את היכולת גם לשלוט על הסימן שיופיע לצד הרשימה על ידי הוספת הערך של type לקוד.
קיימים 3 סוגים של אייקונים שנוכל לעשות בהם שימוש ותוכלו לראות את האפשרויות השונות מתחת:
disc – עיגול (ברירת מחדל)
square – מרובעים
circle – מסגרת של עיגול
לדוגמא בקוד מתחת נשנה את האייקון של הרשימות מעיגול שזה ברירת המחדל של הדפדפן אל סימן של ריבוע.
- פריט 1 ברשימה
- פריט 2 ברשימה
- פריט 3 ברשימה
<ul type='square'>
<li>פריט 1 ברשימה</li>
<li>פריט 2 ברשימה</li>
<li>פריט 3 ברשימה</li>
<ul>
יצירת רשימה כשיש חשיבות לסדר
כאשר יש חשיבות לסדר של הרשימה וכאשר אנחנו רוצים למספר אותה באמצעות מספרים כמו למשל: 1, 2, 3 וכו'… נצטרך לשנות את התגית של הרשימה מתגית ul לתגית של ol שהיא תגית המתארת רשימה ממוספרת עם חשיבות לסדר האלמנטים ברשימה.
מתחת תוכלו לראות כיצד רשימה ממוספרת מופיעה כאשר אנחנו מוסיפים אותה באמצעות קוד HTML לעמוד.
- פריט 1 ברשימה
- פריט 2 ברשימה
- פריט 3 ברשימה
<ol>
<li>פריט 1 ברשימה</li>
<li>פריט 2 ברשימה</li>
<li>פריט 3 ברשימה</li>
<ol>
בצורה דומה לרשימות לא ממוספרות גם כאן יש לנו כמה אפשרויות שונות שבאמצעותם נוכל לשנות את סוג האייקון שמופיע לצד הרשימה. מתחת תוכלו לראות את האפשרויות השונות שיש לכם על ידי הוספת הערך של type.
1 – מספרים
A – אותיות גדולות באנגלית
a – אותיות קטנות באנגלית
I – מספרים ביוונית באותיות גדולות
i – מספרים ביוונית באותיות קטנות
בקוד לדוגמא מתחת נשנה את האייקון של רשימת המספרים שהופיע מעל לאותיות גדולות באנגלית שמסומן באמצעות type של A.
- פריט 1 ברשימה
- פריט 2 ברשימה
- פריט 3 ברשימה
<ol type='A'>
<li>פריט 1 ברשימה</li>
<li>פריט 2 ברשימה</li>
<li>פריט 3 ברשימה</li>
<ol>
ברשימה ממוספרת יש לנו 2 אפשרויות נוספות שניתן להוסיף לתגית ol על מנת לשלוט בתצוגה של הרשימה שאנחנו יוצרים.
האפשרויות הראשונה שיש לנו היא ליצור רשימה הפוכה שתתחיל מהמספר האחרון ותסתיים במספר הראשון. נוכל לעשות זאת על ידי הוספת המילה reversed לתגית ol.
- פריט 1 ברשימה
- פריט 2 ברשימה
- פריט 3 ברשימה
<ol reversed>
<li>פריט 1 ברשימה</li>
<li>פריט 2 ברשימה</li>
<li>פריט 3 ברשימה</li>
<ol>
האופציה הנוספת שיש לנו בעת יצירת רשימות היא שליטה על הנקודה שבה המספור יתחיל. אם למשל נרצה נוכל להתחיל להציג את האלמנטים בעמוד עם מספר הגבוה מ-1 כך שלמשל הרשימה מתחת תתחיל להציג את האלמנטים מהספרה 10.
נוכל לעשות זאת על ידי הוספת התגית start והוספה של המספר שממנו תתחיל הרשימה שמוצגת בעמוד.
- פריט 1 ברשימה
- פריט 2 ברשימה
- פריט 3 ברשימה
<ol start='10'>
<li>פריט 1 ברשימה</li>
<li>פריט 2 ברשימה</li>
<li>פריט 3 ברשימה</li>
<ol>
יצירת רשימת HTML ללא אייקונים
כאשר אתם רוצים ליצור רשימה ב-HTML ללא אייקון אז בדרך כלל ניתן יהיה לעשות זאת באמצעות הוספת קוד CSS המבטל את ההוספה של האייקון לעמוד (למידע נוסף על מה זה CSS לחצו כאן).
- פריט 1 ברשימה
- פריט 2 ברשימה
- פריט 3 ברשימה
<ul style="list-style-type:none;">
<li>פריט 1 ברשימה</li>
<li>פריט 2 ברשימה</li>
<li>פריט 3 ברשימה</li>
<ul>
עוד לא צפיתם בהדרכה? זה בחינם!
אני רוצה ללמד אתכם לבנות אתר אחד בחינם. מדובר על הדרכה של למעלה משעה וחצי שבה אני אלמד אותך מ-0 לבנות אתר כולל רכישת אחסון ודומיין. לקבלת ההדרכה למייל באופן מיידי יש להשאיר פרטים מתחת.
אם אהבתם את המדריך ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:
יש לכם שאלות בנוגע למדריך HTML? שתפו אותנו בתגובות!
אם יש לכם שאלות, אם משהו היה לא מובן או במידה ואתם רוצים לשתף אותנו בדעה שלכם תוכלו לעשות זאת בתגובות מתחת:
2 תגובות
לא ניתן לפרסם תגובות
האם ניתן לעשות רשימה ללא אייקון כלל?
היי, זה אפשרי אבל זה מצריך CSS ולא קוד HTML.
הוספתי אזור נוסף בעמוד שמסביר איך לעשות את זה תחת הכותרת של "יצירת רשימת HTML ללא אייקונים" אתה יכול להעתיק את הקוד משם והוא יופיע בעמוד ללא אייקונים.