רשימות בשפת HTML5

רשימות מסודרות (Ordered Lists)

בעזרת התג <ol> נגדיר רשימות מסודרות, קרי ממוספרות. באמצעות שימוש במאפיין start ביכולתנו לשלוט במספר שממנו תתחיל הרשימה המסודרת שלנו ואילו באמצעות המאפיין reverseביכולתנו לגרום לכך שהמספור יתחיל מן המספר הגדול לקטן. השימוש בתג <ol> יהיה תמיד בצירוף התג <il> המגדיר את החברים ברשימה המסודרת.

דוגמאות קוד לשימוש ברשימות מסודרות

Oredered list example without using any attribute
<ol>
<li>Green Salad</li>
<li>Tomato Salad</li>
</ol>

Oredered list example using the start attribute
<ol start="15">
<li>Green Salad</li>
<li>Tomato Salad</li>
</ol>

Using the reversed attribute to reverse the count
<ol reversed="reversed">
<li>Green Salad</li>
<li>Tomato Salad</li>
</ol

רשימות לא מסודרות (Unordered Lists)

בעזרת התג <ul> נגדיר רשימה לא מסודרת (לא ממוספרת). נשתמש תמיד בתג <ul> בצירוף עם התג <li>. התג <ul> יהווה את מסגרת הרשימה ואילו בעזרת התג <li> נבנה את הפריטים ברשימה זו.

דוגמת קוד לשימוש בתג <ul>

<ul>
<li>Green Salad</li>
<li>Tomato Salad</li>
</ul>

רשימת הגדרות (definition list)

בעזרת התג <dl> נגדיר רשימת הגדרות (definition list). רשימת הגדרות דומה לרשימה רגילה אך היא מכילה לפחות כותרת אחת ופריט אחד העונה כהגדרה לכותרת. פריט המוגדר באמצעות התג <dd> יקנן תמיד בתוך התג <dl> הבא להגדיר רשימת הגדרות. בדוגמה למטה ניתן לראות כיצד התגים <dl> <dd> ו - <dt> משמשים יחד ב - HTML5 כדי ליצור רשימה ובה כותרות הגדרה ופריטים לכל כותרת וכל זה תחת המעטפת של התג <dl>.

דוגמת קוד לשימוש בתג <dl> לצורך יצירת רשימת הגדרות

<h3>Menu</h3>
<dl>
<dt>Hot Drinks</dt>
<dd>Coffee</dd>
<dd>Tea</dd>
<dt>Cakes</dt>
<dd>Tart</dd>
<dd>Cheese Cake</dd>
<dd>Chcolate Cake</dd>
<dt>Soft Drinks</dt>
<dd>Coke</dd>
<dd>Club Soda</dd>
</dl>

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

ניתן להשתמש ברשימות כך שהן יקננו זו בתוך זו וייצרו מעין עץ הירארכי של של פריטים שונים ובני פריטים.

דוגמת קוד לרשימות מקננות

<ul>
<li>My company</li>
<li>Sales
<ul>
<li>Local sales</li>
<li>International Sales</li>
</ul>
</li>
<li>Marketing</li>
</ul>

ריכוז כל התגים הנוטלים חלק בבניית רשימות

להלן רשימת שדות הקלט ב - HTML5:

תג פונקציונאליות
ol מגדיר רשימה מסודרת.
ul משמש להגדרת רשימות לא מסודרות.
dl משמש להגדרת רשימת הגדרות.
dd משמש לצורך הגדרת פריט ברשימת הגדרות.
dt בעזרת תג זה נגדיר כותרת בתוך רשימת הגדרות.
li משמש להגדרת פריט ברשימות מסודרות וברשימות לא מסודרות.

עיצוב רשימות בעזרת CSS

1. הגדרת סגנון הרשימה ומצייני הפריטים ברשימה (list-style-type)

2. עיצוב רשימות בעזרת תמונות (list-style-image)

3. קביעת מרחק מצייני הפריטים מהרשימה מתחילת הרשימה

4.כתיב מקוצר של תכונות רשימה


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | מדיניות שימוש