۲
آذر

جلسه ۵۱ : آموزش کار با تگ head در HTML

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTML کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه گذشته با تگ های هدینگ یا تگ های h1 تا h6 آشنا شدیم؛ این تگ ها به تعریف عنوان ها یا تیترهای یک مطلب در HTML می پردازند.
در این جلسه آموزش کار با تگ head در HTML را به علاقمندان این دوره ارائه می نماییم.

آموزش کار با تگ head در HTML

به مثال زیر توجه نمایید.
در این مثال یک سند HTML با یک تگ<title> در بخش اصلی آن مشخص شده است.

مثال :

<!DOCTYPE html>
<html>
<head>
  <title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

The content of the document......

</body>

</html>

تعریف و کاربرد

تگ head تگی است برای نگهداری سایر تگ های HTML. این تگ برای نگهداری سایر تگ همچونیک ظرف عمل می کند.
عنصر head می تواند یک عنوان برای سند، اسکریپت ها، استایل ها، متادیتا ها و موارد دیگر باشد.

عناصر زیر می توانند درون عنصر <head> قرار بگیرند:

<title> (وجود این تگ در یک سند HTML ضروری است).
<style>
<base>
<link>
<meta>
<script>
<noscript>

پشتیبانی مرورگر ها

عنصر
<head>	بله	بله	بله	بله	بله

تفاوت بین HTML 4.01 و HTML5

در HTML 4.01 تگ head یک تگ ضروری است.
اما در HTML5 ، تگ head قابل حذف است. کد زیر به عنوان HTML5 اعتبار می یابد:

مثال :

<!DOCTYPE html>
<html>
<title>Title of the document</title>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

<!DOCTYPE html>

<html>

<title>Title of the document</title>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

خصیصه ها

خصیصه	مقدار	توضیحات
profile	URL	این خصیصه آدرس صفحه ای که حاوی قوانین مرتبط با صفحه وب است را تعریف میکند. این قوانین را می توان توسط مرورگرها خواند تا به وضوح اطلاعات را در ویژگی محتوای برچسب <meta> درک کرد. این خصیصه در HTML5 پشتیبانی نمی شود.

خصیصه های سراسری Global Attributes

تگ <head> از خصیصه های سراسری در HTML پشتیبانی می کند.

مثال های تکمیلی

مثال یک

استفاده از تگ<base> در <head> (نحوه استفاده از تگ <base> برای مشخص کردن URL پیش فرض و یک صفحه مقصد برای کلیه لینک های موجود در یک صفحه)

مثال :

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.w3schools.com/" target="_blank">
</head>
<body>

<p><img src="images/stickman.gif" width="24" height="39" alt="Stickman"> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "https://www.w3schools.com/images/stickman.gif".</p>

<p><a href="tags/tag_base.asp">HTML base tag</a> - Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p><img src="images/stickman.gif" width="24" height="39" alt="Stickman"> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "https://www.w3schools.com/images/stickman.gif".</p>

<p><a href="tags/tag_base.asp">HTML base tag</a> - Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".</p>

</body>

</html>

مثال دو

استفاده از تگ <style> در <head> (نحوه اضافه کردن اطلاعات استایل در بخش <head>)

مثال :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

h1 {color:red;}

p {color:blue;}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

مثال سه

استفاده از تگ <link> در <head> (نحوه استفاده از تگ <link> برای لینک دهی به صفحه یک استایل خارجی)

مثال :

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<h1>I am formatted with a linked style sheet</h1>
<p>Me too!</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>I am formatted with a linked style sheet</h1>

</body>

</html>

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <head> را با مقادیر پیش فرض زیر نمایش می دهند:

مثال :

head {
  display: none;
}

head {

display: none;

}

کلام آخر

در این جلسه به آموزش کار با تگ head در HTML پرداختیم و آموختیم که می توان از تگ head برای نگهدرای سایر تگ های HTML استفاده کرد.
در جلسه آینده به آشنایی و بررسی تگ header خواهیم پرداخت.
با پی وی لرن همراه باشید.

QR: جلسه ۵۱ : آموزش کار با تگ head در HTML

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۵۱ : آموزش کار با تگ head در HTML

مقدمه

آموزش کار با تگ head در HTML

تعریف و کاربرد

پشتیبانی مرورگر ها

تفاوت بین HTML 4.01 و HTML5

خصیصه ها

خصیصه های سراسری Global Attributes

مثال های تکمیلی

مثال یک

مثال دو

مثال سه

تنظیمات پیش فرض CSS

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ