تا به اینجای کار با نحوه اضافه کردن لینک و عکس به صفحات آشنا شدید و حالا در این شماره از آموزش، قصد داریم تا به شما نحوه قرار دادن انواع لیست‌ها را آموزش دهیم.
اکنون شما می‌توانید با کمک آنچه در قسمت‌های قبلی آموزش HTML با هم مرور کردیم، خودتان یک صفحه اچ تی ام ال بنویسید که علاوه بر امکان قرار دادن متن و عنوان در آن، می توانید آن‌ها را با عکس و لینک همراه کنید تا جلوه زیباتری به خود بگیرد. اما این جلسه قصد داریم تا با آموزش استفاده از انواع لیست‌ها، چند قدمی شما را به سمت تبدیل شدن به یک برنامه نویس سمت کاربر نزدیک‌تر کنیم!
لیست‌ها
کاربرد لیست‌ها در اچ تی ام ال بسیار گسترده است؛ چرا که از منوها گرفته تا بسیاری از المان‌های منظم دیگر صفحه توسط لیست‌ها ایجاد می‌گردند. در اچ‌تی‌ام‌ال سه نوع لیست می‌توانید ایجاد کنید که قواعد نوشتن هر سه شکل شبیه هم هستند؛ ولی در نمایش آن‌ها در مرورگر تفاوت‌هایی وجود دارد. در ادامه بیشتر برایتان توضیح خواهیم داد. این سه نوع عبارتند از:
- unorderd list یا لیست بدون نظم که دارای ترتیب دلخواه است.
- orderd list یا لیست منظم و دارای ترتیب است. مثلا چنین لیستی بر اساس اعداد یا حروف الفبا مرتب می‌شود.
- حالت سوم نیز لیست توضیحات است که در آن ابتدا عنوان و سپس توضیحات وارد می‌شود که چندان مورد استفاده قرار نمی‌گیرد و ما هم بدان نپرداخته‌ایم.
برای مثال به لیست نامنظم زیر توجه نمایید.
<ul> <li/>متن آیتم اول<li> <li/> متن آیتم دوم<li> <li/>متن آیتم سوم<li> <ul/>
راه حل ایجاد یک لیست بدون نظم و ترتیب:
مرحله اول: برای ساخت یک لیست، باید یک تگ <ul> باز می‌کنیم. بدین ترتیب اعلام می‌کنیم که می‌خواهیم یک لیست نامنظم یا همان Unorderd List ایجاد کنیم.
مرحله دوم: سپس متن هر آیتم لیست را بین <li> متن آیتم <li/> باز متن مورد نظر را بین آن می‌نویسیم.
مرحله سوم: در آخر <ul/> را می‌نویسیم تا تگ بسته شود.
اگر لیست‌های اچ تی ام ال را دیده باشید, خواهید دید که در این لیست‌ها یک علامت(معمولا دایره تو پر) قرار می‌گیرد.در لیست‌ها امکان تغییر آیکونی که در کنار هر آیتم قرار می‌گیرد وجود دارد. اتریبیوت list-style-type این کار را برای شما انجام می‌دهد. برای اینکار باید به تگ ابتدایی <ul> این اتریبیوت را اضافه کنید و آیکون مورد نظر را بنویسید.
< "آیکون مورد نظر :ul style="list-style-type>
لیست موارد قابل استفاده به عنوان آیکون در لیست‌ها به ترتیب زیر است:
- disc : در واقع همان دایره‌های تو پر پیش فرض هستند. نمونه: <ul style= "list-style-type: disc ">
- circles: در این حالت آیتم‌های لیست شما با دایره به نمایش در خواهد آمد.
- squares: در این حالت آیتم‌های لیست شما به صورت مربع نشان داده خواهند شد.
- none: در این حالت در کنار آیتم‌های لیست آیکونی وجود نخواهد داشت.
لیست منظم و با ترتیب:
لیست منظم با ترتیب مثل لیستی که بر اساس شماره یا حروف الفبا مرتب شده را ordered list یا لیست منظم می‌گویند.
لیست‌های منظم با تگ <ol> نشان داده می‌شوند. باقی موارد در این لیست‌ها مشابه قبل است.
برای مثال به لیست زیر توجه نمایید.
<ol> <li>متن آيتم اول</li> <li>متن آيتم دوم</li> <li>متن آيتم سوم</li> </ol>
مرحله اول: برای ساخت یک لیست، باید یک تگ <ol> باز می‌کنیم. بدین ترتیب اعلام می‌کنیم که می‌خواهیم یک لیست منظم یا همان orderd List ایجاد کنیم.
مرحله دوم: سپس متن هر آیتم لیست را بین <li> متن آیتم <li/> باز متن مورد نظر را بین آن می‌نویسیم.
مرحله سوم: در آخر <ol/> را می‌نویسیم تا تگ بسته شود.
اگر لیست‌های اچ تی ام ال را دیده باشید, خواهید دید که در این لیست‌ها یک علامت(معمولا دایره تو پر) قرار می‌گیرد.در لیست‌ها امکان تغییر آیکونی که در کنار هر آیتم قرار می‌گیرد وجود دارد. اتریبیوت استایل را اضافه کرده و صفت list-style-type در این اتریبیوت این کار را برای شما انجام می‌دهد. برای اینکار باید به تگ ابتدایی ul این اتریبیوت را اضافه کنید و آیکون مورد نظر را بنویسید.
< "آیکون مورد نظر :ol style ="list-style-type>
لیست موارد قابل استفاده به عنوان آیکون در لیست‌ها به ترتیب زیر است:
- type="1" : در این حالت آیتم‌های لیست بر حسب اعداد مرتب خواهند شد. مانند <"ol list-style-type: "1>
- type="A": در این حالت آیتم‌های لیست با حروف بزرگ الفبا به نمایش خواهد آمد.
- type="a": در این حالت آیتم‌های لیست شما با حروف کوچک الفبا نشان داده خواهند شد.
- type="I": در این حالت در کنار آیتم‌های لیست اعداد یونانی I و II نمایش داده خواهد شد.
- type="i": در این حالت در کنار آیتم‌های لیست اعداد یونانی با حروف کوچک i و ii نمایش داده خواهد شد.
منبع : زومیت
