خانه > HTML, دوره > آموزش HTML بخش ۲

آموزش HTML بخش ۲


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

نکته‌: بعضی از تگ‌های استفاده شده در این آموزش در نسخهٔ جدید HTML دیگر جایی ندارند‌، و آن هم به دلیل استفاده از CSS در کنار HTML است‌. ولی آشنا شدن با آن‌ها می‌تواند کمک فراوانی به یاد‌گیری سریع‌تر CSS -که در آینده قصد بر آن داریم- کند‌.

انواع تیتر‌ها‌:

در HTML تگ‌هایی برای شناساندن تیتر‌ها به مرور‌گر و در نتیجه نمایش مناسب آن‌ها در نظر گرفته شده است که ساختاری برابر <Hn> دارند‌. در این نوع تگ حرف n برابر با مقداری است که از یک شروع می‌شود‌، و به نسبت بزرگ‌تر شدن این مقدار‌، اندازهٔ تیتر به کوچک‌تر شدن میل می‌کند‌. برای درک بهتر این موضوع سعی می‌کنیم‌، در صفحه‌ای که قبلا ساختیم یک تیتر ایجاد کنیم‌:

[bash]
<html>
<head>
<title>First HTML!</title>
</head>
<body text="yellow" bgcolor="brown">
<h1>Hello World</h1>
</body>
</html>
[/bash]

نتیجهٔ این کد برابر با تصویر زیر می‌باشد‌. همانطور که می‌بینید عبارت Hello World به صورت بزرگ نوشته شده است‌.


برای درک بهتر مقدار n در <Hn> از دو مقدار دیگر <h2><h3> به صورت زیر استفاده می‌کنم‌:

[bash]
<html>
<head>
<title>First HTML!</title>
</head>
<body text="yellow" bgcolor="brown">
<h1>Hello World</h1>
<h2>This is an HTML Document</h2>
<h3>Season 2<h3>
</body>
</html>
[/bash]

همانطور که می‌بینید عبارات نوشته شده با اندازه‌های متفاوت به نمایش در آمده‌اند‌. یکی از مهم‌ترین مزایای استفاده از این تگ‌ها در Seo است که به موتور‌های جستجو امکان می‌دهد که به راحتی بخش‌های مختلف سند را درک کنند‌.

انواع نوشته‌ها‌:

  • Bold : برای نوشتن به صورت تو پر یا همان bold از تگ <b></b> استفاده می‌شود‌.
  • Italic : برای نوشتن به صورت مورب نیز از تگ<i></i> استفاده می‌شود‌.
  • Strike : برای نوستن به صورت رو خط دار از تگ <strike></strike> استفاده می‌شود‌.
  • Underline : برای نوشتن به صورت زیر خط دار از تگ <u></u> استفاده می‌شود‌.

خوب می‌خواهیم صفحهٔ ساخته شدمان را اندکی زیبا‌تر کنیم؛ برای این کار از تگ‌هایی که اخیرا یاد گرفتیم استفاده می‌کنیم‌:

[bash]
<html>
<head>
<title>First HTML!</title>
</head>
<body text="yellow" bgcolor="brown">
<h1>Hello World</h1>
<h3>This is an HTML Document <i>season #2</i></h3>
This is an free tutorial for <b>HTML</b> from <b><u>shahinism.com</u></b>
</body>
</html>
[/bash]

همانطور که می‌بینید توانستیم با تگ‌هایی ساده یک تایپوگرافی معقول ایجاد کنیم‌. تنها نکته‌ای که در مثال اخیر باید مورد توجه قرار گیرد‌، این قسمت است‌: <b><u>shahinism.com</u></b>همانطور که می‌بینید از دو تگ زیر خط و نوشتهٔ تو پر به صورت همزمان استفاده شده‌. ولی تگ‌ها از آخر به اول بسته شده‌.

موقعیت نوشته‌:

برای تعیین موقعیت نوشته‌ها نیز در HTML امکاناتی در نظر گرفته شده‌. که به تعدادی از آن‌ها اشاره می‌کنیم‌:

  • Center: برای وسط‌چین کردن نوشته استفاده می‌شود‌.
  • <br> : برای شکستن خط و شروع در خط جدید مورد استفاده قرار می‌گیرد‌.
  • <sub> و <sub> : که برای نمایش اندیس و توان مورد استفاده قرار می‌گیرد‌.

اکنون می‌خواهیم با کد‌هایی که یاد گرفتیم تغییرات دیگری را نیز در سند ایجاد کنیم‌:

[bash]
<html>
<head>
<title>First HTML!</title>
</head>
<body text="yellow" bgcolor="brown">
<center><h1>Hello World</h1></center>
<h3>This is an HTML Document <i>season <sub>#2</sub></i></h3>
This is an free tutorial for <b>HTML</b> from: <br><b><u>shahinism.com</u></b>
</body>
</html>
[/bash]


همانطور که در تصویر زیر می‌بینیم #۲ مقداری به پایین منتقل شده‌، هم‌چنین آدرس سایت نیز با توجه به اینکه در ادامهٔ خط نوشته شده‌، ولی پایین‌تر آمده‌. واضح‌ترین تغییر نیز در این مثال عبارت Hello World است که به وسط صفحه تغییر مکان داده‌.

تغییر قلم‌:

برای تغییر قلم نوشته (فونت‌) نیز می‌توانید از تگ فونت استفاده کنید‌. نمونه‌ای از استفاده از این قلم را در کد زیر ببینید‌:

[bash]
<html>
<title>Font Change</title>
</html>
<body>
Hi my friends <font face="tahoma" size=24 color=red>in this page we have 2</font> different font.
</body>
</html>
[/bash]

نتیجه‌ی مثال زیر را در تصویر زیر می‌بینیم‌:

لازم به ذکر است‌، مرور‌گر‌ها به صورت پیش‌فرض فونتی را برای نمایش نوشته در نظر می‌گیرند که با مراجعه به بخش تنظیمات هر مرورگر قابل تغییر است‌. فونت تعیین شده در کد بالا در صورتی که روی سیستم کاربر موجود باشد‌، نمایش داده می‌شود‌، در غیر این صورت از فونت پیش‌فرض استفاده می‌شود‌. در بخش آموزش CSS روشی از CSS3 را می‌آموزیم که این نقظه ضعف را پوشش می‌دهد‌.

Advertisements
دسته‌ها:HTML, دوره برچسب‌ها: , , ,
  1. هنوز دیدگاهی داده نشده است.
  1. No trackbacks yet.

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s

%d وب‌نوشت‌نویس این را دوست دارند: