0

آموزش Formatting tags | HTML و کامنت گذاری در HTML | جلسه پنجم

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

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

Formattin tags در HTML:

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

تگ b و strong:

این دو تگ که از نوع double tag هستند کاربردی یکسان دارند و هر دو برای افزایش ضخامت متن یا bold کردن به کار می‌روند، استفاده از این تگ‌ها بسیار ساده است و برای زمانی کاربرد دارند که شما قصد دارید بخشی از یک پاراگراف رو از بقیه‌ی بخش‌ها، مهم‌تر نشون بدین و به نوعی توجه مخاطب رو بر اون بخش جلب کنید، به مثال زیر توجه کنید:

<body>
    <p>This is HTML teaching and <b>wellcome to codento.ir</b><p>
    <p>This is HTML teaching and <strong>wellcome to codento.ir</strong><p>
</body>

bold textتگ i و em:

این دو تگ از نوع double tag هستند و کاربرد یکسانی دارند،‌ برای زمانی که قصد داریم فونت استایل یک بخش از متن رو Italic  کنیم مورد استفاده قرار میگیرند، به مثال زیر توجه کنید:

<body>
    <p>This is HTML teaching and <i>wellcome to codento.ir</i><p>
    <p>This is HTML teaching and <em>wellcome to codento.ir</em><p>
</body>

italic
تگ u و ins:

این دو تگ از نوع double tag هستند و برای زمانی کاربرد دارند که قصد داریم یک خط زیر متن قرار بدیم(underline)، به مثال زیر توجه کنید:

<body>
    <p>This is HTML teaching and <u>wellcome to codento.ir</u><p>
    <p>This is HTML teaching and <ins>wellcome to codento.ir</ins><p>
</body>

underline
تگ mark:

این تگ از نوع double tag هست و برای زمانی کاربرد داره که قصد داریم یک بخش از یک پاراگراف رو که مهم هست رو علامت گذاری یا به اصطلاح highlight کنیم، به مثال زیر توجه کنید:

<body>
    <mark>This is HTML teaching and <u>wellcome to codento.ir</mark><p>
</body>

mark tag
تگ del:

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

<body>
    <p>This is HTML teaching and <del>wellcome to codento.ir</del><p>
</body>

del tagتگ sup:

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

<body>
    <p>2<sup>3</sup>=8<p>
</body>

sup tag
تگ sub:

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

<body>
    <p>A<sub>3</sub><p>
</body>

sub tag
کامنت گذاری در HTML:

به عنوان آخرین نکته‌ی این جلسه کامنت گذاری در HTML رو بررسی می‌کنیم،‌ به طور کلی نوشتن کامنت در بخش‌های مختلف کدها در دنیای برنامه‌نویسی بسیار کاربردی و پر اهمیته، در واقع کامنت بخشی از کدها حساب نمیشه و مرورگر از تفسیر کامنت‌ها خودداری می‌کنه، کامنت تنها یادداشتی هست که برنامه‌نویس برای خودش در بخشی از کدها می‌نویسه،‌ برای کامنت گذاری در HTML از <-- --!> استفاده میشه، به مثال زیر توجه کنید:

<body>
    <p>codento.ir</p> <!-- this is a paragraph -->
</body>

comentهمینطور ک در مثال بالا می‌بینید کامنت هیچ تاثیری در خروجی نداره و توسط مرورگر تفسیر نمیشه.

 

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

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *