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>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body> </html> |
اما تگ <strong> علاوه بر پررنگ کردن متن یا کلمه، معنی strong (قوی یا مهم) را به آن متن اضافه می کند. شما در عمل و در کدهایتان هیچ تفاوتی را متوجه نمی شوید اما موتورهای جستجو بین این تگ ها و معانی فرق قائل می شوند. مثالی از تگ strong:ایران گستر
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>This text is normal.</p>
<p><strong>This text is strong.</strong></p>
</body> </html> |
تگ های <i> و <em>
دقیقا مانند تفاوت تگ های قبلی، تگ <i> در زبان HTML متن مورد نظرتان را مورب می کند و هیچ اهمیت خاص یا معنی دیگری به آن اضافه نمی کند:ایران گستر
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
</body> </html> |
اما تگ <em> جدا از مورب کردن متن، به آن معنی و اهمیت خاصی نیز می دهد. مثال استفاده از این تگ را در کد زیر می بینید:ایران گستر
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</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>This is a paragraph 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> |
تگ های <del>
در ابتدای مقاله در مورد تگ <del> به طور خلاصه نوشتم «نشان دهنده ی متن حذف شده است.» احتمالا این توضیح بیشتر شما را گیج کرده است! بگذارید واضح تر بگویم؛ برخی اوقات مطلبی را روی سایت خود منتشر می کنید اما پس از مدتی متوجه می شوید آن مطلب دیگر صحیح نیست. آنجاست که از تگ <del> استفاده می کنیم.ایران گستر
سوال: چرا از اول آن نوشته را حذف نکنیم و این همه به خودمان دردسر بدهیم؟
پاسخ: این تگ نوشته را حذف نمی کند بلکه نشان دهنده ی متن حذف شده است. یعنی دانستن این موضوع که قبلا این متن در وب سایت ما بوده است اهمیت دارد. به طور مثال ما در آموزش برنامه نویسی جاوا اسکریپت می گوییم از فلان دستور جاوا اسکریپت برای دریافت خصوصیات یک شیء استفاده می شود. بعد از گذشت یک سال یا دو سال یا هر مقدار زمان دیگر، نسخه ی جدیدی از جاوا اسکریپت معرفی شده و دستور ما منسوخ می شود. حالا می توانیم از تگ <del> استفاده کنیم تا به مخاطب بفهمانیم دستور جدید این است اما فلان دستور قدیمی نیز وجود داشته است تا اگر کنجکاو بود در مورد آن تحقیق کند. این تنها یک مثال از مثال های عملی بسیار برای این تگ بود.ایران گستر
به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>The del element represents deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>
</body> </html> |
تگ <ins>
تگ <ins> نشان دهنده ی متن اضافه شده است. این یعنی چه؟
اول از همه باید بگویم این تگ در فضای وب فارسی تقریبا هیچ استفاده ای ندارد چرا که فرهنگ استفاده از آن جا نیفتاده است. در وب سایت های انگلیسی زبان، زمانی که بخواهند به مخاطب نشان دهند فلان قسمت از متن بعدا اضافه شده است، از این تگ استفاده می کنند.می توان به جای آنکه مثل من تمرینات را به شکل یک تصویر ارائه کرد، آن ها را متنی ارائه کرد تا با فشرده شدن دکمه ای، جواب ها (قسمت های جاافتاده) به کدهای اصلی (متن حاضر) اضافه شود.ایران گستر
مثال:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>
</body> </html> |
تگ <sub>
تگ <sub> در زبان HTML، متون زیروند را مشخص می کند. استفاده از این حروف در موقعیت های مختلفی امکان دارد که یکی از آن ها فرمول های شیمیایی است! فرمول شیمیایی زیر نحوه ی تبدیل کربن دی اکسید (co2) به کربن مونو اکسید (co) را نشان می دهد:ایران گستر
CO2 + 2 e− + 2H+ → CO + H2O
می بینید که می توانیم به سادگی از این تگ برای نمایش زیروند ها استفاده کنیم. تصور کنید که انجام این کار با CSS و تگ Style چقدر زمان بر خواهد بود!ایران گستر
تگ <sup>
تگ <sup> دقیقا بر خلاف تگ <sub> عمل می کند و برای بالاوند کردن متون استفاده می شود. از مثال های کاربردی آن باز هم می توان به سراغ مثال های علمی رفت؛ بیایید فرمول معروف آلبرت انیشتین را در رابطه با «هم ارزی جرم و انرژی» بنویسیم:ایران گستر
E=mc2
می بینید که برای اضافه کردن توان 2 از این تگ استفاده کرده ایم. البته تمام کاربرد های این تگ و تگ قبلی محدود به متون علمی نیست بلکه اینها یک مورد از چندین مورد استفاده ی آن هستند.ایران گستر
- ۹۸/۰۷/۲۰