با عرض سلام خدمت کاربران سایت سون ریپلای . در آموزشهایی که تاکنون در مباحث HTML ، ارائه دادیم.
به مطالب مهمی از جمله استفاده از اتریبیوت در html ، اشاره کردیم. در ادامه ی دوره ، در این بخش قصد داریم به آموزش لیست در html چگونگی کار با تگ های List در html یا لیست در HTML ، بپردازیم.
در اکثر وب سایت ها، مخصوصا در محتویاتی نظیر مقالات علمی و آموزشهای کاربردی و منو ها و … از لیست ها بسیار استفاده می شود.
تگ های List در html
همانطور که پیش تر گفتیم، در HTML برای ایجاد هر خاصیتی از تگ های استاندارد و تعریف شده ی خاصی استفاده می شود که بنا بر نیاز سنجی، توسط کنسرسیوم جهانی وب (w3c) تعریف شده اند،
یکی از این نیاز ها، امکان ایجاد مطالب و محتوا، به صورت لیست شده و زیرمجموعه ای است که w3c برای آن تگ های استاندارد ul li ol dl dd و dt را در نظر گرفته است،
این تگ ها همه از یک خانواده هستند که برای ایجاد و مدیریت لیست در صفحات وب کاربرد دارند،
از این رو در ادامه آموزش های مقدماتی HTML، این بار می خواهیم بپردازیم به مبحث کار با تگ های ایجاد کننده لیست در صفحات وب.
آموزش لیست در html
لیست ها به سه دسته منظم ، توضیحی و نامنظم تقسیم می شوند.
لیست های نامنظم(تگ ul)
این لیست ها با تگ ul آغاز می شوند و در داخل آن تگ li قرار می گیرد به کد های html زیر نگاه کنید.
به مثال زیر توجه کنید و نتیجه اجرای کدها را ببینید تا به صورت واضح با تگ ul در html آشنا شوید :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> </head> <body dir="rtl"> <ul> <li>آتیم اول لیست</li> <li>آتیم دوم لیست</li> <li>آتیم سوم لیست</li> <li>آتیم چهارم لیست</li> <li>7reply.com</li> </ul> </body> </html> |
خرجی کد ها مثل تصویر زیر میباشد
- لیست غیر شمارشی یا نامرتب: برای نمایش این لیست از تگ <ul></ul> استفاده می کنیم. برای ایجاد منو از این تگ استفاده می شود.
به طور پیش فرض هر کدام از آیتم های لیست های نامنظم (تگ li ) دارای یک نشانگر می باشد.
تگ <ol> در HTML
- تگ <ol> یک لیست مرتب را تعریف می کند. که آن لیست مرتب می تواند بر حسب عددی یا الفبایی مرتب شود.
- از تگ <li> نیز در درون لیست های مرتب تگ <ol> برای ساخت آیتم های لیست مرتب استفاده می کنیم.
- از تگ <li> به عنوان آیتم لیست ها در لیست های ترتیبی <ol> ،
- لیست های غیر ترتیبی <ul> ، و در فهرست منو <menu> استفاده می شود.
لیست های منظم ( تگ ol)
این لیست ها با تگ ol آغاز می شوند و آیتم آن نیز با تگ li ، تفاوت این لیست با لیست نامنظم در نشانگر آن است لیست های نامنظم نشانگر همه آیتم ها یکی است ولی در لیست های منظم ،
آیتم ها یا دارای شماره منحصر به فرد یا الفبای منحصر به فرد می باشد به مثال زیر نگاه کنید:
به مثال زیر توجه کنید و نتیجه اجرای کدها را ببینید تا به صورت واضح با تگ ol در html آشنا شوید :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> </head> <body dir="rtl"> <ol> <li>آتیم اول لیست</li> <li>آتیم دوم لیست</li> <li>آتیم سوم لیست</li> <li>آتیم چهارم لیست</li> <li>7reply.com</li> </ol> </body> </html> |
خرجی کد ها مثل تصویر زیر میباشد
بررسی تگ <ol> در HTML 4.01 و HTML5
- تگ <ol> در هر دو نسخه HTML 4.01 و HTML5 پشتیبانی می شود.
- اما خصوصیت های ویژه start ، type و compact در HTML5 پشتیبانی نمی شوند.
- خصوصیت ویژه reversed درون تگ <ol>
- به عنوان یک خصوصیت ویژه تگ <ol> در HTML5 جدید است.
تعریف صفت برای تگ ol یا لیست شمارشی
- type (نوع)= “1” : آیتم های لیست با اعداد مشخص می شوند (به صورت پیش فرض).
- type (نوع)= “A” : آیتم ها در طراحی سایت در این نوع با حروف بزرگ نمایش داده می شوند.
- type (نوع)= “a” : آیتم های لیست با حروف کوچک مشخص می شوند.
- type (نوع)= “I” : آیتم ها با حروف بزرگ اعداد رومی نمایش داده می شوند.
- type (نوع)= “i” : در این حالت، آیتم های لیست در طراحی سایت با حروف کوچک اعداد رومی تعیین می شوند.
تعریف صفت برای تگ ul یا لیست شمارشی
- ایجاد نقطه های تو خالی با مقدار circle برای type.
- ایجاد نقطه های تو پر با مقدار disc برای type.
- ایجاد نقطه های مربعی با مقدار square برای type.
تگ dl در HTML
تگ dl که از کلمه ( Description List ) گرفته شده است، تگی است که با استفاده از آن میتوان یک لیست تعریفی یا لیست دارای توضیحات ایجاد نمود.
ما برای ایجاد یک لیست توضیحی ، باید از تگ dl و برای ایجاد آیتم های لیست از تگ dt و در نهایت برای ایجاد توضیحات از تگ dd استفاده نماییم.
مثال از تگ dl در HTML
|
1 2 3 4 5 6 7 |
<dl> <dt>attribute در html چیست؟</dt> <dd> برخی از برچسب های HTML مانند برچسب های تیتر و برچسب های پاراگراف، و موارد استفاده ی آنها را مشاهده کردیم. تاکنون از آنها به ساده ترین شکل خود استفاده کرده ایم، اما بیشتر برچسب های HTML می توانند ویژگی هایی داشته باشند که مقداری اطلاعات اضافه می باشد. </dd> </dl> |
لیست در html
- تگ <dd> توصیف یک واژه یا نام را در یک فهرست توصیفی مشخص میکند و در ارتباط با <dl> و <dt> استفاده می شود.
- تگ <dl> : فهرست توصیفی تعریف می کند.
- تگ <dt> : یک واژه یا نام را در فهرست توصیفی تعریف میکند.
- در داخل تگ <dd> می توانید پاراگراف ، شکست خط ( br ) ، عکس ، لینک ، لیست ، و غیره قرار دهید.
- یک لیست توصیفی شبیه به لیست های دیگر است، اما هر آیتم در لیست شامل دو یا چند واژه یا توصیف است .
- لیست توصیفی می تواند در مورد فهرست ساخته شده تک به تک توضیح دهد.
- به عبارت دیگر ترکیبی از تگ های <dl> , <dt> و <dd> یک لیست توصیفی می سازد.
پایان این جلسه آموزش html
در این جلسه با آموزش کار با تگ های dl ul ol در HTML در خدمت شما بودیم و آموختیم که تگ dl تگی است که به تعریف یک لیست توصیفی می پردازد.
هیچ دیدگاهی برای این نوشته ثبت نشده است.