» مقالات » مقالات هایبرد » لیستها در HTML (آموزش HTML)

لیستها در HTML (آموزش HTML)

لیستها در HTML (آموزش HTML)

6559  تعداد بازدید  |  یکشنبه 12 مهر ماه 1394

در HTML مدرن، سه نوع لیست وجود دارد. لیستهای مرتب (

    )، لیستهای نامرتب (
      ) و لیستهای تعریفی (< DL>). دو نوع لیست دیگر که به ندرت مورد استفاده قرار میگیرند، عبارتند از و و معمولا به صورت لیست نامرتب به کار برده می شوند. لیستها، بلوکی از عناصر هستند که ساختار بلوکی را ایجاد می کنند. لیستها می توانند تودرتو و حاوی ساختار بلوکی دیگر مثل پاراگراف باشند.

      در طراحی سایت با HTML مدرن، سه نوع لیست وجود دارد. لیستهای مرتب (<OL>)، لیستهای نامرتب (<UL>) و لیستهای تعریفی (< DL>). دو نوع لیست دیگر که به ندرت مورد استفاده قرار میگیرند، عبارتند از <MENU> و <DIR> و معمولا به صورت لیست نامرتب به کار برده می شوند. لیستها، بلوکی از عناصر هستند که ساختار بلوکی را ایجاد می کنند. لیستها می توانند تودرتو و حاوی ساختار بلوکی دیگر مثل پاراگراف باشند.

      لیست مرتب
      لیست مرتب توسط دستورات <OL> و <OL/> مشخص می شود و لیستی است که ترتیب عناصر آن مهم است. ترتیب با شماره گذاری مشخص میشود که شماره گذاری با استفاده از اعداد عربی، حروف یا اعداد رومی انجام می شود: لیستهای مرتب برای ایجاد طرحهای ساده و دستورات مرحلهای به کار می رود، زیرا عناصر لیست به طور خودکار توسط مرورگر شماره گذاری می شوند. عناصر لیست مرتب اند و با دستور <LI > تعریف می شوند. شماره عناصر از یک آغاز میشود. شکل کلی تعریف لیست مرتب به صورت زیر است:

      <OL>

      <LI> option 2

      <LI> option n

      </OL->

      دستور < OL> دارای سه صفت مهم است که عبارتند از: START، COMPACT و TYPE صفت COMPACT فاقد مقدار است، زیرا به مرورگر میگوید که جهت صرفه جویی در فضای صفحه، عناصر لیست را فشرده کند.
       با استفاده از صفت TYPE می توان مشخص کرد که برای شماره گذاری عناصر لیست از چه حروف یا اعدادی استفاده شود. اگر مقدار TYPE برابر با a باشد برای شماره گذاری از حروف کوچک و اگر برابر با A باشد از حروف بزرگ استفاده میگردد. مقدار i اعداد رومی کوچک و مقدار I اعداد رومی بزرگ و مقدار 1 اعداد معمولی را مشخص میکند. مقدار فرضی (چنانچه TYPE تعیین نشود) برابر با یک است. توجه کنید که صفت TYPE در <OL> الگوی شماره گذاری را برای کل لیست مشخص میکند، مگر اینکه با استفاده از مقدار TYPE در دستور <LI> جایگزین شود. هر دستور <LI> نیز می تواند صفت TYPE داشته باشد که می تواند مقادیر I ،i ،A ،a a یا 1 را بپذیرد. هر وقت <LI > مقدار جدیدی برای TYPE مشخص کند، برای بقیه لیست از آن استفاده میگردد، مگر اینکه <LI> بعدی مقدار دیگری را برای TYPE تعیین کند. و صفت TYPE می تواند حرفی یا عددی باشد. صفت START باید یک عدد باشد، به عنوان مثال، برای اینکه لیست مرتب از حروف J شروع شود، باید دستور OL> <"10"=TYPE = "a"START را به کار ببرید، زیرا jدهمین کاراکتر است. دستور <LI> در داخل لیست مرتب می تواند شماره گذاری فعلی را با صفت VALUE عوض کند. این صفت، یک مقدار عددی را مشخص می کند. شماره گذاری لیست باید از عددی که با این صفت تعیین میشود آغاز و ادامه یابد.

       

      مثال۱-۷

      استفاده از لیست مرتب برای سازماندهی صفحه. نتیجه اجرای این دستورات در شکل ۱-۷ آمده است.

      <"DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Translational//EN">

      <HTML>

      <HEAD>< H3>

      TITLE-Ordered List Example.</TITLE>>

      </HEAD>

      <BODY > <P>Ordered lists can be very simple.</P>

      <OL>

      <Ll>|tem 1

      <L|>|tem 2

      <LI>|tem 3

      </OL>

      <P>Ordered lists with a variety of types.</P>

      <OL>

      <LΙ ΤΥΡΕ= "a">Lowercase letters

      LΙ ΤΥΡΕ= "A">Upperrease letters<

      LΙ ΤΥΡΕ =i">Lowercase Roman numerals>

      <LΙ ΤΥΡΕ="I">Uppercase Roman numerals

      <LΙ ΤΥΡΕ ="1">Arabic numerals

      </OL>

      P>Ordered lists with different values and with different types .</P> >

      <"OL START = "10" TYPE = "a>

      <LI>This should be j

      <LI VALUE = "3">This should be c

      <OL>

      Ll>Lists can nest>

      <OL>

      LI>Nesting depth is nulimited>

      </OL>

      </OL>

      </OL></H3>

      </BODY>

      </HTML>

       

      لیستهای نامرتب
      لیست نامرتب که توسط دستورات < UL> و < UL> مشخص می گردد، برای عناصری به کار میرود که ترتیب برای آنها مهم نباشد. این نوع لیست برای لیستی از خواص و فواید محصولات مفید است. مرورگر برای مشخص کردن عناصر لیست نامرتب از علامتهایی مثل دایره و مربع توپر، یا دایره توخالی استفاده می کند.

      لیستهای نامرتب می توانند تودرتو باشند. هر سطح تودرتویی، با تورفتگیهایی مشخص می گردد و علامت مربوط به عناصر آن نیز برحسب نیاز تغییر می کند. به طور کلی، دایره و مربع توپر در سطح اول لیست به کار می روند و دایره توخالی برای سطح دوم لیست به کار می رود. سطح سوم نیز از یک مربع استفاده می کند. این موضوع برای تمام مرورگرها متداول است. صفت TYPE در دستور < UL >، علامت را برای کل لیست مشخص میکند. همچنین صفت TYPE با هر دستور <l1> برای تعیین عناصر لیست نیز قابل استفاده است. مقادیر ممکن برای TYPE عبارتند از: circle ،disk و Square. پس از مطالعه لیستهای تعریفی که در ادامه آمده است، مثال ۲-۷ را ببینید.

      لیستهای تعریفی
      لیست تعریفی شامل مجموعه ای از عناصر و تعریف هر یک از آنها است. به عبارت دیگر، همراه هر عنصر، توصیفی از آن نیز وجود دارد. این نوع لیست با دستورات <DT> و <DT> مشخص می شوند. هر عنصر لیست با <DD/> نیست ولی در عبارات و توضیحات طولانی ممکن است مفید واقع شوند. چون لیستهای تعریفی فاقد شماره یا علامتهایی برای عناصر لیست هستند، اغلب کسانی که با HTML کار میکنند، از آن برای تورفتگی دادن به متنها استفاده می کنند. گرچه این روش، مناسبترین روش برای تورفتگی متن است، به جای آن از لیست نامرتب استفاده میگردد. نگاهی به کاربرد < UL> و خروجی ابزارهای HTML نشان خUL که این است که برای ایجاد تورفتگی از دستورات کمتری استفاده می کند. توجه داشته باشید که لیستها می توانند تودرتو باشند و در نتیجه تورفتگیهای متفاوتی را می توان ایجاد کرد.
       

      مثال ۲-۷

      کاربرد لیستهای نامرتب و تعریفی و ایجاد تورفتگی به کمک لیستهای اجرای این مثال در شکل ۲-۷ آمده است.


      <"DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.0 Transitional//EN">

      <HTML>

      <HEAD>

      <TITLE>Unordered List Example.</TITLE>

      </HEAD>

      <BODY>

      <UL> <H3>

      Ll>Unordered lists>

      <UL>

      LI>can be nested>

      <UL>

      Ll>Bullet changes on nesting>

      </UL>

      </UL>

      </UL>

      <P>Bullets can be controlled with the TYPE attribute.<P>

      UL TYPE = "square>">

      LI>First item bullet shape set by UL>

      <LI TYPE = "disk">Disc item

      <LI TYPE = "circle">Circle item

      <LI TYPE = "square">Square item

      <H3 ALIGN = "center">Definitions</H3>

      <DL>

      <DT>Gadget<DT>

      <DD>A useless device used in many HTML examples.</DD>

      <DT>Gizmo.</DT>

      <DD>Another useless device used in a few HTML examples.</DD>

       </DL></H3>

      </BODY>

      </HTML>

       


       

       

       
       

       

      مقالات مرتبط به طراحی سایت :

      عملگرها (آموزش HTML)
      متد ها در زبان های اسکریپتی 2 (آموزش HTML)
      متد ها در زبان های اسکریپتی(آموزش HTML)
      اشیای موجود در جاوا اسکریپت (آموزش HTML)
      دستورات در جاوااسکریپت(آموزش HTML)
      جاوا اسکریپت (آموزش HTML)
      استفاده از دکمه های تصویری به جای SUBMIT (آموزش HTML)
      کادرهای کنترلی (آموزش HTML)
      لیستهای لغزنده (آموزش HTML)
      فیلد متنی چند خطی (آموزش HTML)
      کنترلهای فرم (آموزش HTML)
      امکانات دیگری از جدول (آموزش HTML)
      جدول و صفحه آرایی (آموزش HTML)
      لیستها در HTML (آموزش HTML)
      سایر فرمتهای دودویی (آموزش HTML)
      تصاویر به عنوان دکمه/صوت دیجیتال/فرمت های فایل های صوتی /برداشت و اجرای فایل صوتی(آموزش HTML)