آموزش HTML بخش ۲
نکته: بعضی از تگهای استفاده شده در این آموزش در نسخهٔ جدید HTML دیگر جایی ندارند، و آن هم به دلیل استفاده از CSS در کنار HTML است. ولی آشنا شدن با آنها میتواند کمک فراوانی به یادگیری سریعتر CSS -که در آینده قصد بر آن داریم- کند.
انواع تیترها:
در HTML تگهایی برای شناساندن تیترها به مرورگر و در نتیجه نمایش مناسب آنها در نظر گرفته شده است که ساختاری برابر دارند. در این نوع تگ حرف n برابر با مقداری است که از یک شروع میشود، و به نسبت بزرگتر شدن این مقدار، اندازهٔ تیتر به کوچکتر شدن میل میکند. برای درک بهتر این موضوع سعی میکنیم، در صفحهای که قبلا ساختیم یک تیتر ایجاد کنیم:
<html>
<head>
<title>First HTML!</title>
</head>
<body text="yellow" bgcolor="brown">
<h1>Hello World</h1>
</body>
</html>
نتیجهٔ این کد برابر با تصویر زیر میباشد. همانطور که میبینید عبارت Hello World به صورت بزرگ نوشته شده است.
برای درک بهتر مقدار n در از دو مقدار دیگر به صورت زیر استفاده میکنم:
<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>
همانطور که میبینید عبارات نوشته شده با اندازههای متفاوت به نمایش در آمدهاند. یکی از مهمترین مزایای استفاده از این تگها در Seo است که به موتورهای جستجو امکان میدهد که به راحتی بخشهای مختلف سند را درک کنند.
انواع نوشتهها:
- Bold : برای نوشتن به صورت تو پر یا همان bold از تگ استفاده میشود.
- Italic : برای نوشتن به صورت مورب نیز از تگ استفاده میشود.
- Strike : برای نوستن به صورت رو خط دار از تگ
استفاده میشود.
- Underline : برای نوشتن به صورت زیر خط دار از تگ استفاده میشود.
خوب میخواهیم صفحهٔ ساخته شدمان را اندکی زیباتر کنیم؛ برای این کار از تگهایی که اخیرا یاد گرفتیم استفاده میکنیم:
<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>
همانطور که میبینید توانستیم با تگهایی ساده یک تایپوگرافی معقول ایجاد کنیم. تنها نکتهای که در مثال اخیر باید مورد توجه قرار گیرد، این قسمت است: shahinism.comهمانطور که میبینید از دو تگ زیر خط و نوشتهٔ تو پر به صورت همزمان استفاده شده. ولی تگها از آخر به اول بسته شده.
موقعیت نوشته:
برای تعیین موقعیت نوشتهها نیز در HTML امکاناتی در نظر گرفته شده. که به تعدادی از آنها اشاره میکنیم:
- Center: برای وسطچین کردن نوشته استفاده میشود.
: برای شکستن خط و شروع در خط جدید مورد استفاده قرار میگیرد.
- و : که برای نمایش اندیس و توان مورد استفاده قرار میگیرد.
اکنون میخواهیم با کدهایی که یاد گرفتیم تغییرات دیگری را نیز در سند ایجاد کنیم:
<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>
همانطور که در تصویر زیر میبینیم #**۲**مقداری به پایین منتقل شده، همچنین آدرس سایت نیز با توجه به اینکه در ادامهٔ خط نوشته شده، ولی پایینتر آمده. واضحترین تغییر نیز در این مثال عبارت Hello World است که به وسط صفحه تغییر مکان داده.
تغییر قلم:
برای تغییر قلم نوشته (فونت) نیز میتوانید از تگ فونت استفاده کنید. نمونهای از استفاده از این قلم را در کد زیر ببینید:
<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>
نتیجهی مثال زیر را در تصویر زیر میبینیم:
لازم به ذکر است، مرورگرها به صورت پیشفرض فونتی را برای نمایش نوشته در نظر میگیرند که با مراجعه به بخش تنظیمات هر مرورگر قابل تغییر است. فونت تعیین شده در کد بالا در صورتی که روی سیستم کاربر موجود باشد، نمایش داده میشود، در غیر این صورت از فونت پیشفرض استفاده میشود. در بخش آموزش CSS روشی از CSS3 را میآموزیم که این نقظه ضعف را پوشش میدهد.