آموزش HTML - جلسه دهم

سلام و عرض ادب خدمت تمامی دوستان خوبم. عید سعید قربان رو به همه‌تون خصوصا عزیزانی که امسال «حاجی» شدند تبریک می‌گم. امیدوارم که سالم و سرحال نشسته باشید پای کامپیوترتون و احیانا آموزش‌های مارو دنبال کنید. همونطور که خودتون اطلاع دارید و در پستی که به بهانه ماه مهر زدم هم گفتم،‌ به خاطر حضورم در دانشگاه خیلی‌کم فرصت می‌کنم تا وبلاگ و آموزش‌ها رو آپ کنم و از این بابت عذرخواهی می‌کنم. در این  جلسه از آموزش تصمیم دارم به مانند جلسه قبل به بررسی یکی از مباحث پرکاربرد در بحث ارائه محتوای وب بپردازم. تصمیم دارم نحوه ایجاد لیست‌ها در زبان HTML که گستره‌ی کاربری فراوانی در طراحی منو‌ها و نیز چرخه‌ها (loop) دارد بپردازم. با ما همراه باشید.

لیست‌ها در زبان HTML:

در زبان HTML به طور کلی سه نوع لیست برای ارائه محتوا وجود دارد. 1. لیست بدون ترتیب (فاقد شماره) 2. لیست ترتیب‌دار (شماره‌دار) 3. لیست توضیحات. از این سه لیست موارد اول و دوم گستره کاربری به نسبت بیشتری دارند و سعی ماهم بر این است که بیشتر به موارد کاربردی پرداخته شود. از این‌رو در این جلسه از آموزش به بررسی دقیق‌تر دو نوع مورد اول پرداخته و توضیح مورد سوم را به زبان دیگری موکول می‌کنیم.

لیست‌های بدون ترتیب (فاقد شماره):

در زبان HTML برای درج یک لیست بدون ترتیب از تگ‌های <ul> و <li> استفاده می‌کنیم. از تگ <ul> برای تعریف بدنه لیست و از تگ <li> برای تعریف ایتم‌های لیست استفاده می‌کنیم. هر آیتم می‌تواند خود شامل یک لیست دیگر (حالت تو در تو) باشد. در مثال زیر یک لیست ساده HTML بدون ترتیب که یکی از آیتم‌های آن خود شامل یک لیست دیگر است تعریف شده است:

<ul>
 <li>google.com
   <ul>
     <li>gmail</li>
     <li>gplus</li>
     <li>gdrive</li>
   </ul>
 </li>
 <li>yahoo.com</li>
 <li>bing.com</li>
 <li>ask.com</li>
</ul>

نمایش لیست زیر به شکل زیر است:

• google.com
  • gmail
  • gplus
  • gdrive
• yahoo.com
• bing.com
• ask.com

همانطور که مشاهده می‌کنید به صورت پیشفرض هر آیتم از لیست بالا یک علامت bullet کوچک در کنار خود دارد. شکل پیشفرض این bullet برای هر آیتم یک دایره توپر کوچک و برای هر زیر آیتم یک دایره توخالی کوچک است. حال اگر بخواهیم شکل پیشفرض این bullet ها را تغییر دهیم باید از صفت style در تگ <ul> به صورت زیر استفاده کنیم:

<ul style="list-style-type:disc">
<ul style="list-style-type:circle">
<ul style="list-style-type:square">

• خاصیت disc حالت دایره توپر را ایجاد می‌کند.
• خاصیت circle حالت دایره توخالی را ایجاد می‌کند.
• خاصیت square حالت مربع را ایجاد می‌کند.

لیست‌های دارای ترتیب (شماره‌دار): 

برای تعریف یک لیست ترتیب‌دار در زبان HTML از تگ <ol> برای تعریف بدنه لیست و از تگ <ul> برای آیتم‌های لیست استفاده می‌کنیم. همانند لیست‌های فاقد ترتیب، در اینجا هم می‌توانیم یک حالت تودرتو ایجاد کنیم؛ تقریبا تمامی موارد با لیست‌های فاقد ترتیب مشابه است و از این‌رو نیازی به توضیح خاصی در این‌مورد نیست. تنها موردی که می‌توان بیان کرد نحوه شماره‌گذاری لیست‌های دارای ترتیب است که می‌توان به روش زیر مشخص کرد که چگونه این عمل انجام شود: 

<ol type="A">
<ol type="a">
<ol type="I">
<ol type="i">

• در حالت A شماره‌گذاری با استفاده از حروف بزرگ‌ انگلیسی صورت می‌پذیرد.
• در حالت a شماره‌گذاری با استفاده از حروف کوچک انگلیسی صورت می‌پذیرد.
• در حالت I شماره‌گذاری با استفاده از حروف رومی صورت می‌پذیرد.
• در حالت i شماره گذاری با استفاده از حروف رومی کوچک صورت می‌پذیرد.

اگر از تگ <ol> بدون تعریف صفت type استفاده کنیم، شماره‌گذاری با استفاده از اعداد صورت می‌پذیرد.

اگر این مطلب را می‌پسندید آن‌را در گوگل محبوب کنید: