آموزش HTML شماره 4 - آموزش کامل ایجاد لیست

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

حتما شما در صفحات وب با لیست ها مواجه شده اید. شاید به گونه ای که در ذهن دارید نباشند اما بدانید که تمام لیست های معمولی ، منوهای بالایی در سایت ها ، منوی موضوعات و ... از تگ های لیست کمک می گیرند ؛ اما تفاوتی که این لیست ها با لیست های معمولی در html دارند این است که در آن ها از Css و javascript و jquery برای زیباسازی و متحرک سازی استفاده شده است.

ما در این آموزش کاری به زیباسازی و متحرک سازی لیست ها نداریم. این آموزش ، یک آموزش کامل و مقدماتی برای ایجاد انواع لیست ها در html است. شما بعد از مطالعه ی این مطلب ، قادر خواهید بود لیست های تو در تو و مرتب و نامرتب را بسازید.

توجه داشته باشید که اگر مطالب قبلی را مطالعه نکرده اید ، حتما آن ها را بخوانید و سپس این آموزش که ادامه ی آموزشات قبلی است را مطالعه کنید.

در html دو نوع لیست وجود دارد که آن لیست ها خود دارای زیرمجموعه های زیادی هستند:

• لیست مرتب

• لیست نامرتب

لیست های مرتب به گونه ی زیر نمایش داده می شوند:

1. مورد اول
2. مورد دوم
3. مورد سوم
4. ...

این لیست ها به شکلی که شما معلوم می کنید (به وسیله رقم ، حرف و ...) مرتب و دسته بندی می شوند. برای مثال در بالا این لیست به وسیله ی ارقام 1 تا 4 مرتب شده است. برای ایجاد چنین لیست هایی باید از تگ زیر استفاده کرد:

<<<code>>>

<ol>

      ...

</ol>

<<</code>>>

نمایش خروجی

تگ ol شروع کننده ی یک لیست مرتب است. اما اگر خروجی کد بالا را در با استفاده از لینک "نمایش خروجی" مشاهده کنید ، خواهید دید که هیچ چیزی نمایش داده نمی شود. دلیل این موضوع آن است که ما لیست را ایجاد کرده ایم اما هیچ موردی برای آن تعریف نکرده ایم. برای تعریف موارد مختلف در لیست (چه مرتب و چه نامرتب) باید از تگ زیر استفاده کرد:

<<<code>>>

<li>

      ...

</li>

<<</code>>>

و نتیجه ی ادقام این دو تگ:

<<<code>>>

<ol>

      <li>

            مورد یک

      </li>

      <li>

            مورد دو

      </li>

      <li>

            مورد سه

      </li>

</ol>

<<</code>>>

نمایش خروجی

خروجی کد های بالا را مشاهده کنید. خواهید دید که یک لیست مرتب با نمایش به ترتیب ارقام ایجاد شده است که سه مورد در آن وجود دارد. اما قبل از این گفتیم که لیست های مرتب می توانند بر اساس حروف و ... هم ترتیب پیدا کنند. اما چطور؟!

برای این کار باید موجودیت type را برای تگ ol یا li تعریف کنیم.

نکته: در صورت تعریف هر گونه موجودیتی برای ol ، آن موجودیت بر روی تمام تگ های li داخل خودش اعمال خواهد شد.

<<<code>>>

<ol type="1">

       <li> مورد یک </li>

       <li> مورد دو </li>

</ol> <!-- تنظیم به ترتیب اعداد -->

<ol type="a">

       <li> مورد یک </li>

       <li> مورد دو </li>

</ol> <!-- تنظیم به ترتیب حروف کوچک لایتن -->

<ol type="A"> 

       <li> مورد یک </li>

       <li> مورد دو </li>

</ol> <!-- تنظیم به ترتیب حروف بزرگ لاتین -->

<ol type="I"> 

       <li> مورد یک </li>

       <li> مورد دو </li>

</ol> <!-- تنظیم به ترتیب اعداد بزرگ یونانی-->

<ol type="i"> 

       <li> مورد یک </li>

       <li> مورد دو </li>

</ol> <!-- تنظیم به ترتیب اعداد کوچک یونانی -->

<<</code>>>

نمایش خروجی

خروجی کد های بالا را ببینید. این مثال به خوبی شما را با انواع حالت های موجود برای لیست های مرتب آشنا می کند. اما این نکته را فراموش نکنید که استفاده از موجودیت type برای تگ li هم امکان پذیر است. تمام مقادیر بالا را یک بار برای تگ li امتحان کنید و نتیجه را ببینید. فراموش نکنید که تگ li را در داخل ol قرار دهید.

اگر کاری که گفته شد را انجام دهید. متوجه می شوید که تغییر type در تگ li تنها یک مورد را تغییر حالت می دهد. این تغییر حالت اولویت بالا تری نسبت به مقدار type در تگ ol مادر دارد.

(اگر تگی در html زیر مجموعه ی تگ دیگری قرار بگیرد ، آن تگ مادر او خواهد بود و به تگ داخلی ، بچه (child) می گویند.)

موجودیت strat در تگ ol:

این موجودیت معلوم می کند که شمارش موارد لیست از چند شروع شود. در مثال زیر این موضوع را بهتر متوجه خواهید شد:

<<<code>>>

<ol type="1" start="4">

      <li> مورد اول که چهار نمایش داده می شود </li>

      <li> مورد دوم که پنج نمایش داده می شود </li>

      <li> مورد سوم که شش نمایش داده می شود </li>

</ol>

<<</code>>>

نمایش خروجی

خروجی را ببینید. بسیار جالب است. حال با این موجودیت این امکان را دارید که نیمی از لیست را در قسمتی از صفحه و نیمی دیگر را در قسمت های بعدی ایجاد کنید!

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

این لیست ها به این شکل هستند:

• مورد یک
• مورد دو
• مورد سه
•  ...

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

برای ایجاد این لیست ها ، همان طور که گفته شد ، مانند لیست های مرتب ، به تگ li نیاز داریم. اما به جای این که تگ های li را در داخل ol قرار دهیم ، باید آن را در ul وارد کنیم:

<<<code>>>

<ul>

      <li> مورد اول </li>

      <li> مورد دوم </li>

      <li> مورد سوم </li>

</ul>

<<</code>>>

نمایش خروجی

تا اینجا که راحت بود. اما برای ul هم موجودیتی وجود دارد که به شما این اجازه را می دهد که مشخص کنید ، لیست شما با چه نوع علامتی ، علامت گذاری شوند.

نکته: در لیست های نامرتب هم هر موجودیتی که برای ul تعریف کنید برای تمام li های داخل آن اعمال می شود. همچنین مانند لیست های مرتب ، هر موجودیتی که برای ul تعریف می شود ، می توان برای li های داخل آن هم تعریف کرد.

موجودیت type در ul:

<<<code>>>

<ul type="circle">

      <li> علامت دایره </li>

</ul>

<ul type="disc">

      <li> علامت دیسک </li>

</ul>

<ul type="square">

      <li> علامت مربع </li>

</ul>

<<</code>>>

نمایش خروجی

با مشاهده ی خروجی ، تفاوت حالت ها را مشاهده خواهید کرد.

لیست های نامرتب هم به همین سادگی بود. اما موضوعی که لیست ها را کمی سخت و پیچیده می کند ، استفاده از آن ها در حالت تو در تو است. این حالت پیچیده ترین حالت برای لیست هاست و معمولا برای افراد مبتدی کمی مشکل ایجاد می کند. شاید به نظرتان این حالت کمی به درد نخور بیاید ؛ اما بیشتری کاربرد لیست ها ، همین حالت تو در توی آن هاست که در اکثر منو ها از آن استفاده می شود.

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

این لیست ها همان طور که از اسمشان پیداست ، در یک دیگر ایجاد می شوند و یکی از آن ها زیرمجموعه (بچه)ی دیگری است. به مثال زیر توجه کنید:

<<<code>>>

<ul>

      <ul>

            <ul>

                  <li> این یک مورد در عمق سه لیست است </li>

            </ul>

      </ul>

</ul>

<<</code>>>

نمایش خروجی

ما تا آخر این آموزش با همین مثال بالا کار خواهیم کرد. پس سعی کنید آن را دقیق متوجه بشوید. با هر بار ایجاد یک تگ ul ، مرورگر آن را بیان کننده ی عمقی جدید از لیست میداند. به این معنی که مرورگر آن را داخل قبلی ها در نظر می گیرد و این موضوع در حالت دیداری خروجی بع گونه ای است که کاربر به راحتی دسته بندی های موجود را تشخیص دهد. در مثال بالا این موضوع مشخص نیست ، زیرا ما تنها یک مورد در عمق سوم لیست ایجاد کرده ایم و هیچ لیست (تگ li) دیگری را مادر آن قرار نداده ایم.

تغییر در مثال:

<<<code>>>

<ul>

      <ul>

            <li> یک مورد در عمق دوم و مادر یک لیست دیگر

                  <ul>

                        <li> یک مورد در عمق سه لیست </li>

                  </ul>

            </li>

      </ul>

</ul>

<<</code>>>

نمایش خروجی

به قسمت قرمز رنگ کد ، توجه کنید. می بینید که تگ li در جایی بسته شده است که ما انتظار آن را نداشتیم. اما این اصل کار در لیست های تو در تو است. ما در این گونه لیست ها باید برای تگ های li ، یک لیست دیگر تعریف کنیم و در آن ها موارد مورد نظر ما که باید زیر مجموعه ای از لیست اصلی (قرمز رنگ) باشند را وارد کنیم.

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

تغییر مثال:

<<<code>>>

<ul>

      <li> یک مورد در عمق دوم و مادر دو لیست دیگر

            <ul>

                  <li> یک مورد در عمق دوم و مادر یک لیست دیگر

                        <ul>

                              <li> یک مورد در عمق سه لیست </li>

                        </ul>

                 </li>

            </ul>

      </li>

</ul>

<<</code>>>

نمایش خروجی

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

آموزش تمام شد!

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

نکته 1: لیست ها تا عمق بی نهایت قابل گسترش هستند.

نکته 2: تمام کار هایی که ما برای لیست های نامرتب انجام دادیم ، برای لیست های مرتب هم قابل اعمال است. یعنی در مثال بالا شما ul ها را به ol تبدیل کنید و نتیجه را مشاهده کنید.

نکته 3: در لیست های تو در تو هم می توانید از همان موجودیت هایی که قبلا برای آن ها معرفی کردیم استفاده کنید.

خروجی ساز - کد ها را اینجا امتحان کنید

آموزش ها ادامه دارد ....