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

لیست ها در HTML یکی از مهم ترین تگ ها در طراحی سایت هستند که در ساخت منو و ارائه محتویات پشت سر هم کاربرد بسیاری دارد

list  ها در html  کاربرد بسیاری دارد که با هم به یادگیری این تگ می پردازیم.

تگ <ul>  و لیست های نامرتب

این لیست ها مواردی هستند که به شماره گذاری نیازی نداشته و با “بولت” نمایش داده می شوند.نحوه استفاده به این صورت است که <ul> را در ابتدا و </ul>را در انتهای کل لیست مورد نظر قرار میدهیم و سپس <li> را در ابتدای سطرهای مختلف ،</li> را در انتهای آن سطر قرار می دهیم.

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

<ul>

<ul>

<ul>

<li>        the first    </li>

<li>        the second   </li>

</ul>

</ul>

</ul>

حال اگر بخواهیم که شکل بولت لیست را تغییر دهیم می توانیم با ویژگی type کد در <li> قرار می دهیم ،انجام شود.

<li         type = ” cirle ” >                 </li>      دایره توخالی

<li         type = “ dise “ >                  </li>    دایره توپر

<li         type = “ square “ >              </li>        مربع توپر

برای ایجاد لیست های تو در تو ، برای هر زیر لیست یک بار تگ <ul> را می نویسیم.

<ul>

<li>   the   first   line   of   list  </li>

           <ul>

           <li> one </li>

          <li> two </li>

          </ul>

</ul>

  آموزش تگ ol در HTML

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

<ol          start =”12 ” >

<li>          the first    </li>

<li>          the second </li>

<li>          the third </li>

</ol>

نمایش به صورت مقابل می شود :

12. the first
13. the secocd
14. the third

در لیست های مرتب با استفاده از ویژگی type می توان نحوه شماره گذاری را معین نمود.(با اعداد ، حروف یا نشانه های دیگر)

<li     type = “ 1 “ > بخش های لیست با استفاده از اعداد ریاضی

<li     type= “ A “ >  بخش های لیست با استفاده از حروف بزرگ انگلیسی

<li     type= “ a “ >  بخش های لیست با استفاده از حروف کوچک انگلیسی

<li     type= “ I “ >   بخش های لیست با استفاده با اعداد یونانی بزرگ

<li     type= “ i “ >   بخش های لیست با استفاده با اعداد یونانی کوچک

مثال:

<ol>

        <li               type =” i “ >     the     first     </li>

        <li               type =” A “ >     the     scond    </li>

        <li               type =” a “ >     the     third     </li>

        <li               type =” 1 “ >     the     fourth     </li>

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

1. the first
2. the scond
3. the third
4. the fourth

با عوض شدن مقدار تایپ شماره گذاری از اول آغاز نشده و در ادامه شماره های قبلی است.در این مدل لیست ها هم مانند لیست های نامرتب می توان زیر لیست ها را هم ایجاد کنیم.

  آموزش تگ dt در HTML

 آموزش تگ dd در تگ dt

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

برای تعریف این لیست از تگ </dl>……<dl> استفاده می شود.سپس در بدنه این لیست عناوین یا عباراتی که می خواهیم تعریف کنیم در تگ <dt> قرار داده و تعریف مربوط به آنها را در تگ <dd> و بلافاصله بعد از آنها می نویسیم.

<dl>

<dt>     first     title     </dt>

<dd>    description    of     first    title   </dd>

<dt>     second       title    </dt>

<dd>     description      of     second     title    </dd>

</dl>

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

چنانچه به html  علاقمند هستید ، می توانید در کلاس آموزش HTML – CSS  در آموزشگاه کامپیوتر پرتو شرکت نمایید

مقاله

نام مقاله

آموزش لیست در HTML

خلاصه

آموزش لیست در HTML

نویسنده

مهندس مهدی موسوی

منتشر کننده

آموزشگاه کامپیوتر پرتو

لوگو