آموزش تگ head در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ head در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Head در HTML
تگ head
یا تگ سَر یکی دیگر از تگ های زبان HTML می باشد که بطور کلی این تگ همانند یک ظرف می باشد برای نگهداری تگ هایی همچون :
- تگ <title> – برای تعیین عنوان یک صفحه وب در مرورگرها
- تگ <style> – برای اضافه کردن دستورات CSS
- تگ <base> – برای ایجاد لینک های پایه در یک صفحه وب
- تگ <link> – برای اتصال فایل های خارجی (مثه CSS) به صفحه HTML
- تگ <meta> – برای اضافه کردن متاداده ها به صفحه وب
- تگ <script> – برای اضافه کردن دستورات جاوااسکرپیت به صفحه وب
Free-Learn
مثال از تگ head در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ title درون تگ head
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> این قسمت می شود هد یک صفحه وب </head> <body> <p>Www.Free-Learn.Ir</p> </body> </html> |
مثال شماره ۲ : استفاده از تگ style درون تگ head
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <style> body{ background-color:#9C27B0; } p{ color:white; } </style> </head> <body> <p>Www.Free-Learn.Ir</p> </body> </html> |
مثال شماره ۳ : استفاده از تگ link درون تگ head
1 2 3 4 5 |
<head> <link rel="stylesheet" href="style.css"> </head> |
مثال شماره ۴ : استفاده از تگ meta درون تگ head
1 2 3 4 5 6 7 8 9 |
<head> <meta charset="UTF-8"> <meta name="description" content="فری لرن - سایت آموزشی رایگان"> <meta name="keywords" content="HTML, CSS, JavaScript, HTMLTags"> <meta name="author" content="Sadegh Asadi"> <meta name="robots" content="noindex, follow"> </head> |
مثال شماره ۵ : استفاده از تگ script درون تگ head
1 2 3 4 5 6 7 8 9 |
<head> <script> function myFunction() { document.getElementById("test").innerHTML = "Free-Learn"; } </script> </head> |
مثال شماره ۶ : استفاده از تگ base درون تگ head
1 2 3 4 5 |
<head> <base href="https://free-learn.ir/category/web_design/" target="_blank"> </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 این قابلیت وجود دارد که میتوانید از این تگ در یک صفحه ی وب استفاده نکنید.
مثال : عدم استفاده از تگ head
در HTML5
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <title>سایت آموزشی من</title> <style> body{ background-color:yellow; } </style> <body> <p>Salam Khobi?</p> </body> </html> |
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ head
را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
1 2 3 |
head { display: none; } |