آموزش HTML5 - جلسه هشتم
آموزش HTML5 – جلسه هشتم

با عرض سلام خدمت کاربران گرامی آی وحید.

امروز در خدمت شما هستیم با استایل دهی به تگ های HTML که در واقع خصوصیاتی نظیر رنگ و اندازه و چیدمان و پس زمینه و… رو آموزش خواهیم داد پس همراه ما باشید.

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

استایل HTML

هر تگ HTML دارای خصوصیات است که در حالت عادی و در صورتی که کدنویسی خصوصیات را کدنویسی نکند به صورت پیشفرض مقادیری دارد. برای مثال پس زمینه سفید، اندازه متن 12 پیکسل، رنگ سیاه و…

تغییر دادن چنین مشخصاتی و خصوصیاتی را میتوانیم از طریق خصوصیت style که در تگ اولی HTML نوشته می شود تغییر دهیم.

مثال زیر پس زمینه را تگ body را تغییر می دهد:

<body style="background-color:lightgrey">

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

هم چنین در نسخه های قبلی HTML یعنی قبل از HTML5 نیز خصوصیت bgcolor پشتیبانی میشد.

خصوصیت style برای HTML

در تگ های HTML برای تغییر دادن مواردی که نام بردیم خصوصیت با نام style وجو دارد که سینتکس یعنی طرز کدنویسی اون طبق فرمول زیر هست:

style="property:value"

style نام خصوصیت است که معمولا هر تگی میتواند قبول کند. property قانون و کد زبان سی اس اس هست که مواردی از قبیل اندازه فونت و… میشه کدنویسی کرد و value مقدار قانون است.

برای مثال:

<a href="https://ivahid.com" style="font-size:16px;">iVahid</a>

 رنگ متن

برای کدنویسی رنگ متن از دستور color استفاده میکنیم. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>

<body>
  <h1 style="color:blue">This is a heading</h1>
  <p style="color:red">This is a paragraph.</p>
</body>

</html>

اندازه متن

برای کدنویسی فونت متن از دستور font-size استفاده می کنیم. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>

<body>
  <h1 style="font-size:300%">This is a heading</h1>
  <p style="font-size:160%">This is a paragraph.</p>
</body>

</html>

 چینش متن

برای کدنویسی چینش متن یعنی طرف راست، چپ و یا وسط از دستور text-align استفاده می کنیم. بازم به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>

<body>
  <h1 style="text-align:center">Centered Heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

هم چنین توجه داشته باشید در نسخه های قبل از نسخه HTML5 تگ <center> نیز محتوایش را وسط چین میکرد اما شما استاندارد و بروز کدنویسی کنید و توجه داشته باشید این نکته های ظریف در کنار هم برنامه شما را رقم خواهند زد.

خب برای این جلسه کافی هست و از آنجایی که داریم خیلی ساده و کم کم جلو میریم از جلسات بعد آموزش ها کمی فشرده تر و سختر خواهد بود لذا خواهشا حتما تمرین کنید. با تشکر – آی وحید