HTML

רשימות

סוגי רשימות ב-HTML

HTML מספק שלושה סוגי רשימות: 1. רשימה לא מסודרת (Unordered List) - עם נקודות 2. רשימה מסודרת (Ordered List) - עם מספרים 3. רשימת הגדרות (Definition List) - מונחים והגדרות

1️⃣ רשימה לא מסודרת (<ul>)

רשימה עם נקודות (bullets):

<ul>
    <li>פריט ראשון</li>
    <li>פריט שני</li>
    <li>פריט שלישי</li>
</ul>

תוצאה: - פריט ראשון - פריט שני - פריט שלישי

שינוי סגנון הנקודות

באמצעות CSS או תכונת type:

<!-- עיגול מלא (ברירת מחדל) -->
<ul style="list-style-type: disc;">
    <li>פריט</li>
</ul>

<!-- עיגול ריק -->
<ul style="list-style-type: circle;">
    <li>פריט</li>
</ul>

<!-- ריבוע -->
<ul style="list-style-type: square;">
    <li>פריט</li>
</ul>

<!-- ללא סימון -->
<ul style="list-style-type: none;">
    <li>פריט</li>
</ul>

2️⃣ רשימה מסודרת (<ol>)

רשימה עם מספרים:

<ol>
    <li>צעד ראשון</li>
    <li>צעד שני</li>
    <li>צעד שלישי</li>
</ol>

תוצאה: 1. צעד ראשון 2. צעד שני 3. צעד שלישי

תכונות של <ol>

<!-- אותיות גדולות -->
<ol type="A">
    <li>פריט A</li>
    <li>פריט B</li>
</ol>

<!-- אותיות קטנות -->
<ol type="a">
    <li>פריט a</li>
    <li>פריט b</li>
</ol>

<!-- ספרות רומיות גדולות -->
<ol type="I">
    <li>פריט I</li>
    <li>פריט II</li>
</ol>

<!-- ספרות רומיות קטנות -->
<ol type="i">
    <li>פריט i</li>
    <li>פריט ii</li>
</ol>

<!-- מתחיל מ-5 -->
<ol start="5">
    <li>פריט (5)</li>
    <li>פריט (6)</li>
</ol>

<!-- סדר הפוך -->
<ol reversed>
    <li>פריט (3)</li>
    <li>פריט (2)</li>
    <li>פריט (1)</li>
</ol>

ערך מותאם לפריט

<ol>
    <li>פריט 1</li>
    <li value="10">פריט 10</li>
    <li>פריט 11</li>
</ol>

3️⃣ רשימת הגדרות (<dl>)

לזוגות של מונח והגדרה:

<dl>
    <dt>HTML</dt>
    <dd>שפת סימון ליצירת מבנה דפי אינטרנט</dd>

    <dt>CSS</dt>
    <dd>שפת סגנון לעיצוב דפי אינטרנט</dd>

    <dt>JavaScript</dt>
    <dd>שפת תכנות להוספת אינטראקטיביות</dd>
</dl>

מונח עם מספר הגדרות

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dd>שפת סימון לאינטרנט</dd>
</dl>

רשימות מקוננות

ניתן לקנן רשימות בתוך רשימות:

<ul>
    <li>פירות
        <ul>
            <li>תפוח</li>
            <li>בננה</li>
            <li>תפוז</li>
        </ul>
    </li>
    <li>ירקות
        <ul>
            <li>מלפפון</li>
            <li>עגבנייה</li>
        </ul>
    </li>
</ul>

תוצאה: - פירות - תפוח - בננה - תפוז - ירקות - מלפפון - עגבנייה

שילוב סוגי רשימות

<ol>
    <li>שלב ראשון
        <ul>
            <li>פעולה א'</li>
            <li>פעולה ב'</li>
        </ul>
    </li>
    <li>שלב שני
        <ul>
            <li>פעולה ג'</li>
            <li>פעולה ד'</li>
        </ul>
    </li>
</ol>

דוגמאות שימוש

תפריט ניווט

<nav>
    <ul>
        <li><a href="/">בית</a></li>
        <li><a href="/about">אודות</a></li>
        <li><a href="/contact">צור קשר</a></li>
    </ul>
</nav>

רשימת משימות

<h3>רשימת קניות</h3>
<ul>
    <li>חלב</li>
    <li>לחם</li>
    <li>ביצים</li>
</ul>

הוראות מתכון

<h3>איך להכין קפה</h3>
<ol>
    <li>מחממים מים</li>
    <li>מוסיפים כפית קפה</li>
    <li>מוזגים את המים</li>
    <li>מוסיפים סוכר לפי הטעם</li>
</ol>

מילון מונחים

<h3>מילון תכנות</h3>
<dl>
    <dt>Variable</dt>
    <dd>משתנה - מקום לאחסון נתונים</dd>

    <dt>Function</dt>
    <dd>פונקציה - בלוק קוד שניתן לקרוא לו</dd>

    <dt>Loop</dt>
    <dd>לולאה - ביצוע קוד מספר פעמים</dd>
</dl>

סיכום

← חזרה: קישורים ותמונות | → המשך: טבלאות