تا به اینجای کار با نحوه اضافه کردن لینک و عکس به صفحات آشنا شدید و حالا در این شماره از آموزش، قصد داریم تا به شما نحوه قرار دادن انواع لیستها را آموزش دهیم.
اکنون شما میتوانید با کمک آنچه در قسمتهای قبلی آموزش HTML با هم مرور کردیم، خودتان یک صفحه اچ تی ام ال بنویسید که علاوه بر امکان قرار دادن متن و عنوان در آن، می توانید آنها را با عکس و لینک همراه کنید تا جلوه زیباتری به خود بگیرد. اما این جلسه قصد داریم تا با آموزش استفاده از انواع لیستها، چند قدمی شما را به سمت تبدیل شدن به یک برنامه نویس سمت کاربر نزدیکتر کنیم!
کاربرد لیستها در اچ تی ام ال بسیار گسترده است؛ چرا که از منوها گرفته تا بسیاری از المانهای منظم دیگر صفحه توسط لیستها ایجاد میگردند. در اچتیامال سه نوع لیست میتوانید ایجاد کنید که قواعد نوشتن هر سه شکل شبیه هم هستند؛ ولی در نمایش آنها در مرورگر تفاوتهایی وجود دارد. در ادامه بیشتر برایتان توضیح خواهیم داد. این سه نوع عبارتند از:
برای مثال به لیست نامنظم زیر توجه نمایید.
<ul> <li/>متن آیتم اول<li> <li/> متن آیتم دوم<li> <li/>متن آیتم سوم<li> <ul/>
مرحله اول: برای ساخت یک لیست، باید یک تگ <ul>
باز میکنیم. بدین ترتیب اعلام میکنیم که میخواهیم یک لیست نامنظم یا همان Unorderd List ایجاد کنیم.
مرحله دوم: سپس متن هر آیتم لیست را بین <li>
متن آیتم <li/>
باز متن مورد نظر را بین آن مینویسیم.
مرحله سوم: در آخر <ul/>
را مینویسیم تا تگ بسته شود.
اگر لیستهای اچ تی ام ال را دیده باشید, خواهید دید که در این لیستها یک علامت(معمولا دایره تو پر) قرار میگیرد.در لیستها امکان تغییر آیکونی که در کنار هر آیتم قرار میگیرد وجود دارد. اتریبیوت list-style-type این کار را برای شما انجام میدهد. برای اینکار باید به تگ ابتدایی <ul> این اتریبیوت را اضافه کنید و آیکون مورد نظر را بنویسید.
< "آیکون مورد نظر :ul style="list-style-type>
لیست موارد قابل استفاده به عنوان آیکون در لیستها به ترتیب زیر است:
لیست منظم با ترتیب مثل لیستی که بر اساس شماره یا حروف الفبا مرتب شده را 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>
لیست موارد قابل استفاده به عنوان آیکون در لیستها به ترتیب زیر است:
منبع : زومیت
پیوندها
[1] https://www.asrepayesh.com/category/28/%D8%AF%D8%A7%D9%86%D8%B4%D9%86%D8%A7%D9%85%D9%87
[2] https://www.asrepayesh.com/category/232/%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C
[3] https://www.asrepayesh.com/category/235/%D8%B2%D8%A8%D8%A7%D9%86-%D9%87%D8%A7
[4] https://www.asrepayesh.com/category/287/%D8%B2%D8%A8%D8%A7%D9%86-html