آموزش تگ head در HTML
آموزش تگ head در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ head در HTML به صورت کامل آشنا بشید.
تگ Head در HTML
تگ head یا هِد ، یکی از مهمترین و اساسی ترین بخش یک وبسایت است، یقینا میتونیم بگیم که Head یک صفحه ی وب مغز و درون مایه ی آن صفحه است ،در اصل درون این تگ یکسری اطلاعات مربوط به مرورگرها زخیره میشود.
بعنوان مثال نام صفحه ما برای نمایش در مرورگرها در این قسمت قرار میگیرد،و حتی برای اضافه کردن دستورات CSS یا دستورات JS و.. همگی در قسمت Head یک صفحه قرار میگیرد.
تگ <head> در یک صفحه ی وبسایت بعد از تگ <html> و قبل از تگ <body> ایجاد میشود، لطفا به دستورات زیر و محل قرار گیری تگ <head> در یک صفحه ی وب توجه کنید.
در ادامه ی آموزش html و css میتوانید یک مثال از این تگ را مشاهده کنید.
<!DOCTYPE html> <html> <head> این قسمت می شود هد یک صفحه وب </head> <body> <p>wppush.ir/</p> </body> </html>
به این مورد دقت کنید اگر میخواید یک محتوا ، متن ، تصویر و… در مرورگرها به نمایش در بیاد باید آن را در قسمت body قرار دهید نه قسمت هِد یا Head.
متاداده ها در HTML
به زبان انگلیسی metadata همچنین در قسمت Head یک صفحه ی وبسایت قرار میگیرند. در اصل اطلاعاتی را در مورد یک صفحه وب به مرورگرها و موتورهای جستجوگر ارائه می دهند.
متاداده های مختلف و متعددی وجود دارند. اما خب خیلی هاشون اصلا نیاز نیستن یا واجب نیستن و یا خیلی کاربردی نیستن، ولی بعضی هاشونم خیلی مهم و پراستفاده هستند که در ادامه ی مقاله باهاشون آشنا خواهید شد.
- <meta charset=”UTF-8″>
<head> <meta charset="UTF-8"> </head>
بصورت پیش فرض اگر از این متاداده استفاده نکنیم، خواهیم دید حروف فارسی در صفحه بصورت عجیب غریب نشون داده میشن، پس برای نمایش صحیح زبان فارسی در یک وبسایت باید از این متاداده استفاده کنیم.
- <meta name=”author”>
<head> <meta name="author" content="Milad"> </head>
برای مشخص کردن نام نویسنده اون مطلب یا کلا اون صفحه ( برای نمایش در مرورگرها و بحث سئو )
- <meta name=”keywords”>
<head> <meta name="keywords" content="HTML ,CSS ,JavaScript"> </head>
این متاداده برای مشخص کردن کلمات کلیدی مرتبط با اون مطلب، مقاله یا صفحه ( برای نمایش در مرورگرها و بحث سئو )
- <meta name=”description”>
<head> <meta name="description" content="آموزش رایگان طراحی وب"> </head>
و برای مشخص کردن یه توضیح یا شرح کوتاه درباره اون مطلب، مقاله یا صفحه ( برای نمایش در مرورگرها و بحث سئو )
- <meta name=”viewport”>
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
همین طور برای واکنش گرایی یک وبسایت در گوشی های موبایل ، تبلت ها و.. ( برای بحث واکنش گرایی صفحه خیلی مهمه )
- <meta http-equiv=”refresh”>
<head> <meta http-equiv="refresh" content="5 , https://wppush.ir//"> </head>
تغییر مسیر صفحه بعد از ۵ ثانیه به صفحه دیگر
- <meta http-equiv=”refresh”>
<head> <meta http-equiv="refresh" content="5"> </head>
صفحه هر ۵ ثانیه یکبار رفرش میشود.
- <meta name=”robots”>
<head> <meta name="robots" content=" noindex , nofollow "> <meta name="robots" content=" index , follow "> <meta name="robots" content=" noindex , follow "> <meta name="robots" content=" index , nofollow "> </head>
تعیین میکند که آیا یک صفحه وب در مرورگرها ایندکس شود یا خیر و اینکه توسط ربات های خزنده دنبال شود یا خیر.
راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.
تگ های پراستفاده در قسمت Head
همونطور که در بالا گفتیم، ما به هیچ وجه نباید یک محتوا مثلا متن یا تصویر یا جدول یا هرچیز دیگه ای رو برای نمایش در مرورگرها در قسمت Head یک صفحه ی وب قرار بدهیم.
زیرا این نکته رو در یاد داشته باشید که در قسمت هِد یا Head یک صفحه ی وب فقط مواردی قرار میگیرند که اطلاعات یا یکسری ویژگی هایی رو به صفحه ی وب ما اضافه کنند یا به اصطلاح ایندکس کنند.
تگ های پراستفاده و مهم در قسمت Head :
نحوه استفاده از تگ <title> در HTML
تگ <title> یکی از تگ های مهم در HTML و بطور کلی یکی از تگ های اصلی در یک صفحه وبسایت است که هیچوقت نباید آنرا از یاد برد چون وجود این تگ در یک صفحه ی وبسایت برای بحث معتبر بودن و همچنین بحث سئو بسیار واجب است.
با استفاده از این تگ میتونیم عنوان صفحه ی وبسایت خود را برای نمایش در تب مرورگرها و موتورهای جستجوگر مشخص کنیم.
مثال : استفاده از تگ title در قسمت Head صفحه
<head> <title>سایت من</title> </head>
نحوه استفاده از تگ <style> در HTML
اگر وردپرس پوش رو در بخش های قبلی دنبال کرده باشید، بطور کامل آموزش نحوه استفاده از صفت Style رو آموزش دادیم.
با استفاده از این تگ ما در قسمت هد یا head یک صفحه به راحتی میتوانیم دستورات CSS خود را اضافه کنیم.
<head>
<style>
body{
background-color:#f2f2f2;
text-align:center;
}
h2{
color:blue;
background-color:#fff;
padding:10px;
}
p{
color:red;
background-color:#fff;
padding:10px;
}
</style>
</head>
نحوه استفاده از تگ <link> در HTML
با استفاده از تگ <link> ما به آسانی میتوانیم فایل سی اس اس خارجی یا External خود را که بصورت مجزا ایجاد کرده ایم را به صفحه ی وبسایتمان متصل کنیم.
<head> <link rel="stylesheet" href="https://wppush.ir/"> </head>
نحوه استفاده از تگ <script> در HTML
و همینطور با استفاده از این تگ در قسمت هد یا Head یک صفحه وب، میتوان دستورات جاوا اسکریپت را قرار داد.
مثال شماره یک : استفاده از دستورات جاوااسکریپت بصورت داخلی ( یعنی درون صفحه ای )
<head>
<script>
function MyMessage(){
document.getElementById("Result").innerHTML = "Salam Khobi?";
}
</script>
</head>
مثال شماره دو : استفاده از دستورات جاوااسکریپت بصورت خارجی ( یعنی میخوایم فایل شو وصل کنیم به صفحه مون )
<head> <script src="https://wppush.ir/"></script> </head>
پشتیبانی مرورگرها
در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی از تگ head در HTML پشتیبانی میکنند یا خیر.
پشتیبانی از صفات و رویدادهای عمومی
تگ head تنها از صفات عمومی در HTML پشتیبانی می کند.
نکات و توضیحات
- در HTML4.01 وجود تگ
headدر یک صفحه ی وب واجب است ولی در HTML5 استفاده از تگ head اختیاری ست. ( ولی خب شما به اختیاری بودن توجه نکن، همیشه حتما از تگ head استفاده کن )
دستورات CSS پیش فرض
اکثرا مرورگرها تگ head را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
head {
display: none;
}
آموزش تگ head در HTML بسیار مهم است. شما میتوانید با دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید.
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید