آموزش HTML : متا دیتای صفحه وب
سرصفحه یک سند HTML بخشی است که هنگام بارگذاری صفحه در مرورگر وب نمایش داده نمیشود. این بخش شامل اطلاعات فراداده مانند <عنوان> صفحه، لینک به CSS (اگر تصمیم دارید محتوای HTML خود را با CSS استایلبندی کنید)، لینک به فاوآیکنهای سفارشی و سایر فرادادهها (دادههایی درباره HTML، مانند نویسنده و کلمات کلیدی مهمی که سند را توصیف میکنند) است.
مرورگرهای وب از اطلاعات موجود در سرصفحه برای رندر صحیح سند HTML استفاده میکنند. در این مقاله، همه موارد فوق و موارد دیگر را پوشش خواهیم داد تا پایه خوبی برای کار با نشانهگذاری در اختیار شما قرار دهیم.
بیایید سند HTML سادهای را که در مقاله قبلی پوشش دادیم، دوباره بررسی کنیم:
بخش head در HTML، محتوای عنصر است. برخلاف محتوای عنصر (که هنگام بارگذاری در مرورگر در صفحه نمایش داده میشود)، محتوای head در صفحه نمایش داده نمیشود. در عوض، وظیفه head نگهداری فرادادههای مربوط به سند است. در مثال بالا، head بسیار کوچک است:
با این حال، در صفحات بزرگتر، سرصفحه میتواند بسیار بزرگ شود. سعی کنید به برخی از وبسایتهای مورد علاقه خود بروید و از ابزارهای توسعهدهنده برای بررسی محتوای سرصفحه آنها استفاده کنید. هدف ما در اینجا این نیست که به شما نشان دهیم چگونه از هر چیزی که میتوان در سرصفحه قرار داد استفاده کنید، بلکه میخواهیم به شما یاد دهیم که چگونه از عناصر اصلی که میخواهید در سرصفحه قرار دهید استفاده کنید و تا حدودی با آن آشنا شوید. بیایید شروع کنیم.
ما قبلاً عنصر را در عمل دیدهایم - این میتواند برای اضافه کردن عنوان به سند استفاده شود. با این حال، این عنصر میتواند با عنصر اشتباه گرفته شود، که برای اضافه کردن یک عنوان سطح بالا به محتوای بدنه شما استفاده میشود - این عنصر گاهی اوقات به عنوان عنوان صفحه نیز شناخته میشود. اما آنها چیزهای متفاوتی هستند!
عنصر هنگام بارگذاری در مرورگر در صفحه ظاهر میشود - به طور کلی باید یک بار در هر صفحه استفاده شود تا عنوان محتوای صفحه شما (عنوان داستان، یا تیتر خبر یا هر چیز دیگری که برای استفاده شما مناسب است) را مشخص کند.
عنصر ابردادهای است که عنوان کل سند HTML را نشان میدهد (نه محتوای سند).
حالا باید کاملاً مشخص باشد که محتوای کجا و محتوای کجا ظاهر میشود!
محتوای عنصر به روشهای دیگری نیز استفاده میشود. برای مثال، اگر سعی کنید صفحه را نشانهگذاری کنید (نشانکها > نشانهگذاری این صفحه یا نماد ستاره در نوار آدرس در فایرفاکس)، خواهید دید که محتوای با نام نشانهگذاری پیشنهادی پر میشود.
همانطور که در زیر مشاهده خواهید کرد، محتوای در نتایج جستجو نیز استفاده میشود.
فراداده، دادهای است که دادهها را توصیف میکند و HTML یک روش «رسمی» برای اضافه کردن فراداده به یک سند دارد - عنصرالبته، موارد دیگری که در این مقاله در مورد آنها صحبت میکنیم نیز میتوانند به عنوان فراداده در نظر گرفته شوند. انواع مختلفی از عناصروجود دارند که میتوانند درصفحه شما گنجانده شوند، اما ما سعی نمیکنیم همه آنها را در این مرحله توضیح دهیم، زیرا فقط گیجکننده خواهد بود. در عوض، چند مورد را که معمولاً ممکن است ببینید، توضیح خواهیم داد، فقط برای اینکه ایدهای به شما بدهیم.
مشخص کردن کدگذاری کاراکتر سند شما
در مثالی که در بالا دیدیم، این خط گنجانده شده بود:
این عنصر، کدگذاری کاراکتر سند را مشخص میکند - مجموعه کاراکتری که سند مجاز به استفاده از آن است. utf-8 یک مجموعه کاراکتر جهانی است که تقریباً هر کاراکتری از هر زبان انسانی را شامل میشود. این بدان معناست که صفحه وب شما قادر به نمایش هر زبانی خواهد بود. بنابراین ایده خوبی است که این را در هر صفحه وبی که ایجاد میکنید تنظیم کنید! به عنوان مثال، صفحه شما میتواند انگلیسی و ژاپنی را به خوبی پشتیبانی کند:
اگر برای مثال، کدگذاری کاراکتر خود را روی ISO-8859-1 (مجموعه کاراکتر برای الفبای لاتین) تنظیم کنید، ممکن است رندر صفحه شما به طور کامل بهم ریخته به نظر برسد:
بعضی از مرورگرها (مانند کروم) به طور خودکار کدگذاریهای نادرست را اصلاح میکنند، بنابراین بسته به مرورگری که استفاده میکنید، ممکن است این مشکل را نبینید. در هر صورت، برای جلوگیری از هرگونه مشکل احتمالی در مرورگرهای دیگر، باید کدگذاری صفحه خود را روی utf-8 تنظیم کنید.
بسیاری از عناصر شامل ویژگیهای نام و محتوا هستند:
نام (name) نوع عنصر متا را مشخص میکند؛ اینکه چه نوع اطلاعاتی را شامل میشود.
محتوا (content) محتوای واقعی متا را مشخص میکند.
دو عنصر متا از این دست که برای قرار دادن در صفحه شما مفید هستند، نویسنده صفحه را تعریف میکنند و توضیح مختصری از صفحه ارائه میدهند. بیایید به یک مثال نگاه کنیم:
مشخص کردن نویسنده از بسیاری جهات مفید است: مفید است که بتوانید بفهمید چه کسی صفحه را نوشته است، اگر در مورد محتوا سؤالی دارید و میخواهید با او تماس بگیرید. برخی از سیستمهای مدیریت محتوا امکاناتی دارند که به طور خودکار اطلاعات نویسنده صفحه را استخراج کرده و برای چنین اهدافی در دسترس قرار میدهند.
تعیین توضیحی که شامل کلمات کلیدی مربوط به محتوای صفحه شما باشد مفید است زیرا این پتانسیل را دارد که صفحه شما در جستجوهای مرتبط انجام شده در موتورهای جستجو بالاتر ظاهر شود (چنین فعالیتهایی بهینهسازی موتور جستجو یا سئو نامیده میشوند).
بررسی کاربرد توضیحات در موتورهای جستجو
توضیحات همچنین در صفحات نتایج موتور جستجو استفاده میشود. بیایید برای بررسی این موضوع، یک تمرین انجام دهیم:
به صفحه اصلی PDN بروید.
page source را مشاهده کنید (روی صفحه کلیک راست کنید، از منوی زمینه، گزینه view page source را انتخاب کنید.)
متا تگ description را پیدا کنید. چیزی شبیه به این خواهد بود (اگرچه ممکن است با گذشت زمان تغییر کند):
حالا در موتور جستجوی مورد علاقهتان (ما از گوگل استفاده کردیم) عبارت «Persian Developer Network» را جستجو کنید. متوجه خواهید شد که محتوای عناصر <meta> و <title> در نتیجه جستجو استفاده شده است - قطعاً ارزشش را دارد!
بسیاری از ویژگیهای دیگر استفاده نمیشوند. برای مثال، عنصر کلمه کلیدی - که قرار است کلمات کلیدی را برای موتورهای جستجو فراهم کند تا ارتباط آن صفحه را با عبارات جستجوی مختلف تعیین کنند - توسط موتورهای جستجو نادیده گرفته میشود، زیرا اسپمرها فقط لیست کلمات کلیدی را با صدها کلمه کلیدی پر میکردند و نتایج را تحت تأثیر قرار میدادند.
همانطور که در وب سفر میکنید، انواع دیگری از فرادادهها را نیز خواهید یافت. بسیاری از ویژگیهایی که در وبسایتها مشاهده خواهید کرد، ساختههای اختصاصی هستند که برای ارائه اطلاعات خاص به سایتهای خاص (مانند سایتهای شبکههای اجتماعی) طراحی شدهاند.
برای مثال، Open Graph Data یک پروتکل فراداده است که فیسبوک برای ارائه فرادادههای غنیتر برای وبسایتها اختراع کرده است.
یکی از تأثیرات این امر این است که وقتی در فیسبوک به سایت مد نظر لینک میدهید، لینک به همراه یک تصویر و توضیحات ظاهر میشود: تجربهای غنیتر برای کاربران.
اضافه کردن آیکونهای شخصی ساز به سایت
برای غنیتر کردن طراحی سایت خود، میتوانید به آیکونهای سفارشی در فرادادههای خود ارجاع دهید و این آیکونها در زمینههای خاصی نمایش داده میشوند. رایجترین مورد استفاده از این آیکونها، فاوآیکون (مخفف "آیکون علاقهمندیها" است که به کاربرد آن در فهرستهای "موارد دلخواه" یا "نشانکها" در مرورگرها اشاره دارد) است.فاویکون ساده سالهاست که وجود دارد. این اولین آیکون از این نوع است: یک آیکون مربعی ۱۶ پیکسلی که در چندین مکان استفاده میشود. ممکن است (بسته به مرورگر) فاویکونها را در تب مرورگر حاوی هر صفحه باز و در کنار صفحات بوکمارک شده در پنل بوکمارکها مشاهده کنید.
ذخیره آن در قالبی پشتیبانی شده مانند .ico، .gif یا .png در جایی در ساختار پوشه وبسایت شما.
اضافه کردن یک عنصر به بلوک HTML شما، که به مسیر فایل فاویکون اشاره میکند:
در این مثال، مسیر فایل favicon با / شروع میشود، که به معنی «به دنبال فایل در دایرکتوری سطح بالا (یا ریشه) سایت خود بگردید» است. این ممکن است در جای دیگری از کد منبع باشد، بسته به سیستمی که برای ایجاد سایت خود استفاده میکنید: چارچوبهای وب معمولاً یک پوشه ویژه برای فایلها در ریشه سایت، مانند static یا public، رزرو میکنند.
فعلا زیاد نگران پیچیدگیهای مسیرهای فایل نباشید؛ بعداً درباره آنها بیشتر خواهید آموخت.امروزه اکثر مرورگرها و نرمافزارها بهطور خودکار از فایل favicon.ico که در ریشه سایت قرار دارد، بهعنوان فاویکون استفاده میکنند، بنابراین بسیاری از سایتها حتی زحمت اضافه کردن عنصر را به خود نمیدهند. یک عنصر صریح هنوز هم در صورتی که بخواهید فایل فاویکون خود را در جای دیگری پیدا کنید، مفید است.
همچنین میتوانید برای زمینههای مختلف، آیکونهای مختلفی را در نظر بگیرید. برای مثال:
این روشی است که باعث میشود سایت هنگام ذخیره شدن در صفحه اصلی دستگاه اپل، یک آیکون نمایش دهد. حتی میتوانید برای دستگاههای مختلف، آیکونهای متفاوتی ارائه دهید تا مطمئن شوید که آیکون در همه دستگاهها خوب به نظر میرسد. برای مثال:
comment ها توضیح میدهند که هر آیکون برای چه کاری استفاده میشود - این عناصر مواردی مانند ارائه یک آیکون با وضوح بالا برای استفاده هنگام ذخیره وبسایت در صفحه اصلی آیپد را پوشش میدهند.
در حال حاضر زیاد نگران پیادهسازی همه این نوع آیکونها نباشید - این یک ویژگی نسبتاً پیشرفته است و از شما انتظار نمیرود که برای پیشرفت در طول دوره، دانشی در مورد آن داشته باشید. هدف اصلی در اینجا این است که به شما اطلاع دهیم که چنین چیزهایی چه هستند، در صورتی که هنگام مرور کد منبع وبسایتهای دیگر با آنها مواجه شدید. اگر میخواهید در مورد همه این مقادیر و نحوه انتخاب آنها بیشتر بدانید، صفحه مرجع عنصر را بخوانید.
اعمال CSS و جاوا اسکریپت به HTML
تقریباً تمام وبسایتهایی که در دنیای مدرن استفاده میکنید، از CSS برای جذاب جلوه دادن خود و از جاوا اسکریپت برای ایجاد قابلیتهای تعاملی مانند پخشکنندههای ویدیو، نقشهها، بازیها و موارد دیگر استفاده میکنند. این موارد معمولاً به ترتیب با استفاده از عنصر و عنصر در یک صفحه وب اعمال میشوند.
عنصر همیشه باید داخل سربرگ سند شما قرار گیرد. این عنصر دو ویژگی میگیرد، که نشان میدهد این فایل، فایل استایل سند است و که شامل مسیر فایل استایلشیت است:
عنصر همچنین باید در head قرار گیرد و باید شامل یک ویژگی src باشد که شامل مسیر جاوا اسکریپتی است که میخواهید بارگذاری کنید، و defer (یک ویژگی بولی) که به مرورگر دستور میدهد جاوا اسکریپت را پس از پایان تجزیه HTML توسط صفحه بارگذاری کند. ویژگی defer مفید است زیرا تضمین میکند که HTML قبل از اجرای جاوا اسکریپت بارگذاری شده است، به طوری که به دلیل تلاش جاوا اسکریپت برای دسترسی به یک عنصر HTML که هنوز در صفحه وجود ندارد، با خطا مواجه نمیشوید. روشهای مختلفی برای مدیریت بارگذاری جاوا اسکریپت در صفحه شما وجود دارد، اما این روش قابل اعتمادترین روش برای استفاده در مرورگرهای مدرن است.
عنصر ممکن است شبیه یک عنصر void به نظر برسد، اما اینطور نیست و بنابراین به یک تگ بسته نیاز دارد. به جای اشاره به یک فایل اسکریپت خارجی، میتوانید اسکریپت خود را درون عنصر قرار دهید.
در نهایت، شایان ذکر است که شما میتوانید (و واقعاً باید) زبان صفحه خود را تنظیم کنید. این کار را میتوان با اضافه کردن ویژگی lang به تگ HTML آغازین انجام داد.
این از بسیاری جهات مفید است. اگر زبان سند HTML شما تنظیم شده باشد (به عنوان مثال، به آن اجازه میدهد تا به درستی در نتایج مربوط به زبان نمایش داده شود)، موتورهای جستجو آن را به طور مؤثرتری فهرستبندی میکنند و برای افرادی که دارای اختلالات بینایی هستند و از صفحهخوانها استفاده میکنند مفید است (برای مثال، کلمه "شش" هم در فرانسوی و هم در انگلیسی وجود دارد، اما تلفظ متفاوتی دارد.)
همچنین میتوانید زیربخشهای سند خود را طوری تنظیم کنید که به عنوان زبانهای مختلف شناخته شوند. به عنوان مثال، میتوانیم بخش زبان ژاپنی خود را به صورت زیر تنظیم کنیم تا به عنوان ژاپنی شناخته شود:
