htmlطراحی سایت

جلسه ۱۴: عناوین + لیست ها در html

سرآیند HTML و عناصر لیست.
موارد زیر را بیان خواهیم کرد

  • عناوین
  • لیست ها
  • لیست های نامرتب
  • لیست های مرتب شده
  • ویژگی های عنصر را لیست کنید: تایپ و شروع کنید

عناوین

ما قبلاً در دو درس قبلی شاهد استفاده از عنصر h1 بودیم. استاندارد HTML دارای پنج عنصر عنوان اصلی متن است که به طور مناسب از h2 تا h6 نامگذاری شده اند.

لازم به ذکر است که از عناصر عنوان نباید برای دستکاری اندازه قلم عنوان استفاده شود. در عوض ، این سطوح تفاوت معنایی بین یک عنوان اصلی ، زیر عنوان و غیره را نشان می دهد. ما در بخشهای بعدی درباره معنایی HTML و همچنین نحوه تغییر اندازه قلم یک عنصر با Cascading Style Sheets (CSS) بیشتر خواهیم گفت.

<html>
 <head>
   <title>h1 – h6 elements</title>
 </head>
 <body>
   <h1>Heading Level ۱</h1>
   <h2>Heading Level ۲</h2>
   <h3>Heading Level ۳</h3>
   <h4>Heading Level ۴</h4>
   <h5>Heading Level ۵</h5>
   <h6>Heading Level ۶</h6>
 </body>
</html>

آزمون:

0
ایجاد شده در

Quiz 47

1 / 1

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

امتیاز شما

میانگین امتیازها 0%

0%

لیست ها

اغلب اوقات می خواهیم لیستی با تعداد بولت ها یا شماره در محتوای صفحه وب قرار دهیم. این را می توان با لیست های HTML به دست آورد.

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

ما می توانیم یک لیست غیر مرتب برای نمایش مواردی مانند لیستی از کارهای ضروری یا لیستی از اقلام مواد غذایی ایجاد کنیم. برای این کار باید از تگ <ul> همراه با تگ های تو در تو برای موارد لیست استفاده کنیم.

<html>
 <head>
   <title>Things to Get from Grocery Store</title>
 </head>
 <body>
   <h1>Grocery Items</h1>
   <ul>
     <li>Butter</li>
     <li>Milk</li>
     <li>Eggs</li>
     <li>Cereal</li>
   </ul>
 </body>
</html>

لیست های مرتب شده

وقتی آیتم های لیست به ترتیب خاصی مانند دستورالعمل های چرخش در سیستم ناوبری یا مراحل تهیه دستورالعمل تهیه می شوند ، باید از یک لیست مرتب استفاده شود. لیست مرتب شده تقریباً مشابه لیستی غیر مرتب است ، با این تفاوت که ما می خواهیم از برچسب <ol> برای اعلام لیست استفاده کنیم. موارد لیست هنوز در برچسب <li> قرار دارند. موارد لیست به جای موارد بولتی که قبلاً مشاهده کرده ایم ، شماره گذاری می شوند.

<html>
 <head>
   <title>How to Brush Your Teeth</title>
 </head>
 <body>
   <h1>Brushing Instructions</h1>
   <ol>
     <li>Acquire toothbrush and toothpaste</li>
     <li>Squeeze a small amount of paste onto the toothbrush bristles</li>
     <li>Lightly rinse brush + paste with water</li>
     <li>Move brush against teeth in a back and forth motion</li>
   </ol>
 </body>
</html>

ویژگی های عنصر لیست: type و شروع

ویژگی type به ما امکان می دهد سبک گلوله ها را برای لیست های نامرتب یا طرح شماره گذاری را برای لیست های مرتب شده تغییر دهیم.

مقادیر نوع لیست مرتب نشده شامل دایره ، دیسک و مربع است.

<html>
 <head>
   <title>Things to Get from Grocery Store</title>
 </head>
 <body>
   <h1>Grocery Items</h1>
   <!– Disc bullets –>
   <ul type=”disc”>
     <li>Butter</li>
     <li>Milk</li>
     <li>Eggs</li>
     <li>Cereal</li>
   </ul>
   <!– Square bullets –>
   <ul type=”square”>
     <li>Butter</li>
     <li>Milk</li>
     <li>Eggs</li>
     <li>Cereal</li>
   </ul>
 </body>
</html>

مقادیر نوع لیست مرتب شده را می توان برای تغییر طرح شماره گذاری استفاده کرد و شامل موارد زیر است:

۱: طرح عددی پیش فرض
I: اعداد بزرگ رومی
I: اعداد کوچک رومی
A: الفبای بزر
A: حروف کوچک

لیست های مرتب دارای یک ویژگی شروع اضافی هستند که می تواند برای شروع شماره گذاری در مقداری غیر از پیش فرض ۱ مورد استفاده قرار گیرد.

<html>
 <head>
   <title>How to Brush Your Teeth</title>
 </head>
 <body>
   <h1>Brushing Instructions</h1>
   <!– Upper-case Roman Numerals –>
   <ol type=”I”>
     <li>Acquire toothbrush and toothpaste</li>
     <li>Squeeze a small amount of paste onto the toothbrush bristles</li>
     <li>Lightly rinse brush + paste with water</li>
     <li>Move brush against teeth in a back and forth motion</li>
   </ol>
   <!– Lower-case Alphabet –>
   <ol type=”a”>
     <li>Acquire toothbrush and toothpaste</li>
     <li>Squeeze a small amount of paste onto the toothbrush bristles</li>
     <li>Lightly rinse brush + paste with water</li>
     <li>Move brush against teeth in a back and forth motion</li>
   </ol>
   <!– Default numeric scheme, starting at ۵ –>
   <ol type=”1″ start=”5″>
     <li>Acquire toothbrush and toothpaste</li>
     <li>Squeeze a small amount of paste onto the toothbrush bristles</li>
     <li>Lightly rinse brush + paste with water</li>
     <li>Move brush against teeth in a back and forth motion</li>
   </ol>
 </body>
</html>

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

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا