آموزش گام به گام و تصویری HTML قسمت هشتم (ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"]
HTML[/caption]
ویژگی Style
در جلسه ی قبل در مورد attribute ای به نام style صحبت کردیم و با هم دیدیم که می توان با آن شکل ظاهری عناصر را در HTML تغییر داد اما وقتی صحبت از متون عادی می شود، HTML موارد خاصی را برای تغییر چهره شان دارد!(ایران گستر)
<b>متون را bold (پررنگ) می کند.<strong>نشان دهنده ی یک متن مهم است.<i>متون را italic (مورب) می کند.<em>بر متن تاکید می کند.<mark>متن را علامت گذاری می کند.<small>متن را کوچک می کند.<del>نشان دهنده ی متن حذف شده است.<ins>نشان دهنده ی متن اضافه شده است.<sub>نشان دهنده ی متن زیروند است.<sup>نشان دهنده ی متن بالاوند است.
سوال: برخی از این تگ ها متن را به یک شکل نمایش می دهند. چرا برای یک شکل چند تگ مختلف داریم؟ایران گستر
پاسخ: استفاده ی صحیح از این تگ ها بسیار مهم است! اگر بنا بر تغییر ظاهر متن بود، می توانستیم از همان style و زبان CSS استفاده کنیم اما اینجا بحث بر سر برنامه نویسی semantic (معنایی) است. هر کدام از این تگ ها علاوه بر نمایش دادن متن به شکل متفاوت، معنی متفاوتی برای موتورهای جستجو دارند. در ادامه ی این دوره بیشتر در مورد آن ها صحبت می کنیم.ایران گستر
تگ های <b> و <strong>
حتما متوجه شده اید که هر دوی این تگ ها متن را bold و پررنگ می کنند و در ذهنتان سوال می کنید که فرقشان چیست؟ باید بگویم که <b> تنها متن را پررنگ می کند و هیچ معنایی فراتر از آن ندارد:ایران گستر
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<body>
<p>Thistext isnormal.</p>
<p><b>Thistext isbold.</b></p>
</body>
</html>
|
اما تگ <strong> علاوه بر پررنگ کردن متن یا کلمه، معنی strong (قوی یا مهم) را به آن متن اضافه می کند. شما در عمل و در کدهایتان هیچ تفاوتی را متوجه نمی شوید اما موتورهای جستجو بین این تگ ها و معانی فرق قائل می شوند. مثالی از تگ strong:ایران گستر
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<body>
<p>Thistext isnormal.</p>
<p><strong>Thistext isstrong.</strong></p>
</body>
</html>
|
تگ های <i> و <em>
دقیقا مانند تفاوت تگ های قبلی، تگ <i> در زبان HTML متن مورد نظرتان را مورب می کند و هیچ اهمیت خاص یا معنی دیگری به آن اضافه نمی کند:ایران گستر
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<body>
<p>Thistext isnormal.</p>
<p><i>Thistext isitalic.</i></p>
</body>
</html>
|
اما تگ <em> جدا از مورب کردن متن، به آن معنی و اهمیت خاصی نیز می دهد. مثال استفاده از این تگ را در کد زیر می بینید:ایران گستر
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<body>
<p>Thistext isnormal.</p>
<p><em>Thistext isemphasized.</em></p>
</body>
</html>
|
اگر بخواهم به طور خلاصه بگویم:
مرورگرها تگ های <strong> و <b> و تگ های <em> و <i> را به یک شکل نمایش می دهند اما تگ های <b> و <i> تنها کارکرد نمایشی دارند در حالی که <strong> و <em> به موتورهای جستجو می گویند فلان متن مهم است و معنی خاصی را همراهشان دارند.ایران گستر
تگ <small>
تگ <small> متن مورد نظر شما را به شکل بسیار کوچک نمایش می دهد. به این مثال توجه کنید:
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<body>
<h2>HTML<small>Small</small>Formatting</h2>
<p>Thisisaparagraph and<small>smaller text goes here</small></p>
</body>
</html>
|
تگ <mark>
تگ <mark> در زبان HTML متون مورد نظر شما را به حالت هایلایت شده (ماژیک فسفری) نمایش می دهد تا به مخاطب بفهماند فلان قسمت از متن اهمیت خاصی دارد:ایران گستر
|
1
2
3
4
5
6
7
8
|
<!DOCTYPE html>
<html>
<body>
<h2>HTML<mark>Marked</mark>Formatting</h2>
</body>
</html>
|