استفاده از تگ ol و لیست های مرتب
در ادامه قسمت قبل میخواهیم لیست ها را به صورت مرتب و شماره گذاری شده نمایش دهیم. مهمترین تفاوت این لیست ها با لیست های نامرتب در ترتیب شماره گذاری آنها میباشد. به این معنا که به جای استفاده از بولت در لیست های نامرتب در این لیست ها از شماره گذاری مرتب استفاده میشود.برای ایجاد یک لیست مرتب از تگ <ol> استفاده میکنیم ومانند قبل این تگ را در ابتدا و انتهای لیست مینویسیم و سپس هر سطر لیست را بوسیله تگ <li> مشخص میکنیم.برای مثال یک سند html ایجاد کرده و در قسمت body آن ابتدا نام لیست را با تگ <h3> می نویسیم.سپس برای شروع لیسن ابتدا تگ <ol> را نوشته و با استفاده از تگ های <li> سطرها را تعیین میکنیم.و در انتها نیز تگ </ol> را میبندیم.
۳ |
<title>Learning Html</title> |
۱۱ |
<li> This is first line of list </li> |
۱۳ |
<li> This is second line of list </li> |
۱۵ |
<li> This is third line of list </li> |
۱۷ |
<li> This is fourth line of list </li> |
پس از ذخیره کردن سند مورد نظر با پسوند htm نتیجه را مشاهده میکنیم.همانطور که میبینید لیست ما به ترتیب و از شماره یک شماره گذاری شده است.
اگر بخواهیم که فهرست ما از شماره خاصی شروع شود و ادامه پیدا کند از ویژگی start در تگ <ol> استفاده میکنیم و شماره مورد نظرمان را به عنوان مقدار به آن میدهیم.برای نمونه لیست مثال قبل را با شماره یازده آغاز میکنیم.برای اینکار در تگ آغازین <ol> عبرات start را نوشته و مقدار یازده را به آن میدهیم.
۳ |
<title>Learning Html</title> |
۱۱ |
<li> This is first line of list </li> |
۱۳ |
<li> This is second line of list </li> |
۱۵ |
<li> This is third line of list </li> |
۱۷ |
<li> This is fourth line of list </li> |
دقت کنید که مقدار ویژگی ها را باید در داخل “ ” قرار داد.بعد از ذخیره کردن تغییرات نتیجه را مشاهده کنید.
میبینید که شماره اولیه از یک به یازده تغییر کرده است.
ویژگی دیگری که در لیست های مرتب به کار گرفته میشود ویژگی type میباشد. با این ویژگی در لیست های نامرتب آشنا شدید.
میدانیم که در لیست ها با استفاده از این ویژگی میتوانستیم شکل بولت ها را تعیین کنیم.در لیست های مرتب نیز با استفاده از این ویژگی میتوان نوع شکل شماره گذاری اعداد را تغییر داد.این شماره گذاری ها میتواند با اعداد ، حروف و سایر علامتها نشان داده شود.مواردی که این ویژگی در لیست های مرتب میتواند بپذیرد عبارتند از:۱,A,a,I,i
همانطور که از شکل این عبارات نیز مشخص است به ترتیب به این صورت عمل میکنند:
با استفاده از شناسه ۱بخش های لیست با اعداد ریاضی مشخص میشوند.
با استفاده از شناسه A بخش های لیست با استفاده از حروف انگلیسی بزرگ مشخص میشوند.
با استفاده از شناسه a بخش های لیست با استفاده از حروف انگلیسی کوچک مشخص میشوند.
با استفاده از شناسه I بخش های لیست با استفاده از اعداد یونانی و به صورت بزرگ نمایش داده میشوند.
با استفاده از شناسه iبخش های لیست با استفاده از اعداد یونانی و به صورت کوچک نمایش داده میشوند.
به عنوان مثال دو سطر اول مثال بالا را با اعداد یونانی و دو سطر بعد را با حروف بزرگ انگلیسی نمایش میدهیم.برای اینکار ویژگی type دو سطر اول لیست را برابر I ودو سطر بعدی را برابر A قرارمیدهیم.
۳ |
<title>Learning Html</title> |
۱۱ |
<li type=”i”> This is first line of list </li> |
۱۳ |
<li type=”i”> This is second line of list </li> |
۱۵ |
<li type=”A”> This is third line of list </li> |
۱۷ |
<li type=”A”> This is fourth line of list </li> |
پس از ذخیره سند تغییرات انجام شده را ملاحظه کنید.
اکنون شناسه start تگ <ol> را برداشته و مجددا نتیجه را مشاهده نمایید.
۳ |
<title>Learning Html</title> |
۱۱ |
<li type=”i”> This is first line of list </li> |
۱۳ |
<li type=”i”> This is second line of list </li> |
۱۵ |
<li type=”A”> This is third line of list </li> |
۱۷ |
<li type=”A”> This is fourth line of list </li> |
میبینید که دو سطر اول دارای مقادیر یک و دو در زبان یونانی هستند و دو سطر بعد دارای مقادیر C ,D هستند.
دقت کنید که با عوض کردن مقدار type شماره گذاری از اول آغاز نمیشود و در ادامه شماره های قبلی خواهد بود.
لیست های مرتب را نیز میتوان به صورت لیست های نامرتب استفاده نمود.برای این منظور میبایست در زیر سطرها در از تگ <ol> استفاده کنیم.این کار دقیقا مانند لیست های نامرتب انجام میشود.برای نمونه در مثال مطرح شده ابتدا ویژگی ها را حذف می کنیم تا سطرهای اصلی به ترتیب و با شماره مشخص شوند.حال به سطر اول دو زیر سطر که با حروف بزرگ انگلیسی مشخص شده اند اضافه میکنیم.
۳ |
<title>Learning Html</title> |
۱۱ |
<li> This is first line of list </li> |
۱۵ |
<li type=”A”> One</li> |
۱۷ |
<li type=”A”> Two</li> |
۲۱ |
<li type=”i” > First</li> |
۲۳ |
<li type=”i” > Second</li> |
۲۹ |
<li > This is second line of list </li> |
۳۱ |
<li > This is third line of list </li> |
۳۳ |
<li> This is fourth line of list </li> |
