این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
آموزش کار با تگ Head در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با تگ Head در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با تگ Head در HTML
هد یا Head یا قسمت سَر ، یکی از مهمترین و اساسی ترین بخش یک صفحه ی وب می باشد، بطور کلی میتونیم بگیم که Head یک صفحه ی وب مغز آن صفحه می باشد ، که در این قسمت Head یکسری اطلاعات مربوط به مرورگرها و موتورهای جستجوگر ( برای بحث سئو ) قرار میگیرد.
بفرض مثال عنوان صفحه ما برای نمایش در مرورگرها در این قسمت قرار میگیرد، یا مثلا برای اضافه کردن دستورات CSS یا دستورات JS و.. همگی در قسمت Head یک صفحه قرار میگیرد.
تگ <head> در یک صفحه ی وب بعد از تگ <html> و قبل از تگ <body> قرار میگیرد، لطفا به دستورات زیر و محل قرار گیری تگ <head> در یک صفحه ی وب توجه نمایید.
حواستون باشه اگر میخواید یک محتوا ، متن ، تصویر و… در مرورگرها نمایش داده شود باید آن را در تگ 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> |
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 داریم و یه تگ style ، صفت چیزی هست که داخل یک تگ استفاده میشه ولی تگ خودش یه چیز مجزاست و ربطی به صفت نداره.
اگر فری لرن رو در بخش های قبلی دنبال کرده باشید، میدونید که من بطور کامل آموزش نحوه استفاده از صفت Style رو آموزش دادم که در صورت تمایل میتونید این بخش رو مشاهده نمایید.
حال ما با استفاده از تگ 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
با استفاده از تگ script در قسمت هد یا 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> |
خب دوستان عزیز ، به پایان آموزش کار با تگ Head در HTML رسیدیم، امیدوارم که براتون مفید بوده باشه و مشکل خاصی هم در این آموزش نداشته باشید.
