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

1395/9/24 علیرضا حاتمی نیا 8381

سلام خدمت شما دوستان عزیز و علاقه مندان به مبحث طراحی وب

علیرضا حاتمی نیا هستم با قسمت چهارم آموزش طراحی وب (HTML , css) از سری آموزش های برنامه نویسی در خدمت شما هستم.

در جلسه پیش برای شروع کار  با ساختار HTML ، چند دستور و برچسب آشنا شدیم.

در این جلسه قصد داریم تا با برچسب هایی آشنا شیم که با متون (متن ها) سر و کار دارند و روی آن ها تاثیر گذار هستند.

در جلسه پیش با یکی از این برچسب ها که <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>

 

آموزش طراحی وب

 

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

برچسب <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>

 

آموزش طراحی سایت

 

بر چسب <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

 

 

دانلود PDF قسمت چهارم آموزش طراحی وب

کلمات کلیدی

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