تگ های متنی در HTML- تگ پاراگراف، تگ های هدینگ و…
خوش اومدین به دومین جلسه از دوره آموزشی HTML. ما در جلسه قبل با HTML آشنا شدیم و همچنین ساختار کلی تگ ها رو هم شناختیم. الان وقت اون رسیده که یکی یکی با تگ های پرکاربرد در HTML آشنا بشیم و بتونیم از اونها استفاده کنیم. مجموعه این تگ ها باعث بوجود اومدن ساختار کلی صفحات وب هستند. برای شروع ما از تگ های مرتبط با متن شروع میکنیم و به این جهت به اونها تگ های متنی میگیم که همه اونها مرتبط با متن هستند.
تگ های متنی در HTML
تگ های متنی چند دسته هستند که ما سعی میکنیم در این آموزش با مهمترین و پرکاربردترین اونها آشنا بشیم. هر تگ رو با ذکر مثال توضیح میدیم و سعی میکنیم از خصوصیات پرکاربردشون صحبت کنیم. قبل از اینکه بریم و به توضیح تگ ها بپردازیم باید یادآوری کنم که تمامی این تگ ها در داخل تگ body استفاده میشن.
تگ های هدینگ – HTML Headings
تیترها که برای جداکردن بخش های متن و مرتب کردن اونها در متون روزمره کاربرد دارن، در داخل صفحات وب هم همین وظیفه رو به عهده دارن و کاربرد زیادی دارند. مثلا در همین متنی که در حال مطالعه اون هستید ما یک تیتر اصلی داریم و چندین تیتر دیگر که با فونت سایز کوچکتر درج شدند و به راحتی قابل تشخیص هستند. ما برای اینکه از تیترهای مختلف در HTML استفاده کنیم 6 تگ داریم. تگ های h1 تا h6. تگ h1 از لحاظ ظاهری بزرگتر و البته پراهمیتترین و تگ h6 کوچکتر و از ارزش پایین ترین در بین این 6 تگ برخوردار است.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
در تصویر بالا میتونید نحوه استفاده و خروجی تگ های h1 تا h6 رو ملاحظه کنید. همونطور که میبینید در سمت چپ و در داخل ویرایشگر، 6 تگ h1, h2, h3, h4, h5, h6 را در داخل تگ body استفاده کرده ایم. برای هرکدام، در بین تگ باز و بسته، مقدار موردنظر خودمون رو نوشتیم.
همینطور در سمت راست تصویر، میتونیم خروجی کار خودمون که به وسیله یک مرورگر در حال نمایش هست رو ببینیم. محتوای داخل تگ h1 بزرگترین و محتوای داخل تگ h6 کوچکترین هدینگ در خروجی است.
هدینگ ها علاوه بر تفکیک متون و تیتربندی محتوای سایت ها، از لحاظ SEO نیز حائز اهمیت هستند که درباره این موضوعات در دوره ای مجزا حتما صحبت خواهیم کرد.
ایجاد پاراگراف در HTML با استفاده از تگ P
ما با استفاده از تگ p میتونیم یه پاراگراف ایجاد کنیم. اگه به تعریف پاراگراف توجه کنیم، پاراگراف از ابتدای خط شروع میشه و میتونه شامل چندین جمله باشه و نهایتا بعد از اتمام، متن بعدی از ابتدای خط مجددا شروع میشه. بنابراین وقتی از تگ p استفاده میکنیم، متونی که داخل تگ باز و بسته p قرار میگیرن، به شکل یک پاراگراف نمایش داده میشن. مثال زیر رو ببینید
همونطور که میبینید در داخل تگ body از دو تگ p استفاده کردیم. پاراگراف اولی کوتاه است و پاراگراف دوم ما طولانی تر است. ولی به هر جهت هرجا که تگ p بسته بشه، مکان نما به سر خط میره و ادامه متن از ابتدای خط بعدی نوشته میشه.
کاربرد تگ br در HTML
اگه قصد داشته باشیم وسط متن، خط رو قطع کنیم و ادامه مطلب رو از ابتدای خط بعدی شروع کنیم میتونیم از تگ br استفاده کنیم. تگ br رو میتونیم داخل تگ p هم استفاده کنیم. نکته مهم اینه که فشردن دکمه Enter روی صفحه کلید زمانی که ما در حال کدنویسی داخل ویرایشگر هستیم، اثری بر خروجی نداره. به مثال زیر دقت کنید:
همونطور که در تصویر بالا میبینید ما با استفاده از تگ p یک پاراگراف ایجاد کردیم و در ابتدای خط 14 از تگ br استفاده کردیم. به این ترتیب بعد از کلمه simply در انتهای خط 13، خط تمام شده و مکان نما به ابتدای خط بعدی رفته است و کلمه dummy از ابتدای خط بعدی نوشته شده است. از طرفی در انتهای خط 14 و همچنین خط 15 من از کلید Enter استفاده کردم و ادامه مطلب را در خط 16 تایپ کردم همینطور در انتهای خط 16 و 17 ولی با اینحال ار به خروجی دقت کنید میبینید که Enter ها هیچ تأثیری نداشتند و پاراگراف من توی اون قسمت ها منسجم تایپ شده.
ایجاد جداکننده افقی در HTML با استفاده از تگ hr
اگر قصد دارید یه خط جداکننده در میان متن خودتون داشته باشید میتونید از تگ hr استفاده کنید. البته ضرورتی نداره که حتما در وسط متن باشه بلکه هرجا از این تگ استفاده کنید به ابتدای خط بعدی میره و یک خط عمودی تا انتهای صفحه رسم میکنه . اما کاربرد اصلی این تگ در متن هست که هم متن رو به دو قسمت تقسیم میکنه و هم ظاهر مرتبی(فاصله های استاندارد) به متن اختصاص میده. تصویر زیر رو ببینید:
همینطور که توی تصویر بالا میبینید ما دو بار از تگ hr استفاده کردیم. یک بار در میان تگ p در خط 13 از این تگ استفاده کردیم. همانطور که میبینید با اینکه در وسط تگ p بودیم اما به ابتدای خط بعدی رفته و یک خط افقی رسم کرده و ادامه مطلب از ابتدای خط بعدی شروع شده است. بار دوم این تگ را بین دو تگ p مختلف قرار دادیم، در بخش سمت راست میتونید نتیجه هر دو بار استفاده از این تگ رو ببینید.
تگ pre و تعریف متن با قالب پیش آماده
یکی از تگ های متنی، تگگ pre است. با استفاده از تگ pre ما این امکان رو داریم که قانون html رو که بالاتر بهش اشاره کردیم رو حذف کنیم. قانونی که Enter ها رو نادیده میگرفت و فاصله خطوط فقط با تگ ها HTML تعریف میشد. برای این کار کافیه که متن مورد نظرمون رو داخل تگ pre استفاده کنیم.
به تصویر بالا دقت کنید. در سمت چپ که سورس HTML ما قرار داره میتونید ببینید که متن بین خطوط 13 تا 18 دقیقا مشابه متن بین خطوط 20 تا 25 هست. هرچند این دو بخش دقیقا عین یکدیگر هستند اما در خروجی تفاوت زیادی دارند. بخش دوم داخل از لحاظ متن، تورفتی، تعداد Enterها و… دقیقا مشابه بخش اول است اما به دلیل اینکه داخل تگ pre قرار گرفته از قواعد پیشفرض HTML تبعیت نمیکنه و تمامی Enter ها و Tabها و فاصله هایی که داخل ادیتور قرار بگیره عینا در خروجی هم قرار مییره.
تگ های قالب بندی در HTML – کار با Formating Tags
یک سری دیگر از تگ های متنی در HTML داریم که روی کاراکترها تأثیر میگذارن. لیست این تگ ها را
- <b> – بولد (پرررنگ) کردن متن
- <strong> – متن مهم
- <i> – متن ایتالیک
- <em> – متن تأکیدی
- <mark> – متن علامت گذاری شده
- <small> – متن کوچکتر
- <del> – متن حذف شده
- <ins> – متن درج شده
- <sub> – متن زیرنویس
- <sup> – متن بالانویس
به تصویر زیر نگاه کنید تا تأثیر این تگ ها را روی متن ببینید:
همانطور که در تصویر بالا میبینید ما تگ های متنی این بخش را در هر پاراگراف به طور جداگانه از هرکدام از تگ ها استفاده کردیم. نتیجه خروجی هر تگ را میتوانیم در مرورگر سمت راست صفحه ببینیم. قطعا شما تا کنون تگ های متنی که در این درس توضیح دادیم را در صفحات وب دیده بودید. مخصوصا تگ های متنی این بخش که روی کاراکترها تأثیر میگذارند رو میتونید تو صفحات وب مختلف ببینید.
در این نوشتار سعی کردم شما رو با تگ های متنی آشنا کنم. پیشنهاد میکنم این موارد را خودتان هم امتحان کنید. اگر در خصوص این درس ابهام دارید، پیشنهاد میکنم ویدیو تگ های متنی را ملاحظه کنید تا با مثال های بیشتر، ابهامی باقی نماند.
