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

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

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

مثال

بیایید به مثالی از نحوه ساخت پاراگراف در کد HTML نگاه کنیم.

یک یا چند پیشنهاد

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

قالب بندی

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

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

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

من فقط شامل padding بین بلوک های متنی هستم. برای این کار باید پارامترهای خاصی را در CSS بنویسید.

p (حاشیه-پایین: 25 پیکسل؛)

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

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

میخواهی بیشتر بدانی؟ ممکن است پست های قبلی من در مورد موضوعات زیر مفید باشد:

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

برای شما در یادگیری برنامه نویسی آرزوی موفقیت دارم. راستی آیا به کسب درآمد از سایت های غیرتجاری اطلاعاتی فکر کرده اید؟ او به سادگی اطلاعات خوبی را برای خوانندگان خود در ارائه کرد.

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

برای دادن سبک خاصی به آن، باید متن را در ظرف مناسب قرار دهید.

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

1. برچسب های عنوان ( h1-h6).

2. طراحی تگ های متن اصلی ( , , ,

, 
و غیره.).
3. گروه بندی برچسب ها ( 

, 

, 

)

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

یک عنوان سطح اول ایجاد می کند - بزرگترین و مهم ترین (معمولا عنوان مقاله در صفحه)، 

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

باید بروند 

، و نه برعکس.

برای اینکه بفهمید چگونه کار می کند، کد زیر را در فایل html وارد کنید:
 
عنوان سطح اول
عنوان سطح دوم
عنوان سطح سوم
عنوان سطح 4
عنوان سطح 5
عنوان سطح 6

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

زیرنویس و زیرنویس
آنها را می توان در فرمول ها، معادلات، نشانه گذاری برخی از کمیت ها استفاده کرد.
تگ مسئول ایجاد اشتراک است 
، برای تگ top استفاده می شود 
.
ایکس 1= 32 متر 2
کاهش سایز
اگر می‌خواهید متن را یک عدد کمتر از متنی که در کل صفحه تنظیم شده است، کنید، باید از تگ استفاده کنید 

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

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

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

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

.

 
نقل قول در تگ blockquote.
نقل قول در داخل ظرف نقل قول.نقل قول کوتاه با برچسب q.تعریف اختصاصی.مخفف (NGO، IP).

مثال کلی
برای درک بهتر اینکه یک تگ مسئولیت چیست و چگونه کار می کند، کد زیر و نتیجه اجرای آن را ببینید.
 
چربمتن را می توان برچسب گذاری کرد قویو ب.  پشت موربپاسخ ماو من.
برچسب ها زیرو سوپبرای ایجاد استفاده می شود پایین تر(ایکس 1…ایکس n) و بالا (42= 16) شاخص ها. دل ضربه می زند, ins - تاکید می کند.
برچسب ها کد, kbd, varو سمپبه ندرت استفاده می شود و برای نمایش لیست برنامه ها مورد نیاز است
 خلاصهمورد نیاز برای اختصارات ( HTML).  از تگ های blockquote، cite و q برای نقل قول استفاده می شود ( از قبل آسمان در پاییز نفس می کشید)
پیش تگ قالب بندی اصلی متن را بدون حذف فاصله یا شکست خط حفظ می کند.

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

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


برچسب بزنید 

به خط بعدی در یک پاراگراف منتقل می شود (قبل از خط هیچ تورفتگی وجود نخواهد داشت).

به شما اجازه می دهد یک خط افقی بکشید.  می توانید از آن برای جداسازی بصری متن استفاده کنید.  ویژگی های عرض, اندازه, رنگ, تراز کردنو بدون سایهعرض، ضخامت، رنگ، تراز و عدم وجود افکت سه بعدی خط را به ترتیب تنظیم کنید.
 
خط بالای خط 
خط زیر خط.
لیست تصاویر پیوندها جداول فرم های صوتی تصویری مرجع HTML مرجع CSS طرح سایت 
در اولین درس در مورد ساختار با عنوان صفحه H1 و پاراگراف P تا حدی آشنا شدیم سند html.  حالا بیایید به تگ های نشانه گذاری منطقی نگاه کنیم: سرفصل ها، پاراگراف ها، لیست ها، عناصر قابل مشاهده عنصر Body، و برچسب های قالب بندی فیزیکی با جزئیات بیشتر.  برای انجام این کار، صفحه نمونه خود را کمی تغییر می دهیم یا دوباره آن را تایپ می کنیم:
 
در صفحه html آموزشی ما (یک بار با فلش مشخص شده) اضافه کردیم: یک عنوان سطح 2 - یک تگ H2، دو عنوان سطح 3 - یک تگ H3، یک پاراگراف دیگر - یک تگ P، یک لیست گلوله - Ul و چندین صفحه فیزیکی قالب بندی برچسب ها  بیایید صفحه را در مرورگر باز کنیم:
 

 
برچسب های H1-H3 نشان دهنده سرفصل های سطوح مختلف هستند - در مجموع شش مورد از آنها وجود دارد.  عنوان پایین ترین سطح، به ترتیب - H6.  سرفصل ها باید منطقی استفاده شوند و عنوان سطح بالا H1 باید یک بار در صفحه ظاهر شود.  عنوان H1 توسط مرورگرها با فونت بزرگ نمایش داده می شود و اندازه فونت در سرفصل های سطوح بعدی بر این اساس کاهش می یابد.
 
ربات های جستجو برای محتوای سرفصل های سطح بالا ارزش بالایی قائل هستند.  و پیمایش صفحه با عناوین منطقی درست برای کاربران آسان تر است.
 
برچسب های قالب بندی فیزیکی
 
می توانید یک نوار افقی را در صفحه بعد از پاراگراف دوم ببینید - توسط عنصر Hr ایجاد شده است که برچسب بسته شدن ندارد.  تگ Br به معنای تغذیه خط به یک جدید است، همچنین جفت نمی شود - بدون برچسب بسته شدن.  هنگام قالب بندی متن، می توانید از چندین عنصر Br متوالی استفاده کنید - هر کدام از آنها یک خط خالی جدید اضافه می کند.
 
حالا بیایید به کلمه "body" در پاراگراف دوم که در یک تگ B جفتی محصور شده است نگاه کنیم که این کلمه را پررنگ می کند.  و عبارت "متن فرمت" به صورت مورب نمایش داده می شود - این با استفاده از تگ I به دست می آید. تگ U زیرخط را مشخص می کند (در مثال ما نیست).
 

 
علاوه بر این تگ‌ها که بخش‌هایی از متن را برجسته می‌کنند، یک تگ قوی در HTML نیز وجود دارد - یک قطعه مهم (فونت پررنگ) را برجسته می‌کند.  و تگ Em کمی اهمیت کمتری دارد (ایتالیک).  ربات های جستجو توجه بیشتری به این دو تگ دارند که به عبارات منطقی مهم اشاره می کنند.  توصیه می شود کلمات کلیدی را در آنها بگنجانید، اما نباید در این مورد زیاده روی کنید.  در مورد هدرها هم همینطور.
 
در اینجا برخی دیگر از برچسب های قالب بندی متن فیزیکی وجود دارد: Q - یک نقل قول را در یک خط برجسته می کند. عنصر بلوک Blockquote - چند پاراگراف را می توان در این تگ قرار داد.
 
تگ Code برای علامت‌گذاری قطعات کد استفاده می‌شود، باید با شکست خط Br و فاصله‌های غیر شکسته استفاده شود: برای مشخص کردن آنها از ویژه استفاده می‌شود.  شخصیت (شخصیت اول - آمپرسند: کلید 7 با فشار دادن Shift در طرح انگلیسی).  اما تگ Pre کد برنامه را همانطور که هست با فاصله و تعداد خطوطی که در کد وجود دارد نمایش می دهد.
 
اینها متداول ترین عناصر طراحی متن هستند، برای سایر برچسب های قالب بندی و کاراکترهای خاص، به مرجع HTML واقع در همان سایت مراجعه کنید - دارای پیمایش الفبایی راحت است.
 
ایجاد لیست های html
 
باقی مانده است که ایجاد لیست ها را در نظر بگیریم، ما آن را با تگ جفت Ul، و عناصر یا آیتم های آن توسط تگ Li (نمایش اول) علامت گذاری و تنظیم می کنیم.  با کمک ویژگی type، هم برای تگ Ul و هم برای تگ Li، می توانیم نوع نشانگر را تغییر دهیم.  به طور پیش فرض، یعنی  اگر ویژگی مشخص نشده باشد، مقدار آن "دیسک" است - یک دایره.  می توانید ویژگی type را با مقدار "circle" تنظیم کنید - یک دایره.  یا مثل این: 
- لیستی با نشانگرهای مربعی دریافت خواهیم کرد.

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

 
بیایید صفحه را در مرورگر باز کنیم، به وضوح می توانیم ببینیم: یک لیست شماره دار با یک لیست گلوله ای تو در تو، که مقدار "مربع" ویژگی type نشانگرهای مربعی را مشخص می کند.