آموزش HTML فصل دوم – استفاده از تگ ul و لیست های نامرتب
یکشنبه ، 15 ژانویه 2012
0 دیدگاه
نوشته:admin
استفاده از تگ ul و لیست های نامرتب
در قسمت های قبل با تگ <p> و نحوه پاراگراف بندی متون آشنا شدید. در این جلسه میخواهیم با نحوه ایجاد لیست های تودرتو که با نقطه ، بولت یا شماره مشخص میشوند آشنا شویم.موارد بسیاری وجود خواهد داشت که در یک پاراگراف بخواهیم لیست اقلام یا فهرستی را به این صورت نمایش دهیم.ابتدا حالتی را بیان میکنیم که با عنوان لیست های نامرتب میباشد. این لیست ها مواردی هستند که به شماره گذاری نیازمند نبوده و با بولت مشخص می شوند.در این قسمت با دو تگ ul و li آشنا میشویم.
نحوه استفاده از تگ مورد نظر به این صورت است که تگ ul را در ابتدا و انتهای کل لیست مورد نظر قرار میدهیم سپس تگ li را نیز در ابتدا و انتهای فهرست مینویسیم.
به عنوان مثال یک سند html ایجاد کرده در قسمت body آن فهرست مورد نظر خود را مینویسیم:
۳ |
<title>Learning Html</title> |
۱۳ |
<li>First line of list</li> |
۱۵ |
<li>second line of list</li> |
۱۷ |
<li>third line of list</li> |
۱۹ |
<li>fourth line of list</li> |
حال سند را با پسوند htm ذخیره کرده و از طریق مرورگر باز کنید.میبینید که فهرست مرود نظر ما نمایش داده شده است.
در ادامه میخواهیم فاصله این لیست را از صفحه کناری بیشتر کنیم.برای این منظور باید در ابتدا ئ انتهای فهرست تگ های بیشتر از ul را باز کرده و ببنیدیم.برای این منظور در مثال بالا دو تگ ul اضافه میکنیم و تغییرات حاصل را میبینیم.
۳ |
<title>Learning Html</title> |
۱۷ |
<li>First line of list</li> |
۱۹ |
<li>second line of list</li> |
۲۱ |
<li>third line of list</li> |
۲۳ |
<li>fourth line of list</li> |
حال اگر بخواهید شکل بولت را تغییر دهید میتوانید با استفاده از ویژگیtype که در تگ li قرار میگیرد انجام دهیم.این ویژگی دارای مقادیری از قبیل circle , disc , Squareمیباشد.
Circle یک دایره توخالی را نمایش میدهد.
Disc یک دایره توپر را نشان میدهد.
Square یک مربع توپر را نشان میدهد.
به عنوان نمونه به مثال زیر توجه نمایید:
۳ |
<title>Learning Html</title> |
۱۷ |
<li type=”circle” >First line of list</li> |
۱۹ |
<li type=”disc”>second line of list</li> |
۲۱ |
<li type=”square”>third line of list</li> |
۲۳ |
<li type=”square”> fourth line of list</li> |
حال سند را ذخیره کرده و تغییرات حاصل را ملاحظه کنید.
نوع دیگری که میتوان از این تگ ها استفاده نمود زمانیست که بخواهیم لیست ها را تودرتو نمایش دهیم.
فرض کنید که در مثال قبلی هر یک از سطرهای لیست دارای زیر مجموعه بوده که آنها نیز به سطرهایی تقسیم میشوند.
برای اینکار پس از سطر اصلی یک تگ ul جدید باز کزده و سطر های داخل آنرا با ستفاده از تگ li ایجاد میکنیم.به همین صورت برای لیست های زیرین نیز این کار را تکرار میکنیم.
به مثال زیر توجه نمایید.
۳ |
<title>Learning Html</title> |
۱۷ |
<li type=”circle” >First line of list</li> |
۲۷ |
<li type=”disc”>second line of list</li> |
۲۹ |
<li type=”square”>third line of list</li> |
۴۵ |
<li type=”square”> fourth line of list</li> |
حال پس از ذخیره سند نتیجه را مشاهده میکنیم.
میبینید که لیست ما به صورت تو در تو نشان داده شده است.
