اکنون شما می‌توانید با کمک آنچه در قسمت‌های قبلی آموزش HTML با هم مرور کردیم، خودتان یک صفحه اچ تی ام ال بنویسید که علاوه بر امکان قرار دادن متن و عنوان در آن، می‌توانید آن‌ها را با عکس و لینک همراه کنید تا جلوه زیباتری به خود بگیرد. اما این جلسه قصد داریم تا با آموزش استفاده از انواع لیست‌ها، چند قدمی شما را به سمت تبدیل شدن به یک برنامه‌نویس سمت کاربر نزدیک‌تر کنیم! با ما همراه شوید
لیست‌ها
کاربرد لیست‌ها در اچ تی ام ال بسیار گسترده است؛ چرا که از منوها گرفته تا بسیاری از المان‌های منظم دیگر صفحه توسط لیست‌ها ایجاد می‌گردند. در اچ‌تی‌ام‌ال سه نوع لیست می‌توانید ایجاد کنید که قواعد نوشتن هر سه شکل شبیه هم هستند؛ ولی در نمایش آن‌ها در مرورگر تفاوت‌هایی وجود دارد. در ادامه بیشتر برایتان توضیح خواهیم داد. این سه نوع عبارت‌اند از:
- unorderd list یا لیست بدون نظم که دارای ترتیب دلخواه است.
- orderd list یا لیست منظم و دارای ترتیب است. مثلا چنین فهرستی بر اساس اعداد یا حروف الفبا مرتب می‌شود.
- حالت سوم نیز لیست توضیحات است که در آن ابتدا عنوان و سپس توضیحات وارد می‌شود که چندان مورد استفاده قرار نمی‌گیرد و ما هم بدان نپرداخته‌ایم.
برای مثال به لیست نامنظم زیر توجه کنید.
متن آیتم اول
متن آیتم دوم
متن آیتم سوم
/>
مراحل ایجاد یک لیست بدون نظم و ترتیب:
مرحله اول: برای ساخت یک لیست، باید یک تگ باز می‌کنیم. بدین ترتیب اعلام می‌کنیم که می‌خواهیم یک لیست نامنظم یا همان Unorderd List ایجاد کنیم.
مرحله دوم: سپس متن هر آیتم لیست را بین متن آیتم باز متن مدنظر را بین آن می‌نویسیم.
مرحله سوم: در آخر را می‌نویسیم تا تگ بسته شود.
اگر لیست‌های اچ تی ام ال را دیده باشید, خواهید دید که در این لیست‌ها یک علامت(معمولا دایره تو پر) قرار می‌گیرد.در لیست‌ها امکان تغییر آیکونی که درکنار هر آیتم قرار می‌گیرد وجود دارد. اتریبیوت list-style-type این کار را برای شما انجام می‌دهد. برای اینکار باید به تگ ابتدایی
- این اتریبیوت را اضافه کنید و آیکون مدنظر را بنویسید.
- < "آیکون مدنظر :ul style="list-style-type>
- لیست موارد قابل استفاده به‌عنوان آیکون در لیست‌ها به ترتیب زیر است:
- disc : درواقع همان دایره‌های تو پر پیش‌فرض هستند. نمونه: circles: در این حالت آیتم‌های لیست شما با دایره به نمایش در خواهد آمد. squares: در این حالت آیتم‌های لیست شما به‌صورت مربع نشان داده خواهند شد. none: در این حالت درکنار آیتم‌های لیست آیکونی وجود نخواهد داشت.
- لیست منظم و با ترتیب:
- لیست منظم با ترتیب مثل فهرستی که بر اساس شماره یا حروف الفبا مرتب شده را ordered list یا لیست منظم می‌گویند.
- لیست‌های منظم با تگ نشان داده می‌شوند. باقی موارد در این لیست‌ها مشابه قبل است.
- برای مثال به لیست زیر توجه کنید.
- متن آیتم اول
- متن آیتم دوم
- متن آیتم سوم
- />
- مرحله اول: برای ساخت یک لیست، باید یک تگ باز می‌کنیم. بدین ترتیب اعلام می‌کنیم که می‌خواهیم یک لیست منظم یا همان orderd List ایجاد کنیم.
- مرحله دوم: سپس متن هر آیتم لیست را بین متن آیتم باز متن مدنظر را بین آن می‌نویسیم.
- مرحله سوم: در آخر <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 نمایش داده خواهد شد.
- نمونه کدمتن آیتم اول متن آیتم دوممتن آیتم سوم</ol>نتیجه‌ای که مرورگر نمایش خواهد داد متن آیتم اولمتن آیتم دوممتن آیتم سوم
- خلاصه قسمت هفتم:
- در این قسمت چیزهایی که یادگرفته‌ایم را به‌صورت کاملا خلاصه مرور می‌کنیم.
- در هفتمین قسمت از سری آموزش HTML و سی‌اس‌اس با لیست‌ها آشنا شده‌ایم. لیست‌ها سه نوع هستند: لیست‌های نامنظم یا unordered list(با ترتیب دلخواه)، لیست‌های دارای ترتیب ordered list (بر اساس شماره یا حروف الفبا و ...) و لیست‌های توضیحیلیست‌های نامنظم و بدون ترتیب با تگ آیتم‌های لیست/> نوشته می‌شوند.لیست‌های منظم و دارای ترتیب با تگ آیتم‌های لیست/> نوشته می‌شوند.
- امیدواریم که اولین بخش از آموزش اچ‌تی‌ام‌ال به سبک زومیت که حاصل تلاش تیم زومیت هست، موفق به جلب رضایت شما زومیتی‌های عزیز شده باشد. تجربیات، پیشنهاد‌ها و نظرات شما بدون شک در ادامه این مقالات آموزشی تأثیر بسزایی خواهد داشت و قدردانی ما را هم به‌همراه خواهد داشت. پس لطفا با ما در ارتباط باشید.
نظرات