Get Adobe Flash player
דף הבית כתיבת טקסט יצירת רשימות

שפת HTML מאפשרת בניית רשימות באופן אוטומטי. הרשימות מתאפשרות כ"מסודרות" (Ordered) שהן רשימות ממוספרות לפי סדר עולה, רשימות שאינן מסודרות (UnOrdered) המוסיפות תבליט לפני שם הפריט שברשימה, או רשימות של פרטים המחולקות לכותרות ופריטי משנה ללא סימון כלשהו. כל הרשימות גורמות להזחת (הכנסת) השורות פנימה אל הדף.

שיטת הרשימה מחייבת "הצהרה" והגדרת סוג הרשימה, ולאחר מכן הגדרה נפרדת לכל סעיפי הרשימה. פתיחת רשימה בתוך רשימה, יוצרת "קינון" – רשימה ברמה משנית.

ההכרזה על פתיחת רשימה נעשית באמצעות אחד משלושת התגים הבאים:

תג <ol> פותח רשימה ממוספרת: Ordered List (רשימה מסודרת הירארכית)

תג <ul> פותח רשימת תבליטים:Unordered List (Bulleted) רשימה ללא רמת חשיבות.

תג <dl> פותח רשימת נושאים והגדרות (Defifnition Lists)

כל רשימה מכילה כמובן את רשימת הפריטים המרכיבים אותה. כל פריט מתחיל באמצעות תג עצמאי <li> שהוא List Item.

כל התגים הללו הם תגי מכולה שיש לבטל אותם בסוף הרשימה.

רשימות מסודרות

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

 

התוצאההקוד
  1. שורה ראשונה
  2. שורה שנייה
  3. שורה שלישית
<ol>
<li>שורה ראשונה</li>
<li>שורה שנייה</li>
<li>שורה שלישית</li>
</ol>

שפת HTML מאפשרת שליטה במספר משתנים של הרשימה

שיטת המספור - תכונת type:

הערה: תכונת type שייכת לקבוצת התכונות העומדות להתבטל, ויש דפדפנים שכבר לא מציגים אותה. במקומה יש להשתמש בהוראות המקבילות של CSS

התכונה Type (או מקבילתה ב CSS) מאפשרת 5 סוגי המספור

ספרות ערביות – 1 (ברירת המחדל)

אותיות לטיניות קטנות - a

אותיות לטיניות רישיות - A

רומיות קטנות - i

רומיות גדולות – I

את התכונה type נותנים לתג הרשימה אך ניתן להוסיפה באופן פרטני לכל סעיף וסעיף בנפרד

בדוגמא הבאה, סוג הספרור שנקבע הוא ספרות רומיות, למעט השורה השנייה שלה נקבע מספור מסוג אותיות.

התוצאההקוד
  1. שורה ראשונה
  2. שורה שנייה
  3. שורה שלישית
  4. שורה רביעית
<ol type="I">
<li>
שורה ראשונה </li>
<li
type="A">שורה שנייה </li>
<li>
שורה שלישית </li>
<li>
שורה רביעית </li>
</ol>

קביעת המספר ההתחלתי:

התכונה start מאפשרת קביעת ערך תחילי לרשימה. את הערך יש לקבוע בספרות, גם אם התצוגה מיועדת להיות באותיות או ספרות רומיות.

 

התוצאההקוד

השורה הראשונה קיבלה את הערך 'e' שהיא האות החמישית:

  1. שורה ראשונה
  2. שורה שנייה
  3. שורה שלישית

נקודת ההתחלה היא 5:

<ol start="5" type="a">
<li>שורה ראשונה</li>
<li>שורה שנייה</li>
<li>שורה שלישית</li>
</ol>

רשימות עם תבליטים (לא מסודרות)

עקרון הרשימה זהה לזו של הרשימה המסודרת למעט מספר הבדלים:

התג להפעלת הרשימה הוא <ul> במשמעות Unordered List.

רשימה כזו שאין בה הירארכיה, אין אפשרות לקבוע את הערך ההתחלתי, ולכן לתכונה start אין משמעות.

התכונה type יפעילה, אך מציגה כמובן סוגי תבליטים ולא סוגי מספרים:

  • הערך type="disc" (ברירת המחדל) יוצר תבליט עגול שחור
  • הערך type="circle" יוצר תבליט בצורת טבעת שחורה
  • הערך type="square" יוצר תבליט בצורת ריבוע שחור
  • הערה: כאשר מקננים רשימה בתוך רשימה (ראו בהמשך) ליצירת רשימה ברמה משנית, רשימת הבת מקבלת את צורת הטבעת (circle) באופן אוטומטי, וברמה הבאה את צורת המרובע. 

    רשימות לתיאור פריטים

    HTML מציע אפשרות ליצירת רשימה שמטרתה היא הצגת פריטים ותיאורם. ברשימה זו אין כל סימון מספרי או תבליטים.

    התג לפתיחת רשימה כזו הוא <dl> שמשמעותו היא Definition List.

    לאחר פתיחת הרשימה פותחים את סעיפיה ושורות התיאור. התג לכתיבת סעיף הוא <dt> (באנגלית: Definition Term) ותיאור הסעיף יוכנס לתג <dd> שבאנגלית הוא Definition Data. בדוגמא, שלפנינו, תופיע רשימה הכוללת הכנסת שורות, אך ללא מספור או תבליטים.

    <dl><strong>רשימת תחביבים</strong>

    <dt>
    ספרים </dt>
     <dd>
    רומנים </dd>
     <dd>
    מתח </dd>

     <dt>מוסיקה </dt>
     <dd>
    קלאסית </dd>
     <dd>
    רוק </dd>

    </dl>

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

    כל הרשימות שלמעלה הן יחידת עצמאיות, ואפשר להכניס אחת אל תוך השניה (לקנן) - תוך שמירת הגדרותיה וצורתה.

    הגדרה זו נכונה למעט דבר אחד: בעת קינון רשימות, הרשימה הפנימית היא תמיד רשימה ברמה שנייה. למשל רשימת מכולת הכוללת מוצרי בשר, חלב וירקות היא רשימה בת שלושה מוצרים, אולם אם נוסיף מתחת לבשר רשימה ברמה שנייה המפרטת את מוצרי הבשר, הרשימה הזו "תוכנס"מעט פנימה:

     

    התוצאההקוד
    1. בשר
      1. נקניק
      2. סטייק
    2. חלב
      1. גבינה
      2. חמאה
    3. ירקות
      1. עגבניות
      2. מלפפונים
    <ol>
    <li>בשר</li> 
    <ol type="a">
    <li>נקניק</li>
    <li>סטייק</li>
     </ol>
    <li>חלב</li>
    <ol type="a">
    <li>גבינה</li>
    <li>חמאה</li></ol>
    <ol type="a">
    <li>עגבניות</li>
    <li>מלפפונים</li>

    </ol>

     

     ברשימות לא מסודרות (תבליטים), הרמה הראשונה מסומנת בעיגול שחור, הרמה השניה מקבלת אוטומטית צורת טבעת והשלישית את צורת הריבוע השחור.

    תרגול:

    לחץ כאן לקבלת קובץ המרכז את נושא הפרק. למד אותו, ובנה אותו בעצמך. קרא לקובץ list.html

    אל השיעור הקודם אל השיעור הבא