در جلسه قبلی آموزش HTML با نحوه ساختاربندی و چیدمان صفحه وب آشنا شدیم. در این بخش قصد داریم کاربرد تگ head را یاد بگیریم.
المان یا بخش HEAD صفحه یک دربرگیرنده برای تمام المان هایی که برای اطلاعات بیشتر در مورد صفحه یا یک رفرنس به دیگر منابع موردنیاز که برای نمایش یا رفتار صحیح صفحه مورد نیاز است.
المان های HEAD در HTML
عنصر head مجموعا خصوصیاتی از سند را تشریح می کند مثل عنوان (title) , اطلاعات متا (meta) , استایل های CSS و فایل استایل ها, و شامل اسکریپت هایی مثل جاوااسکریپت
المان هایی که می توانند در تگ HEAD در HTML قرار بگیرند: <title>, <base>, <link>, <style>, <meta>, <script> و المان <noscript>
تگ title در HTML
عنصر <title> عنوان سند را مشخص می کند.
المان title در همه سندهای HTML/XHTML برای ایجاد یک داکیومنت معتبر مورد نیاز هستند.
تنها یک المنت title اجازه دارد در سند قرار بگیرد و جای آن هم باید در بخش head باشد.
محتوای title هم فقط می تواند شامل متن و entity ها (کاراکترهای ویژه HTML) باشد و نمی توان از تگ های HTML در آن استفاده کرد.
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> <title>Hello World Document</title> </head> <body> <p>Hello World!</p> </body> </html> |
عنوان صفحه بنابر دلایل زیر می تواند مورد استفاده قرار بگیرد:
- نمایش عنوان در بخش عنوان تب مرورگر و نوار وضعیت
- نمایش عنوان صفحه در بخش علاقه مندی ها یا بوکمارک مرورگر
- نمایش عنوان صفحه در بخش نتایج موتورهای جستجو
نکته: یک عنوان خوب باید کوتاه و مشخص کننده محتوای سند باشد, چرا که خزنده های موتورهای جستجو توجه خاصی به کلمات استفاده شده در عنوان دارند. عنوان صفحه در حالت ایده آل کمتر از ۶۵ کاراکتر طول داشته باشد.
تگ base در HTML
المان <base> برای تعریف یک URL پایه برای تمام آدرس های نسبی (relative) استفاده شده در سند شما است.
همینکه یکبار این آدرس را در بالای صفحه مشخص کند, تمام لینک های شما از زیر مجموعه همین URL فراخوانی می شوند.
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="en"> <head> <title>Defining a base URL</title> <base href="https://netparadis.com/"> </head> <body> <p><a href="html-tutorial/html-head">HTML Head</a>.</p> </body> </html> |
لینک بالا برخلاف آدرس فعلی صفحه ای که در آن هستیم , از آدرس مشخص شده در base استفاده می کند.
توجه: المان <base> در اول تمام المان هایی که به منبع خارجی اشاره دارند اضافه می شود. همچنین HTML فقط اجازه استفاده یکبار در هر سند را می دهد. بنابراین توصیه نمی شود از آن استفاده کنید.
تگ link در HTML
المان <link> رابطه بین سند فعلی و سند یا منبع خارجی دارد. بیشترین استفاده از آن برای لود کردن استایل های CSS خارجی است.
|
1 2 3 4 |
<head> <title>Linking to style sheets</title> <link type="text/css" rel="stylesheet" href="style.css"> </head> |
اطلاعات بیشتر در این مورد را در استایل های HTML بخوانید.
نکته: المان <head> صفحه می توانید هر تعداد از المان <link> را در قبول کند. المان link خصوصیات دارد ولی محتوا نه.
تگ style در HTML
المان <style> برای تعریف استایل های داخلی در سند HTML استفاده می شوتند. این استایل های داخل تگ <style> مشخص می کنند که المان های HTML به چه صورت در مرورگر رندر و نمایش داده شوند.
|
1 2 3 4 5 6 7 8 |
<head> <title>Internal style sheet</title> <style type="text/css"> body { background-color: YellowGreen; } h1 { color: red; } p { color: green; } </style> </head> |
نکته: یک استایل داخلی باید در هر مرورگر یک استایل یکتا را داشته باشد. در صورتی که از یک استایل یکسان در چند سند استفاده کنید, پس بهتر است از استایل های خارجی بهره ببرید .(استایل های HTML)
تگ meta در HTML
المان <meta> شامل metadata هایی در مورد سند HTML است. این داده ها مجموعه از اطلاعات در مورد صفحه و موارد غیره برای موتورهای جستجو را شامل می شود.
در مورد متاتگ های در جلسه بعدی توضیح می دهیم.
تگ noscript در HTML
المان <noscript> برای اجرای اسکریپت سمت کلاینت مثل javascript استفاده می شود
در مورد اسکریپت ها و المان noscript در جلسات بعدی صحبت می کنیم.
امیدوارم در این بخش آموزش HTML , از توضیحات ارایه شده برایتگ HEAD در HTML نهایت استفاده را برده باشید.
در بخش بعدی در مورد متاتگ ها یاد می گیریم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
