🎁 تخفیفات عیدانه دوره های آموزشی آتریا را از دست ندهید🎁

آموزش طراحی سایت - تگ Head در HTML

در این بخش از آموزش طراحی سایت به آموزش تگ head در HTML می پردازیم و شما را با عنصرهای داخل آن آشنا می کنیم.

آموزش طراحی سایت - تگ Head در HTML

در طراحی سایت و طراحی صفحات وب، تگ head یکی از مهمترین عناصر HTML صفحه است زیرا این تگ هم فایل های css و  script های خارجی را فراخوانی می کند و هم به واسطه نگهداری عناصر title و meta در SEO بسیار موثر است. تگ head، عناصر زیر را در خود نگهداری می کند:

<title>, <style>, <meta>, <link>, <script> و <base>.


تگ head در HTML

تگ head یک نگهدارنده برای متا دیتا (metadata) می باشد و بین تگ html و تگ body قرار می گیرد. متا دیتای HTML اطلاعاتی در رابطه با سند HTML می باشد. متا دیتا در صفحه نمایش داده نمی شود. متا دیتا معمولا عنوان، نوع کد گذاری (Charset)، استایل ها، اسکریپت ها و بقیه ی اطلاعات متا را تعریف می کند.


تگ title در HTML

تگ title در HTML عنوان یک سند را تعریف می کند. عنوان باید صرفا تشکیل شده از متن باشد. عنوان در بخش title مرورگر نمایش داده می شود.

استفاده از تگ title در سندهای HTML ضروری است!

به خاطر داشته باشید که محتوای عنوان یک صفحه بسیار در بحث سئو (SEO) یا همان search engine optimization حائز اهمیت است. الگوریتم های موتورهای جستجو از عنوان صفحه برای تصمیم گیری در رابطه با نشان دادن صفحه در نتایج جستجوهای مرورگر استفاده می کنند. در حقیقت title صفحه باید بسیار هوشمندانه و هدفمند تعریف شود تا موتورهای جستجو صفحه سایت شما را در نتایج جستجو بالاتر از دیگر نتایج نمایش دهند.


کاربرد های تگ title:

  • یک عنوان را در toolbar مرورگر تعریف می کند.
  • یک عنوان را برای صفحه وقتی که صفحه به لیست صفحات مورد علاقه اضافه می شود فراهم کند.
  • یک عنوان را در نتایج جستجوی موتور جستجو نمایش دهد.

در نتیجه، سعی کنید که تا جایی که ممکن است عنوان صفحه را مرتبط و معنا دار بنویسید زیرا باعث می شود که کاربران و مرورگر، آن صفحه را بهتر بفهمند!


یک سند ساده HTML:

آموزش طراحی سایت

تگ style در HTML

تگ style در HTML به منظور تعریف کردن اطلاعات استایل دهی مربوط به یک صفحه HTML به کار می رود:

آموزش HTML

همانطور که در این مثال نمایش داده شده است، درون تگ style، استایل های صفحه قرار می گیرد. از تگ style برای نوشتن کدهای CSS مربوط به سند استفاده می شود. نتیجه کد بالا در زیر قابل مشاهده است:

آموزش طراحی سایت

تگ link در HTML

تگ link در HTML رابطه بین سند فعلی و یک منبع خارجی را تعریف می کند. تگ link اکثر اوقات برای متصل کردن استایل شیت های (فایل های css) خارجی به کار می رود.

آموزش طراحی سایت

نکته مهم: به جهت بهینه سازی صفحه برای موتورهای جستجو، بهتر است که از استایل های خارجی و لینک (link) استفاده کنید و استایل ها را درون تگ style ننویسید.


تگ meta در HTML

تگ meta معمولا به منظور مشخص کردن (نوع کد گذاری)  Charset، توضیحات صفحه، کلمات کلیدی، نام نویسنده مطلب و تنظیمات نمایش (viewport) به کار می رود.

متا دیتا روی صفحه نمایش داده نخواهد شد اما توسط مرورگر (چگونگی نمایان شدن محتوا یا ریلود شدن صفحه)، موتورهای جستجو (کلید واژه ها) و بقیه سرویس های وب خوانده شده و به کار می رود.

مثال ها

Charset (نوع کد گذاری) استفاده شده را تعریف می کند:

آموزش تگ head در html

کلمات کلیدی برای موتورهای جستجو را تعریف می کند که برای SEO بسیار اهمیت دارد. سعی کنید کلمات کلیدی مرتبط و معنی دار برای صفحه خود بنویسید:

آموزش طراحی سایت

توضیحاتی را برای وب سایت تعریف می کند که برای SEO بسیار حائز اهمیت است. سعی کنید چکیده مقاله به همراه کلامات کلیدی خود را در این تگ به کار ببرید و سعی کنید که از 180 کاراکتر بیشتر نشود:

آموزش طراحی سایت

نویسندۀ یک صفحه را تعریف می کند:

آموزش HTML

سند را هر 30 ثانیه یکبار Refresh می کند:

آموزش طراحی سایت

به منظور تنظیم کردن viewport به کار می رود تا وب سایت شما ریسپانسیو شود و در دستگاه های مختلف مناسب بنظر آید:

آموزش HTML

مثال تگ های meta:

آموزش طراحی سایت


تنظیم کردن Viewport

Viewport قسمت قابل نمایش برای کاربر در یک وب سایت می باشد. Viewport نسبت به صفحه نمایش های مختلف تغییر می کند – به عنوان مثال در صفحه نمایش موبایل کوچک تر و در صفحه نمایش دسکتاپ بزرگتر نمایش داده می شود.

شما باید تگ meta زیر را در تمام صفحات وب سایت خود قرار دهید:

آموزش تگ head در html

این کد به مرورگر دستورات لازم برای چگونگی کنترل مقیاس ها و ابعاد صفحه را می دهد. قسمت width=device-width عرض صفحه را بر اساس اندازه عرض صفحه نمایش مورد نظر تنظیم می کند. قسمت initial-scale=1.0 مقدار زوم شدن صفحه هنگامی که صفحه در صفحه نمایش های کوچک تر بارگذاری می شود را تنظیم می کند.

در اینجا یک مثال از یک وب سایت که متا تگ viewport ندارد و یک مثال از همان صفحه که دارای تگ viewport می باشد، بررسی می شود:

بدون متا تگ Viewport

آموزش عنصر head در html

با استفاده از متا تگ Viewport

آموزش HTML


تگ script در HTML

تگ script در HTML به منظور تعریف کردن جاوا اسکریپت های client-side به کار می رود. جاوا اسکریپت زیر متن "!Hello JavaScript" را درون یک تگ HTML با "id=demo" می نویسد:

آموزش تگ head در html

همانطور که مشاهده می کنید، با استفاده از تگ script می توان کدهای javascript را درون head صفحه قرار داد. نتیجه کد بالا به شکل زیر است:

آموزش HTML

تگ base در HTML

این تگ  base URL و target برای تمام URL های relative را در یک صفحه مشخص می کند. تگ < base > باید یا دارای href و یا دارای ویژگی target باشد یا هر دوی آن ها را داشته باشد.

نکته: فقط می توان از یک تگ < base > در یک سند HTML استفاده کرد!

مثال:

یک URL پیش فرض و یک target پیش فرض برای تمام لینک ها مشخص کنید:

آموزش طراحی سایت

که نتیجه کد بالا به شکل زیر است:

آموزش HTML

عناصر تگ head در HTML

آموزش عنصر head در html
آموزش طراحی سایت آموزش HTML آموزش تگ Head در HTML آموزش کار با تگ HEAD دوره آموزش طراحی سایت