آموزش برنامه نویسی HTML (قسمت ۱۰) | خدمات کامپیوتری امداد133
خانه / کامپیوتر / اموزش / آموزش برنامه نویسی HTML (قسمت ۱۰)

آموزش برنامه نویسی HTML (قسمت ۱۰)

در آموزش قبل با کامنت (توضیحات) در صفحات HTML آشنا شدیم. در این آموزش قصد داریم لیست ها در صفحات HTML را توضیح داده و به کار ببریم .

لیست ها در اچ تی ام ال به طور کلی به دو دسته لیست مرتب و لیست نا مرتب تقسیم بندی می شوند.

لیست نا مرتب » در لیست های نا مرتب ، ترتیب و شماره گذاری اجزاء لیست وجود ندارد و لیست ها با اشکال خاص به نمایش در می آیند.

لیست مرتب » در لیست مرتب ، اجزاء به ترتیب به صورت شماره گذاری شده به نمایش در می آیند که شماره ها می تواند اعداد یا حروف باشد که به ترتیب اولویت قرار می گیرند.

 

لیست نا مرتب :

برای گذاشتن یک لیست معمولی و نا مرتب از تگ <ul> و </ul> استفاده می گردد. که این تگ به طور کلی ابتدا و انتهای لیست و هنچنین نوع و مدا را مشخص می کند و برای به نمایش در آمدن اجزاء لبست از تگ دیگری به نام <li> و </li> استفاده می گردد که از از کلمه List گرفته شده است و به شکل زیر قابل استفاده است :

این لیست نامرتب است

  • گزینه اول لیست
  • گزینه دوم لیست
  • گزینه سوم لیست

به طور کلی لیست به شکل بالا استفاده شده و به نمایش در می آید. از قابلیت لیست برای ساخت لیست ها و همچنین منو های سایت و دسته بندی ها و … استفاده می شود.

نکته اول » توجه کنید که جهت مرتب شدن کد نویسی و قابل تشخصی بودن لیست قبل از تگ <li> یک اسپیس (Space) یا به طور استاندارد تر یک بار دکمه Tab را بزنید تا تو رفتگی ایجاد شود و تشخیص لیست در کد نویسی های پیچیده و طولانی راحت تر شود اما توجه نمایید که این فاصله ایجاد شده فقط در سورس قابل مشاهده می باشد و هیچ تاثیری در خروجی ندارد.

نکته دوم » به طور کلی تگ <li> نیازی به بسته شدن ندارد ، اما با گسترش قابلیت های کد نویسی و بیشتر شدن کد های قابل استفاده مناسب تر است که این تگ با </li> بسته شود تا تداخلی در کدنویسی ایجاد نشود.

 

میزان تو رفتگی لیست را به روش های مختلفی می توانید مشخص نمایید ، یکی از روش های آسان استفاده چند باره از تگ <ul> می باشد که به شکل زیر قابل استفاده است :

این لیست نامرتب است

        • گزینه اول لیست
        • گزینه دوم لیست
        • گزینه سوم لیست

همانطور که مشاهده می فرمایید به هر اندازه که تگ <ul> بیشتر استفاده گردد میزان تو رفتگی لیست بیشتر می شود.

 

یکی از شناسه های قابل استفاده، شناسه (عنصر) Type می باشد که نوع علامت لیست را مشخص می کند که دارای چندین مقدار است که در زیر مشاهده می فرمایید :

circle با قرار دادن این مقدار در شناسه type علامت لیست به شکل دایره تو خالی در می آید.

disc با قرار دادن این مقدار علامت لیست به شکل دایره تو پر به نمایش در می آید.

square با قرار دادن این مقدار علامت لیست به شکل مربع تو پر به نمایش در می آید.

نکته سوم » توجه داشته باشید که این شناسه هم میتواند در تگ <ul> استفاده گردد هم در تگ <li> ، در صورتی که در تگ <ul> استفاده شود علامت تمام لیست تغییر میکند اما در صورتی که در تگ <li> استفاده شود فقط علامت آن گزینه تغییر خواهد کرد.

در مثال زیر نحوه استفاده و تفاوت استفاده را مشاهده فرمایید :

 

  • گزینه اول لیست
  • گزینه دوم لیست
  • گزینه سوم لیست

 

  • گزینه اول لیست
  • گزینه دوم لیست
  • گزینه سوم لیست

 

همانطور که مشاهده میفرمایید در لیست اول شناسه type در تگ <ul> استفاده شده بنابراین علامت کل لیست به یک شکل است اما در لیست دوم در تگ <li> استفاده شده و گزینه ها به طور مجزا اشکال خاص خود را دارند.

نکته چهارم » شما می توانید به طور همزمان از شناسه type در هر دو تگ <li> و <ul> استفاده کنید.

 

 

لیست مرتب »

لیست های مرتب دقیقاً مشابه لیست نامرتب هستند و تفاوت آنها در استفاده از تگ <ol> و </ol> به جای تگ <ul> است، به مثال زیر توجه کنید :

این لیست مرتب است

  1. گزینه اول لیست
  2. گزینه دوم لیست
  3. گزینه سوم لیست

همانطور که مشاهده می فرمایید در هنگام استفاده از تگ <ol> دیگر خبری از اشکال هندسی نیست و به جای آن از اعداد یا حروف الفبا استفاده می شود.

لیست های مرتب نیز شناسه type مخصوص به خود را دارد که دارای مقادیر زیادی است مانند »

۱ » با استفاده از این مقدار اعداد ریاضی به نمایش در می آیند.

A » با استفاده از این مقدار حروف بزرگ انگلیسی به نمایش در می آیند.

a » با استفاده از این مقدار حروف کوچک انگلیسی به نمایش در می آیند.

I » با استفاده از این مقدار حروف بزرگ یونانی به نمایش در می آیند.

i » با استفاده از این مقدار خروف کوچک یونانی به نمایش در می آیند.

همانند لیست نامرتب این شناسه هم میتواند در تگ <ol> استفاده شود هم در تگ <li> که بسته به نیاز میتوانید از آن استفاده کنید، مانند :

این لیست مرتب است

  1. گزینه اول لیست
  2. گزینه دوم لیست
  3. گزینه سوم لیست

 

  1. گزینه اول لیست
  2. گزینه دوم لیست
  3. گزینه اول لیست
  4. گزینه دوم لیست
  5. گزینه سوم لیست

همانطور که مشاهده می فرمایید با استفاده از شناسه در تگ <li> باز هم ترتیب لیست به هم نمی ریزد و فقط علامت تغییر میکند.

 

یکی از جالب ترین و البته پر کاربرد ترین شناسه برای تگ <ol> مشخص کردن شروع شماره گذاری است که با شناسه Start مشخص می گردد و مقدار آن را شما تعیین میکنید.

کاربرد عمده این شناسه زمانی است که شما ادامه یک لیست را در جای دیگری بخواهید به نمایش در بیاورید و نخواهید شماره ها از ابتدا شروع شود .

 


این لیست مرتب با شماره شروع است

  1. گزینه اول لیست
  2. گزینه دوم لیست
  3. گزینه سوم لیست

 

  1. گزینه اول لیست
  2. گزینه دوم لیست
  3. گزینه اول لیست
  4. گزینه دوم لیست
  5. گزینه سوم لیست

همانطور که مشاهده می کنید شناسه type به همراه شناسه Start می تواند استفاده شود.

 

ما به طور کلی در این آموزش با لیست ها در صفحات HTML آشنا شدیم ، در آموزش بعد به شناسه های قابل استفاده در تگ Body میپردازیم.


موفق باشید.

 

دانلود سورس آموزش این جلسه (حجم : ۱ کیلوبایت)

درباره ی nasimazadi

مطلب پیشنهادی

واحد پردازش مركزي CPU 

واحد پردازش مركزي CPU مدت زمان انجام يك كار بوسيله كامپيوتر، به عوامل متعددي بستگي …

پاسخ دهید