X
تبلیغات
زولا
notesaz جمعه 5 مهر‌ماه سال 1392 چاپ

 

بازدید کننده ی محترم برای حل مشکل جابه جایی حروف در متن نسخه ی پی دی اف این قسمت را از پایین صفحه دانلود کنید.

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

امروزه از لیست ها به همراه زبان CSS برای کنترل ظاهر نمایشی آن ها، به منظور ایجاد جلوه های گرافیکی، همچون منوهای درختی، منوهای افقی و عمودی، تب ها و... استفاده میشود.در سری آموزش css انشاالله به جلوه های لیست ها خواهیم پرداخت.

دسته بندی لیست ها

همانطور که گفتیم لیست ها به سه دسته اصلی تقسیم می شوند:

1- لیست های نامرتب

2- لیست های مرتب

3- لیست های تعریفی یا توضیحی

1- لیست های نامرتبدر این نوع لیست ها ترتیب قرارگیری عناصر لیست مهم نبوده، و معمولا برای لیست کردن آن ها از bullet های دایره ای توپر، تو خالی، و مربع استفاده میشود، که البته با استفاده از css میتوان   bullet  مورد نظر را جایگزین آنها کرد مثال:

  • ·        Farsi font
  • ·        English font
  • ·        Arabic font

2- لیست های مرتبدر این نوع لیست ها ترتیب قرارگیری عناصر لیست مهم بوده و برای نمایش ترتیب آن ها از اعداد یا حروف انگلیسی یا رومی استفاده می شودمثال:

 

  1. 1)    Open the notepad
  2. 2)    Write <html> tag
  3. 3)    Write <title> tag
  4. 4)    Write <body> tag

3- لیست های تعریفیاز این گونه لیست ها هنگامی که می خواهیم یکسری از آیتم هایی که یک بخش عنوان و یک توضیح برای آن عنوان دارند را نمایش دهیم، استفاده می کنیممثال:

<html> tag:

The first tag that is used to make a webpage.

<title> tag:

The tag that is used to show the title of the page that you want to make.

<body> tag:

The tag that contains the main part of a webpage.

بسیار خب، حالا شما را با تگ هایی که برای ایجاد چنین لیستهایی استفاده میشود، آشنا خواهیم کرد.

تگ  :<ol> برای ایجاد لیست های مرتباز این تگ برای ایجاد لیست های مرتب استفاده می شود. برای ایجاد آیتم های این لیست می بایست از تگ  ) <li> مخفف ( list Item  در داخل تگ  <ol> استفاده نمود. این تگ از صفت های زیر پشتیبانی میکند.

1-Type  : با استفاده از این صفت می توان نوع bullet کنار آیتم را مشخص نمود. این صفت مقادیر زیر را  می پذیرد:

* a : برای نمایش حروف کوچک انگلیسی

* A : برای نمایش حروف بزرگ انگلیسی

* i : برای نمایش حروف کوچک رومی

* I : برای نمایش حروف بزرگ رومی

*  1: برای نمایش اعداد به عنوان bullet برای آیتم ها ( مقدار پیشفرض این صفت همین مقدار است)

2- Start : این صفت مشخص می کند که شماره گذاری لیست ما باید از چندمین کاراکتر از انواعی که در صفت type مشخص شده شروع شود. به عنوان مثال اگر مقدار صفت type برابر با A بود مقدار 3 برای صفت start  به معنی شروع لیست از کاراکتر C خواهد بود.

3- Compact : این صفت بولین موجب فشرده نمایش داده شدن آیتم های لیست خواهد شد. البته این صفت دیگر در هیچ مرورگری پشتیبانی نمی شود.

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

1- Type : با استفاده از این صفت میتوان نوع bullet کنار آیتم را مشخص کرد. این صفت مقادیر زیر را     می پذیرد:

* Circle : یک دایره توخالی را به عنوان bullet نمایش می دهد.

*Disc : یک دایره توپر سیاه رنگ را به عنوان bullet نمایش می دهد.

*Square : یک مربع توپر سیاه رنگ را به عنوان bullet نمایش می دهد.

2- Compact : این صفت بولین موجب فشرده نمایش داده شدن آیتم های لیست خواهد شد. البته این صفت دیگر در هیچ مرورگری پشتیبانی نمی شود.

تگ <dl>  : برای ایجاد لیست های تعریفیبرای ایجاد لیست های تعریفی از تگ <dl> استفاده می شود. هر لیست تعریفی از چند عنوان و توضیحات آن عنوان تشکیل می شود. برای ایجاد هر عنوان از تگ <dt> و برای ایجاد توضیح از تگ <dd> استفاده میشود. تگ <dl> فقط از صفت compact پشتیبانی می کند. که باز هم هیچ مرورگری از این صفت پشتیبانی نمی کند!!:D

در زیر شما می توانید یک لیست تعریفی را مشاهده کنید.

<dl>

 <dt>Spam</dt>

 <dd>unsolicited email sent in the hope of increasing sales of some product, or simply for the purposes of annoying people</dd>

 <dt>Spammer</dt>

 <dd>someone who sends out spam email and therefore deserves to develop a nasty incurable disease of some kind</dd>

 <dt>Spam Filter</dt>

 <dd>a tool used in email to 'filter out' likely spam messags, usually placing them in a dedicated junk messages folder or similar</dd>

 </dl>

 :نتیجه در مرورگر  

تگ  <li>:از این عنصر برای مشخص کردن آیتم لیست های مرتب و نامرتب استفاده می شود. غالبا این تگ داخل تگ های <ol> و <ul> استفاده می شود. این تگ از صفت های زیر پشتیبانی می کند.

1- Type : از این صفت برای تغییر دادن نوع bullet مربوط به یک آیتم لیست به غیر از آن نوعی که در صفت type تگ های ul  و ol تنظیم شده است استفاده می شود. این صفت برای تگ <li> همان مقادیری را که در تگ <ol> و <ul> میگیرد، به عنوان مقدار می پذیرد. به مثال زیر دقت کنید:

<li>Eggs</li>

 

<li type="circle">Cheese</li>

 

<li>Milk</li>

 

<li>Papadums</li>

 

<li>Tickle-me Elmo</li>

 

<li>Dr Who Remote Control Dalek</li>

 

</ul>

نتیجه در مرورگر :

<li>Eggs</li>

 

<li>Cheese</li>

 

<li>Milk</li>

 

<li value="99">Papadums</li>

 

<li>Tickle-me Elmo</li>

 

<li>Dr Who Remote Control Dalek</li>

 

</ol>

نتیجه در مرورگر :

لیست های تو در تو

یکی از ویژگی های بارز  لیست ها امکان ترکیب کردن آن ها با یکدیگر است. امروزه ترکیب لیستها کاربردهای فراوانی پیدا کرده است و در بسیاری از موارد همچون ایجاد ساختارهای درختی، منوهای افقی و عمودی چند سطحی و... استفاده می شود. برای ایجاد لیست های تو در تو کافی است هر لیست جدید را در داخل یک عنصر(li ) قرار دهید. در ادامه کد یک نمونه لیست تو در تو را مشاهده می کنید:

<h1>Menu</h1>

 

<ol>

    <li>Home </li>

    <li> Tutorials

        <ul>

            <li>HTML Tutorials</li>

            <li>CSS Tutorials</li>

        </ul>

    </li>

    <li> download

        <ul>

            <li> font </li>

            <li>wallpaper </li>

            <li>pattern </li>

        </ul>

    </li>

    <li> contact us </li>

</ol>

نتیجه در مرورگر :



تا اینجا آموزش کار با لیست ها به پایان رسید. شاید الان فکر کنید که چرا لیست های زیبا و دارای شکل های کشویی، افقی و ... را در این آموزش مورد بررسی قرار ندادیم، اما باید بگویم که این جلوه های گرافیکی را باید در زبان css به این کد های خود اضافه کنیم. در قسمت بعدی به کار با جداول در HTML  و معرفی تگ  <table>خواهیم پرداخت.این تگ برای ارائه ی اطلاعات به صورت جدول به کار می رود.


با کلیک بر روی 1+ ما را در گوگل محبوب کنید