تا به اینجای کار با نحوه اضافه کردن لینک و عکس به صفحات آشنا شدید و حالا در این شماره از آموزش، قصد داریم تا به شما نحوه قرار دادن انواع لیست‌ها را آموزش دهیم.
در ادامه با کافه دوستی همراه باشید.
اکنون شما می‌توانید با کمک آنچه در قسمت‌های قبلی آموزش 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 نمایش داده خواهد شد.
نمونه کد:
<ol>
<li/>متن آیتم اول<li>
<li/> متن آیتم دوم<li>
<li/>متن آیتم سوم<li>
</ol>
نتیجه‌ای که مرورگر نمایش خواهد داد
- متن آیتم اول
- متن آیتم دوم
- متن آیتم سوم
خلاصه قسمت هفتم:
در این قسمت چیزهایی که یادگرفته‌ایم را به صورت کاملا خلاصه مرور می‌کنیم.
- در هفتمین قسمت از سری آموزش HTML و سی‌اس‌اس با لیست‌ها آشنا شده‌ایم.
- لیست‌ها سه نوع هستند: لیست‌های نامنظم یا unordered list(با ترتیب دلخواه)، لیست‌های دارای ترتیب ordered list (بر اساس شماره یا حروف الفبا و ...) و لیست‌های توضیحی
- لیست‌های نامنظم و بدون ترتیب با تگ
<ul>آیتم‌های لیست<ul/>نوشته می‌شوند. - لیست‌های منظم و دارای ترتیب با تگ
<ol>آیتم‌های لیست<ol/>نوشته می‌شوند.
امیدواریم که هفتمین بخش از آموزش اچ‌تی‌ام‌ال به سبک کافه دوستی که حاصل تلاش تیم ککافه دوستی هست، موفق به جلب رضایت شما کافه دوستی های عزیز شده باشد. تجربیات، پیشنهادات و نظرات شما بدون شک در ادامه این مقالات آموزشی تاثیر بسزایی خواهد داشت و قدردانی ما را هم به همراه خواهد داشت. پس لطفا با ما در ارتباط باشید. قسمت بعدی یکشنبه پس با ما همراه باشید.
از لینک های آماده شده ی زیر می توانید به قسمت های قبلی دسترسی داشته باشید.
تایم لپس چیست ؟ طرز کار تصاویر Time Lapse شارژ کردن گوشی با شارژر های مختلف آپدیت جدید تلگرام: بخش استیکرهای محبوب، فضای شخصی نامحدود و موار گلکسی نوت 7 به طور رسمی معرفی شداسکنر عنبیه چشم و 4 گیگابایت حاف جوانسازی پوست فقط در 28 روز !؟ سارقان مسلح از بازی Pokemon Go برای به دام انداختن قربانیان استف عملکرد سنسور عنبیه گلکسی نوت 7 فاش شد این تکنیک آرایشی به سرعت جوش های صورت تان را می پوشاند!!! جرم گرفتن دندان به دلیل 7 خطا