html lists -> back to basic

7 בפברואר 2012

תגיות: ,
אין תגובות


הפוסט הזה מיועד למתחילים בעולם ה – html, בפוסט זה נכיר את הסוגים השונים של רשימות בעולם ה – html.

 

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

כדי לעשות זאת יש לנו כמה סוגים של רשימות.

 

Unorderd List – מייצר רשימה לא ממוספרת, אלא משתמשת בסימנים (בולטים) כדי להגדיר את כל הרשימה.

Orderd List – מייצר רשימה ממוספרת המסומנת בעזרת מספרים או אותיות.

Definition List – מייצר רשימה בה לכל שורה יש שני ערכים (כותרת ותוכן).

 

 

שני הראשונים מכילים תגיות מסוג List Item, לעומת האחרון המכיל תגיות מסוג Definition Description ו – Definition Term.

 

 

דוגמא. נניח שנרצה רשימה המכילה שפות, נכתוב:



    7 <ul>


    8     <li>אנגלית</li>


    9     <li>עברית</li>


   10     <li>רוסית</li>


   11     <li>יידיש</li>


   12 </ul>


 

ul

 

במידה ונרצה תתי תפריטים נוכל בכל li להגדיר עוד ul פנימי, לדוגמא:



<ul>


    <li>קובץ


        <ul>


            <li>הדפסה</li>


            <li>שמירה</li>


            <li>פתיחה</li>


        </ul>


    </li>


    <li>עריכה


        <ul>


            <li>העתק</li>


            <li>הדבק</li>


        </ul>


    </li>


    <li>כלים</li>


    <li>עזרה


        <ul>


            <li>אודות</li>


            <li>מרכז העזרה


                <ul>


                    <li>המרכז העולמי</li>


                    <li>בלוגים</li>


                </ul>


            </li>


        </ul>


    </li>


</ul>


 

 

ul 2

לתג ul יש מאפיין בשם type המאפשר לנו להחליט על סוג הבולט שיוצג. הוא יכול לקבל את הערכים: circle, disc, square (או לפי התקנים ב – css במאפיין list-style-type).

 

 

הסוג השני הוא Orderd List, המאפשר לייצר רשימות ממוספרות, לדוגמא:

 



<ol>


    <li>סעיף שמדבר על רשימות</li>


    <li>סעיף שמדבר על רשימות</li>


    <li>סעיף שמדבר על רשימות


        <ol>


            <li>תת סעיף על רשימות</li>


            <li>תת סעיף על רשימות</li>


        </ol>


    </li>


    <li>סעיף שמדבר על רשימות</li>


</ol>


 

 

ol

 

באותה צורה כמו ב – ul ניתן לקנן ol בתוך li, וכמובן אפשר בתוך li להכניס ul ולקנן כל מה שנרצה.

 

 

סוג נוסף של רשימה הוא Definition List, המאפשר לנו להגדיר רשימות שיש לכל תוכן כותרת., למשל:

 

 



<dl>


    <dt>כותרת אחד</dt>


    <dd>


        התוכן של האלמנט הראשון<br />


        התוכן של האלמנט הראשון<br />


        התוכן של האלמנט הראשון<br />


    </dd>


    <dt>כותרת שנייה</dt>


    <dd>


        התוכן של האלמנט השני<br />


        התוכן של האלמנט השני<br />


        התוכן של האלמנט השני<br />


    </dd>


    <dt>כותרת שלישית</dt>


    <dd>


        התוכן של האלמנט השלישית<br />


        התוכן של האלמנט השלישית<br />


        התוכן של האלמנט השלישית<br />


    </dd>


</dl>


 

dl

 

 

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

 

כשנרצה להשתמש בהם עבור תפריטים, בדרך כלל זה ישולב עם קוד JS המסתיר ומציג את האלמנטים במעבר עכבר וכד'. (אולי אדגים בפוסט הבא)

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *