توی جلسات قبل در آموزش HTML با تگ head آشنا شدیم که تگ زیر مجموعه خود html هست . کدهایی توی این تگ قرار میگیره که برای کاربر نشون داده نمیشه و فقط جنبه کدنویسی داره . چند تا تگ هایی که رایج هست و داخل این تگ head قرار می گیره در زیر لیست کردیم براتون :
تگ های : title – style – meta – link – script و تگ base
تگ title در HTML
توی جلسات قبل بطور خلاصه یه توضیحاتی دادیم بهتون درباره این تگ که چیکار میکنه . اینجا تکرار میکنیم و کمی بیشتر توضیحات میدیم. این تگ کار عنوان صفحه رو بر عهده داره که میاد به مرورگر میگه عنوانی که میخوای نشون بدی توی تب مرورگر چی باشه . توی این تگ هم فقط باید متن بنویسین و هیچی دیگه نباشه .
این تگ title جز ملزومات هستش و حتما باید توی کدهاتون قرار داشته باشه. نه اینکه این تگ رو نذارین هیچی لود نمیشه توی صفحه ! فقط سایتتون هیچ موردی نداره که به مرورگر بگه درباره چی دارین توضیح میدین توی این صفحه . توی بهینه سازی وب سایت برای موتورهای جستجو هم خیلی کمک میکنه و در اصل اولین موردی که موتورهای جستجو چک میکنن همین عنوان صفحه هست ! بعدش میان الگوریتم رو طبق اصول های جدید بررسی میکنن. پس حتما این تگ رو فراموش نکنین.
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body data-rsssl=1>
The content of the document......
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
تگ style در HTML
توی جلسات قبلی آموزش HTML بهتون توضیح دادیم که چندتا روش وجود داره که بتونیم CSS بزنیم توی HTML و یکی از اون روش ها چی بود!؟ داخل صفحه ! وقتی ما میایم تگ style رو جا میدیم توی تگ head یعنی داریم به مرورگر میگیم بیا این استایل ها رو بگیر و برای این صفحه استفاده کن ازشون .
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
تگ link در HTML
این تگ خیلی کاربردی هستش . میاد میگه یه رابطه ای وجود داره بین این صفحه و این لینکی که داریم میزنیم و اون رابطه مشخص میکنه که این لینک از چه نوعی هستش . اغلب این تگ برای استفاده از CSS برای صفحه استفاده میشه و میتونیم باهاش کدهایی که زدیم توی CSS رو وصل کنیم به این صفحه .
<link rel="stylesheet" href="mystyle.css">
تگ meta در HTML
این تگ عموما کار خاصی نمیکنه ! ولی خیلی کارها بر عهده اون هستش ! و کارهایی هم که توی بهینه سازی وب سایت برای موتورهای جستجو تاثیر زیادی داره . یه جورایی اگه نباشه اتفاق خاصی نمیوفته ولی خیلی برای موتورهای جستجو مهم هست ! چند تا کار میکنه که میایم باهاش کاراکتر ست – کلمه کلیدی –
توضیحات متا صفحه – نویسنده صفحه – و تنظیمات viewport رو انجام میدیم. عجله نکنین ! همه این موارد رو کم کم یاد میگیریم.
چند نمونه استفاده از این تگ meta رو در زیر براتون آوردیم .
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Free Web tutorials">
<meta name="author" content="John Doe">
<meta http-equiv="refresh" content="30">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
به ترتیب اولین خط که میاد کاراکتر ست برای صفحه مشخص میکنه و بعدا با کاراکتر ست ها آشنا میشین.
خط دوم میاد کلمات کلیدی رو به موتورهای جستجو معرفی میکنه .
خط سوم هم میاد توضیحات وب سایت برای این صفحه در موتورهای جستجو رو معرفی میکنه .
خط چهارم میاد نویسنده صفحه رو به موتورهای جستجو معرفی میکنه .
خط پنجم میاد صفحه رو هر ۳۰ ثانیه یکبار رفرش میکنه !
خط آخر هم که میاد عرض صفحه رو برای دیوایس مختلف ایجاد میکنه که چقدر عرض بگیره .
viewport در HTML
در قسمت قبلی توضیح دادیم بهتون که یه تگی هست برای meta که میاد عرض صفحه رو درست میکنه برامون توی دیوایس های مختلف . این عرض برای دیوایس های مختلف میتونه متفاوت باشه مثلا توی گوشی با لپ تاپ. خیلی لازمه این تگ رو توی همه صفحات وب سایتتون داشته باشین که درست قاب بندی اصلی رو بیاره براتون توی صفحه .
<meta name="viewport" content="width=device-width, initial-scale=1.0">
این خط کد میاد به مرورگر میگه چه ابعادی و چه مقیاسی رو برای این صفحه استفاده کن . اون مقداری که برای content درج شده width=device-width معنیش اینه که بیا عرض صفحه رو بسته به عرض دیوایس که داره کاربر استفاده میکنه برای دیدن وب سایت عوض کن . و از اون طرف هم گزینه بعدی initial-scale=1.0 هم داره میگه چقدر صفحه رو زوم کن!؟ هیچی . همون ۱ یعنی اصلا زوم نکن رو صفحه .
وقتی از این کد استفاده کنیم المان های صفحه بخصوص عکس ها میان تو عرضی که ما دادیم به این خط لود میشن و دیگه جلوگیری میکنه از بهم ریختگی صفحه .
تگ script در HTML
در دوره های آتی با جاوا اسکریپت آشنا میشین . خیلی دنیای جالب و وسیعی داره . فعلا در این حد بدونین که برای استفاده از کدهای js در وب سایتتون میتونین این کد رو داخل head قرار بدین و کدتون لود بشه . (نا گفته نمونه که استفاده از کدهای js در قسمت head سرعت سایتتون رو کم میکنه و برنامه نویسان اکثرا میان این کدها رو توی فوتر جاسازی میکنن که سرعت وب سایت بره بالاتر ! )
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
تگ base در head
استفاده ای که از این تگ میتونین توی کدها داشته باشین این هستش که میاد توی حالت هایی که ما داریم لینک دهی ارتباطی میکنیم یا همون relative link دیگه برای هر صفحه مجزا نمیره لینک رو از همون آدرس استارت بزنه و ما مجبور بشیم آدرس رو هی عوض کنیم . میایم آدرس base رو تعریف میکنیم و لینک های وبسته رو ایجاد میکنیم و بوم ! همه کارها رو خودش انجام میده. یعنی میره توی اون آدرس که ما دادیم بهش و ازونجا شروع میکنه لینک های وابسته رو .
<head>
<base href="https://www.bs-dseign.ir/" target="_blank">
</head>
<body data-rsssl=1>
<img decoding="async" src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
