اصول کلی و تگ های پرکاربرد در اچ تی ام ال
سه شنبه, ۱۶ خرداد ۱۳۹۶، ۰۱:۱۹ ب.ظ
همانطور که در مثال های قبلی نیز مشاهده کردید هر فایل اچ تی ام ال باید با یک اعلان مربوط به نوع سند آغاز شود که در اچی تی ام ال نسخه 5 این اعلان به این شکل نوشته می شود:
<!DOCTYPE html>
اما خود فایل اچ تی ام ال مابین تگ های <html> و </html> نوشته می شود. یعنی تمام عناصر مربوط به فایل اچ تی ام ال باید مابین این تگها قرار بگیرند.
آن قسمت از فایل اچ تی ام ال که توسط کاربر قابل مشاهده است نیز مابین تگ های <body> و </body> نوشته می شود.
مثال زیر را ببینید:
در مثال بالا دو تگ پرکاربرد در زبان اچ تی ام ال را مشاهده می کنید. تگ مربوط به سرتیتر (<h1>) و تگ مربوط به پاراگراف (<p>).
سرتیتر ها را می توانیم در اچ تی ام ال تا 6 سطح متفاوت تعریف کنیم که این سرتیترها با استفاده از تگهای <h1> تا <h6> مشخص می شوند. در مثال بالا از سرتیتر نوع 1 استفاده کرده ایم که از نظر اندازه فونت از همه سرتیتر ها دشت تر است.
برای اینکه در فایل اچی تی ام ال مشخص کنیم که یک تکه از متن به عنوان پاراگراف نوشته شده است، باید این متن را مابین تگ های <p> و </p> قرار دهیم.
یکی دیگر از تگ های پرکاربرد در اچ تی ام ال تگ <a> است که از آن برای ایجاد لینک استفاده می کنیم. در واقع صفحات وب بدون امکان برقراری لینک کاملا بی معنا و غیر مفید است. برای ایجاد یک لینک از تگ های <a> و </a> استفاده می کنیم.
در داخل این تگ با استفاده از خصیصه (attribute) href باید مقصد لینک را مشخص کنیم. با استفاده از خصیصه ها اطلاعات اضافی در مورد عناصر اچی تی ام ال را درج می کنیم که یک نمونه را در عنصر لینک مشاهده کردید:
یک مثال ساده:
<!DOCTYPE html>
اما خود فایل اچ تی ام ال مابین تگ های <html> و </html> نوشته می شود. یعنی تمام عناصر مربوط به فایل اچ تی ام ال باید مابین این تگها قرار بگیرند.
آن قسمت از فایل اچ تی ام ال که توسط کاربر قابل مشاهده است نیز مابین تگ های <body> و </body> نوشته می شود.
مثال زیر را ببینید:
<!DOCTYPE html> <html> <body> <h1>یک سر تیتر</h1> <p>متن داخل یک پاراگراف</p> </body> </html>در این قسمت می خواهیم فقط با تعدادی از تگهای پرکاربرد اچ تی ام ال و ساختار کلی یک فایل اچ تی ام ال آشنا شویم. در قسمت های بعدی توضیحات کامل تری در مورد ساختار تگ ها در داخل فایل اچ تی ام ال ارائه خواهم کرد.
در مثال بالا دو تگ پرکاربرد در زبان اچ تی ام ال را مشاهده می کنید. تگ مربوط به سرتیتر (<h1>) و تگ مربوط به پاراگراف (<p>).
سرتیتر ها را می توانیم در اچ تی ام ال تا 6 سطح متفاوت تعریف کنیم که این سرتیترها با استفاده از تگهای <h1> تا <h6> مشخص می شوند. در مثال بالا از سرتیتر نوع 1 استفاده کرده ایم که از نظر اندازه فونت از همه سرتیتر ها دشت تر است.
برای اینکه در فایل اچی تی ام ال مشخص کنیم که یک تکه از متن به عنوان پاراگراف نوشته شده است، باید این متن را مابین تگ های <p> و </p> قرار دهیم.
یکی دیگر از تگ های پرکاربرد در اچ تی ام ال تگ <a> است که از آن برای ایجاد لینک استفاده می کنیم. در واقع صفحات وب بدون امکان برقراری لینک کاملا بی معنا و غیر مفید است. برای ایجاد یک لینک از تگ های <a> و </a> استفاده می کنیم.
در داخل این تگ با استفاده از خصیصه (attribute) href باید مقصد لینک را مشخص کنیم. با استفاده از خصیصه ها اطلاعات اضافی در مورد عناصر اچی تی ام ال را درج می کنیم که یک نمونه را در عنصر لینک مشاهده کردید:
<a href=http://www.samplesite.com>یک لینک ساده</a>یکی دیگر از موارد پر استفاده در اچ تی ام ال درج تصویر در داخل صفحه است. با استفاده از عنصر <img> می توانیم یک تصویر را در داخل متن نمایش دهیم. این عنصر دارای 4 خصیصه است: فایل منبع (src)، متن جایگزین (alt)، ارتفاع (height)، عرض (width).
یک مثال ساده:
<img src="sample.jpg" alt="طراحی وب سایت کتابخانه" width="50" height="60">
