استفاده از لیست های HTML در صفحه

دو نمونه از پر استفاده ترین لیستها در HTML لیستهای مرتب و لیستهای نامرتب هستند. در لیستهای مرتب ترتیب بخشهای مختلف لیست مشخص می شود ولی در لیستهای نامرتب این ترتیب مشخص نمی شود.

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

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

<ul>
<li>بخش اول لیست</li>
<li>بخش دوم لیست</li>
<li>بخش سوم لیست</li>
</ul>

مثال بالا یک لیست بولت دار با سه بخش را به ما می دهد:

  • بخش اول لیست
  • بخش دوم لیست
  • بخش سوم لیست

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

<ul>
<ul>
<ul>
<li>خط اول لیست</li>
<li>خط دوم لیست</li>
<li>خط سوم لیست</li>
</ul>
</ul>
</ul>

نتیجه این فرمان به شکل زیر خواهد بود:

      • خط اول لیست
      • خط دوم لیست
      • خط سوم لیست

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

  • شناسه type

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

  • circle
    با قرار دادن این مقدار برای لیست علامت ابتدایی هر بخش به شکل یک دایره تو خالی در می آید.
  • disc
    این مقدار شکل علامت ابتدای هر قسمت از لیست را به یک دایره تو پر تغییر می دهد.
  • square
    این مقدار شکل علامت لیست را به صورت یک مربع تو پر در می آورد.

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

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

<ul>
<li type="circle">قسمت اول لیست</li>
<li type="disk">قسمت دوم لیست</li>
<li type="square">قسمت سوم لیست</li>
</ul>

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

  • قسمت اول لیست
  • قسمت دوم لیست
  • قسمت سوم لیست

اگر می خواهید از تگ <center> برای لیست خود استفاده کنید در این کار دقت کنید. چون ممکن است تمام سطرهای متن شما به یک اندازه نباشند. در این صورت به جای اینکه لیستی در یک خط و مستقیم داشته باشید ممکن است لیستی در هم ریخته و شلوغ به وجود آید. مانند زیر:

<center>
<ul>
<li>بخش اول لیست که بلندتر از بقیه سطرهای لیست است</li>
<li>بخش دوم لیست</li>
<li>بخش سوم لیست در سطر آخر</li>
</ul>
<center>

لیست نهایی به این صورت در صفحه دیده می شود.

  • بخش اول لیست که بلندتر از بقیه سطرهای لیست است
  • بخش دوم لیست
  • بخش سوم لیست در سطر آخر

اگر شما در یک صفحه بیشتر به لیستها نیاز دارید می توانید از روش بالا استفاده کنید اما باید بدانید که ممکن است ظاهر لیست در اندازه های مختلف پنجره مرورگر به هم بخورد. راه دیگری که برای جلوگیری از این به هم خوردگی وجود دارد استفاده از یک Table است که بعداً در مورد آن توضیح خواهیم داد.

  • لیستهای مرتب

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

<ol>
<li>بخش اول لیست</li>
<li>بخش دوم لیست</li>
<li>بخش سوم لیست</li>
</ol>

نتیجه به صورت لیستی شماره گذاری شده ظاهر می شود:

  1. بخش اول لیست
  2. بخش دوم لیست
  3. بخش سوم لیست

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

  1. شناسه start

در مورد لیستهای مرتب با استفاده از شناسه start در تگ <OL> می توانیم تعیین کنیم که شماره های لیست از چه عددی شروع شود. به مثال زیر توجه کنید:

<ol start="15">
<li>این سطر اول لیست است ولی شماره آن 15 است.</li>
</ol>

نتیجه به صورت زیر مشاهده می شود:

  1. این سطر اول لیست است ولی شماره آن 15 است.

 

  1. شناسه type

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

  • "type="1
    با این شناسه بخشهای لیست با اعداد ریاضی مشخص می شوند.
  • "type="A
    با استفاده از این شناسه بخشهای لیست با حروف بزرگ انگلیسی مشخص می شوند.
  • "type="a
    با استفاده از این شناسه بخشهای لیست با حروف کوچک انگلیسی مشخص می شوند.
  • "type="I
    با استفاده از این شناسه بخشهای لیست با حروف بزرگ یونانی مشخص می شوند.
  • "type="i
    با استفاده از این شناسه بخشهای لیست با حروف کوچک یونانی مشخص می شوند.

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

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

<ol>
<li type="A">قسمت اول لیست</li>
<li type="a">قسمت دوم لیست</li>
<li type="1">قسمت سوم لیست</li>
<li type="I">قسمت چهارم لیست</li>
<li type="i">قسمت پنجم لیست</li>
</ol>

نتیجه به صورت زیر خواهد بود:

  1. قسمت اول لیست
  2. قسمت دوم لیست
  3. قسمت سوم لیست
  4. قسمت چهارم لیست
  5. قسمت پنجم لیست

نظرات بازدید کنندگان
Mon, 01 Jun 2009 13:09:54 +0430 نویسنده : babak
سرعت ، شيوايي ، ساده بودن از مزاياي آموزش سايت شما



دست شما درد نكند و موفق باشيد
 
Sun, 19 Apr 2009 09:19:36 +0430 نویسنده : vahid
ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون ممنون
 
Sat, 28 Feb 2009 18:09:53 +0330 نویسنده : محمدرضا
باسلام
چرا من هر كاري ميكنم نميتوانم يك فايل را از طريق لينك به نمايش در آورم .براي پايان نامه نياز دارم.لطفاً راهنمايي كنيد.
 
Mon, 12 Jan 2009 19:21:00 +0330 نویسنده : وحید
اولین بار بود که آموزشهایی به این مهمی و خوبی و به این روانی و شیوایی در بین سایتهای آموزشی مختلف میدیدم .
دست شما درد نکنه .
 
Sun, 28 Dec 2008 17:47:05 +0330 نویسنده : لیلی
من هم خیلی خیلی خیلی خیلی خیلی خیلی ممنونم!خدا خیرتون بده.
 
Thu, 04 Dec 2008 10:00:19 +0330 نویسنده : پوکت تايلندی
بسيار ممنونم
 
Thu, 04 Dec 2008 09:56:37 +0330 نویسنده : پوکت
خيلی ممنونم از برنامه خوب شما
 
Sun, 02 Nov 2008 12:45:31 +0330 نویسنده : نعیم
عالیست
 
Sun, 03 Aug 2008 13:11:53 +0430 نویسنده : مينا
عالي بود
 
Fri, 25 Jul 2008 17:19:01 +0430 نویسنده : edris
az matalebe 2 sait vaqean estefade kardam. omidvaram u  ham be khasteye khode2n reside bashin.mer30
 
Sat, 07 Jun 2008 14:11:50 +0430 نویسنده : طراح صفحات وب
عالی بود ازتون ممنون  خیلی بهم کمک کرد  به شما ایرانیان افتخار میکنیم
 
Fri, 23 May 2008 11:20:48 +0430 نویسنده : amin
So Nice !!!
 
Thu, 10 Apr 2008 13:26:45 +0330 نویسنده : reza
واقعا استفاده کردم . عالی بود
 
Sat, 22 Mar 2008 13:31:09 +0330 نویسنده : Tom
I've just found this web site.It's Good ,Making me stay still in front of my pc
 
ساعت: 03:31 - تاریخ: 11 بهمن 1386 نویسنده : کیارش
من که حالا حالاها اینجا پلاسم بیکه بهم حال داد.
 
ساعت: 16:48 - تاریخ: 16 مهر 1386 نویسنده : ensi
تا اینجا که خوندم عالیه . توضیحات برا من که تا حالا با html کار نکردم خیلی خوبه
من فکر کنم تا درسای آخر براتون کامنت بزارم.......
پس فعلا