کار با لیست ها در HTML

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

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

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

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

  • لیست های نامرتب
  • لیست های مرتب
  • لیست های تعریفی یا توضیحی

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

  • Eggs
  • Cheese
  • Milk
  • Papadums
  • Tickle-me Elmo
  • Dr Who Remote Control Dalek

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

  1. Remove the outer casing by pushing the plastic rivets through.
  2. Disconnect the main power harness from the inner unit.
  3. Remove connection to the glow plug.
  4. Extract unit, keeping upright at all times.

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

Spam

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

Spammer

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

Spam Filter

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

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


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

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

  1. a  : برای نشان دادن حروف کوچک انگلیسی
  2. A  : برای نشان دادن حروف بزرگ انگلیسی
  3. i  : برای نشان دادن  حروف کوچک رومی
  4. I  : برای نشان دادن حروف بزرگ رومی
  5. 1  : برای نشان دادن  اعداد به عنوان bullet برای آیتم ها ( مقدار پیش فرض این صفت همین مقدار است(

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

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

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

type   : با بکارگیری این خصوصیت می توان نوع bullet کنار آیتم را مشخص نمود. این خصوصیت مقادیر زیر را می پذیرد:

  • circle  : یک دایره توخالی را به عنوان bullet به نمایش می گذارد.
  • disc  : یک دایره توپر سیاه رنگ را به عنوان bullet به نمایش می گذارد.
  • square  : یک مربع توپر سیاه رنگ را به عنوان bullet به نمایش می گذارد.

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 messages, usually placing them in a dedicated junk messages folder or similar</dd>

 </dl>

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

 

dl tag <a  style=آموزش HTML (قسمت 7) : کار با لیست ها در HTML" title="آموزش HTML (قسمت 7) : کار با لیست ها در HTML 7learn.com" width="454" height="334" />


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

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

 

1 <ul type="disc">
2 <li>Eggs</li>
3 <li type="circle">Cheese</li>
4 <li>Milk</li>
5 <li>Papadums</li>
6 <li>Tickle-me Elmo</li>
7 <li>Dr Who Remote Control Dalek</li>
8 </ul>

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

ol tag <a  style=آموزش HTML (قسمت 7) : کار با لیست ها در HTML" title="آموزش HTML (قسمت 7) : کار با لیست ها در HTML 7learn.com" width="375" height="252" />

value  : برای تغییر دادن عدد کنار یک آیتم از لیست می توان از این خصوصیت استفاده کرد. در واقع می توانیم ترتیب نمایش اعداد کنار یک آیتم را با این خصوصیت به هم بزنیم. این خصوصیت یک عدد صحیح را به عنوان مقدار می پذیرد. به مثال زیر دقت کنید :

1 <ol>
2 <li>Eggs</li>
3 <li>Cheese</li>
4 <li>Milk</li>
5 <li value="99">Papadums</li>
6 <li>Tickle-me Elmo</li>
7 <li>Dr Who Remote Control Dalek</li>
8 </ol>

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

ul tag <a  style=آموزش HTML (قسمت 7) : کار با لیست ها در HTML" title="آموزش HTML (قسمت 7) : کار با لیست ها در HTML 7learn.com" width="375" height="252" />


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

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

<h1>Menu</h1>

<ol>
    <li>Home Page</li>
    <li>Educations
        <ul>
            <li>HTML Tutorials</li>
            <li>CSS Tutorials</li>
        </ul>
    </li>
    <li> Facilities
        <ul>
            <li> Submit </li>
            <li>Forum </li>
            <li> Ads </li>
        </ul>
    </li>
    <li> About Us </li>
</ol>

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

menu with lists1 <a  style=آموزش HTML (قسمت 7) : کار با لیست ها در HTML" title="آموزش HTML (قسمت 7) : کار با لیست ها در HTML 7learn.com" width="396" height="372" />

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

ارسال نظر