نحوه استفاده از ul در html چگونه موارد لیست را به صورت افقی قرار دهیم؟ جایی که سبک های لیست در قالب Twenty Eleven نوشته شده است

زبان نشانه گذاری فرامتن HTML دارای یک برچسب است

، برای ایجاد لیست های گلوله ای استفاده می شود. توسط همه پشتیبانی می شود مرورگرهای مدرنو به شما امکان می دهد عناصر را به ترتیبی که نیازی به شماره گذاری ندارد نمایش دهید. به عنوان مثال، اغلب موارد منو و هر چیزی که مربوط به لیست‌های موجود در صفحه است را نمایش می‌دهد: ظروف، محصولات، تجهیزات، ابزار و موارد دیگر که باید بدون نشان دادن اولویت یک مورد خاص فهرست شوند.

نحو تگ کنید

• عنصر شماره 1
• عنصر شماره 2
• عنصر شماره 3
• ...

این کد به یک لیست گلوله شده در سایت ترجمه می شود:

• عنصر شماره 1
• عنصر شماره 2
• عنصر شماره 3

برچسب بزنید

نیاز دارد استفاده اجباریبرچسب بسته شدن
.

برای تشکیل عناصر لیست، از یک تگ جفت استفاده می شود. بین تگ‌های باز و بسته، کلمات، عبارات، پاراگراف‌ها، تصاویر، تکه‌های کد و بسیاری موارد دیگر وجود دارد که محتوای لیست گلوله‌شده است.

محتوای یک لیست گلوله ای چه می تواند باشد؟

این می‌تواند متن‌های مختلفی باشد، از جمله کلمات، عبارات و پاراگراف‌ها، تصاویر، لیست‌های تودرتو، تکه‌هایی از کد php و موارد دیگر که نیاز به علامت‌گذاری ساده دارند.

هر مورد لیست گلوله‌ای به‌طور پیش‌فرض 40 پیکسل به سمت راست فرورفته است. با استفاده از سبک های CSS، می توانیم نمایشگر را تغییر دهیم این لیستبه صلاحدید خود برچسب بزنید

مبتنی بر بلوک است، بنابراین کل منطقه در دسترس را اشغال می کند، که توسط لبه صفحه، قاب جدول یا سایر عناصر صفحه محدود می شود.
پیوست‌های فهرست در فهرست مجاز هستند.

به عنوان مثال

• عنصر شماره 1
• • مورد #2-1
  • عنصر شماره 2-2
  • عنصر شماره 2-3
• عنصر شماره 3
• ...

ویژگی ها و ویژگی ها را تگ کنید

ویژگی تگ پرکاربرد

یک ویژگی نوع است که نشان می دهد نشانگر لیست چگونه خواهد بود. می تواند مقادیر زیر را بگیرد

1. type="disc" - نشانگر به شکل یک دایره پر شده (این مقدار پیش فرض است). نمونه دیسک کمی بالاتر بود.

2. type="circle" - نشانگر به شکل یک دایره شفاف

به عنوان مثال:

• عنصر شماره 1
• عنصر شماره 2

• عنصر شماره 1
• عنصر شماره 2

3. type="square" - نشانگر به شکل مربع

به عنوان مثال:

• عنصر شماره 1
• عنصر شماره 2

و در اینجا چیزی است که در صفحه به نظر می رسد:

• عنصر شماره 1
• عنصر شماره 2
تبصره 1

در CSS، نوع گلوله با استفاده از ویژگی list-style-type مشخص می شود:

• ...

بیایید ببینیم که لیست-style-type چه مقادیری می تواند داشته باشد:

• دیسک - نشانگر به شکل دایره (مثال در بالا بود)
• دایره - نشانگر به شکل یک دایره شفاف (مثال در بالا بود)
• مربع - نشانگر به شکل مربع (مثال در بالا بود)
• اعشاری - نشانگر به صورت فهرست شماره گذاری شده به اعداد عربی: 1، 2، 3، ...
• اعشاری-پیشرو-صفر - نشانگری به شکل یک لیست شماره گذاری شده به اعداد عربی با صفر اول: 01، 02، 03، ...
• رومی پایین - یک نشانگر به شکل یک لیست شماره گذاری شده در الفبای رومی با حروف کوچک: i، ii، iii، iv، v
• رومی بالا - نشانگر به شکل یک لیست شماره گذاری شده در الفبای رومی با حروف بزرگ: I، II، III، IV، V
• لاتین پایین - نشانگر به شکل لیستی در الفبای لاتین با حروف کوچک: a، b، c، d، ...
• لاتین بالا - نشانگر به شکل لیستی در الفبای لاتین با حروف بزرگ: A، B، C، D، ...
• یونانی پایین - نشانگری به شکل فهرستی در الفبای یونانی با حروف کوچک
• upper-greek - یک نشانگر به شکل لیستی در الفبای یونانی با حروف بزرگ
تبصره 2

ویژگی را می توان به خود تگ اختصاص داد

، و برچسب ها
• . هنگام تنظیم یک ویژگی برای یک برچسب
  تمام موارد لیست همانطور که با ویژگی نشان داده شده است نمایش داده می شود. اما ما می توانیم به این یا آن عنصر نمایش خود را بدهیم. مثال در تصویر:

  کد به شکل زیر است:

  • عنصر شماره 1
  • عنصر شماره 2
  • عنصر شماره 3

  • عنصر شماره 1
  • عنصر شماره 2
  • عنصر شماره 3

  تغییر نشانگرهای برچسب

  با استفاده از CSS

  موارد لیست گلوله ایجاد شده توسط برچسب

  ، می توان با تصاویر دلخواه علامت گذاری کرد. CSS برای تغییر نوع نشانگر استفاده می شود. به عنوان مثال

  • عنصر شماره 1
  • عنصر شماره 2
  • عنصر شماره 3

  و این چیزی است که در صفحه به نظر می رسد:

  • عنصر شماره 1
  • عنصر شماره 2
  • عنصر شماره 3

  سی با استفاده از CSSما می توانیم انواع دیگری از نمایشگر نشانگر را تنظیم کنیم. اما هنگام تعیین هر سبکی برای یک برچسب باید این را به خاطر داشته باشید

  ، برای همه عناصر لیست اعمال می شود.
  اگر تصمیم دارید لیست های استاندارد ul و li را تغییر دهید، این موضوع برای شما جالب خواهد بود. زیرا در اینجا چندین مورد را یاد خواهید گرفت راه حل های اصلی. که مطمئناً به شما کمک می کند تا ظاهر استاندارد را به یک ظاهر منحصر به فرد تغییر دهید، جایی که از سبک CSS برای طراحی لیست ها استفاده می شود. مزیت این است که ما فقط از یک کلاس در سراسر استفاده خواهیم کرد که ظاهر را به شدت تغییر می دهد. علاوه بر این پارامترها، می توانید تعیین کنید که لیست باید از چه شماره ای شروع شود. مقدار شروع پیش‌فرض برای لیست‌های شماره‌دار اول یا حرف A است.

  با خارج شدن از اصول اولیه، اکنون نگاهی دقیق‌تر به عناصر مورد استفاده برای ارائه ساختار و معنا به بخش‌های مختلف طراحی خواهیم داشت. اگر کسی نمی داند، ul و li گزینه بسیار بهتری نسبت به متن ساده هستند زیرا وقتی متن پیچیده می شود، به خصوص در تلفن همراه، کاملاً فرورفته می شود و دور نشانگر نمی پیچد.

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

  همچنین باید بدانید که لیست ها در ابتدا شامل چندین عنصر هستند:

  1 . اطلاعات بی نظم
  2 . اطلاعات سازماندهی شده
  3 . تعاریف

  بیایید نصب را شروع کنیم:

  1. گزینه:

  
  
  • مورد فهرست
  
  
  • لیست منحصر به فرد
  
  
  • لیست های اصلی
  
  
  • ZORNET.RU - مدیر وب سایت
  
  
  • یه لیست دیگه
  
  
  
  CSS

  کسانگلوپان (
  حاشیه: 19px 0 0;
  بالشتک: 0;
  list-style: هیچکدام;
  تنظیم مجدد: li;
  }
  ksangelopan li (
  حاشیه: 2px جامد #3575ad;
  پس زمینه: #d7dee4;
  موقعیت: نسبی;
  حاشیه پایین: 17 پیکسل.
  بالشتک: 15px 9px;
  }
  ksangelopan li:hover (
  z-index: 1;
  }
  ksangelopan li:before (
  حاشیه: 2px جامد #2270b3;
  موقعیت: مطلق;
  بالا: -14px;
  بالشتک: 3px 9px;
  اندازه فونت: 11px;
  فونت-وزن: پررنگ;
  رنگ: #246 eaf;
  پس زمینه: #f2f4f7;
  ضد افزایش: li;
  محتوا: counter(li);
  -webkit-transition-duration: 0.4s;
  مدت زمان انتقال: 0.4 ثانیه;
  }
  ksangelopan li:hover:before (
  پس زمینه: #2672b3;
  رنگ: #f7f9fb;
  -webkit-transform: translate(-11px, 0);
  -ms-transform: translate(-11px, 0);
  -o-transform: translate(-11px, 0);
  transform: translate(-11px, 0);
  }
  ksangelopan li:after (
  محتوا: "";
  موقعیت: مطلق;
  مدت زمان انتقال: 0.3 ثانیه;
  -webkit-transition-property: عرض.
  transition-property: width;
  z-index: -1;
  پس زمینه: #FFF;
  ارتفاع: 100%;
  سمت چپ: 0;
  بالا: 0;
  عرض: 0;
  }
  ksangelopan li:hover:after (
  عرض: 100%؛
  }

  
  این همه برای نصب است.

  2 گزینه دوم:

  

  
  
  • مورد فهرست
  
  
  • لیست منحصر به فرد
  
  
  • لیست های اصلی
  
  
  • ZORNET.RU - مدیر وب سایت
  
  
  • یه لیست دیگه
  
  
  
  CSS

  Beleduzlopamges (
  margin-bottom: 8px;
  بالشتک: 0;
  list-style: هیچکدام;
  تنظیم مجدد: li;
  }
  .beleduzlopamges li (
  موقعیت: نسبی;
  حاشیه: 2px جامد #195588;
  پس زمینه: #eff3f7;
  padding: 15px 19px 15px 27px;
  حاشیه: 12px 0 12px 40px;
  -webkit-transition-duration: 0.3s;
  مدت زمان انتقال: 0.3 ثانیه;
  }
  .beleduzlopamges li:hover (
  پس زمینه: #FFF;
  }
  .beleduzlopamges li:before (
  ارتفاع خط: 32 پیکسل؛
  موقعیت: مطلق;
  بالا: 4px;
  سمت چپ: -39px;
  عرض: 39 پیکسل؛
  text-align: center;
  اندازه فونت: 16px;
  فونت-وزن: پررنگ;
  رنگ: #f9f5f5;
  پس زمینه: #275b88;
  ضد افزایش: li;
  محتوا: counter(li);
  مدت زمان انتقال: 0.2 ثانیه;
  }
  .beleduzlopamges li:hover:before (
  عرض: 46 پیکسل
  }
  .beleduzlopamges li:after (
  موقعیت: مطلق;
  سمت چپ: 0;
  بالا: 4px;
  محتوا: "";
  ارتفاع: 0;
  عرض: 0;
  حاشیه: 16 پیکسل جامد شفاف.
  حاشیه-چپ-رنگ: #275b88;
  -webkit-transition-duration: 0.2s;
  مدت زمان انتقال: 0.2 ثانیه;
  }
  .beleduzlopamges li:hover:after (
  حاشیه-چپ: 6px;
  }

  
  شما می توانید به طور مستقل گامای مرکزی را برای مطابقت با سبک اصلی سایت تنظیم کنید.

  3 گزینه سوم:

  

  
  
  • اسکریپت برای uCoz
  
  
  • الگوهای uCoz
  
  
  • طراحی سایت
  
  
  • سبک های وب سایت
  
  
  • استایل دهی با CSS
  
  
  
  CSS

  Nizualisanelag (
  بالشتک: 0;
  list-style: هیچکدام;
  تنظیم مجدد: li;
  }
  nizualisanelag li (
  موقعیت: نسبی;
  padding: 9px 17px 17px 25px;
  حاشیه سمت چپ: 39 پیکسل؛
  مدت زمان انتقال: 0.2 ثانیه;
  مکان نما: اشاره گر
  فونت-وزن: پررنگ;
  رنگ: #343638;
  }
  nizualisanelag li:before (
  حاشیه: 3px جامد شفاف.
  ارتفاع خط: 35 پیکسل؛
  موقعیت: مطلق;
  بالا: 0;
  سمت چپ:-29px;
  عرض: 41 پیکسل
  text-align:center;
  اندازه فونت: 14px;
  فونت-وزن: پررنگ;
  رنگ: #619dce;
  ضد افزایش: li;
  محتوا: counter(li);
  مدت زمان انتقال: 0.3 ثانیه;
  
  box-sizing: border-box;
  }
  nizualisanelag li:hover:before (
  رنگ: #337AB7;
  }
  nizualisanelag li:after (
  موقعیت: مطلق;
  بالا: 0;
  سمت چپ: -29 پیکسل.
  عرض: 41 پیکسل؛
  ارتفاع: 41px;
  حاشیه: 5px جامد #468bd0;
  شعاع مرزی: 50%;
  محتوا: "";
  Opacity: 0.5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
  nizualisanelag li:hover:after (
  انیمیشن: 500ms ease-in-out 0s bounceIn;
  کدورت: 1;
  }

  @keyframes bounceIn (
  0% {
  کدورت: 0;
  تبدیل: scale3d(.3، 0.3، 0.3);
  }
  20% {
  تبدیل: scale3d(1.3، 1.3، 1.3);
  }
  40% {
  تبدیل: scale3d(.9، .9، 0.9);
  }
  60% {
  کدورت: 1;
  transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  تبدیل: scale3d(.97، .97، 0.97);
  }
  به (
  کدورت: 1;
  تبدیل: scale3d(1, 1, 1);
  }
  }

  
  همراه با انیمیشن زیبا

  4 گزینه چهارم:

  

  
  
  • اولین عنصر برای سایت
  
  
  • عنصر دوم برای سایت
  
  
  • عنصر سوم برای سایت
  
  
  • عنصر چهارم برای سایت
  
  
  • عنصر پنجم برای سایت
  
  
  
  CSS

  بالشتک: 0;
  list-style: هیچکدام;
  }
  .kudezamuden li(
  padding: 6px;
  }
  .kudezamuden li:before (
  padding-right: 11px;
  فونت-وزن: پررنگ;
  رنگ: #4979a0;
  محتوا: "\2606";
  مدت زمان انتقال: 0.4 ثانیه;
  }
  .kudezamuden li:hover:before (
  رنگ: #235e90;
  محتوا: "\2605";
  }

  
  مشابه نسخه های قبلی، فقط خود آیکون تغییر کرده است.

  به طور کلی، این مجموعه کوچکی از لیست هایی است که استاد وب می تواند ایجاد کند لیست خوبیدر پورتال، جایی که خودش می تواند آن را بیشتر طراحی کند، همانطور که خودش می خواهد آن را ببیند.

  اگر بخواهید موارد را به جای لیست گلوله‌دار در یک لیست شماره‌دار قرار دهید، از HTML مرتب شده استفاده می‌شود. این لیست با استفاده از تگ ol ایجاد شده است. شماره گذاری از یک شروع می شود و برای هر عنصر لیست مرتب شده بعدی با تگ li یک افزایش می یابد.

  تنها تفاوت این است که این تگ به شدت برای شماره گذاری لیست ها ساخته شده است. نام تگ از مخفف انگلیسی "فهرست مرتب" - یک لیست شماره گذاری شده است.

  نحو تگ کنید

  1. عنصر شماره 1
  2. عنصر شماره 2
  3. عنصر شماره 3
  4. ...

  جایی که ویژگی type="value" می تواند مقادیر زیر را بگیرد

  • A - نشانگرها را به شکل حروف لاتین بزرگ (A، B، C..) تنظیم می کند.
  • a - نشانگرها را به شکل حروف لاتین کوچک (a، b، c..) تنظیم می کند.
  • I - نشانگرها را به شکل اعداد رومی بزرگ (I، II، III، IV..) تنظیم می کند.
  • i - نشانگرها را به شکل اعداد رومی کوچک (i، ii، iii، iv..) تنظیم می کند.
  • 1 (پیش فرض) - نشانگرها را به شکل اعداد عربی (1، 2، 3..) تنظیم می کند.

  ویژگی start="value" مقدار اولیه (مقدار شروع) گزارش را مشخص می کند.

  ویژگی reversed شمارش معکوس را مشخص می کند (در صورت لزوم).

  برچسب بزنید

  نیاز به استفاده اجباری از برچسب بسته شدن دارد

  برای تشکیل عناصر لیست، از یک تگ جفت استفاده می شود

  • . بین تگ‌های باز و بسته، کلمات، عبارات، پاراگراف‌ها، تصاویر، تکه‌های کد و بسیاری موارد دیگر وجود دارد که محتوای لیست گلوله‌شده است.

    توجه داشته باشید

    در داخل لیست می توانید حساب را به حساب خود تغییر دهید. برای این منظور یک مشخصه ویژه value="" روی تگ وجود دارد.

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

    1. عنصر شماره 1
    10. عنصر شماره 2
    11. عنصر شماره 3

  نمونه هایی با لیست های شماره گذاری شده در html (

  )

  مثال 1. فهرست شماره دار HTML با حروف لاتین

  مثال با حروف بزرگ

  1. عنصر شماره 1
  2. عنصر شماره 2
  3. عنصر شماره 3

  1. عنصر شماره 1
  2. عنصر شماره 2
  3. عنصر شماره 3

  مثال با حروف کوچک

  1. عنصر شماره 10
  2. عنصر شماره 11
  3. عنصر شماره 12

  این چیزی است که در صفحه به نظر می رسد:

  1. عنصر شماره 1
  2. عنصر شماره 2
  3. عنصر شماره 3

  مثال 2. فهرست شماره دار HTML با حروف رومی

  مثال با حروف بزرگ

  1. عنصر شماره 1
  2. عنصر شماره 2
  3. عنصر شماره 3

  این چیزی است که در صفحه به نظر می رسد:

  1. عنصر شماره 1
  2. عنصر شماره 2
  3. عنصر شماره 3

  مثال با حروف کوچک

  1. عنصر شماره 1
  2. عنصر شماره 2
  3. عنصر شماره 3

  این چیزی است که در صفحه به نظر می رسد:

  1. عنصر شماره 1
  2. عنصر شماره 2
  3. عنصر شماره 3

  مثال 3. لیست شماره گذاری شده html موقعیت شروع متفاوت

  مثالی که قابلیت های ویژگی start را نشان می دهد که به شما امکان می دهد مقدار شروع شمارنده را تنظیم کنید.

  50. عنصر شماره 1
  51. عنصر شماره 2
  52. عنصر شماره 3

  این چیزی است که در صفحه به نظر می رسد:

  1. عنصر شماره 1
  2. عنصر شماره 2
  3. عنصر شماره 3

  مثال 4. تغییر تعداد در لیست های شماره دار html

  در زیر نمونه ای با قابلیت تغییر مقادیر شمارنده با استفاده از ویژگی value هنگام نمایش عناصر جدید در تگ ها آورده شده است.

  • .

    10. عنصر شماره 1
    11. عنصر شماره 2
    100. عنصر شماره 3
    101. عنصر شماره 4

    این چیزی است که در صفحه به نظر می رسد:

    1. عنصر شماره 1
    2. عنصر شماره 2
    3. عنصر شماره 3
    4. عنصر شماره 4

    مثال 5. لیست شماره گذاری معکوس در html

    در زیر نمونه ای از لیست شماره گذاری شده معکوس (شمارش به ترتیب معکوس) آورده شده است.

    10. عنصر شماره 1
    11. عنصر شماره 2
    12. عنصر شماره 3
    13. عنصر شماره 4

    این چیزی است که در صفحه به نظر می رسد:

    1. عنصر شماره 1
    2. عنصر شماره 2
    3. عنصر شماره 3
    4. عنصر شماره 4

    عنصر

    (از انگلیسی "لیست نامرتب") یک لیست گلوله ای (نامرتب) ایجاد می کند. به طور معمول، عنصر
    برای ایجاد لیست هایی استفاده می شود که در آن تغییر ترتیب آیتم ها در این لیست معنی لیست را به طور قابل توجهی تغییر نمی دهد.

    برچسب بزنید

    به عناصر بلوک اشاره دارد، بنابراین تمام عرض موجود در آن را اشغال می کند و اندازه ارتفاع به مقدار محتوا بستگی دارد.

    موارد برای لیست های شماره گذاری شده با استفاده از یک برچسب تعریف می شوند

    • ، که علاوه بر متن، ممکن است شامل سایر عناصر HTML (لیست ها، تصاویر، سرفصل ها، پاراگراف ها و غیره) باشد. به طور پیش فرض، لیست های گلوله ایدر صفحه وب به صورت لیستی نمایش داده می شوند که با یک دایره سیاه کوچک شروع می شود. مرورگرها هنگام نمایش آیتم های لیست، یک حاشیه کوچک به سمت چپ اضافه می کنند.

      توجه:اگر به

      اعمال می شود ویژگی CSS، سپس عناصر
      • این خواص را به ارث می برند.

        توصیه:برای تغییر نوع نشانگر، از ویژگی list-style-type CSS یا ویژگی list-style-image استفاده کنید که به شما امکان می دهد نشانگرها را با تصاویر جایگزین کنید. برای ایجاد لیست های شماره دار، از تگ استفاده کنید

        .

        نحو

        ...
        • ...
        ...

        برچسب بسته شدن

        مورد نیاز.

        صفات

        compactDeprecated در HTML5 تورفتگی و فاصله خطوط را کاهش می دهد. type HTML5 نوع نشانگر لیست را تنظیم می کند.

        برای این مورد موجود است ویژگی های جهانیو رویدادها.

        یک ظاهر طراحی پیش فرض

        اکثر مرورگرها عنصر را نمایش می دهند

        با موارد زیر مقادیر CSSپیش فرض:

        Ul (نمایش: بلوک؛ نوع فهرست: دیسک؛ حاشیه-بالا: 1em؛ حاشیه-پایین: 1 em؛ حاشیه-چپ: 0؛ حاشیه-راست: 0؛ بالشتک-چپ: 40 پیکسل؛ )

        تفاوت بین HTML 4.01 و HTML5

        ویژگی های فشرده و نوع در HTML5 پشتیبانی نمی شوند.

        مثال استفاده:

        لیست HTML نامرتب:

        HTML مثال:

        خودتان آن را امتحان کنید
        • قهوه
        • چای
        • کاکائو

        مشخصات

        مشخصات	وضعیت
        استاندارد زندگی WHATWG HTML (WHATWG)	استاندارد زندگی
        HTML 4.01 (W3C)	توصیه
        HTML5 (W3C)	توصیه
        HTML 5.1 (W3C)	توصیه

        پشتیبانی از مرورگر

        خودتان آن را امتحان کنید - مثال

        چگونه می توانم لیست را با عددی غیر از 1 شروع کنم؟

        بیایید به گفتگوهای خود در مورد آغاز html ادامه دهیم. در این مقاله می خواهم در مورد نحوه ایجاد پاراگراف ها، لیست ها و عنوان ها در متن صحبت کنم. و همچنین در مورد تک تگ ها
        و

        ---

        .

        خواندن اولین درس از این مجموعه و همچنین مقاله مقدماتی در مورد شروع مطالعه html را برای کسانی که هنوز با آن آشنایی ندارند اکیداً توصیه می کنم.

        اکنون به مطالعه برچسب ها ادامه خواهیم داد. من فرض می کنم که خواننده قبلاً با مطالب مقاله های بالا آشنا است.

        مثل همیشه برنامه کاری:

        1. پاراگراف ها
        2. خط می شکند
           
        3. فهرست ها و عناصر فهرست
        4. سرفصل ها
        5. حاکمان افقی

           ---

        پاراگراف ها

        متن تقریباً همیشه از پاراگراف تشکیل شده است. پاراگراف عنصری از متن است که یک فکر کامل را منتقل می کند.

        در html، یک پاراگراف، همانطور که از عنوان مشخص است، با علامت نشان داده می شود. حرف "p" از کلمه "paragraph" گرفته شده است که فقط به معنای "بند" است.

        بیایید به یک مثال نگاه کنیم:

        متن بند اول. حاوی یک فکر است. اما اکنون فکر به پایان رسیده است.
        

        
        

        فکر دیگری از قبل شروع شده است و ما آن را در پاراگراف دیگری می نویسیم.
        

        همانطور که می بینید استفاده از پاراگراف ها بسیار ساده است و نیاز به اظهار نظر خاصی ندارد. اگر در مرورگر به این کد نگاه کنیم، دو خط را می بینیم که یک خط خالی بین آنها وجود دارد. در متون روسی، مرسوم است که یک پاراگراف را نه با یک خط خالی، بلکه با انتقال خط اول به راست جدا کنید. اما این دقیقا همان قالب بندی است که اغلب در اینترنت استفاده می شود، بنابراین اغلب در متون روسی زبان باقی می ماند. با این حال، اگر این رفتار را دوست ندارید، می توانید آن را با استفاده از CSS تغییر دهید.

        خط می شکند
        

        گاهی اوقات لازم است یک خط را بدون تمام کردن یک فکر یا بستن یک پاراگراف ترجمه کنید. یعنی فقط به یک خط جدید بروید. یک برچسب واحد برای این وجود دارد
        . در اینجا نمونه ای از کاربرد آن است:

        باد با شادی می وزد
        
        و قایق سرعت می گیرد
        
        او در امواج می دود
        با بادبان های برافراشته.
        

        این قطعه از شعر A.S. پوشکین به ما کمک کرد تا عملکرد تگ را به تصویر بکشیم
        . من به طور خاص دو خط آخر این رباعی را در یک خط کد قرار دادم تا نشان دهم که خطوط به یک خط جدید منتقل می شوند نه به این دلیل که ما شکسته های خط را قرار داده ایم، بلکه به این دلیل که برچسب ها را قرار داده ایم.
        . این تگ بسیار ساده است و نیازی به توضیح دقیق ندارد، بنابراین بحث در مورد آن را در اینجا متوقف می کنیم.

        لیست ها،

        و عناصر را فهرست کنید

        گاهی لازم است چیزی را در متن فهرست کنید. برای این منظور از سه تگ ul، ol، li استفاده می شود. همه این تگ ها تگ های کانتینری هستند، اما تگ همیشه در یکی از یا کانتینرها قرار دارد و خارج از آنها معنایی ندارد. ظرف ul زمانی استفاده می شود که به ترتیب موارد ذکر شده اهمیتی نمی دهیم و نمی خواهیم روی ترتیب ظاهر شدن آنها تمرکز کنیم. برعکس، تگ ol توجه را به ترتیب عناصر متمرکز می کند و به طور خودکار هر خط را شماره گذاری می کند. بیایید به یک مثال نگاه کنیم:

        
        
        • نان
        
        
        • پای
        
        
        • قرص نان
        
        
        • پای
        
        

        در صفحه مرورگر این کد به شکل زیر خواهد بود:

        • نان
        • پای
        • قرص نان
        • پای

        اگر به سادگی تگ ul را با تگ ol جایگزین کنیم، یک لیست شماره دار دریافت می کنیم:

        
        
        1. نان
        
        
        2. پای
        
        
        3. قرص نان
        
        
        4. پای
        
        

        حالا به نظر می رسد این است:

        1. نان
        2. پای
        3. قرص نان
        4. پای

        هیچ کس تودرتو کردن یک لیست را در لیست دیگر ممنوع نمی کند و لیست های تودرتو را با لیست های فرعی تشکیل می دهد:

        
        ابزار:
        
        • اره
        
        
        • پیچ گوشتی
          
          
          
          1. مستقیم
          
          
          2. صلیب
          
          
          
          
        
        
        • مته
        
        

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

        البته مثل همه چیزهای دیگر ظاهراین عناصر را می توان فراتر از تشخیص با استفاده از CSS تغییر داد.

        سرفصل ها

        البته پاراگراف ها به ساختار اسناد کمک می کنند. اما برای اینکه یک متن بزرگ را به قسمت های منطقی کوچکتر تقسیم کنید، می توانید هر یک از آنها را عنوان کنید. هر بخش می‌تواند شامل بخش‌های فرعی دیگری با عنوان‌های سطح پایین‌تر خود و غیره باشد. برای تنظیم عنوان، از برچسب ها استفاده کنید ، که در آن "x" یک عدد از 1 تا 6 است. هر چه این عدد بیشتر باشد، عنوان کمتر است. یعنی عنوان سطح بالا h1 و عنوان سطح پایین h6 نامیده می شود. به طور پیش فرض، متن این سرفصل ها با فونت بزرگ و تورفتگی نمایش داده می شود. این متن در کل خط نمایش داده می شود، یعنی تگ های hx تگ های بلوکی هستند. تگ h1 بزرگترین فونت و تگ h6 کوچکترین فونت را دارد. به عنوان یک قاعده، یک، حداکثر دو تگ سطح بالای h1 در یک صفحه وجود دارد. با کاهش سطح، تعداد تگ ها افزایش می یابد. اما به ندرت پیش می‌آید که یک وب‌مستر بتواند متن را آنقدر تجزیه کند که نیاز به سرفصل‌های سطح 5 یا 6 داشته باشد. حتی سطح 4 نیز به ندرت استفاده می شود.

        حرف کمتر، عمل بیشتر!