هدر و تگ های آن

هدر و تگ های آن

یکی از قسمت های اصلی طراحی هر صفحه وب ، قسمت سرصفحه یا همان هدر ( header ) است. قسمتی که ضمن ایفای نقشی اساسی ، در صفحه به نمایش در نمی آید. در این قسمت ، قصد داریم ضمن تشریح تگ ها ، به کاربرد آن ها بپردازیم.هر صفحه طراحی شده ، با تگ شروع و بابه پایان می رسد. بین تگ های

دو تگ عمده قرار می گیرند .. پیش از این در آموزش های قبلی ، تا حدودی با تگ های موجود درآشنا شدیم و دیدیم که هر کدام چه کاربردی داشته و در صفحه چگونه به نمایش در می آیند. امروز قصد داریم به سراغ تگ های انگشت شمار موجود در تگ

برویم که ضمن محدودیت و عدم نمایش ، بسیار حائز اهمیت هستند.

پیش از هرچیز ، ساختار یک صفحه HTML را که دارای تگ های

،وهستند در زیر ببینیم :

…

…

بیایید با هم ، قدم به قدم وارد تگ های موجود در تگ

شویم.

یکی از مهم ترین تگ هایی که به عنوان یکی از استاندارد های هر صفحه شناخته شده است ، تگ

اینترنت اکسپلورر
کروم

گوگل کروم
ff

فایر فاکس

کاربرد اولیه این تگ را مشاهده نمودید ، نمایش عنوان صفحه. حال بیایید به تگ

توجه نمایید که در این تگ ، امکان نمایش کد های html یا جاوا اسکریپت وجود ندارد ! بعضی کدهای جاوا هستند که می توانند عنوان صفحه را تغییر دهند اما این کار از لحاظ سئو به هیچ عنوان کار درستی نیست. بیایید کاربرد بعدی تگ

تاثیر تگ

درست حدس زدید ! جستجوگر ها به هنگام گشت و گذار در صفحات وب شما ، صفحات شما را با همان عنوانی ذخیره می کنند که شما در تگ

نکته : جستجوگرها ، سورس صفحه شما را ذخیره می کنند. بنابراین تغییر عنوان صفحه با استفاده از جاوا اسکریپت ، در جستجوها نادیده گرفته می شود.

یک مثال ساده :

The content of the document……

تابحال تنها یک تگ را مورد بررسی قرار دادیم. بیایید به سراغ تگ بعدی برویم.

تگ بعدی که به آن خواهیم پرداخت ، تگ

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

استفاده می کنیم. این تگ کاربرد های دیگری نیز دارد ، همچون نمایش favicon ( آیکون کنار آدرس وب سایت در قسمت نوار آدرس مرورگر ) ، ارائه آدرس نویسنده صفحه و … . تعیین کاربرد و وظیفه تگ

با عنصر rel صورت می پذیرد. این عنصر ورودی های از پیش تعیین شده ای دارد که به تشریح آن ها می پردازیم.

ابتدا همه ورودی های عنصر rel ، این ها هستند :

alternate – نمایش آدرس جایگزین
archives – آرشیو های مربوط به صفحه
author – آدرس نویسنده صفحه
first – آدرس اولین صفحه مربوط به یک متن چند صفحه ای
help – آدرس صفحه آموزش مربوط به صفحه برای ارائه توضیحات
icon یا shortcut icon – نمایش آیکون کنار نوار آدرس مرورگر
last – آدرس آخرین صفحه مربوط به یک متن چند صفحه
license – ارائه آدرس کپی رایت صفحه
next – آدرس صفحه بعدی یک متن چند صفحه ای
nofollow – عدم دنبال پذیری صفحه توسط جستجوگر ها
prev – آدرس صفحه قبلی یک متن طولانی
stylesheet – آدرس صفحه استایل مربوط به صفحه

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

در مثال بالا ، استایل theme.css در صفحه ما بارگذاری می شود. همانطور که می بینید مقدار عنصر rel روی stylesheet تعیین شده و عنصر href آدرس فایل استایل را در خود جای داده است.

توجه : هنگامی که مقدار عنصر rel روی stylesheet تنظیم شده است و شما قصد دارید تا استایل صفحه خود را از یک فایل خروجی بگیرید ، می توانید با استفاده از عنصر type ، نوع کدهای فایل را مشخص کنید. هرچند این مقدار به طور پیش فرض روی text/css تنظیم شده است و فقط می تواند دو ورودی داشته باشد : text/css یا text/javascript.

توجه : تگ

یک تگ حامل نیست. یعنی این تگ در خود باز و بسته می شود و تگ وجود ندارد. ( به تفاوت میان تگ

و

مرحله بعدی ، معرفی تگ استایل است. اگر با زبان css آشنایی ندارید ، تنها توضیح مختصری که می توان برای تعریف آن داد ، ارائه کلاس های تعریف شده ، برای ساختار بندی ، شکل دهی و رنگ بندی عناصر موجود در صفحه است. پیشنهاد من این است که اگر به دنبال یادگیری طراحی هستید ، حتما آموزش های ما در گویا آی تی را دنبال کنید. پس از اتمام آموزش HTML به سراغ CSS خواهیم رفت.

کد های CSS خود را می توانید در تگ

این تگ نیز دارای دو عنصر است : type و media که عنصر type دارای دو ورودی text/css و text/javascript است و عنصر media ورودی های زیر را خواهد داشت که هرکدام برای یک دستگاه خاص آماده شده است :

all – برای همه دستگاه ها
braille – برای دستگاه ها با زبان بریل
handheld – برای دستگاه هایی با صفحه نمایش کوچک و پهنای باند محدود
projection – برای پروژکتور ها
print – برای صفحه های مناسب چاپ
screen – برای رایانه ها
tv – برای نمایش در تلویزیون ها و صفحه هایی که امکان اسکرول آن ها محدود است

تگ بعدی که هم در تگ

و هم درقابل استفاده است ، تگ