تگ head – آشنایی با تگ head در HTML و کاربرد تگ head
خوش اومدین به هشتمین جلسه از دوره آموزش HTML. ما امروز میخوایم در مورد تگ head صحبت کنیم. تمامی تگ هایی که تا اینجا در موردشون صبت کردیم رو داخل تگ body مینوشتیم. امروز میخوایم در مورد تگ head و تگ هایی که داخل اون استفاده میشه صبت کنیم.
همونطور که میتونید یه فایل html از یه تگ html تشکیل شده که دو تگ head و body داخل اون قرار میگیرن. تمامی تگ هایی که قرار هست در خروجی نمایش داده بشن (همانند تگ هایی که تا اینجا با اونها آشنا شدیم) در تگ body قرار میگرن. تگ head مربوط به تگ هایی است که به طور مستقیم چیزی را داخل صفحه نمایش نمیدن بلکه خصوصیات صفحه ما رو تعریف میکنند و اگر قرار باشه فایلی دیگری رو داخل فایل html خودمون داشته باشیم میتونیم تو این قسمت فراخوانی کنیم.
تگ title در html
اگه خاطرتون باشه ما تو اولین جلسه از این دوره با این تگ آشنا شدیم. این تگ، یه ت دو قسمتی هستی که محتوای داخل اون، عنوان تب صفحه ما در مرورگر رو مشخص میکنه. اگه از این تب استفاده نکنیم، مرورگر به صورت پیشفرض اسم فایل رو به عنوان تایتل قرار میده. این تگ در SEO از اهمیت زیادی برخوردار هست. تصویر زیر رو ببینید:
همونطور که توی تصویر بالا میبینید، مقداری که در داخل تگ title که درون تگ head است قرار دادیم، در داخل مرورگر روی تب نمایش داده شده است.
همچنین زمانی که یک موتور جستجو صفحه شما را به کاربرهای خود معرفی میکند. این مقدار به عنوان نام صفه شما نمایش داده میشود.
تگ style
تگ style یکی از شیوه هایی است که به ما این اجازه رو میده که خصوصیت های CSS رو تعریف کنیم. در صورت لزوم میتونیم از این تگ داخل تگ head استفاده کنیم. در مورد این تگ و کاربرد اون در دوره CSS صحبت خواهیم کرد.
تگ link
این تگ که تک قسمتی است، بین یه فایل خارجی و فایل فعلی ما ارتباط برقرار میکنه. معمولا از این تگ برای استفاده از فایل های CSS خارجی استفاده میشه. قطعه کد زیر نمونه ای برای تگ link هست:
<link rel="stylesheet" href="mystyle.css">
همونطور که در کد بالا میبینید، با استفاده از این تگ، یک فایل css فراخوانی شده است.
با این تگ در دوره CSS آشنا میشیم و ازش استفاده میکنیم.
تگ meta
تگ meta معمولاً برای تعیین مجموعه کاراکترها، توضیحات صفحه، کلمات کلیدی، نویسنده سند و تنظیمات viewport استفاده میشن.
metadata توی صفحه نمایش داده نمیشن اما توسط مرورگرها (نحوه نمایش محتوا یا بارگذاری مجدد صفحه)، موتورهای جستجو (کلمات کلیدی) و سایر سرویس های وب استفاده میشن.
نمونه هایی از کاربرد تگ meta رو در پایین میتونید ببینید:
<meta charset="UTF-8">
تگ meta بالا باعث تعریف مجموعه کاراکترها برای صفحه ما میشه. در نمونه بالا مقدار UTF-8 که از کاراکترهای فارسی هم پشتیبانی میکنه تنظیم شده. برای صفحات فارسی ما از این نوع charset استفاده میکنیم.
<meta name="keywords" content="HTML, CSS, JavaScript">
با استفاده از تگ meta که name اون برابر با keywords باشه، ما قادر هستیم کلمات کلیدی صفحه خودمون رو به موتورهای جستجو معرفی کنیم. مقدار content کلمات کلیدی صفحه ما است که هر کلمه کلیدی با کاما جدا شده.
<meta name="description" content="Free Web tutorials">
با استفاده از تگ meta که name اون برابر با description باشه، ما قادر هستیم توضیحاتی از صفحه خودمون رو برای موتورهای جستجو ارائه بدیم. مقدار content توضیحات صفحه ماست.
<meta name="author" content="Mr.Ebi">
با استفاده از تگ meta که name اون برابر با author باشه، ما میتونیم نویسنده و پدیدآورنده صفحه رو مشخص کنیم. مقدار content نام نویسنده صفحه است.
<meta http-equiv="refresh" content="30">
با استفاده از تگ meta و صفت htt-equiv که مقدار refresh رو بهش اختصاص داده باشیم، قادر هستیم صفحه جاری هر به ازای عدد وارد شده در content رفرش کنیم. در مثال بالا صفحه ما هر 30 ثانیه یک بار رفرش میشه.
ما اجازه داریم از تگ های بالا بصورت همزمان استفاده کنیم و تمامی تگ های meta رو در یک صفحه html داشته باشیم. چرا که هر کدام از مثالهای بالا تنظیمات متفاوتی رو اعمال میکنه. اما به خاطر داشته باشید که از هر نمونه فقط یک بار میتونیم استفاده کنیم.
تگ script
ما با استفاده از تگ script این امکان رو داریم که قطعه کدهای جاوا اسکریپت را داخل HTML استفاده کنیم.
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>قطعه کد جاوا اسکریپت بالا را اگر داخل تگ head قرار دهیم. باعث میشه مقدار Hello JavaScript! داخل آیتمی با id=demo قرار بگیره. از این تگ در دوره جاوا اسکریپت استفاده میکنیم و باهاش آشنا میشیم.
تگ base
تگ base باعث میشه ما یک ریشه و روت ثابت برای آدرس دهی های خود در صفحه داشته باشیم. ما در کار با تصاویر از آدرس دهی نسبی و مطلق استفاده کردیم. اگر بخواهیم میتوانیم قسمت تکراری آدرس را در صفت href از تگ base قرار بدیم. به این ترتیب، مقدار href در ابتدای تمامی آدرس های نسبی صفحه ما لحاظ میشه. همچنین یه صفت target هم داره این تگ که به عنوان مقدار target پیشفرض برای تگ a در طول پروژه استفاده میشه. ما میتونیم از یکی از این دو صفت یا هر دوی آنها استفاده کنیم.
تصویر زیر رو ببینید:
همانطور که در تصویر بالا میبینید من از تگ base در داخل تگ head استفاده کردم و مقدار href اون رو برابر با آدرس سایت خودم قرار دادم. با این کار در هنگام نمایش تصویری که در خط 11 فراخوانی شده، بجای اینکه به دنبال تصویر stickman.gif در پوشه images کنار فایل من بگرده این تصویر رو از آدرس زیر میخونه
https://mrebi.pro/images/stickman.gif
در واقع مقدار href تگ base رو در ابتدای url من که در src بود اضافه میکنه. این اتفاق برای مقدار href تگ a در خط 12 هم میفته و مقدار href تگ base به ابتدای اون اضافه میشه. همینطور هر آدرس نسبی که داخل این فایل استفاده بشه.
همچنین مقدار target که در تگ base تعریف میشه بصورت پیشفرض برای همه تگ های a داخل صفحه اعمال میشه. مگر اینکه در داخل تگ مجددا target جدیدی تعریف کنیم که اولویت با target درون تگ a هست.
ما تنها یک بار اجازه استفاده از تگ base رو داخل فایل خودمون داریم و اختیار داریم که به href و یا target و یا هر دوی اونها مقداردهی کنیم.
