هدر و تگ های آن
یکی از قسمت های اصلی طراحی هر صفحه وب ، قسمت سرصفحه یا همان هدر ( header ) است. قسمتی که ضمن ایفای نقشی اساسی ، در صفحه به نمایش در نمی آید. در این قسمت ، قصد داریم ضمن تشریح تگ ها ، به کاربرد آن ها بپردازیم.هر صفحه طراحی شده ، با تگ <html> شروع و با </html> به پایان می رسد. بین تگ های <html> دو تگ عمده قرار می گیرند که <head> و <body> هستند. پیش از این در آموزش های قبلی ، تا حدودی با تگ های موجود در <body> آشنا شدیم و دیدیم که هر کدام چه کاربردی داشته و در صفحه چگونه به نمایش در می آیند. امروز قصد داریم به سراغ تگ های انگشت شمار موجود در تگ <head> برویم که ضمن محدودیت و عدم نمایش ، بسیار حائز اهمیت هستند.
پیش از هرچیز ، ساختار یک صفحه HTML را که دارای تگ های <html> ، <body> و <head> هستند در زیر ببینیم :
<html>
<head>
…
</head>
<body>
…
</body>
</html>
بیایید با هم ، قدم به قدم وارد تگ های موجود در تگ <head> شویم.
یکی از مهم ترین تگ هایی که به عنوان یکی از استاندارد های هر صفحه شناخته شده است ، تگ <title> است که ضمن ایفای نقش نمایش عنوان صفحه ، نقش پر رنگی در امتیاز سئوی صفحه نیز دارد. ابتدا بگذارید با نمایش یک عکس ، اولین وظیفه این تگ ، یعنی نمایش عنوان صفحه ، را در سه مرورگر مختلف به شما نشان دهم :
کاربرد اولیه این تگ را مشاهده نمودید ، نمایش عنوان صفحه. حال بیایید به تگ <title> سایت گویا آی تی نیز نگاهی بیندازیم :
<title>مجله اينترنتی گوياآی‌تی</title>
توجه نمایید که در این تگ ، امکان نمایش کد های html یا جاوا اسکریپت وجود ندارد ! بعضی کدهای جاوا هستند که می توانند عنوان صفحه را تغییر دهند اما این کار از لحاظ سئو به هیچ عنوان کار درستی نیست. بیایید کاربرد بعدی تگ <title> را در موتورهای جستجو ببینیم :
درست حدس زدید ! جستجوگر ها به هنگام گشت و گذار در صفحات وب شما ، صفحات شما را با همان عنوانی ذخیره می کنند که شما در تگ <title> صفحه خود نوشته اید ! پس یکی از فاکتورهای حضور در صفحه اول جستجوها یا لااقل دیده شدن در جستجوها انتخاب عنوان مناسب برای صفحه است.
نکته : جستجوگرها ، سورس صفحه شما را ذخیره می کنند. بنابراین تغییر عنوان صفحه با استفاده از جاوا اسکریپت ، در جستجوها نادیده گرفته می شود.
یک مثال ساده :
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document……
</body>
</html>
تابحال تنها یک تگ را مورد بررسی قرار دادیم. بیایید به سراغ تگ بعدی برویم.
تگ بعدی که به آن خواهیم پرداخت ، تگ <link> است. در واقع وظیفه اصلی این لینک برقراری ارتباط با آدرس های خروجی اما مرتبط به صفحه فعلی ما است. برای مثال ، فرض کنید استایل یک پیج را در فایلی به نام style.css ذخیره کرده ایم. برای برقراری یک ارتباط میان صفحه و استایل مورد نظر از تگ <link> استفاده می کنیم. این تگ کاربرد های دیگری نیز دارد ، همچون نمایش favicon ( آیکون کنار آدرس وب سایت در قسمت نوار آدرس مرورگر ) ، ارائه آدرس نویسنده صفحه و … . تعیین کاربرد و وظیفه تگ <link> با عنصر rel صورت می پذیرد. این عنصر ورودی های از پیش تعیین شده ای دارد که به تشریح آن ها می پردازیم.
ابتدا همه ورودی های عنصر rel ، این ها هستند :
alternate – نمایش آدرس جایگزین
archives – آرشیو های مربوط به صفحه
author – آدرس نویسنده صفحه
first – آدرس اولین صفحه مربوط به یک متن چند صفحه ای
help – آدرس صفحه آموزش مربوط به صفحه برای ارائه توضیحات
icon یا shortcut icon – نمایش آیکون کنار نوار آدرس مرورگر
last – آدرس آخرین صفحه مربوط به یک متن چند صفحه
license – ارائه آدرس کپی رایت صفحه
next – آدرس صفحه بعدی یک متن چند صفحه ای
nofollow – عدم دنبال پذیری صفحه توسط جستجوگر ها
prev – آدرس صفحه قبلی یک متن طولانی
stylesheet – آدرس صفحه استایل مربوط به صفحه
کاربرد هر کدام از آن ها را شرح دادیم. اما برای استفاده از کاربرد های بالا ، نیازمند یک عنصر دیگر نیز هستیم تا آدرس ها را درخود جای دهد. آن عنصر ، href است. به مثال زیر توجه کنید :
<head>
<link rel=”stylesheet” type=”text/css” href=”theme.css”>
</head>
در مثال بالا ، استایل theme.css در صفحه ما بارگذاری می شود. همانطور که می بینید مقدار عنصر rel روی stylesheet تعیین شده و عنصر href آدرس فایل استایل را در خود جای داده است.
توجه : هنگامی که مقدار عنصر rel روی stylesheet تنظیم شده است و شما قصد دارید تا استایل صفحه خود را از یک فایل خروجی بگیرید ، می توانید با استفاده از عنصر type ، نوع کدهای فایل را مشخص کنید. هرچند این مقدار به طور پیش فرض روی text/css تنظیم شده است و فقط می تواند دو ورودی داشته باشد : text/css یا text/javascript.
توجه : تگ <link> یک تگ حامل نیست. یعنی این تگ در خود باز و بسته می شود و تگ </link> وجود ندارد. ( به تفاوت میان تگ <link> و <title> در مثال های بالا توجه کنید – تگ <title> حامل است )
مرحله بعدی ، معرفی تگ استایل است. اگر با زبان css آشنایی ندارید ، تنها توضیح مختصری که می توان برای تعریف آن داد ، ارائه کلاس های تعریف شده ، برای ساختار بندی ، شکل دهی و رنگ بندی عناصر موجود در صفحه است. پیشنهاد من این است که اگر به دنبال یادگیری طراحی هستید ، حتما آموزش های ما در گویا آی تی را دنبال کنید. پس از اتمام آموزش HTML به سراغ CSS خواهیم رفت.
کد های CSS خود را می توانید در تگ <style> قرار دهید. به مثال زیر توجه کنید :
<head>
<style type=”text/css”>
body {background-color:yellow}
p {color:blue}
</style>
</head>
این تگ نیز دارای دو عنصر است : type و media که عنصر type دارای دو ورودی text/css و text/javascript است و عنصر media ورودی های زیر را خواهد داشت که هرکدام برای یک دستگاه خاص آماده شده است :
all – برای همه دستگاه ها
braille – برای دستگاه ها با زبان بریل
handheld – برای دستگاه هایی با صفحه نمایش کوچک و پهنای باند محدود
projection – برای پروژکتور ها
print – برای صفحه های مناسب چاپ
screen – برای رایانه ها
tv – برای نمایش در تلویزیون ها و صفحه هایی که امکان اسکرول آن ها محدود است
تگ بعدی که هم در تگ <head> و هم در <body> قابل استفاده است ، تگ <script> است که کد های مختلف به زبان های مختلفی را اجرا می کند و دارای سه عنصر است ه آن ها را برای شما تشریح می کنیم.
توجه : تگ <script> که در تگ <head> قرار می گیرد ، پیش از بارگذاری تگ <body> و تگ های موجود در آن بار گزاری می شود.
اولین عنصر تگ <script> عنصر language است. این عنصر ، زبان کدهایی را که شما می خواهید در تگ <Script> خود بنویسید تعیین می کند. مقادیر این عنصر می تواند زبان های زیر باشد :
C#
Javascript
Javascript1.1
Javascript1.2
Javascript1.3
Javascript1.4
Javascript1.5
jscript
php
vb
vbscript
در حالت پیشفرض ، مقدار javascript برای این عنصر در نظر گرفته شده است و طراحان به صورت عمده از این تگ برای نوشتن کدهای جاوا اسکریپت استفاده می کنند.
عنصر بعدی این تگ ، عنصر type است که آن هم ورودی های مختلفی دارد که از حد آموزش امروز ما فراتر است و جایی برای بحث در مورد آن در این آموزش نیست. اما این عنصر به صورت پیشفرض روی text/javascript تنظیم شده است.
و اما یکی دیگر از تگ های مهم موجود در تگ <head> تگ بسیار کاربردی <meta> است که خصوصیات صفحه را معین می کند. به جرأت می توان گفت در وب به دنرت می توان صفحه ای را بدون تگ های <meta> یافت. این تگ از لحاظ سئو نی بسیار حائز اهمیت است. بیایید با هم عناصر این تگ را بررسی کنیم.
یکی از عنصر های این تگ که مهم ترین آن نیز هست عنصر http-equiv است که سه ورودی دارد :
content-type – که نمایان گر نوع Encoding صفحه است
default-style
refresh – که باعث رفرش صفحه یا هدایت کاربر به یک صفحه دیگر پس از چند ثانیه می شود
توجه : برای صفحات غیر English استفاده از content-type یک مسئله ضروری است ! حتما تابحال به صفحات پارسی زبانی که دارای کاراکتر های نامعلوم و ناخوانا هستند مواجه شده اید. با استفاده از این عنصر می توان این مشکل را رفع نمود.
عنصر بعدی ، name است که بسیار مهم بوده و دارای ورودی های پیشفرض زیر است :
application-name – نمایش دهنده برنامه ای که توسط آن ، صفحه ساخته شده است
author – نمایش دهنده نام نویسنده صفحه
description – نمایش دهنده توضیحات مختصری درباره صفحه
generator – نمایش دهنده یکی از برنامه هایی که با آن صفحه مورد نظر ساخته شده است
keywords – نمایش دهنده کلمات کلیدی صفحه
توجه : استفاده از عنصر name با ورودی های description و keywords بسیار متداول است. همچنین هرکدام کاربردهای اساسی خود را دارند. مقدار description توضیحاتی را ارائه می دهد که جستجوگر ها از آن برای نمایش در صفحات خود استفاده می کنند. مقدار keywords نیز کلمات کلیدی از صفحه هستند که جستجوگر ها آن ها را به عنوان شاخصه هایی از صفحه انتخاب کرده و در جستجو ها صفحه شما را نمایش می دهند.
عنصر بعدی تگ <meta> عنصر content است. بدون عنصر content عناصر دیر تگ <meta> کاملا بلااستفاده هستند. این عنصر حامل مقادیری است برای عنصر name و http-equiv. برای مثال ، وقتی شما عنصر name را رور author تنظیم می کنید ، مقدار عنصر content را روی “نویسنده” تنظیم خواهید کرد.
حال که با سه عنصر اصلی تگ <meta> آشنا هستید بیایید با هم چند مثال را بررسی کنیم :
<head>
<meta name=”description” content=”Free Web tutorials”>
<meta name=”keywords” content=”HTML,CSS,XML,JavaScript”>
</head>
در کد بالا ، دو تگ <meta> داریم ( توجه کنید که تگ <meta> نیز همانند تگ <link> حامل نیست ) که به ترتیب آن ها را پردازش می کنیم.
تگ اول دارای عنصر name است که مقدار آن روی description تنظیم شده است. پس مقادیری که در عنصر content قرار میگیرد نمایش دهنده توضیحات مختصر از صفحه است.
تگ دوم نیز دارای عنصر name است که مقدار آن روی keywords تنظیم شده است. بنابراین مقادیری که در عنصر content رار میگیرد نمایش دهنده کلمات کلیدی صفحه است.
نکته : کلمات کلیدی را باید با استفاده از کاراکتر “,” از یکدیگر جدا نمود. ( comma )
یکی از مهم ترین تگ های <meta> که برای ما پارسی زبانان نیز دارای اهمیتی زیادی است تگ <meta> با عنصر http-equiv تنظیم شده روی “Content-Type” است. با تنظیم این عنصر و تنظیم عنصر content روی “text/html; charset=utf-8” به مرورگر دستور می دهیم تا محتوای صفحه را با رمزگزاری utf-8 بارگزاری کند که باعث بارگزاری صحیح کاراکتر های پارسی می شود. مثال زیر را با هم بررسی کنیم :
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>GooyaIT.Com</title>
</head>
امیدوارم به خوبی با تگ <head> آشنا شده باشید. مشتاقانه پذیرای دیدگاه ها و پرسش های شما در قسمت دیدگاه ها هستم.
خیلی ممنون اگه میشه یک جلسه بطور کامل در مورد div توضیح بدید
slmmmmmmmmm,man daneshjoye terme 3computeram,ye porozhe daram vase darseeeeee tarahiye web,ba php,html
komak mikhastam azaton.mikham ba php ye search box,username o password ba ye amargir besazammmmmmmmmmmmmmmdar hade mobtadiiiiiii,faghat tarahisheee,siteee man hata adrese url nadare,ostad nakhaste,nemitonammmm harkari mikonam:( mishe komakam koniddddddddd vagarna mioftadammmm in darsoo
سلام
این تک ها رو باید در کجا پیدا کنیم لطفا یک راهنمای کامل که اصلا این تک ها رو تو وب سایت مون از کجا باید بیاریم که متن رو داخلش قرار بدیم