طراحی سایت
ساناتک
جمعه 25 تير 1395
2
تگ title چیست

تگ title چیست؟

شروع این تگ<title> و پایان آن </title>، در کد بالا دو طرف عنوانِ Untitled Document قرار گرفته اند. به علامتِ (/ )در تگِ پایانیِ title توجه کنید از آنجا که تمام تگ های پایانی از آن برخوردارند.

به کلمات "Untitled Document" دقت کنید؛ زمانی که صفحه وب میسازید یکی از بنیادی ترین کارهایی که باید از همان ابتدا انجام دهید مشخص کردن و نوشتن آن است، شما می توانید هر چیزی به جای آن بنویسید و بهتر است به محتوای سایت مربوط باشد، به عکس2.3 نگاه کنید و ببینید که این عنوان کجای مرورگر نشان داده شده است.

Untitled Document

عکس2.3: جای قرارگیریِ عنوان"Untitled Document"؛ همانطور که میبینید عنوان مشخص شده در این مثال زیاد کاربردی نیست!

تعیین یک عنوان خوب کاری بسیار ضروری است، نه تنها برای بازدید کنندگان سایت شما بلکه کاربردهای دیگری نیز دارد، پس سعی کنید در انتخاب یک عنوان کوتاه و گویا دقت داشته باشید.

کاربردهای دیگر تعیین یک عنوان مناسب:

  1. در قسمت Taskbar ویندوز همانطور که در شکل میبینید یک عنوان خوب می تواند برای کاربر بسیار مفید باشد، مخصوصاً اگر چند صفحه را همزمان باز کرده باشد(شکل2.4). در قسمت dock سیستم عامل مک هم این عنوان دیده می شود(شکل2.5).

titled Document

عکس2.4: میبینید که عنوان ها چگونه به کاربر در انتخاب پیج مورد نظرش کمک می کند.

dock

عکس2.5: عنوان در سیستم عامل مک در قسمت dock نیز دیده می شود.

  1. در صورتی که کاربر بخواهد سایت شما را به لیست bookmarks یا favorites مرورگر خود استفاده کند عنوانی که شما انتخاب می کنید در بخش نامبرده نشان داده می شود(شکل2.6).

favorites title

شکل2.6: به عنوان Untitled Document که در بخش favorites مرورگرِ IE ذخیره شده توجه کنید.

  1. عنوان انتخاب شده به شدت توسط موتورهای جست و جو در وب مورد استفاده قرار می گیرد و بازدیدکنندگان را به سایت شما راهنمایی می کند، برای سرگرمی می توانید Untitled Document را در google سرچ کنید تا ببینید افراد ناوارد چقدر زیاد هستند، سعی کنید مانند آن ها عمل نکنید!

تگ meta چیست؟

در مثال ساده ای که در زیر برای شما آورده شده تگ meta را با حروف درشت ببینید:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>

 

این تگ کاربردهای گوناگونی در یک صفحه وب دارد. بعضی از اطلاعات را می توان به وسیله آن در کدنویسی ها به گونه ای نوشت که توسط مرورگر و موتورهای جست و جو دیده نشود؛ به عنوان مثال نام نویسنده یا یک اخطار در زمینه copyright را می توان با تگ meta به کدهای خود اضافه کرد. در مثال ذکر شده در بالا به وسیله تگ ذکر شده به مرورگر در زمینه نوع کاراکترهایی که باید در صفحه مورد نظر استفاده شود اطلاعاتی داده شده است(در این مثال از UTF-8 استفاده شده که به وسیله آن تقریباً کاراکترهای هر زبانی را می توان نشان داد).

 

این تگ استفاده های زیادی دارد اما تقریباً تمام آن ها مانند مثال ذکر شده در بالا عمل می کنند و در ظاهر کار ما تاثیر ندارند.

تگ های self-closing:

تگ meta که در مورد آن در بالا توضیحات مختصری داده شد نمونه ای از تگ های self-closing است، برخلاف تگ title این تگ نیازی به دربر داشتن اطلاعات ندارد پس می توانیم به صورت زیر آن را بنویسیم:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>

XHTML تعدادی از این تگ های خالی را در خود دارد و کسانی که آن را ساخته اند به این نتیجه رسیدند که بستن تگ هایی مثل meta به صورت معمول گاهی وقت ها آزاردهنده می شود؛ پس تصمیم بر این شد که آن ها را زیر مجموعه ای از تگ های self-closing در نظر بگیرند؛ تگ هایی که با /> بسته می شوند. در واقع مثال بالای ما به این صورت در میاید:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
تعداد بازدید: 393
مطالب دیگر آموزش طراحی سایت
روش های انتخاب تگ با استفاده از classوضعیت های گوناگون یک لینک در یک صفحه وبstyle دهی گروهی به چندین تگانتخاب زمینه کاری در CSS با خصوصیت idکاربرد دستور em و italics در CSS
 
زمان ثبت
سه شنبه 02 شهريور 1395 21:56
غلامرضا عباسی
لطفا از اهمیت تگ تایتل در سئو هم بگید
تشکر از مطالب آموزشی تون
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید