HTML Head

یادگیری HTML

تعداد بازدید : 3533

تاریخ و ساعت انتشار : سه شنبه 30 آذر 1395 19:50

عنصر <head> در HTML

این عنصر ظرفی برای نگه داشتن ابرداده یا همان metadata (داده ای درباره داده دیگر) می باشد و بین تگ <html> و <body> قرار می گیرد. ابرداده HTML داده هایی درباره سند HTML می باشد و نمایش داده نمی شود.
ابرداده معمولا عنوان ، مجموعه کاراکتر ، استایل ها ، لینک ها ، اسکریپت ها و دایر ابر اطلاعات درباره سند را تعریف می کند. تگ های زیر ابرداده را تعریف می کنند :

عنصر <title> در HTML

این عنصر عنوان سند را تعریف می کند و در HTML و XHTML مورد نیاز است. عنصر <title> عنوانی در تب مرورگر تعریف می کند ، زمانی که صفحه را در علاقه مندی های مرورگر ذخیره می کنیم عنوانی برای صفحه وب ارائه می کند و عنوان صفحه را در نتایج جستجوی موتورهای جستجو نمایش می دهد.

یک سند ساده HTML :

مثال

یک سند ساده اچ تی ام ال

<!DOCTYPE html>
<html>
<head>
  <title>عنوان صفحه</title>
</head>

<body>
<p dir="rtl">محتوای عنصر body در پنجره مرورگر نمایش داده می شود.</p>
<p dir="rtl">محتوای عنصر title در زبانه مرورگر ، لیست علاقمندی ها و نتایج موتورهای جستجو نمایش داده می شود.</p>
</body>
</html>

مشاهده مثال

عنصر <style> در HTML

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

مثال :

عنصر استایل

 <style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

مشاهده مثال

عنصر <link> در HTML

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

مثال :

عنصر لینک

<link rel="stylesheet" href="mystyle.css">

مشاهده مثال

نکته ! برای یادگیری بیشتر درباره CSS به "آموزش های CSS" ما مراجعه کنید.

عنصر <meta> در HTML

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

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

<"meta charset="UTF-8>

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

<"آموزش های رایگان طراحی وب"=meta name="description" content>

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

<"آموزش برنامه نویسی ، طراحی وب ، وب سایت , meta name="keywords" content="HTML, CSS, XML, JavaScript>

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

<"حامد معز"=meta name="author" content>

رفرش کردن سند در هر 30 ثانیه :

<"meta http-equiv="refresh" content="30>

مثال هایی از ابر داده ها :

عنصر متا

<meta charset="UTF-8">
<meta name="description" content="آموزش های رایگان طراحی وب">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hamed Moez">

مشاهده مثال

عنصر <script> در HTML

این عنصر برای تعریف اسکریپت های سمت کاربر استفاده می شود. اسکریپت زیر جمله "سلام دوستان عزیز" را داخل عنصر دارای id="demo" می نویسد :

مثال

عنصر اسکریپت

 <script>
function myFunction {
    document.getElementById("demo").innerHTML = "سلام بر دوستان عزیز";
}
</script>

مشاهده مثال

نکته ! برای یادگیری بیشتر و کامل تر به آموزش های جاوا اسکریپت ما مراجعه کنید.

عنصر <base> در HTML

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

مثال :

عنصر base

<base href="http://www.webmehraz.com/images/" target="_blank">

مشاهده مثال

فراموش کردن <html> ، <head> و <body> ؟؟
با توجه به استانداردهای HTML5 تگ های <html> ، <head> و <body> را می توان ننوشت. کد زیر به عنوان HTML5 معتبر شناخته خواهد شد :

مثال :

فراموش کردن تگ های html ، body یا head

<!DOCTYPE html>
<title>عنوان صفحه</title>

<h1 dir="rtl">این یک تیتر است</h1>
<p dir="rtl">این یک پاراگراف است.</p>

مشاهده مثال

نکته ! در وب مهراز ، توصیه میکنیم حتما تگ های بالا را بنویسید ، ننوشتن این تگ ها می تواند باعث عدم اجرای صحیح نرم افزار DOM یا XML شود و خطاهایی در مرورگر های قدیمی ایجاد کند.

خلاصه درس :

<head> برای تعریف اطلاعاتی درباره سند
<title> برای تعریف عنوان سند
<base> برای تعیین آدرس پایه و target پایه برای همه لینک های موجود در یک صفحه وب
<link> برای تعریف رابطه میان یک سند و یک فایل منبع خارجی
<meta> برای تعریف ابرداده های درباره سند
<script> برای تعریف یک اسکریپت سمت کاربر
<style> تعریف اطلاعات استایل دهی برای یک سند

دانلود فایل PDF مقاله درس بعدی درس قبلی