آموزش کار با عنصر Head در HTMLReviewed by صابر بوستانی on Sep 18Rating: 5.0
آموزش کار با عنصر Head در HTML

آموزش کار با عنصر Head در HTML

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

عنصر Head در HTML

عنصر <head> در واقع محفظه‌ای برای متا دیتا (metadata) است و بین تگ <html> و تگ <body> قرار می‌گیرد. متا دیتا در HTML داده‌ای در مورد سند HTML است اما نمایش داده نمی‌شود. معمولا متا دیتا عنوان، مجموعه کاراکترها، استایل‌ها، لینک‌ها، اسکریپت‌ها و دیگر اطلاعات متا را تعریف می‌کند. تگ‌های <title>، <style>، <meta>، <link>، <script> و <base> اجزایی هستند که متا دیتا را توصیف می‌کنند.

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.

عنصر <title> در HTML

عنصر <title> عنوان سند HTML را مشخص میکند و در تمام اسناد HTML و XHTML اجباری است.

عنصر <title> :

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

یک سند ساده ی HTML  را در زیر مشاهده می نمایید

پیشنمایش

 

عنصر <style> در HTML

از عنصر <style> برای تعریف استایل یک صفحه ی HTML استفاده میشود :

پیشنمایش

 

عنصر <link> در HTML

پیشنمایش

 

عنصر <meta> در HTML

عنصر <meta> برای مشخص کردن نوع کارکترست، توضیح صفحه، کلمات کلیدی، نویسنده، و دیگر اطلاعات استفاده میشود. متا دیتا ها به وسیله مرورگر ها (چطور محتوا را نمایش دهند) ، موتور های جستجو (کلمات کلیدی) ، و دیگر سرویس های وب استفاده میشوند.

تعریف charset در HTML که مورد استفاده قرار میگیرد :

تعریف متا description یا توضیحی برای صفحه در HTML
تعریف متا keywords یا کلمات کلیدی برای موتور های جستجو در HTML
تعریف متا author یا نوسنده صفحه در HTML

متا refresh یا بارگذاری دوباره سند در هر 30 ثانیه در HTML

مثالی از تگ های متا در HTML

پیشنمایش

 

تنظیم Viewport در HTML

نسخه HTML5 روشی ارائه می‌دهد که طراحان وب با استفاده از آن می‌توانند از طریق تگ <meta> روی viewport کنترل داشته باشند. viewport ناحیه قابل مشاهده از یک صفحه وب توسط کاربر است که در دستگاه‌های مختلف فرق داشته و روی گوشی‌های موبایل کوچک‌تر از صفحات کامپیوتر شخصی است. شما باید عنصر <meta> مربوط به viewport که در زیر آمده است را در تمام صفحات وب خود وارد کنید:

یک تگ <meta> برای viewport ،دستورالعمل هایی را برای چگونگی نمایش صفحه، ابعاد و بزرگ و کوچک شدن آن در اختیار مرورگر قرار میدهد.

قسمت width=device-width مشخص میکند که طول صفحه باید از طول صفحه نمایش دستگاه پیروی کند (که بسته به نوع دستگاهی که صفحه روی آن نمایش داده میشود تغییر میکند).

قسمت initial-scale=1.0 مشخص میکند که بزرگنمایی اولیه، هنگامی که صفحه برای بار اول در مرورگر لود میشود باید مقدار 1 باشد.

به دو نمونه مثال زیر که یکی داری تگ متای Viewport بوده و دیگری فاقد آن است دقت کنید و نحوه ی نمایش آنها را در دستگاه موبایل مشاهده کنید :

نکته : لینک 1 و لینک 2 رو باز نمایید تفاوت بین دو صفحه را میتوانید در موبایل و تبلت مشاهده کنید(در صفحه کامپیوتر خانگی تفاوتی را نخواهید دید). در صورتی که به موبایل و تبلت دسترسی ندارید از شبیه ساز موبایل و تبلت در Inspect مرورگر کروم استفاده کنید.

 

عنصر <script> در HTML

از عنصر <script> برای تعریف جاوااسکریپت های سمت کاربر استفاده میشود. کد جاوا اسکریپت زیر عبارت “Hello JavaScript!” در عنصری با شناسه ی “id=”demo قرار میدهد :

پیشنمایش

عنصر <base> در HTML

عنصر <base> ، URL و target پایه را برای تمام آدرس های نسبی در صفحات مشخص میکند(دقت کنید در صورتی که از base استفاده نکنیم URL پایه همان نام دامنه ما خواهد بود که در اینجا : www.sourcebaran.com) :

در مثال بالامرورگر تصویر html5.gif در آدرس https://www.sourcebaran.com/images/ جستجو خواهد کرد.

شاید برایتان جذاب باشد : فیلم آموزش کامل Html به زبان فارسی و بصورت رایگان

حذف تگ های <html> ، <head> و <body> از صفحه HTML

طبق استاندارد html5، تگ‌های <html>، <body> و <head> می‌توانند حذف شوند. کد زیر طبق استاندار html5 معتبر است:

پیشنمایش

نکته مهم : حذف تگ های فوق از صفحه ممکن است باعث برور خطا در نسخه های قدیمی تر اینترنت اکسپلورر شود پس پیشنهاد میشود تا آنجای ممکن از حذف آنها اجتناب کنید.

منبع : W3Schools

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML