برچسب پاراگراف جدید برچسب های اصلی (برچسب ها) html. قوانین و ترتیب نوشتن تگ ها

برچسب هایی که پاراگراف، فضا، بلوک HTML و پاراگراف را تعریف می کنند

با جزئیات در نظر بگیرید بلوک ها و پاراگراف های HTMLبه عنوان عناصر یک صفحه وب

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

  -

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

کد زیر را در نظر بگیرید:

نتیجه:

ما می توانیم آن را ببینیم پاراگراف های HTMLبه صورت عمودی فرورفته می شوند - این یکی از ویژگی های برچسب ها است. بلوک های HTML

برچسب ها نمی توانند حاوی موارد دیگر یا باشند

تگ ها و در اصل یک چیز هستند، اما کنسرسیوم W3C استفاده از حروف کوچک را توصیه می کند. در نسخه جدید HTML، مانند XHTML مدرن، استفاده از حروف بزرگ هنگام نوشتن برچسب ممنوع است.

مسدود کردن

فضای HTML از جدول کاراکترهای خاص

فضای HTMLبه شما امکان می دهد فاصله بین کلمات و کاراکترها را افزایش دهید.

در مورد فاصله بین کلمات، مهم نیست که چه تعداد در Notepad، یعنی در کد منبع وجود داشته باشد، تنها یکی در صفحه وب نمایش داده می شود. اگر نیاز به افزایش فاصله دارید - از کاراکتر فاصله از جدول نمادها استفاده کنید. شما می‌پرسید: چرا به این مقادیر رمزگذاری شده کاراکترهای معمولی نیاز داریم؟ - پاسخ می دهم: برای نمایش مثلاً چنین براکت هایی لازم است< >. به عبارت دیگر، برای نمایش برچسب ها روی صفحه، در ویرایشگر خود می نویسم: . برچسب ها همانطور که به یاد داریم، متن را به monospace (تایپینگ) تبدیل کنید.

راه های نمایش پاراگراف HTML

نمونه های خروجی پاراگراف

به عنوان یک قاعده، بلوک های متن با پاراگراف ها (پاراگراف ها) از هم جدا می شوند. به طور پیش فرض، یک تورفتگی عمودی کوچک بین پاراگراف ها وجود دارد که به آن padding می گویند. نحو ایجاد پاراگراف ها به شرح زیر است.

بند 1

بند 2

هر پاراگراف با یک برچسب شروع می شود

و با یک تگ بسته اختیاری به پایان می رسد

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

مثال 7-1 استفاده از پاراگراف ها برای ایجاد تورفتگی بین خطوط را نشان می دهد.

مثال 7.1. استفاده از پاراگراف ها

در برخی جاها هنوز فوریه است، در برخی دیگر در حال حاضر آوریل است.

زمان می گذرد، یک شمارش ابدی: سال به سال، قرن به قرن ...

در همه چیز - حرکت بدون عجله او، دویدن تاریک او.

بیست و پنج هفته در سال برای شادی و غم وجود دارد.

من در فوریه بیست و پنج هفته و در آوریل بیست و پنج هفته هستم.

برای بیست و پنج هفته، شمردن قرن ها به مه می رود.

مسخره ی پرصدای من جایی به سوی ابرها پرواز می کند.

M. Shcherbakov

نتیجه این مثال در شکل نشان داده شده است. 7.1.

برنج. 7.1. تورفتگی صفحه وب هنگام استفاده از پاراگراف ها

همانطور که در شکل مشاهده می کنید، هنگام استفاده از تگ

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

بنابراین، متن مثال 7.1، با در نظر گرفتن شکست خط، به صورت زیر تبدیل می شود (مثال 7.2).

مثال 7.2. برچسب بزنید

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

M. Shcherbakov

نتیجه مثال در شکل نشان داده شده است. 7.2. مشاهده می شود که فاصله بین خطوط متن کم شده و فشرده تر شده است.

پاراگراف ها و سرفصل ها

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

برچسب بزنید

یا صفحه را به پاراگراف (پارگراف) تقسیم می کنیم

اگر به خاطر دارید، پس با برچسب

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

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

حالا مهمترین چیز تگ است

می تواند فقط شامل عناصر سطح ردیف (در خط) باشد و نه بیشتر. بنابراین، برای مثال، نمی تواند شامل پاراگراف دیگری باشد، زیرا

این یک عنصر بلوک است. خوب، بارها و بارها به این موضوع باز خواهیم گشت. به هر حال، هر متنی بدون برچسب نیز یک عنصر درون خطی در نظر گرفته می شود.

نمونه ای از پاراگراف ها در HTML

پراگراف اول.

پاراگراف دوم.

نتیجه در مرورگر

پراگراف اول.

پاراگراف دوم.

به طور کلی، برچسب بسته شدن

برچسب بزنید

یک ویژگی انتخابی align وجود دارد که موقعیت متن را در بلوک تعیین می کند. یعنی می توانید هر خط از یک پاراگراف را در مرکز صفحه قرار دهید، یا به جای سمت چپ معمول، در سمت راست فشار دهید. اما بدشانسی اینجاست - ویژگی align در نسخه سخت HTML نیست و شاید مرورگرهای مدرن دیگر در آینده نزدیک از آن پشتیبانی نکنند. و چه باید کرد؟ و ما کارهای زیر را انجام خواهیم داد: در یکی از درس های بعدی روشی جهانی را به شما نشان خواهم داد که با آن می توانید موقعیت محتوا را نه تنها در داخل پاراگراف ها، بلکه در داخل هر عنصر بلوک صفحه HTML (عنوان، جداول، لیست ها و غیره). اما نکته اصلی این است که دقیقاً درک شده است و توسط همه مرورگرها قابل درک خواهد بود.

برچسب ها

-

یا هدرهای صفحه HTML

سرفصل ها نقش بسیار مهمی در HTML ایفا می کنند، با استفاده از آنها می توانید متن صفحه را به قسمت های منطقی تقسیم کنید و بر درجه اهمیت هر کدام تأکید کنید، که به بازدیدکنندگان اجازه می دهد به سرعت اطلاعات مورد نیاز خود را پیدا کنند. علاوه بر این، موتورهای جستجو (Yandex، Google و غیره) به متن در سرفصل ها «وزن» بیشتری می دهند. شش نوع وجود دارد که در آن

مهمترین عنوان (سطح اول، بالا)، و

کمترین معنی (سطح ششم، پایین تر). مثلا،

می تواند عنوان صفحه باشد،

- بخش های آن،

- بخش های فرعی و غیره

تگ های عنوان هستند عناصر بلوکو مانند پاراگراف ها، فقط می تواند حاوی برچسب ها و متن در سطح خط باشد. مرورگرها متن عنوان را در اندازه‌های مختلف پررنگ می‌کنند (بسته به برچسب) و حاشیه‌های فضای سفید را در بالا و پایین اضافه می‌کنند، دوباره مانند پاراگراف‌ها.

نحو سرفصل HTML

عنوان سطح اول

عنوان سطح دوم

عنوان سطح سوم

عنوان سطح چهارم

عنوان سطح 5

عنوان سطح 6

تگ‌های عنوان دارای دو ویژگی اختیاری هستند - این تراز منسوخ شده و ویژگی عنوان است که هنگامی که ماوس را روی عنوان با مکان‌نمای ماوس قرار می‌دهید، یک راهنمای ابزار «پاپ‌آپ» را نشان می‌دهد. مانند پاراگراف‌ها، از align استفاده نمی‌کنیم، اما به زودی روش دیگری را یاد خواهیم گرفت.

نمونه ای از استفاده از هدر در HTML

عنوان سطح اول

پاراگراف

عنوان سطح دوم

پاراگراف

پاراگراف

نتیجه در مرورگر

عنوان سطح اول

پاراگراف

پاراگراف

پاراگراف

مشق شب.

در این کار، باید صفحه ای ایجاد کنید که از یک مقاله کوچک تقلید کند، هر متنی را که دوست دارید بنویسید. می توانید فوراً نتیجه مثال را ببینید تا ایده ای از آنچه باید انجام شود داشته باشید.

1. صفحه آخرین درس در ویرایشگر HTML را باز کنید.
2. با کمک هدر

   ,

   و

   عنوان مقاله، دو بخش و سه بخش فرعی آن را در بخش دوم ایجاد کنید.

3. آن را طوری تنظیم کنید که وقتی ماوس را روی عنوان مقاله قرار می دهید، کتیبه مربوطه نمایش داده شود.
4. در هر بخش و زیربخش یک پاراگراف بنویسید.

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

بنابراین، اولین راه طبیعی ترین و ساده ترین است. برای تورفتگی قبل از متن، یک کد فاصله قبل از متن html اضافه کنید - می توانید یک کد فاصله در هر ویرایشگر html اضافه کنید.

من یک مثال از یک کد کار برای تنظیم یک تورفتگی برای متن با استفاده از یک کد فاصله می‌آورم:

HTML تورفتگی متن سمت چپ, از کد فاصله استفاده کنید

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

این روش از این جهت خوب است که کارکرد آن توسط هر مرورگری تضمین می شود.

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

یکی از راه حل های این مشکل روش زیر برای تنظیم تورفتگی است.

روش دوم تورفتگی متن HTML - این روش بر اساس ویژگی های تگ blockquote است. این تگ یک تورفتگی در حدود 40 پیکسل به چپ و راست برای متن قرار داده شده در آن تعیین می کند. علاوه بر این، تورفتگی در بالا و پایین تنظیم می شود. یک نمونه کد html برای استفاده از این روش در زیر آورده شده است:

در سمت چپ، از برچسب استفاده کنید مسابقه

همانطور که می بینید، استفاده از این روش برای تعیین تورفتگی برای متن بسیار آسان است، اما این روش یک اشکال قابل توجه نیز دارد. تورفتگی که تگ را تنظیم می کند مسابقه،ثابت است و همیشه برابر است با همان مقدار - 40px.

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

تورفتگی متن HTML، روش سه.

در اینجا ما از ویژگی پارامتر text-indent در CSS Cascading Style Sheets استفاده خواهیم کرد.

اگر مرجع CSS را باز کنیم، در صفحه مشخصات text-indent، می بینیم که با کمک text-indent می توانیم مقدار تورفتگی خط اول یا پاراگراف اول هر بلوک متن را تعیین کنیم.

ما به یک مثال با یک بلوک متن کوتاه نگاه می کنیم، بنابراین ویژگی های text-indent برای مورد ما کاملاً مناسب هستند.

در زیر کد html وجود دارد که متن را با استفاده از text-indent تورفتگی می کند. مثال نشان می دهد که با تنظیم text-indent بر روی مقادیر مختلف آرگومان، می توانیم مقدار تورفتگی متن را تغییر دهیم:

HTMLتورفتگیمتن، سبک css کار می کند - تورفتگی متن

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

تورفتگی متن HTML، راه چهارم - در اینجا از یک تصویر برای تنظیم تورفتگی استفاده می کنیم.

به عنوان مثال کاری، بیایید بلافاصله کد html را که عملکرد این روش را نشان می دهد در نظر بگیریم:

از مثال بالا به وضوح مشاهده می شود که با تغییر عرض تصویر می توانیم موقعیت متن را تغییر دهیم یعنی تورفتگی مورد نظر را برای متن قرار دهیم.

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

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