این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ head در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ head در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 تگ Head در HTML
- 2 متاداده ها در HTML
- 3 تگ های پراستفاده در قسمت Head
- 4 نحوه استفاده از تگ <title> در HTML
- 5 نحوه استفاده از تگ <style> در HTML
- 6 نحوه استفاده از تگ <link> در HTML
- 7 نحوه استفاده از تگ <script> در HTML
- 8 پشتیبانی مرورگرها
- 9 پشتیبانی از صفات و رویدادهای عمومی
- 10 نکات و توضیحات
- 11 دستورات CSS پیش فرض
تگ Head در HTML
تگ head یا هِد ، یکی از مهمترین و اساسی ترین بخش یک صفحه ی وب می باشد، بطور کلی میتونیم بگیم که Head یک صفحه ی وب مغز آن صفحه می باشد ، که در این تگ یکسری اطلاعات مربوط به مرورگرها و موتورهای جستجوگر قرار میگیرد.
بفرض مثال عنوان صفحه ما برای نمایش در مرورگرها در این قسمت قرار میگیرد، یا مثلا برای اضافه کردن دستورات CSS یا دستورات JS و.. همگی در تگ Head یک صفحه قرار میگیرد.
تگ <head> در یک صفحه ی وب بعد از تگ <html> و قبل از تگ <body> قرار میگیرد، لطفا به دستورات زیر و محل قرار گیری تگ <head> در یک صفحه ی وب توجه نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> این قسمت می شود هد یک صفحه وب </head> <body> <p>Www.Free-Learn.Ir</p> </body> </html> |
حواستون باشه اگر میخواید یک محتوا ، متن ، تصویر و… در مرورگرها نمایش داده شود باید آن را در تگ body قرار داد نه قسمت هِد یا Head
Free-Learn
متاداده ها در HTML
متاداده ها یا به انگلیسی metadata نیز در همین قسمت Head یک صفحه ی وب قرار میگیرند، متاداده ها در HTML در واقع اطلاعاتی را در مورد یک صفحه وب به مرورگرها و موتورهای جستجوگر ارائه می دهند.
متاداده های مختلفی وجود داره ولی خب خیلی هاشون اصلا نیاز نیستن یا ضروری نیستن یاهم خیلی کاربردی نیستن، ولی بعضی هاشونم خیلی مهم و پراستفاده هستند که در ادامه باهاشون آشنا خواهید شد.
- <meta charset=”UTF-8″>
|
1 2 3 |
<head> <meta charset="UTF-8"> </head> |
بصورت پیش فرض اگه از این متاداده استفاده نکرده باشیم، میبینی حروف فارسی در صفحه بصورت عجیب غریب نشون داده میشن، پس برای نمایش صحیح زبان فارسی در یک صفحه وب باید از این متاداده استفاده کرد.
- <meta name=”author”>
|
1 2 3 |
<head> <meta name="author" content="Sadegh Asadi"> </head> |
برای مشخص کردن نام نویسنده اون مطلب یا درکل اون صفحه ( برای نمایش در موتورهای جستجوگر و بحث سئو )
- <meta name=”keywords”>
|
1 2 3 |
<head> <meta name="keywords" content="HTML ,CSS ,JavaScript"> </head> |
برای مشخص کردن کلمات کلیدی مرتبط با اون مطلب یا صفحه ( برای نمایش در موتورهای جستجوگر و بحث سئو )
- <meta name=”description”>
|
1 2 3 |
<head> <meta name="description" content="آموزش رایگان طراحی وب"> </head> |
برای مشخص کردن یه توضیح یا شرح کوتاه درباره اون مطلب یا صفحه ( برای نمایش در موتورهای جستجوگر و بحث سئو )
- <meta name=”viewport”>
|
1 2 3 |
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> |
برای واکنش گرایی یک صفحه وب در گوشی های موبایل ، تبلت ها و.. ( برای بحث واکنش گرایی صفحه خیلی مهمه )
- <meta http-equiv=”refresh”>
|
1 2 3 |
<head> <meta http-equiv="refresh" content="5 , https://free-learn.ir/"> </head> |
تغییر مسیر صفحه بعد از ۵ ثانیه به صفحه دیگر
- <meta http-equiv=”refresh”>
|
1 2 3 |
<head> <meta http-equiv="refresh" content="5"> </head> |
صفحه هر ۵ ثانیه یکبار رفرش میشود
- <meta name=”robots”>
|
1 2 3 4 5 6 |
<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> |
مشخص میکند که آیا یک صفحه وب در موتورهای جستجوگر ایندکس شود یا خیر و توسط ربات های خزنده دنبال شود یا خیر
وقتی یک نتیجه ( یا یک مطلب از سایت یا حالا هرچی ) در نتایج گوگل قرار بگیرد، میگیم فلان مطلب در گوگل ایندکس ( Index ) شده، و وقتی ربات های جستجوگر میان داخل یک سایت شروع میکنن به تحلیل و بررسی اون سایت، حال وقتی یک صفحه یا یک لینک قابلیت دنبال کردن ( follow ) داشته باشه میگیم دنبال کردن.
- index (یعنی ایندکس کن)
- noindex ( یعنی ایندکس نکن )
- follow ( یعنی دنبال کن )
- nofollow ( یعنی دنبال نکن )
Free-Learn
تگ های پراستفاده در قسمت Head
خب دوستان عزیز در ادامه آموزش تگ head در HTML میخوام شمارو با تگ های پراستفاده در قسمت هد یا Head یک صفحه وب آشنا کنم.
همونطور که کمی بالاتر ذکر کردم، ما نباید هیچوقت یک محتوا مثلا متن یا تصویر یا جدول یا هرچیز دیگه ای رو برای نمایش در مرورگرها در قسمت Head یک صفحه ی وب قرار دهیم.
چون که همیشه این رو بدونید در قسمت هِد یا Head یک صفحه ی وب فقط مواردی قرار میگیرند که اطلاعاتی یا یکسری ویژگی هایی رو به صفحه ی وب ما اضافه میکنند.
از تگ های پراستفاده و یجورایی مهم در قسمت Head موارد زیر می باشند :
| نام تگ | توضیح |
|---|---|
| <title> | برای مشخص کردن عنوان یک صفحه ی وب (ضروری می باشد) |
| <style> | برای اضافه کردن دستورات سی اس اس به یک صفحه ی وب |
| <link> | برای اضافه کردن فایل های خارجی به یک صفحه ی وب |
| <meta> | برای اضافه کردن یکسری اطلاعات در مورد یک صفحه وب برای مرورگرها و موتورهای جستجوگر |
| <script> | برای اضافه کردن دستورات جاوا اسکریپت به یک صفحه ی وب |
Free-Learn
نحوه استفاده از تگ <title> در HTML
تگ <title> یکی از مهمترین تگ های HTML و بطور کلی یکی از تگ های اصلی در یک صفحه وب می باشد که هیچوقت نباید آنرا فراموش کرد چون وجود این تگ در یک صفحه ی وب برای بحث معتبر بودن و همچنین بحث سئو بسیار ضروری می باشد.
با استفاده از این تگ میتونیم عنوان صفحه مون رو برای نمایش در تب مرورگرها و موتورهای جستجوگر مشخص نماییم.
مثال : استفاده از تگ title در قسمت Head صفحه
|
1 2 3 |
<head> <title>سایت من</title> </head> |
Free-Learn
نحوه استفاده از تگ <style> در HTML
اگر فری لرن رو در بخش های قبلی دنبال کرده باشید، میدانید که من بطور کامل آموزش نحوه استفاده از صفت Style رو آموزش دادم که در صورت تمایل میتوانید این بخش را از اینجا مشاهده نمایید.
با استفاده از این تگ ما در قسمت هد یا head یک صفحه به راحتی میتوانیم دستورات CSS مان را اضافه نماییم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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> |
Free-Learn
نحوه استفاده از تگ <link> در HTML
با استفاده از تگ <link> ما به راحتی میتوانیم فایل سی اس اس خارجی یا External مان را که بصورت مجزا ایجاد شده است را به صفحه ی وبمان متصل نماییم.
از اینجا میتوانید آموزش نحوه استفاده از CSS در HTML و همچنین آموزش ساخت فایل CSS بصورت مجزا را مشاهده نمایید.
|
1 2 3 |
<head> <link rel="stylesheet" href="https://files.free-learn.ir/Tryitself/html/learn/files/mystyle.css"> </head> |
Free-Learn
نحوه استفاده از تگ <script> در HTML
با استفاده از این تگ در قسمت هد یا Head یک صفحه وب، میتوان دستورات جاوا اسکریپت را قرار داد.
با کلیک در اینجا میتوانید آموزش کامل نحوه استفاده از جاوا اسکریپت را در HTML مشاهده نمایید.
مثال شماره ۱ : استفاده از دستورات جاوااسکریپت بصورت داخلی ( یعنی درون صفحه ای )
|
1 2 3 4 5 6 7 8 9 10 11 |
<head> <script> function MyMessage(){ document.getElementById("Result").innerHTML = "Salam Khobi?"; } </script> </head> |
مثال شماره ۲ : استفاده از دستورات جاوااسکریپت بصورت خارجی ( یعنی میخوایم فایل شو وصل کنیم به صفحه مون )
|
1 2 3 4 5 |
<head> <script src="https://files.free-learn.ir/Tryitself/html/learn/files/test.js"></script> </head> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ head در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ head تنها از صفات عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- نکته یا توضیح خاصی وجود ندارد.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ head را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
head { display: none; } |
