آموزش تگ p در html + آموزش heading در html

سلام امیدوارم که سلامت باشید، به قسمت سوم آموزش HTML خوش اومدید امیدوارم که از مطالعه‌ی قسمت قبلی لذت برده باشید و براتون مفید بوده باشه.

قسمت قبلی با دو نوع تگ در HTML یعنی تگ مجرد (Single tags) و تگ متاهل (Double tags) آشنا شدیم و اجزای اصلی یک سند HTML رو بررسی کردیم، پیش از شروع این قسمت اگر هنوز قسمت‌های قبلی رو مطالعه نکردید حتما پیشنهاد می‌کنم همین الان این کارو انجام بدید، در این قسمت کلی نکات جدبد و جذاب رو باهم بررسی می‌کنیم که مطمئنم با آشنا شدن با این مطالب علاقه‌تون به HTML چند برابر میشه پس بریم که قسمت بعدی رو شروع کنیم.

تگ‌های تیتر یا `Heading` در HTML:

این تگ‌ها یکی از پر کاربردترین و البته از مهم‌ترین‌ها هستند، این تگ‌ها این امکان رو به ما میدند که بتونیم به بهترین شکل ممکن تیترهای خودمون رو مشخص کنیم، تگ‌های heading شامل h1 تا h6 هستند (همین‌جا این نکته رو بگم که تگ‌های heading از نوع متاهل هستند)،‌ هرکدوم از این 6 نوع تگ باعث تغییر اندازه فونت و میزان ضخامت تیتر میشن، حالا به مثال زیر توجه کنید:

<body>
    <h1>this is h1</h1>
    <h2>this is h2</h2>
    <h3>this is h3</h3>
    <h4>this is h4</h4>
    <h5>this is h5</h5>
    <h6>this is h6</h6>
</body>

خروجی مثال بالا به اینصورته:
همونطور که در مثال بالا می‌بنید هرچقدر شماره‌ی heading تگ بیشتر بشه سایز فونت و ضخامت اون هم کاهش پیدا میکنه، تگ h1 بیشترین و تگ h6 کمترین ضخامت و سایز فونت رو دارا هستند، شاید این سوال براتون پیش بیاد که از هر کدوم در چه زمانی باید استفاده کنیم؟

سوال خوبیه، به‌طور کلی شما باید با توجه به میزان اهمیت و ارزش مکانی هر تیتر از این تگ‌ها استفاده کنید، مثلا اگر یک تیتر خیلی مهم هست و لازمه نسبت به بقیه‌ی تیتر در معرض دید بیشتری قرار بگیره از h1 استفاده میکنیم، به همین سادگی.

تگ `p` یا پاراگراف در HTML:

این تگ هم یکی از تگ‌های بسیار کاربردی و مهم است، این تگ زمانی کاربرد داره که بخوایم یک پاراگراف رو در وب‌سایت خودمون قرار بدیم، (در ضمن این تگ از نوع متاهل است) به مثال زیر توجه کنید:

<body>
    <p>Wellcome to codento.ir</p>
</body

خروجی مثال بالا:

`Attributes` یا صفت ها در HTML:

یکی از مباحثی که در HTML خیلی مهم و کاربردیه و به ما امکانات زیادی برای کار کردن با تگ‌ها میده صفت‌ها یا Attributes هستند، صفت‌ها در تگ باز نوشته میشن و یک سری اطلاعات رو به یک تگ اضافه می‌کنند برای درک بهتر به مثال زیر توجه کنید:

<body>
    <h1 style="color:red;">Wellcome to codento.ir</h1>
</body>

خروجی مثال بالا:

همین‌طور که در مثال بالا می‌بینید صفت style که در تگ باز h1 نوشته شده به این محتوای درون این تگ متن قرمز رو نسبت میده، به طور کلی کار تمامی صفت‌ها نسبت دادن اطلاعاتی به یک تگ هست، صفت‌ها انواع مختلفی دارند که بعضی از اونها (از جمله style) بین تمام تگ‌های HTML مشترک هست، یعنی برای تمامی تگ‌ها می‌توان از این نوع صفت‌ها استفاده کرد ولی نوع دیگر صفت‌ها هستند که مختص یک نوع تگ هستند و یا برای تعداد محدودی از تگ‌ها قابل استفاده‌اند، مثل صفت href در تگ a .

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

در این جلسه سعی کردیم تگ‌های heading و پاراگراف رو با هم بررسی کنیم همچنین به مفهوم کلی attribute نگاهی داشتیم، در قسمت‌های بعدی بیشتر با کاربرد این نکات آشنا خواهید شد پس حتما جلسات آینده رو دنبال کنید، مباحثی که در این جلسه و جلسات قبلی به اون‌ها اشاره شد رو حتما تمرین کنید، اگر سوال نظر‌ و پیشنهادی دارید حتما در بخش نظرات به اشتراک بذارید، موفق باشید، تا قسمت بعدی بدرود…