آشنایی با برچسب های تاثیر گذار روی متن ها در HTML

علیرضا حاتمی نیا 14402

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

برچسب های <h1>,<h2>,<h3>,<h4>,<h5>,<h6>

در جلسه پیش با یکی از این برچسب ها که <h1></h1> … <h6></h6> بود آشنا شدیم و دانستیم که این برچسب ها حاوی تیترها یا عنوان ها در صفحه هستند. پس حالا یک سند html می سازیم و یک مقاله را با هم درون این سند می نویسیم.

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

<!DOCTYPE html>

<html>

<head>

<title> this is my first article </title>

</head>

<body>

<h1> This is my first article </h1>

</body>

</html>

 

برچسب های <h1>,<h2>,<h3>,<h4>,<h5>,<h6>

 

خب در این قسمت عنوان مقاله در تگ <h1> مشخص شد.

برچسب <p>

 همان طور که می دانید یک مقاله شامل یک یا چند پاراگراف می باشد. برای ساخت پاراگراف در HTML از تگ باز و بسته <p> </p> استفاده می کنیم. p در اینجا اول عبارات paragraph (پاراگراف(  می باشد و متنی که بین دو تگ باز و بسته <p></p> قرار می گیرد به عنوان یک پاراگراف در نظر گرفته می شود.

)جهت جلوگیری از تکرار کد ها فقط برچسب های جدید نوشته می شوند)

<p>

Hello world. This my first web page . I am very happy to learn it.

</p>

 

آموزش برچسب p

 

برچسب <b> :

از برچسب b بر توپر کردن یا ضخیم کردن متن استفاده می شود. b ابتدای عبارت Bold به معنی توپر است. برچسب <b> دارای تگ پایانی</b> است و متنی که داخل این دو برچسب قرار می گیرد به صورت توپر یا ضخیم نمایش داده می شود.

در مثال بالا عبارت world را به صورت ضخیم نمایش می دهیم.

<p>

Hello <b> world </b>. This my first web page . I am very happy to learn it.

</p>

 

آموزش تگ <b> در HTML

 

بر چسب <br>

واژه br مخفف عبارت break به معنی جداکردن است. اگر شما می خواهید پس از نوشتن بخشی از متن، ادامه آن را در سطر جدیدی بنویسید باید از بر چسب <br> استفاده کنید. برچسب <br> فاقد محتوا می باشد پس دارای برچسب پایانی نیز نمی باشد.

<p>

Hello <b> world </b>. <br> This my first web page . I am very happy to learn it.

</p>

 

آموزش برچسب br

 

توجه کنید که از این برچسب فقط برای ساخت سطر جدید استفاده کنید و نباید برای ساخت پاراگراف جدید از آن استفاده کرد.

بر چسب <i>

متنی که داخل تگ باز و بسته <i></i> نوشته میشود به صورت مایل یا ایتالیک نمایش داده میشود. i ابتدای عبارت italic است.

<p>

Hello <b> world </b>. <br> This my first <i> web page </i>  . I am very happy to learn it.

</p>

 

آموزش برچسب i

 

برچسب <u>

u ابتدای عبارت underline به معنی زیرخط دار است. متنی که بین دو تگ باز و بسته <u></u> قرار میگرد به صورت زیر خط دار نمایش داده می شود.

<p>

Hello <b> world </b>. <br> This my first <i> web page </i>  . I am very <u> happy </u> to learn it.

</p>

 

آموزش برچسب u

 

برچسب <big>

متنی که بین تگ باز و بسته<big> </big>  قرار می گیرد بزرگتر از سایر متون نمایش داده می شود.

<p>

<big>Hello </big><b> world </b>. <br> This my first <i> web page </i>  . I am very <u> happy </u> to learn it.

</p>

 

آموزش برچسب big

 

برچسب <small>

متنی که بین تگ  باز و بسته <small> </small>  قرار می گیرد کوچکتر از سایر متون نمایش داده می شود

<p>

<big>Hello </big><b> world </b>. <br> This my <small> first </small> <i> web page </i>  . I am very <u> happy </u> to learn it.

</p>

 

آمزوش برچسب small

 

نکته:

یکی از قابلیتهای خوب HTML این است که به شما اجازه می دهد از تگ ها به صورت تو در تو استفاده کنید. مثلا برچسبی وجود ندارد که  یک عبارت را هم به صورت تو پر Bold و هم به صورت کج Italic نمایش دهد و برای انجام آن شما بایستی از دو برچسب <i> و <b> به صورت تو در تو استفاده کنید.

<i>

<b> hello world </b>

</i>

 

آموزش برچسب های تو در تو در html

 

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

خب این جلسه به پایان رسید در طول جلسات بعدی با تگ های بیشتری آشنا خواهیم شد.

کلمات کلیدی

html

لینک های مرتبط

طراحی سایت اصفهان
علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت