آموزش تگ head در HTML + تگ ها داخلی هدر

تگ هدر (header)

به عنوان یک نگهدارنده برای متاداده یا ابرداده ها (داده های مربوط به داده ها) استفاده می شود. این تگ بین تگ و تگ قرار می گیرد.

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

Head می تواند حاوی اطلاعات ابرداده زیادی باشد یا اینکه می تواند اطلاعات خیلی کم یا بدون اطلاعات باشد، به نیازهای ما بستگی دارد. بخش Head در هنگام ایجاد یک وب سایت نقش اساسی در فایل HTML دارد.

ابرداده ها اطلاعاتی مانند عنوان سند، مجموعه کاراکتر، سبک ها، لینک ها، اسکریپت ها و سایر اطلاعات دیگر را تعریف می کنند.

تگ های مورد استفاده در ابر داده ها عبارتند از:

تگ عنوان

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

  1. عنوانی برای صفحه تعریف می کند که در برگه مرورگر نمایش داده می شود.
  2. هنگامی که صفحه به لیست علاقه مندی ها اضافه می شود، از این عنوان استفاده می شود.
  3. در نتایج موتور جستجو عنوان صفحه نمایش داده می شود.

نکته: عنصر عنوان باید برای سند خاص باشد و توصیه می شود تعداد کاراکترهای آن بین ۶۵ تا ۷۰ کاراکتر شامل فضاهای خالی باشد.

مثال

html>

The body’s content is displayed in the browser window.

The content of the title element is displayed in the browser tab, in favorites and in search engine results.

تگ استایل

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

مثال

html>

    body {background-color: pink;}

    h1 {color: red;}

    p {color: blue;}

This is a Heading

This is a paragraph.

تگ rel در HTML

عنصر ، یک صفحه سبک خارجی را به صفحه وب جاری پیوند می دهد. عنصر شامل دو صفت اصلی “rel” و “href” است. صفت rel نشان می دهد که فایل خارجی، یک شیوه نامه است و href مسیر فایل خارجی را تعیین می کند.

مثال

html>

Web-page with external CSS

This is looking a cool page

چارست (charset) در HTML

عنصرچندین ابرداده متفاوت مانند مجموعه کاراکتر، توضیحات صفحه، کلمات کلیدی، نویسندگان و … را برای صفحه وب تعیین می کند.

ابرداده اغلب توسط مرورگرها، موتورهای جستجو و سایر سرویس های وب برای رتبه دهی بهتر صفحه وب شما استفاده می شود.

در ادامه نحوه استفاده از ابرداده ها را توضیح خواهیم داد:

تعریف یک مجموعه کاراکتر:

صفت charset رمزگذاری کاراکترها را مشخص می کند. در این مثال، مقدار مجموعه کاراکتر را “۸UTF-” قرار داده ایم که می تواند هر زبانی را نمایش می دهد.

مثال

html>

This is written in English language My friend’s name is…….

This is Chinese language Wǒ de péngyǒu jiào

HTML Head

تعریف توضیحات صفحه وب:

تعیین توضیحات برای جستجوهای مرتبط با صفحه توسط موتورهای جستجو می تواند مفید باشد. مقدار description برای صفت name توضیحات را تعریف می کنید و مقدار صفت content، متن توضیحات موردنظر درباره صفحه می باشد.

تعریف کلمات کلیدی برای موتورهای جستجو:

مقدار keywords در صفت name برای تعیین کلمات کلیدی صفحه و برای موتور جستجو استفاده می شود اما ممکن است توسط مرورگر به دلیل اسپم ها نادیده گرفته شود.

تعیین نویسنده صفحه وب:

مقدار author برای تعریف نام نویسنده و مقدار content نام نویسنده محتو
ای صفحه را نشان می دهد و برای استخراج خودکار اطلاعات نویسنده توسط برخی سیستم های مدیریت محتوا مفید است.

بارگذاری مجدد سند هر ۳۰ ثانیه:

ابرداده refresh به مرورگر دستور می دهد تا به طور خودکار صفحه را پس از یک بازه زمانی خاص دوباره بارگذاری کند. در مثال بالا، صفحه هر ۳۰ ثانیه یکبار به طور خودکار تازه و دوباره بارگذاری می شود.

اگر به مقدار content یک URL اضافه کنید، صفحه پس از پایان مدت زمان مشخص به آن صفحه هدایت خواهد شد.

مثال

html>

Meta element Example

Kindly wait for ۵ seconds and after ۵ seconds it will automatically redirect to URL specified in meta tag

مثال زیر شیوه استفاده از تمام عناصر متا را در تگ head نشان می دهد:

html>

All the meta information are set.

استفاده از تگ برای تنظیم Viewport

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

Viewport منطقه قابل مشاهده صفحه وب است. از دستگاهی به دستگاه دیگر تغییر می کند و در نمایشگرهای تلفن های همراه کوچکتر از رایانه ها ظاهر می شود.

ساختار برای عنصر viewport:

در اینجا، عنصر میدان دید شیوه کنترل ابعاد و مقیاس بندی صفحه را مشخص می کند.

width=device-width  عرض صفحه را مطابق با عرض صفحه دستگاه تنظیم می کند (بسته به نوع دستگاه متفاوت خواهد بود).

initial-scale=1.0  برای تنظیم میزان بزرگنمایی اولیه هنگام اولین بارگذاری صفحه توسط مرورگر استفاده می شود. اگر مقدار آن ۱ باشد، صفحه را به طور استاندارد نمایش می دهد.

نمونه ای از صفحه وب بدون viewport در تگ

html>

To understand this example, you should open this page on a phone or a tablet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation

ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel

eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu

feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum

zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis

eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat

facer possim assum.

نمونه ای از صفحه وب با viewport در تگ

html>

img {

    max-width: ۱۰۰%;

    height: auto;

}

To understand this example, you should open this page on a phone or a tablet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation

ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel

eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu

feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum

zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis

eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat

facer possim assum.

نکته: برای دیدن تفاوتها به صورت شفاف، صفحه را در تلفن هوشمند یا تبلت باز کنید.

مثال

html>

We have specified a base URL, the browser will look for the image “html5.png”

at “https://static.javatpoint.com/htmlpages/images/html5.png”

JavatPoint

The link above will open in a new window because base target is set to “_blank”.

تگ script برای فایل های جاوا اسکریپت

مثال

html>

        function fun() {

        document.getElementById(“p”).style.color=”green”;

        }

Script within Head element

This will change the color

حذف عناصر ، ،

HTML5امکان حذف تگ های ، را فراهم کرده است.

مثال

html>

This is a heading

This is a paragraph.

نکته: حذف تگ های ,. توصیه نمی شود. حذف این تگ ها می تواند باعث خراب شدن نرم افزار DOM یا XML شود و در مرورگرهای قدیمی خطای ایجاد کند ( مانند ۹IE)، با این وجود می توانید تگ را حذف کنید.