خانه آموزش HTML آموزش تگ های HTML آموزش تگ head در HTML

آموزش تگ head در HTML

توسط

۱۳۹۸-۰۱-۱۴

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ head در HTML با من همراه باشید.

آموزش تگ head در HTML

Free-Learn

در این جلسه میخوانیم

1 تگ Head در HTML
2 مثال از تگ head در HTML
3 پشتیبانی مرورگرها
4 جدول صفات تگ head در HTML
5 پشتیبانی از صفات و رویدادهای عمومی
6 نکات و توضیحات
7 دستورات CSS پیش فرض

تگ Head در HTML

تگ head یا تگ سَر یکی دیگر از تگ های زبان HTML می باشد که بطور کلی این تگ همانند یک ظرف می باشد برای نگهداری تگ هایی همچون :

تگ <title> – برای تعیین عنوان یک صفحه وب در مرورگرها
تگ <style> – برای اضافه کردن دستورات CSS
تگ <base> – برای ایجاد لینک های پایه در یک صفحه وب
تگ <link> – برای اتصال فایل های خارجی (مثه CSS) به صفحه HTML
تگ <meta> – برای اضافه کردن متاداده ها به صفحه وب
تگ <script> – برای اضافه کردن دستورات جاوااسکرپیت به صفحه وب

بنده در یک مطلب/پست بطور کامل تمامی موارد بالا + نحوه استفاده از تگ head را آموزش دادم که ازتون خواهش میکنم لطفا این مطلب را از اینجا مشاهده نمایید.

Free-Learn

مثال از تگ head در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

مثال شماره ۱ : استفاده از تگ title درون تگ head

<!DOCTYPE html>
<html>
 
<head>
  این قسمت می شود هد یک صفحه وب
</head>
 
<body>
 
<p>Www.Free-Learn.Ir</p>
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

این قسمت می شود هد یک صفحه وب

</head>

<body>

<p>Www.Free-Learn.Ir</p>

</body>

</html>

مثال شماره ۲ : استفاده از تگ style درون تگ head

<!DOCTYPE html>
<html>
<head>
<style>

body{
 background-color:#9C27B0;
}

p{
color:white;
}

</style>
</head>
<body>

<p>Www.Free-Learn.Ir</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body{

background-color:#9C27B0;

}

color:white;

}

</style>

</head>

<body>

<p>Www.Free-Learn.Ir</p>

</body>

</html>

امتحان کنید

مثال شماره ۳ : استفاده از تگ link درون تگ head

<head>

<link rel="stylesheet" href="style.css">

</head>

<head>

</head>

امتحان کنید

مثال شماره ۴ : استفاده از تگ meta درون تگ head

<head>

<meta charset="UTF-8">
<meta name="description" content="فری لرن - سایت آموزشی رایگان">
<meta name="keywords" content="HTML, CSS, JavaScript, HTMLTags">
<meta name="author" content="Sadegh Asadi">

</head>

<head>

</head>

امتحان کنید

مثال شماره ۵ : استفاده از تگ script درون تگ head

<head>
 
<script>
function myFunction() {
document.getElementById("test").innerHTML = "Free-Learn";
}
</script>
 
</head>

<head>

function myFunction() {

document.getElementById("test").innerHTML = "Free-Learn";

}

</script>

</head>

امتحان کنید

مثال شماره ۶ : استفاده از تگ base درون تگ head

<head>
 
<base href="https://free-learn.ir/category/web_design/" target="_blank">
 
</head>

<head>

</head>

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ head در HTML پشتیبانی میکنند یا خیر.

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
پشتیبانی	بله	بله	بله	بله	بله

Free-Learn

جدول صفات تگ head در HTML

در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.

(علامتیعنی در HTML5 پشتیبانی نمی شود.)

نام صفت	مقدار	توضیح
profile	URL	آدرس یک صفحه که حاوی یکسری قوانینی مرتبط با صفحه وب می باشد را تعریف میکند. ()

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ head تنها از صفات عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

ما یک تگ داریم به اسم تگ تیتر h1-h6 (چون چنتا هستن میگیم تگ های تیتر یا هدینگ) و یک تگ داریم به اسم head که در این بخش باهاش آشنا شدید، این دوتا تگ کاملا باهمدیگر فرق میکنند.

تگ های تیتر میان و عناوین یا تیترهای مطالب را مشخص میکنند و اینکه تگ های تیتر درون تگ body مورد استفاده قرار میگیرد ولی تگ head همیشه قبل از تگ body قرار میگیرد و حاوی یکسری تگ های مربوط به صفحه وب می باشد.

در HTML4.01 استفاده/وجود تگ head در یک صفحه ی وب ضروری می باشد ولی در HTML5 این قابلیت وجود دارد که میتوانید از این تگ در یک صفحه ی وب استفاده نکنید.

درسته که در HTML5 میتوان از تگ head استفاده نکرد، ولی شما سعی کنید همیشه از این تگ در صفحه ی وبتون برای بهینه بودن و معتبر بودن استفاده نمایید.

مثال : عدم استفاده از تگ head در HTML5

<!DOCTYPE html>
<html>
<title>سایت آموزشی من</title>
<style>
  body{ background-color:yellow; }
</style>
<body>

<p>Salam Khobi?</p>

</body>
</html>

<!DOCTYPE html>

<html>

<title>سایت آموزشی من</title>

<style>

body{ background-color:yellow; }

</style>

<body>

<p>Salam Khobi?</p>

</body>

</html>

امتحان کنید

Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ head را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.

head {
  display: none;
}

head {

display: none;

}