سلام خدمت تمامی دوستان و همراهان محترم ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ head در HTML با من همراه باشید.
هد یا Head یا سَر یکی از مهمترین و اساسی ترین بخش یک صفحه ی وب و یا بطور کلی یک صفحه ی HTML می باشد، بطور کلی میتونیم بگیم که Head یک صفحه ی وب مغز آن صفحه می باشد.
که در این Head یا سَر یکسری اطلاعات مربوط به صفحه ی وبمان قرار میگیرد، مثلا عنوان صفحه ما برای نمایش در مرورگرها در قسمت هِد قرار میگیرد.
یا مثلا برای اضافه کردن دستورات CSS به یک صفحه ی وب ما باید دستورات CSS رو در قسمت هِد یا Head یک صفحه ی وب قرار دهیم و دیگر مواردی که در ادامه با آنها آشنا خواهید شد.
همچنین متاداده ها یا metadata نیز در قسمت Head یک صفحه ی وب قرار میگیرند، متاداده ها در HTML در واقع اطلاعاتی را در مورد یک صفحه وب به مرورگرها و موتورهای جستجوگر ارائه می دهند.
عنصر یا تگ <head> در یک صفحه ی وب بعد از تگ <html> و قبل از تگ <body> قرار میگیرد، لطفا به دستورات زیر و محل قرار گیری عنصر یا تگ <head> در یک صفحه ی وب توجه نمایید.
اگر میخواهید یک محتوا،متن،تصویر و.. در مرورگرها نمایش داده شود باید آن را در قسمت body یک صفحه ی وب وارد کرد نه قسمت هِد یا Head.
<!DOCTYPE html>
<html>
<head>
---(head in here)---
</head>
<body>
<p>Www.Free-Learn.Ir</p>
</body>
</html>
همونطور که کمی بالاتر ذکر کردم، ما نباید هیچوقت یک محتوا مثلا متن یا تصویر یا جدول یا هرچیز دیگه ای رو برای نمایش در مرورگرها در قسمت Head یک صفحه ی وب قرار دهیم.
چون که همیشه این رو بدونید در قسمت هِد یا Head یک صفحه ی وب فقط مواردی قرار میگیرند که اطلاعاتی یا یکسری ویژگی هایی رو به صفحه ی وب ما اضافه میکنند.
تگ ها یا عناصری که میتوانند یکسری اطلاعات و امکانات رو به یک صفحه ی وب اضافه کنند موارد زیر می باشند :
عنصر یا تگ <title> یکی از مهمترین تگ های HTML و بطور کلی یکی از تگ های اصلی در یک صفحه وب می باشد که هیچوقت نباید آنرا فراموش کرد چون وجود این تگ در یک صفحه ی وب ضروری می باشد.
این تگ از تگ های مورد نیاز و ضروری در یک صفحه وب می باشد، که با استفاده از این تگ میتوانیم یک عنوان را برای صفحه وبمان در مرورگرها و موتورهای جستجوگر مشخص نماییم.
نحوه استفاده از این تگ را در یک صفحه ی وب، میتوانید مشاهده نمایید :
<head>
<title> My Title In Here </title>
</head>
اگر فری لرن رو در بخش های قبلی دنبال کرده باشید، میدانید که من بطور کامل آموزش نحوه استفاده از صفت <Style> رو آموزش دادم که در صورت تمایل میتوانید این بخش را از اینجا مشاهده نمایید.
با استفاده از این تگ ما در قسمت هد یا head یک صفحه ی HTML به راحتی میتوانیم دستورات CSS مان را اضافه نماییم.
لازم به ذکر است که با استفاده از این تگ ما میتوانیم فقط و فقط برای یک صفحه HTML استایل یا دستورات سی اس اس تعریف نماییم.
<head>
<style>
body {
background-color:#9C27B0;
}
p {
color:white;
}
</style>
</head>
امتحان کنید
کمی بالاتر ما با استفاده از تگ <style> میتوانستیم به راحتی دستورات سی اس اس مان را به یک صفحه HTML اضافه نماییم، ولی همانطور که در قسمت بالا هم گفتم در آن حالت ما فقط برای یک صفحه از وبسایت مان میتوانیم استایل تعریف نماییم.
حال با استفاده از تگ <link> ما به راحتی میتوانیم فایل سی اس اس خارجی یا External مان را که بصورت مجزا ایجاد شده است را به صفحه ی وبمان متصل نماییم.
در اینصورت دیگه محدودیتی برای استفاده از دستورات CSS نداریم، چرا که ما به راحتی میتوانیم یک فایل CSS که بصورت مجزا ایجاد شده است را به چندین فایل HTML متصل نماییم.
از اینجا میتوانید آموزش نحوه استفاده از CSS در HTML و همچنین آموزش ساخت فایل CSS بصورت مجزا را مشاهده نمایید.
<head>
<link rel="stylesheet" href="style.css">
</head>
امتحان کنید
عنصر یا تگ <meta> متاداده هایی برای مشخص کردن یکسری اطلاعات مربوط به یک صفحه وب، برای مرورگرها و موتورهای جستجوگر می باشد که در ادامه با این متاداده ها آشنا خواهید شد.
اگر شما یک صفحه HTML را ایجاد کرده اید و در آن یک متن فارسی را نوشته اید ولی وقتی آن را اجرا مینمایید در مرورگر متن شما بصورت عجیب غریب نمایش داده می شود، بدانید که از متای charset استفاده نکرده اید.
حال برای رفع این مشکل کافیست تکه کد زیر را در قسمت هد یا Head صفحه ی HTML تان قرار دهید.
<meta charset="UTF-8">
امتحان کنید
یک توضیح کوتاه یا شرحی درباره یک صفحه وب برای موتورهای جستجوگر :
<meta name="description" content="Free-Learn Is Free">
امتحان کنید
مشخص کردن کلمات کلیدی یک صفحه وب برای موتورهای جستجوگر :
<meta name="keywords" content="HTML, CSS, JavaScript, HTMLTags">
امتحان کنید
مشخص کردن نویسنده یک صفحه وب برای موتورهای جستجوگر :
<meta name="author" content="Sadegh Asadi">
امتحان کنید
با استفاده از این تگ در قسمت هد یا Head یک صفحه وب، میتوان دستورات جاوا اسکریپت را قرار داد.
با کلیک در اینجا میتوانید آموزش کامل نحوه استفاده از جاوا اسکریپت را در HTML مشاهده نمایید.
<head>
function myFunction() {
document.getElementById("test") = "Free-Learn";
}
</head>
امتحان کنید
با استفاده از این تگ در قسمت Head یک صفحه وب میتوان بیس یا پایه اصلی مقصد تمامی لینک های موجود در یک صفحه وب را مشخص کرد.
بزارید کمی بیشتر در مورد این تگ توضیح دهم، همانطور که میدانید در بخش های قبلی ما یاد گرفتیم که با استفاده از تگ <a> میتوانیم یک لینک را ایجاد نماییم، و همچنین با استفاده از صفت src میتوانیم آدرس مقصد را برای لینک مان مشخص نماییم.
خب حالا منظور ما از تگ base یا پایه اینه که بیایم و یک لینک یا بهتر بگیم یک آدرس مقصد را مشخص نماییم سپس این آدرس مقصد می شود آدرس پایه تمامی لینک های موجود در یک صفحه HTML .
برای مثال لطفا به دستورات زیر توجه نمایید و همچنین بروی دکمه (امتحان کنید) برای مشاهده خروجی بصورت آنلاین کلیک نمایید.
<head>
<base href="https://free-learn.ir/category/web_design/" target="_blank">
</head>
امتحان کنید
منبع: سایت آموزشی فری لرن
برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.
