آموزش کامل HTML - قسمت هشتم


با سلام خدمت دوستان و همراهان همیشگی زُلند .

توی قسمت هشتم آموزش میخوایم با لیست ها در HTML آشنا بشیم.

ما توی این قسمت میخوایم با نحوه ایجاد لیست درHTML آشنا بشیم و بدونیم که چندنوع لیست محتلف رو میتونیم بسازیم.

در HTML سه نوع لیست داریم، لیست های نوع اول که بهش لیست های مرتب یا Order List گفته میشه و با تگ <ol> مشخص میشه و لیست های نوع دوم که به اونها تعریفی یا  Description List گفته میشه و با تگ <dl> مشخص میشن و در آخر لیست های نوع سوم که به اونها لیست های نامرتب یا Unorder List گفته میشه و با تگ <ul> مشخص میشن.

توی مثال زیر ما یه لیست مرتب ایجاد میکنیم بصورت زیر :

<ol>

<li> php </li>

<li> python </li>

</ol>

نکته : تگ های <li> بیانگر آیتم های داخل لیست هستن.

خب اگر دقت کنید لیست ما بصورت شماره گذاری شده و بوسیله اعداد مرتب شده حالا اگر بخوایم بجای اعداد از حروف لاتین استفاده بشه کافیه به تگ <ol> خاصیت type داده و مقدار اون رو برابر حرف “A” قرار بدیم بصورت زیر :

<ol type=”A”>

<li> php </li>

<li> C++ </li>

<li> C# </li>

</ol>

میبینید که لیست بوسیله حروف مرتب شد و حتی اگر بجای “A” مقدار “I” رو بدید برای مرتب کردن لیست از اعداد رومی استفاده میکنه.

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

به مثال زیر دقت کنید:

<dl>

<dt> php </dt>

<dd> js is a web programming language </dd>

<dt>C++</dt>

<dd> C++ is a client side programming language</dd>

</dl>

نوع سوم لیست ها یعنی لیست های نامرتب به این صورت هستند که آیتم های داخل لیست ترتیب خاصی ندارن و همگی به یک صورت و در پشت اونها بجای شماره گذاری نماد ها و شکل ها قرار دارند مثل اشکال مربع و دایر توپر و تو خالی.

برای تغییر این اشکال هم فقط کافیه به تگ <ul> خاصیت type  رو داده و مقدار اون رو برابر “disc” یا “circle” یا “square” قرار بدین.

به مثال زیر توجه کنید :

<ul type=”square”>

<li> php </li>

<li> asp.net </li>

<li> node.js </li>

</ul>

 

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

 

 

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

In programmers world anything is possible !

5 امتیاز 10 نوشته

این نوشته را با دوستان خود به اشتراک بگذارید...

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