متادیتا (metadata) یا فراداده در حقیقت شناسنامه‌ای از فایل‌های کامپیوتری، صفحات وب، اسناد و سایر منابع حاوی داده هستند که اطلاعات عمومی و کلی در رابطه با موارد ذکر شده در آن جای داده شده است.
head یک سند HTML بخشی است که در مرورگر وب هنگام بارگذاری صفحه نمایش داده نمی شود. این شامل اطلاعاتی مانند صفحه <title> ، پیوندهایی به CSS، پیوندهایی به favicon های سفارشی، و سایر ابر داده ها (داده های مربوط به HTML، مانند نویسنده، و کلمات کلیدی مهمی که سند را شرح میدهند). مرورگرهای وب از اطلاعات موجود در head برای ارائه صحیح سند HTML استفاده می کنند. در این مقاله همه موارد فوق و موارد دیگر را پوشش خواهیم داد تا مبنای خوبی برای کار با نشانه گذاری در اختیار شما قرار دهیم.
پیش نیازها: آشنایی اولیه با HTML، همانطور که در شروع ، کار با HTML توضیح داده شده است.
هدف: آشنایی با هد HTML، هدف آن، مهم ترین مواردی که می تواند داشته باشد و تاثیری که می تواند بر سند HTML داشته باشد.
head در HTML چیست؟
بیایید دوباره سند HTML ساده ای را که در مقاله قبلی توضیح دادیم، مرور کنیم:
هد HTML محتوای عنصر <head> است. برخلاف محتویات عنصر <body> (که هنگام بارگذاری در مرورگر در صفحه نمایش داده می شود)، محتوای head در صفحه نمایش داده نمی شود. در عوض، وظیفه head این است که حاوی metadata هایی در مورد سند باشد. در مثال بالا، head بسیار کوچک است:
با این حال، در صفحات بزرگتر، head می تواند بسیار بزرگ باشد. سعی کنید به برخی از وب سایت های مورد علاقه خود بروید و از ابزارهای توسعه دهنده برای بررسی محتوای اصلی آنها استفاده کنید. هدف ما در اینجا این نیست که به شما نشان دهیم چگونه از همه چیزهایی که ممکن است در head قرار داده شود استفاده کنید، بلکه به شما آموزش می دهیم که چگونه از عناصر اصلی که می خواهید در head استفاده کنید استفاده کنید و کمی به شما آشنایی دهیم. بیایید شروع کنیم!
افزودن title
ما قبلا عنصر <title> را در عمل دیده‌ایم ؛ از این عنصر می‌توان برای افزودن عنوان به سند استفاده کرد. با این حال، این ممکن است با عنصر h1 اشتباه گرفته شود، که برای افزودن یک عنوان سطح بالا به محتوای body شما استفاده می شود – گاهی اوقات به عنوان ، عنوان صفحه نیز نامیده می شود. اما آنها چیزهای متفاوتی هستند!
عنصر h1 هنگام بارگیری در مرورگر در صفحه ظاهر می شود – معمولاً باید از این عنصر یک بار در هر صفحه برای علامت گذاری عنوان محتوای صفحه خود استفاده شود (عنوان داستان، یا عنوان خبر یا هر آنچه که برای استفاده شما مناسب است).
عنصر <title> ابرداده ای است که عنوان سند کلی HTML را نشان می دهد (نه محتوای سند).
یادگیری فعال: بررسی یک مثال ساده
1.کد را از صفحه خارج و در یک فایل متنی جدید در ویرایشگر کد خود کپی و جایگذاری کنید، سپس آن را در مکانی معقول ذخیره کنید یا دکمه “Raw” را در صفحه GitHub فشار دهید، که باعث می شود کد خام ظاهر شود (احتمالاً در یک تب جدید مرورگر). سپس، منوی Save Page As… مرورگر خود را انتخاب کنید و یک مکان معقول را برای ذخیره فایل انتخاب کنید.
۲.حالا فایل را در مرورگر خود باز کنید. شما باید چیزی شبیه به این را ببینید:
اکنون باید کاملاً مشخص باشد که محتوای <h1> کجا و محتوای <title> کجا ظاهر می شود!
۳.همچنین باید سعی کنید کد را در ویرایشگر کد خود باز کنید، محتوای این عناصر را ویرایش کنید، سپس صفحه را در مرورگر خود بازخوانی کنید.
محتویات عنصر <title> به روش های دیگری نیز استفاده می شود. برای مثال، اگر سعی کنید صفحه را نشانک گذاری کنید،محتوای <title> را خواهید دید که به عنوان نام نشانک پیشنهادی پر شده است.
همانطور که در زیر می بینید، از محتوای <title> در نتایج جستجو نیز استفاده می شود.
Metadata: the <meta> element
ابرداده داده‌ای است که داده‌ها را توصیف می‌کند، و HTML یک روش “رسمی” برای افزودن ابرداده به یک سند دارد یعنی عنصر<meta>. البته، موارد دیگری که در این مقاله در مورد آنها صحبت می کنیم نیز می توانند به عنوان ابرداده در نظر گرفته شوند. انواع مختلفی از عناصر <meta> وجود دارد که می توانند در صفحه شما گنجانده شوند، اما ما در این مرحله سعی نمی کنیم همه آنها را توضیح دهیم، زیرا ممکن است خیلی گیج کننده باشد. در عوض، ما چند چیز را که ممکن است معمولاً ببینید، توضیح می‌دهیم تا به شما ایده بدهیم.
تعیین رمزگذاری کاراکتر سند شما
در مثالی که در بالا دیدیم، این خط گنجانده شده است:
<meta charset=”utf-8” />
این عنصر رمزگذاری کاراکتر سند را مشخص می کند – مجموعه کاراکتری که سند مجاز به استفاده از آن است. utf-8 یک مجموعه کاراکتر جهانی است که تقریباً شامل هر کاراکتری از هر زبان انسانی است. این بدان معناست که صفحه وب شما قادر به نمایش هر زبانی خواهد بود. بنابراین ایده خوبی است که این را در هر صفحه وب که ایجاد می کنید تنظیم کنید! به عنوان مثال، صفحه شما می تواند انگلیسی و ژاپنی را به خوبی مدیریت کند:
برای مثال، اگر رمزگذاری کاراکتر خود را روی ISO-8859-1 تنظیم کنید (مجموعه کاراکتر برای الفبای لاتین)، ممکن است رندر صفحه شما به هم ریخته به نظر برسد:
توجه: برخی از مرورگرها (مانند کروم) به طور خودکار رمزگذاری های نادرست را برطرف می کنند، بنابراین بسته به مرورگری که استفاده می کنید، ممکن است این مشکل را مشاهده نکنید. به هر حال باید رمزگذاری utf-8 را در صفحه خود تنظیم کنید تا از بروز هرگونه مشکل احتمالی در سایر مرورگرها جلوگیری کنید.
یادگیری فعال: رمزگذاری کاراکترها را آزمایش کنید
برای امتحان کردن این کار، الگوی ساده HTML را که در بخش قبلی در <title> (صفحه title-example.html) بدست آورده اید مجدداً مشاهده کنید، مقدار متا charset را به ISO-8859-1 تغییر دهید و ژاپنی را به صفحه خود اضافه کنید.این کدی است که ما استفاده کردیم:
<p>Japanese example: ご飯が熱い。</p>
اضافه کردن author و description
بسیاری از عناصر <meta> شامل مشخصات name و content هستند:
name نوع meta عنصر را مشخص می کند،اینکه چه نوع اطلاعاتی در آن وجود دارد.
content محتوای meta واقعی را مشخص می کند.
دو عنصر meta از این قبیل که قرار دادن آنها در صفحه شما مفید است، author(نویسنده) صفحه را تعریف می کند و توضیح مختصری از صفحه ارائه می دهد. بیایید به یک مثال نگاه کنیم:
تعیین نویسنده از بسیاری جهات سودمند است: اگر در مورد محتوا سؤالی دارید و می خواهید با آنها تماس بگیرید، درک اینکه چه کسی صفحه را نوشته است مفید است. برخی از سیستم های مدیریت محتوا دارای امکاناتی برای استخراج خودکار اطلاعات نویسنده صفحه و در دسترس قرار دادن آن برای چنین اهدافی هستند.
تعیین توضیحاتی که شامل کلمات کلیدی مرتبط با محتوای صفحه شما باشد، مفید است زیرا این پتانسیل را دارد که صفحه شما را در جستجوهای مرتبط انجام شده در موتورهای جستجو بالاتر نشان دهد (این گونه فعالیت ها بهینه سازی موتور جستجو یا SEO نامیده می شوند).
یادگیری فعال: استفاده از توضیحات در موتورهای جستجو
توضیحات همچنین در صفحات نتایج موتور جستجو استفاده می شوند. بیایید تمرینی را برای کشف این موضوع انجام دهیم:
1.به صفحه اول The Mozilla Developer Network بروید.
2.منبع صفحه را مشاهده کنید (روی صفحه کلیک راست کنید، از منوی زمینه، View Page Source را انتخاب کنید.)
۳.متا تگ توضیحات را پیدا کنید. چیزی شبیه به این خواهد بود (اگرچه ممکن است در طول زمان تغییر کند):
توجه: در Google، برخی از زیرصفحه‌های مرتبط MDN Web Docs را در زیر لینک صفحه اصلی فهرست می‌بینید – اینها لینک‌های سایت نامیده می‌شوند و در ابزارهای وب‌مستر Google قابل تنظیم هستند – راهی برای بهتر کردن نتایج جستجوی سایت شما در موتور جستجوی Google.
انواع دیگر metadata
همانطور که در سراسر وب سفر می کنید، انواع دیگری از ابرداده را نیز خواهید یافت. بسیاری از ویژگی‌هایی که در وب‌سایت‌ها مشاهده می‌کنید، ساخته‌های اختصاصی هستند که برای ارائه اطلاعات خاصی به سایت‌های خاصی (مانند سایت‌های شبکه‌های اجتماعی) طراحی شده‌اند.
به عنوان مثال، Open Graph Data یک پروتکل ابرداده است که فیس بوک برای ارائه ابرداده های غنی تر برای وب سایت ها اختراع کرد. در کد منبع MDN Web Docs، این را خواهید یافت:
یکی از تأثیرات این کار این است که وقتی به MDN Web Docs در فیس بوک پیوند می دهید، پیوند همراه با یک تصویر و توضیحات ظاهر می شود: یک تجربه غنی تر برای کاربران.
توییتر همچنین دارای ابرداده اختصاصی مشابه خود به نام کارت های توییتر است که زمانی که URL سایت در twitter.com نمایش داده می شود اثر مشابهی دارد. مثلا:
<metaname=”twitter:title” content=”Mozilla Developer Network” />
اضافه کردن آیکون های سفارشی به سایت شما
برای غنی سازی بیشتر طراحی سایت خود، می توانید ارجاعاتی را به آیکون های سفارشی در metadata های خود اضافه کنید و این موارد در زمینه های خاصی نمایش داده می شوند. متداول ترین مورد استفاده از آنها ، favicon است (مخفف “favorites icon”، اشاره به استفاده از آن در لیست های “favorites” یا “bookmarks” در مرورگرها).
humble favicon سالهاست که وجود دارد. این اولین نماد از این نوع است: یک نماد مربع 16 پیکسلی که در چندین مکان استفاده می شود. ممکن است (بسته به مرورگر) favicon های نمایش داده شده در برگه مرورگر حاوی هر صفحه باز و در کنار صفحات bookmark شده در bookmarks panel را ببینید.
favicon می تواند به صفحه شما اضافه شود:
1.ذخیره آن در دایرکتوری مشابه صفحه فهرست سایت، ذخیره شده با فرمت ico. (بیشتر از فاویکون ها در قالب های رایج تر مانند gif یا png نیز پشتیبانی می کنند).
2.خط زیر را به بلوک هد HTML خود اضافه کنید تا به آن ارجاع دهید.
<link rel=”icon” href=”favicon.ico“type=”image/x-icon” />
در اینجا نمونه ای از favicon در bookmarks panel آمده است:
نظرات توضیح میدهند که هر icon برای چه چیزی استفاده می‌شود – این عناصر مواردی مانند ارائه یک icon با وضوح بالا و خوب برای استفاده در هنگام ذخیره وب‌سایت در صفحه اصلی iPad را پوشش میدهند.
در حال حاضر زیاد نگران اجرای همه این نوع از icon ها نباشید – این یک ویژگی نسبتاً پیشرفته است و انتظار نمی رود که برای پیشرفت در دوره، اطلاعاتی در این زمینه داشته باشید. هدف اصلی در اینجا این است که در صورت مشاهده کد منبع وب سایت های دیگر، به شما اطلاع دهیم که چه چیزهایی هستند.
توجه: اگر سایت شما از یک خط‌مشی امنیت محتوا (CSP) برای افزایش امنیت خود استفاده می‌کند، این خط‌مشی برای favicon اعمال می‌شود. اگر با مشکلی در بارگیری نشدن favicon مواجه شدید، بررسی کنید که دستورالعمل img-src سرصفحه Content-Security-Policy مانع از دسترسی به آن نمی شود.
استفاده از CSS و جاوا اسکریپت در HTML
تقریباً تمام وب‌سایت‌هایی که در عصر مدرن استفاده می‌کنید، از CSS برای جذاب جلوه دادن آنها و جاوا اسکریپت برای تقویت عملکردهای تعاملی مانند پخش‌کننده‌های ویدیو، نقشه‌ها، بازی‌ها و موارد دیگر استفاده می‌کنند. اینها معمولاً به ترتیب با استفاده از عنصر <link> و عنصر <script> در یک صفحه وب اعمال می شوند.
عنصر <link> همیشه باید داخل head سند شما باشد. این دو ویژگی دارد، rel=”stylesheet” که نشان می‌دهد شیوه نامه سند (document) است و href که حاوی مسیر فایل شیوه نامه است:
<link rel=”stylesheet” href=”my-css-file.css” />
عنصر <script> نیز باید به سر برود و باید یک ویژگی src حاوی مسیر جاوا اسکریپتی را که می‌خواهید بارگیری کنید و defer را شامل شود، که اساساً به مرورگر دستور می‌دهد تا جاوا اسکریپت را پس از اتمام تجزیه صفحه HTML بارگیری کند. این کار مفید است زیرا مطمئن می شود که HTML قبل از اجرای جاوا اسکریپت بارگیری می شود، به طوری که با خطاهای ناشی از تلاش جاوا اسکریپت برای دسترسی به عنصر HTML که هنوز در صفحه وجود ندارد، مواجه نشوید. در واقع چندین راه برای مدیریت بارگیری جاوا اسکریپت در صفحه شما وجود دارد، اما این قابل اطمینان ترین راه برای استفاده از مرورگرهای مدرن است.
<script src=”my-js-file.js” defer></script>
توجه: عنصر <script> ممکن است مانند یک عنصر خالی به نظر برسد، اما اینطور نیست، و بنابراین به یک تگ بسته نیاز دارد. به جای اشاره به یک فایل اسکریپت خارجی، می توانید اسکریپت خود را در عنصر <script> نیز قرار دهید.
یادگیری فعال: استفاده از CSS و جاوا اسکریپت در یک صفحه
1.برای شروع این یادگیری فعال، یک کپی از فایل های meta-example.html، script.js و style.css ما بگیرید و آنها را در رایانه محلی خود در همان فهرست ذخیره کنید. اطمینان حاصل کنید که آنها با نام و پسوند فایل صحیح ذخیره شده اند.
2.فایل HTML را هم در مرورگر و هم در ویرایشگر متن خود باز کنید.
3.با پیروی از اطلاعات داده شده در بالا، عناصر <link> و <script> را به HTML خود اضافه کنید تا CSS و جاوا اسکریپت شما بر روی HTML شما اعمال شود.
اگر به درستی انجام شود، وقتی HTML خود را ذخیره می کنید و مرورگر خود را به روز می کنید، باید بتوانید ببینید که همه چیز تغییر کرده است:
جاوا اسکریپت یک لیست خالی به صفحه اضافه کرده است. اکنون هنگامی که روی هر جایی خارج از لیست کلیک می کنید، یک کادر محاوره ای ظاهر می شود که از شما می خواهد متنی را برای یک آیتم لیست جدید وارد کنید. هنگامی که دکمه OK را فشار دهید، یک آیتم لیست جدید به لیست حاوی متن اضافه می شود. هنگامی که روی یک آیتم لیست موجود کلیک می کنید، یک کادر محاوره ای ظاهر می شود که به شما امکان می دهد متن مورد را تغییر دهید.
CSS باعث سبز شدن پس‌زمینه و بزرگتر شدن متن شده است. همچنین برخی از محتوایی را که جاوا اسکریپت به صفحه اضافه کرده است، استایل داده است (نوار قرمز با حاشیه سیاه، سبکی است که CSS به لیست تولید شده توسط JS اضافه کرده است.)
توجه:اگر در این تمرین گیر کرده‌اید و نمی‌توانید CSS/JS را اعمال کنید، صفحه نمونه css-and-js.html ما را بررسی کنید.
تنظیم زبان اصلی document
در نهایت، شایان ذکر است که می توانید زبان صفحه خود را تنظیم کنید. این را می توان با افزودن ویژگی lang به تگ HTML افتتاحیه (همانطور که در meta-example.html و در زیر نشان داده شده است) انجام داد.
ین از بسیاری جهات مفید است. سند HTML شما در صورتی که زبان آن تنظیم شده باشد توسط موتورهای جستجو به طور موثرتری ایندکس می شود (مثلاً به آن اجازه می دهد در نتایج خاص زبان به درستی ظاهر شود) و برای افراد دارای اختلالات بینایی با استفاده از صفحه خوان ها (مثلاً کلمه) مفید است. “six” در هر دو زبان فرانسوی و انگلیسی وجود دارد، اما به طور متفاوت تلفظ می شود.)
همچنین می توانید بخش های فرعی document خود را طوری تنظیم کنید که به عنوان زبان های مختلف شناخته شوند. برای مثال، می‌توانیم بخش زبان ژاپنی خود را طوری تنظیم کنیم که به عنوان ژاپنی شناخته شود، مانند:
<p>Japanese example: <span lang=”ja“>ご飯が熱い。</span>.</p>
این کدها توسط استاندارد ISO 639-1 تعریف شده اند. می توانید اطلاعات بیشتری درباره آنها در برچسب های زبان در HTML و XML بیابید.
در نتیجه
این نشان دهنده پایان گشت و گذار سریع ما در سر HTML است – کارهای بسیار بیشتری می توانید در اینجا انجام دهید، اما یک تور جامع در این مرحله خسته کننده و گیج کننده خواهد بود، و ما فقط می خواستیم به شما ایده ای از رایج ترین چیزها بدهیم.در مقاله بعدی کیهان وب ، اصول متن HTML را بررسی خواهیم کرد.