آموزش تگ head در HTML

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

تگ head یکی از تگ های اصلی html است که همواره در کلاس آموزش طراحی سایت با HTML و CSS در مورد آنها صحبت می کنیم و از اهمیت این تگ در سئو می گوییم.

با ما همراه باشید با آموزش تگ head در HTML و تگ های داخلی آن به صورت کامل.

آموزش تگ title در تگ head

یکی از شناسه های <a> ویژگی title است.با استفاده از آن می توانیم عنوانی را برای لینک خود انتخاب کنیم و این عنوان هنگامی که بازدید کننده ماوس خود را روی لینک قرار می دهد به نمایش در می آید.

:مثال <a href = “ http :// www.yahoo.com “ title =” go to yahoo “ > yahoo </a>

آموزش تگ Link در تگ head

تصور کنید که یک صفحه بلند داشته باشیم و کاربر بخواهد از انتهای صفحه مجدد به قسمتی در بالای صفحه برگردد و یا ممکن است بخواهیم صفحه را به چندین قسمت تقسیم کنیم ودر بالای صفحه فهرستی برای آن قرار دهیم که کاربر باکلیک بر روی عنوان های آن به آن قسمت در صفحه برود.
برای لینک به بالای صفحه از نشانه ای به نام name به منظور نام گذاری آن قسمت از صفحه استفاده می کنیم.

<body>
<a name = “ top “ > </a>
.
.
.
.
<a href = “ # top “ > back to top </a> </body>

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

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

 <body>
نام صفحه موردنظر #نام محل مورد نظر<a href = “ test “> </a>

آموزش تگ style در تگ head

تگ <style> برای تعریف اطلاعات استایل برای یک سند HTML استفاده می شود.

در داخل عنصر <style> مشخص می کنید که چگونه عناصر HTML باید در یک مرورگر نمایش داده شود.

هر سند HTML می تواند شامل چند تگ <style> باشد .

<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

آموزش تگ meta و انواع آن در HTML

متا تگ ها ،تگ هایی می باشند که در تگ head صفحه به کار می روند .این تگ ها برای دادن اطلاعاتی صفحه html موجود مورد استفاده قرار می گیرد .اطلاعاتی که در تگ های متا قرار می گیرد بر حسب نوع این تگ ها متفاوت هستند و شامل نام نویسنده ،برنامه تولید کننده ،کلمات کلیدی صفحه و …. می باشند .اهمیت اصلی این تگ ها این است که موتورهای جستجو برای پیداکردن صفحات کاربران از این تگ ها استفاده می کنند و محتویات موجود در این تگ ها را در هر صفحه مورد بررسی قرار می دهند .تگ های متا برای موتورهای جستجو برای بررسی و شاخص گذاری صفحات استفاده می شوند .تگ های متا دارای یک قسمت بوده و تگ پایانی ندارد.

<head>
<meta name = “ “ contenrs = “ “ >
</head>

شناسه name مشخص کننده نوع مت تگی است که قصد استفاده از آن را داریم .
شناسه content محتویات مت تگ را تعیین می کند .این محتویات مطالبی هستند که توسط موتورهای جستجو مورد استفاده قرار می گیرند.
<meta name = “ author “ content = “ “ >
این متا تگ کمتر توسط موتورهای جستجو مورد استفاده قرار می گیرد و بیشتر برای اطلاعات صفحه به کار می رود .این تگ به ما این امکان را می دهد که نویسند صفحه را مشخص کنیم .در شناسه contest فقط نام نویسنده را می نویسیم.

<meta name = “ generator “ >

مانند نوع قبلی برای رتبه بندی صفحات در موتورهای جستجو مورد استفاده قرار نمی گیرد.این تگ بیان می کند که شما برای ایجاد صفحه خود از چه برنامه ای استفاده کرده اید.
<meta name = “ key words “ content = “ “ >

این متا تگ برنامه موتورهای جستجو را از وجود یک دسته از کلمات کلیدی در این صفحه آگاه می کند .
درقسمت content لیستی از کلمات کلیدی صفحه را قرار می دهیم .برای جدا کردن لغات از یکدیگر از کاما استفاده می کنیم .همچنین کلید واژه هارا نباید چند بار تکرار کرد و نیز باید با متن صفحه ما هم خوانی داشته باشد .زیرا موتورهای جستجو آن ها تشخیص داده و روی رتبه بندی سایت تاثیر منفی می گذاردو

<meta name = “ description “ content = “ “ >

از آن برای توصیف محتویات صفحه استفاده می شود . در شناسه content آن ،توصیف مورد نظر خودرا می نویسیم و علاوه بر توضیح می توانیم از یک یا دو کلید واژه هم استفاده کنیم.
بسیاری از موتورهای جستجو این قسمت را در لیست نتایج جستجو به عنوان توضیح صفحه نشان می دهند.

<meta http – equiv = “ refresh “ content = “ “ >

اگر صفحه جا به جا شد و یا به هر دلیلی خواستیم مسیر بازدید کنندگان خود را تغییر دهیم می توانیم از این تگ استفاده کنیم .این متا تگ در تگ head و قبل از title باید نوشته شود.
شناسه content در اینجا 2 کاررا انجام می دهد .اول مشخص می کند که مرورگر قبل از تغییر مسیر چند ثانیه باید صبر کند و دوم آدرس صفحه ای که باید مسیر به آن آدرس تغییر کند را تعیین می کند .هر 2 این اطلاعات دریک کوتیشن قرار گرفته و با کاما از هم جدا می شوند.

: مثال 
<html>
<head>
<meta http – equiv = “ refresh “ content = “ 3 ; url = page 1 . htm >

بعد از گذاشتن 3 ثانیه به طور خودکار به صفحه مشخص شده می رود . 
<title> lerning </title>
</head>
<body>
Your browser cannt support meta tag 
در صورت منتقل نشدن به پیج جدید بازدید کننده متوجه این موضوع شود </body> 
</html>

آموزش تگ Script در تگ head

از تگ < script > برای قرار دادن يک اسکريپت ( برنامه های نوشته شده توسط زبان های برنامه نويسی اسکريپتی مثل Java Script , VB Script ) درون صفحات HTML استفاده می شود . مجموعه دستورات برنامه مورد نظر بين تگ باز و بسته < script > قرار بگيرند .

تگ های اسکريپت را می توان در درون بخش < body > صفحه HTML و يا در قسمت < head > قرار داد . تگ هايی که در قسمت < body > قرار بگيرند ، به محض اجرای صفحات اجرا شده و اثر خود را نمايش می دهند . ولی اسکريپت هايی که در بخش < head > قرار بگيرند ، تا زمانی که توسط کاربر فراخوانی نشده و يا رويداد در نظر گرفته شده برای اجرای آنها اتفاق نيفتد ، اجرا نخواهند شد .در کلاس آموزش طراحی سایت پیرامون تگ head و تگ های داخلی به صورت مفصل صحبت خواهیم کرد.

< html >
 < head >
 < /head >
 < body >
 < script type = "text/javascript" >
 document.write ( " This is an Script ... ! " )
 
 < /script >
 < /body >
< /html >

آموزش عکس (Image) ها در HTML

می خواهیم با کلیک برروی عکس به صفحه ای دلخواه منتقل شویم. برای این منظور می بایست در تگ <a> تگ img را قراردهیم.

 <a href = “ “ > <img src = “ “ > </a>

اکثر مرورگرها به عکسی که به عنوان لینک استفاده می شود یک خط حاشیه در لبه های تصویر اضافه می کنند برای اینکه این خط دیده نشود از شناسه border در تگ img استفاده می شود. مقدار این شناسه را برای دیده نشدن حاشیه برابر صفر قرار می دهیم.در غیر این صورت به ازای هر عددی ، ضخامت حاشیه را مشخص می کنیم

آموزش تگ img در HTML

آموزش صفت src در HTML

این کار به وسیله تگ <img> ممکن است. این تگ دارای شناسه src است که آدرس محل قرار گیری فایل عکس را به عنوان مقدار دریافت می کند.این آدرس نیز مانند آدرس لینک ها حتما نباید در سایت ما قرار داشته باشد و در هر جای دیگری ممکن است باشد.
در اینجا نیز اگر عکس و فایل صفحه ما در یک پوشه قرار داشتند تنها نام عکس را قید می کنیم . در غیر این صورت باید آدرس کامل را ذکر کنیم.
تگ <img>فقط از یک قسمت تشکیل شده و تگ ابتدایی و انتهایی ندارد.

: مثال <body>
 <img src = “”> 
 </body>

آموزش صفت alt در HTML

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

<img src = “ “ alt = “ “ >

آموزش صفت width و height درHTML

اگر ما یک عکس داریم که اندازه آن ،اندازه مورد نظر ما نیست ، می توانیم اندازه آن را تغییر دهیم.
این کاررا با اضافه کردن 2 شناسه width برای عرض عکس و height برا یارتفاع عکس صورت می گیرد.
با استفاده از شناسه align می توانیم عکس و متن را کنار هم در یک خط قرار دهیم.

مقاله