مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . در مباحثی که تاکنون در دوره آموزشی html ، ارائه گردیده است. به آموزش برخی از تگ های پرکاربرد ، از جمله تگ div و کاربرد تگ img، پرداختیم. در ادامه ی این آموزشها در این بخش ، قصد داریم به موضوع آشنایی با کاربرد تگ head در html یا عنصر head و کاربرد آن در HTML ، بپردازیم و کاربردهای این تگ را در html ( تگ هد در html )، بررسی کنیم.
همانطور که می دانید تگ <head> ، از تگ های کلیدی و بسیار مهم است که در تمام صفحات وب وجو دارد. ایت تگ همانند یک ظرف برای نگهداری برخی از تگ های مهم و پرکاربرد دیگر مورد استفاده قرار می گیرد.
در ادامه ی این بخش به بررسی کاربرد تگ head در html ، می پردازیم.
کاربرد تگ head در html
آشنایی با کاربرد تگ head در html
بسیاری از عناصری که در تگ head ، قرار می گیرند در صفحه وب نمایش داده نمی شوند. اما حاوی اطلاعات بسیاری برای شکل گیری ساختار صفحات وب هستند. از جمله می توان به تگ ها ی <meta> ، <link> و <script> اشاره کرد، برخی از تگ ها نیز مانند تگ <title> نمایش داده می شود.
تگ title
همانطور که از نامش پیداست، این تگ برای نمایش عنوان سایت در مرورگر ها استفاده می شود. برخی دیگر از کاربردهای این تگ به شرح زیر است:
- زمنایکه صفحه وب به بخش علاقه مندی ها ، اضافه شود عنوان آن را در آن بخش مشخص می کند.
- عنوان وب سایت را در لیست نتایج جستجوهای موتورهای جستجوگر مشخص می کند.
- در tab هر مرورگز عنوان سایت را قرار می دهد.
مثال:
مثال : تگ title
| <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> The content of the document...... </body> </html> |
تگ <style>
این عنصر برای تعریف کردن style های عناصر یک صفحه وب مورد استفاده قرار می گیرد.
مثال:
مثال : تگ style
| <style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style> |
تگ <link>
از این تگ برای لینک دادن به style sheets (بخش کدهای css) ، مورد استفاده قرار می گیرد.
مثال:
تگ <meta>
این تگ کاربرد های بسیاری در html دارد. این تگ در واقع مجموعه ای از کاراکتر ها از جمله توصیف صفحات وب ، کلمات کلیدی ، کاراکترهای زبان های مختلف و … را در صفحه وب مشخص می کند.
تگ <meta> در مرورگر ها چگونگی نمایش دادن محتوای سایت را مشخص می کند. در موتورهای جستجو ، کلمات کلیدی سایت را ارائه می دهد.
شناسایی کاراکتر های زبان فارسی در وب:
توصیف صفحه وب:
مثال :
| <meta name="description" content="Free Web tutorials"> |
تعریف کلمات کلیدی برای موتور های جستجو:
مثال :
| <meta name="keywords" content="HTML, CSS, XML, JavaScript"> |
بروزرسانی صفحه وب در هر ۳۰ ثانیه:
مثال :
| <meta http-equiv="refresh" content="30"> |
مثالی از کاربردهای تگ <meta> :
مثال : مثالی از تگ meta
| <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe"> |
تنظیم viewport با تگ <meta>
در html5 این امکان را به طراحان می دهد که بتوانند viewport (آن بخش از صفحه وب ، که کاربر آن را مشاهده می کند.) صفحات وب خود را به راحتی برای دستگاهای مختلف تنظیم کنند. اینکار به راحتی با تگ <meta> ، قابل اجراست:
مثال :
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
عنصر <script> در html
از عنصر <script> برای تعریف کدهای جاوا اسکریپت استفاده می شود.
مثال-نمایش عبارت “Hello JavaScript!” در عنصری با “id=”demo:
مثال : کدهای اسکریپت
| <script> function myFunction { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script> |
عنصر <base> در html
عنصر <base> آدرس URL پایه را برای تمام URL های مرتبط در یک صفحه مشخص می کند:
بر طبق استاندارد HTML5؛ <html>، تگ های <body> و <head> را می توان حذف کرد:
مثال : حذف تگ های body و head
| <!DOCTYPE html> <title>Page Title</title> <h1>This is a heading</h1> <p>This is a paragraph.</p> |
عناصر head در html
| تگ | توضیحات |
|---|
| <head> | اطلاعات سند html را نگه می دارد. |
| <title> | عنوان صفحه را تعریف می کند. |
| <base> | آدرس url پایه را برای صفحه تعریف می کند. |
| <link> | برای تعریف آدرس فایل های خارجی مانند css و جاوا اسکریپت بکار می رود. |
| <meta> | اطلاعات metadata ها را تعریف می کند. |
| <script> | اسکریپت های جاوا اسکریپت را تعریف می کند. |
| <style> | عناصر html یک صفحه وب را style می کند. |
کلام آخر
یکی از تگ های اصلی و تشکیل دهنده ی ساختار صفحات وب، تگ head در html می باشد که اطلاعات مربوطه به metadata ، آدرس دهی link ها ، عنوان صفحه و… را نگه می دارد، که تعریف آن در نسخه های HTML 4 ضروری است.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
astiac
سلام
ممنون از سایت عالیتون واقعا بی نظیره .
اموزش html و css میخوام ک توضیحاتش خیلی جامع تر باشه سراغ ندارین؟
صادق
سلام. تشکر
می تونید از دوره کامل ویدیویی طراحی وب استفاده کنید. (این لینک)
همچنین می تونید از چرخونه شانس که در قسمت پایین سمت چپ سایت قرار گرفته استفاده کنید و شانس خودتون رو برای دریافت کد تخفیف امتحان کنید.