آموزش HTML – کار با Head (قسمت ۹)
در جلسات قبلی ما یکسری از تگهای اساسی و مهم در دنیای HTML را با همدیگر بررسی کردیم. این تگها در داخل تگ body کاربرد خود را نشان میدهند. اما برای یک طراح وب کار کردن با تگهای head نیز بسیار مهم و ضروری است.
در این مطلب قصد داریم مجموعهای از تگها برویم که کاربردشان در تگ head نمایان میشود.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
همانطور که در آموزش اول بیان کردیم، تمام المان های بصری که شما در دنیای وب مشاهده میکنید، المانهایی هستند که در داخل تگ body قرار گرفتهاند. اما تگ head نیز از اهمیت بالایی برخوردار است. اما یک سوال؟ اگر المانهای داخل تگ head نمایش داده نمیشوند چه کاربردی دارند؟
باید بگویم که اطلاعات اصلی وبسایت، شامل عنوان، زبان، متن توضیحات، فاوآیکون و… در داخل head ذخیره میشود. برای اینکه بتوانیم به موتورهای جستجوگر بهتر وبسایتمان را معرفی بکنیم، نیاز داریم که اطلاعات مربوط به وبسایتمان را در تگ head وارد کنیم.
برای وارد کردن هر کدام از اطلاعات ما تگهای بخصوصی داریم که میخواهیم موارد اساسی و ضروری آن را بررسی بکنیم:
تگ title
با استفاده از تگ title شما عنوان وبسایت خودتان را تعیین میکنید. علاوه بر آنکه محتوای داخل این تگ روی زبانههای مرورگر شما به نمایش در میآید، موتورهای جستجوگر نیز براساس آن وبسایت شما را به کاربران نشان میدهند:
برای استفاده از این تگ میتوانید به صورت زیر عمل کنید:
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>AmuzeshTak</title> </head> <body> <p> some text</p> </body> </html> |
تگ Style
تگ Style یکی دیگر از تگهای مهم در head است. با استفاده از این تگ میتوانید به صورت internal از CSS استفاده بکنید. برای آشنایی کامل با CSS میتوانید این دوره آموزشی را نگاه کنید.
مثالی از این حالت را میتوانید در زیر مشاهده بکنید:
1 2 3 4 5 6 7 8 9 10 11 12 |
<head> <style> p { background-color: red; padding: 10px; } h1 { font-weight: 600; color: #7690aa; } </style> </head> |
در کدهای بالا ما بدون استفاده کردن از یک فایل CSS، در خود فایل html یکسری استایل را برای تگهای p و h1 تعیین کردیم.
تگ Link
در تگ قبلی ما با شیوه استفاده از CSS به صورت internal یا داخلی آشنا شدیم. حال اگر بخواهیم این کار را به صورت اکسترنال یا External انجام دهیم، نیاز است که از تگ link استفاده بکنیم. برای استفاده از این تگ نیاز است که به صورت زیر عمل کنیم:
1 |
<link rel="stylesheet" href="css/style.css"> |
در کد بالا ما یک فایل style.css واقع در دایرکتوری css را به فایل html اضافه کردیم. همانطور که میتوانید مشاهده کنید ما از دو خاصیت rel و href استفاده کردهایم که به صورت ترتیبی اولین مورد نقش فایل و دومی آدرس فایل css را تعیین میکند.
تگهای متا
تگ متا واقعا یکی از پر کاربردترین تگهای html است. این تگ به تنهایی نمیتواند کاری را انجام دهد. برای استفاده از این تگ نیاز است که با خاصیتهای مختلف آن کار بکنید. همچنین برخی از خاصیتهای آن براساس مقادیری که به آن داده میشود نقشش تغییر میکند.
محتوای شما از چه سیستم یونیکدی استفاده میکند؟ برای مثال اگر تنها از متون انگلیسی استفاده میکنید هر یونیکدی میتواند برایتان قابل استفاده باشد اما اگر میخواهید از متونی دیگر از جمله زبان فارسی استفاده کنید نیاز است که از مقدار UTF-8 بهره بگیرید. برای این کار باید به صورت زیر کدها را قرار دهید:
1 2 3 4 5 6 |
<meta charset="UTF-8"> برای افزودن توضیحات، کلمات کلیدی و نام نویسنده نیز به ترتیب از متاها زیر استفاده میکنیم: <meta name="description" content="آموزش HTML"> <meta name="keywords" content="HTML, Amuzeshtak, HTML5"> <meta name="author" content="Arastoo"> |
یکی دیگر از تگهایی که میتواند برای انجمنها و شبکههای اجتماعی مفید باشد، نوسازی برگه به صورت خودکار است. برای این کار میتوانید از تگ زیر استفاده بکنید:
1 |
<meta http-equiv="refresh" content="15"> |
در این صورت وبسایت شما از ۱۵ ثانیه یک بار به صورت خودکار رفرش میشود.
در پایان
در این جلسه از آموزش HTML ما با تگهای مربوط به head آشنا شدیم و فهمیدیم که استفاده از این تگ برای موتورهای جستجوگر و مرورگر بسیار مهم و ضروری است.