ایسوس Z240 ؛ لمس تکنولوژی و زیبایی
December 14, 2015
راه کار های مایکروسافت برای تشویق کاربران به استفاده از ویندوز 10
December 14, 2015
در جلسه ی پنجم از سری آموزش های گام به گام HTML با مدیاسافت همراه باشید.
سبک یا Style در HTML
به مثال زیر دقت کنید:
<!DOCTYPE html>
<html>
<body>
<h2 style=”color:red;”>Mediasoft.ir</h2>
<h2 style=”color:blue;”>Future is yours</h2>
</body>
</html>
خروجی :
با صفت style می توان سبک عناصر HTML را تنظیم کرد. همان طور که مشاهده می کنید با استفاده از صفت style رنگ محتوای تگ های <h2> از رنگ پیش فرض مشکی به قرمز و آبی تغییر کرد.
صفت style به شکل زیر باید به کار برود :
style=”property:value;“
property به معنای خاصیت می باشد که در این آموزش همان property ازآن نام خواهیم برد و value مقداری است که property می گیرد. ویرگول نقطه نیز همیشه باید بعد از value قرار بگیرد.
مثلا در مثال بالا color یک property است که مقدارش red است.
نکته : property یک خاصیت CSSی می باشد و همینطور value یک مقدار CSSی می باشد.
نکته : CSS در جلسات آینده توضیح داده خواهد شد.
رنگ پس زمینه در HTML
با استفاده از property یا خاصیت background-color می توان رنگ پس زمینه ی یک عنصر HTML را تغییر داد.
مثال زیر رنگ پس زمینه صفحه را به خاکستری روشن تغییر می دهد.
<!DOCTYPE html>
<html>
<body style=”background-color:lightgrey;”>
<h1>Mediasoft.ir</h1>
<p>Future is yours.</p>
</body>
</html>
خروجی :
همانطور که مشاهده می کنید صفت style در تگ body قرار دارد. تگ body تمام صفحه را پوشش می دهد و اگر دقت کنید تمامی تگ هایی که در مرورگر می توان محتوای آنها را مشاهده کرد بین تگ body نوشته می شوند.
رنگ متن در HTML
با استفاده از Property یا خاصیت color می توان رنگ متن برای تگ مورد نظر تعریف کرد. فراموش نکنید که تمام propertyها با استفاده از صفت style تعریف می شوند.
مثال
<!DOCTYPE html>
<html>
<body>
<h1 style=”color:blue;”>Mediasoft.ir</h1>
<p style=”color:red;”>Future is yours.</p>
</body>
</html>
خروجی :
فونت در HTML
با استفاده از property یا خاصیت font-family می توان فونت یک تگ مورد نظر را تغییر داد.
مثال
<!DOCTYPE html>
<html>
<body>
<h1 style=”font-family:verdana;”>This is a heading</h1>
<p style=”font-family:courier;”>This is a paragraph.</p>
</body>
</html>
خروجی:
سایز متن در 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>
خروجی:
همانطور که مشاهده می کنید مقدار یا value خاصیت font-size به صورت درصد نوشته می شود.
ترازبندی متن در HTML
با استفاده از خاصیت text-align می توان متن های افقی را ترازبندی نمود.
مثال
<!DOCTYPE html>
<html>
<body>
<h1 style=”text-align:center;”>Mediasoft.ir</h1>
<p>This is a paragraph.</p>
</body>
</html>
خروجی :
همانطور که در خروجی می بینید تگ <h1> در وسط صفحه قرار دارد و این به خاطر این است که مقدار text-align در این تگ برابر با center می باشد . مقدار text-align متواند right به معنی راست نیز باشد. اگر به طور کل از این خاصیت استفاده نکنیم مرورگر آن را به طور بیش فرض برابر با left قرار می دهد.
فعلا کار با صفت style و خواص آن را کنار می گذاریم و به سراغ تگ های قالب بندی متن می رویم.
تگ <b> و تگ <strong>
هردو تگ کاملا مثل هم عمل می کنند و متن را ضخیم می کنند. ولی تگ <strong> برای متن های مهم به کار می رود.
مثال
<!DOCTYPE html>
<html>
<body>
<p>This text is NORMAL.</p>
<p><b>This text is BOLD.</b></p>
<p><strong>This text is STRONG.</strong></p
</body>
</html>
خروجی :
همانطور که مشاهده می کنید تگ های <b> و <strong> در داخل تگ <p> به کار رفته اند که این کار اصلا مشکلی ندارد. حتی می توان فقط یک کلمه را به صورت ضخیم درآورد ، مثلا :
<p> This text is <b>Bold</b>.<p>
تگ <i> و تگ <em>
دو تگ <i> و <em> نیز کاملا شبیه به هم عمل می کنند و نوشته را به صورت کج در می آورند با این تفاوت که تگ <em> برای متن های مهم به کار می رود.
مثال
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized.</em></p>
</body>
</html>
خروجی :
تگ <small>
وقتی می خواهیم یک کلمه یا قسمتی از متن کوچکتر از بقیه ی متن باشد از این تگ استفاده می کنیم.
مثال
<!DOCTYPE html>
<html>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
</body>
</html>
خروجی :
تگ <mark>
با استفاده از این تگ می توان متن مورد نظر را به صورت برجسته یا Highlight درآورد.
مثال
<!DOCTYPE html>
<html>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>
خروجی :
همانطور که در مرورگر مشاهده می کنید متن مورد نظر ما به صورت highlight در آمده است. قسمت هایی را که در کد highlight شده اند را بنده خودم برای درک بیشتر شما و با استفاده از نرم افزار انجام داده ام.
تگ <del>
این تگ باعث می شود که یک خط افقی برروی متن مورد نظر قرار بگیرد که این منظور را می دهد که این متن اشتباه است و پاک شده است.
مثال
<!DOCTYPE html>
<html>
<body>
<p style=”font-size:200%;”>My favorite color is <del>blue</del> red.</p>
</body>
</html>
خروجی :
همانطور که مشاهده می کنید برروی کلمه ی blue خط کشیده شده است.
نکته : در این مثال در تگ <p> با استفاده از صفت style و خاصیت font-size ، فونت این تگ را به 200% تغییر دادیم.
تگ <ins>
این تگ ، زیرمتن مورد نظر یک خط می کشد. همانند underline در word .
مثال :
<!DOCTYPE html>
<html>
<body>
<p>My favorite <ins>color</ins> is red.</p>
</body>
</html>
خروجی :
تگ <sub> و تگ <sup>
تگ <sub> نوشته را به صورت زیرنویس و تگ <sup> نوشته را به صورت بالانویس در می آورد.
مثال
<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
خروجی :
پایان جلسه پنجم
