آموزش HTML – قسمت نهم

چهارشنبه, ۲۰ام مرداد , ۱۳۸۹ | ۱۷ دیدگاه

با سلام دوباره. با قسمت نهم آموزش HTML در خدمت شما دوستان هستیم. در قسمت هشتم با مباحث زیر آشنا شدیم
آشنایی با ورژن های مختلف HTML و تفاوتهای آنها.
Cascading Style Sheet چیست ؟ و نحوه استفاده از آن چگونه است ؟
آشنایی با تگ <head>و خصوصیات آن ( meta , title ,… )
و در این خود آموز تلاش خواهیم کرد به طور مشروح به مطالب زیربپردازیم.

تگ <meta> چیست و نحوه تنظیمات آن چگونه است ؟
Script ها درصفحات وب

و در قسمت آیند ( دهم ) با مطالب زیر آشنا خواهیم شد :

آشنایی با URL ها و Encoding آنها
XHTML چیست و مزیت های استفاده از آن چییست ؟
تفاوتهای HTML و XHTML
آشنایی با قوانین XHTML

تگ <meta> چیست و نحوه تنظیمات آن چگونه است ؟

می توان تگ <meta> را خلاصه ای از مطالب یک وب سایت دانست که شامل توضیحاتی کوتاه در مورد وب سایت و محتویات آن ، کلمات کلیدی برای کمک به موتورهای جستجو و همچنین کاربران برای پیدا کردن مطالب مورد نظر است .
اما فواید تگ های <meta> و نحوه تنظیم آن چگونه است؟
تگ <meta> در ظاهر در صفحات وب نمایش داده نمی شود و البته می توان به راحتی آنها را با نگاهی درsource code سندهای HTML و مابین تگ <head> پیدا نمود.
به طور معمول تگهای <meta> برای ارائه توضیحاتی درباره محتویات وب سایت ، کلمات کلیدی ، به وجود آورنده وبسایت ، تاریخ آخرین ویرایش و … به کار می رود.
تگ های <meta> توسط مرورگرها ، موتورهای جستجو و دیگر سرویسهای وب مورد استفاده قرار می گیرند. در حال حاضر این تگها به دلیل سوء استفاده های زیادی که ازآن برای بالا بردن رتبه وب سایت ( با وارد کردن کلمات غیر مرتبط ) در موتورهای جستجو می شد از اهمیت کمتری برای موتورهای جستجو بر خوردار است ولی وجود آن با محتویات صحیح و کاربردی به رتبه وب سایت در موتورهای جستجو و همچنین رضایت مندی جستجو گران برای رسیدن به هدفشان کمک بسیاری خواهد کرد.رعایت نکات زیر می تواند در تعیین و تنظیم محتوای تگهای <meta> مفید باشد.

– بهتر است مقادیر title , description , keyword برای هر صفحه وب سایت به صورت مجزا و با توجه به محتویات آن صفحه وب تعیین گردد و از تکرار آن در همه صفحات وب به صورت یکسان خودداری شود.

– بهتر است بین کلمات مورد استفاده در title , description , keyword یک رابطه منطقی موجود باشد و از کلمات تکراری کمتری استفاده شود.

– و در نهایت اینکه محتویات تگهای <meta> حتما باید به روشنی بیانگر محتویات آن صفحه وب باشند .

در زیر نمونه ای از تگهای <meta> را ملاحظه خواهید نمود.

<head>
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<meta name="author" content="Amir Sorouri" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
</head>

تفاوت مابین تگهای <meta> با خاصیت HTTP-EQUIV و NAME چیست ؟

اگر شما به جای

<meta name="...">

از

<meta HTTP-EQUIV="...">

استفاده نمائید نشان دهنده این موضوع است که محتویات این تگ <meta> ، به عنوان HTTP headers ارسال می شود.

اما HTTP headers چیست ؟

HTTP headers اطلاعاتی در مورد هر سند است که همراه با آن ارسال می شود. این اطلاعات در صفحه وب نمایش داده نمی شوند و قبل از محتویات (HTML) هر صفحه وب ارسال میگردند و شامل اطلاعاتی مانند cookies, caching redirection, proxy servers هستند. در زیر می توانید نمونه ای از HTTP headers را ملاحظه نمائید .

HTTP/1.1 200 OK
Date: Wed, 13 Aug 1997 02:35:50 GMT
Server: Apache/1.2.0
Last-Modified: Fri, 04 Jul 1997 22:18:24 GMT
ETag: "28f7d-810-33bd76b0"
Content-Length: 2064
Accept-Ranges: bytes
Connection: close
Content-Type: text/html

یک تگ <meta> با خاصیت HTTP-EQUIV به شما این امکان را میدهد که اطلاعاتی را همراه با HTTP headers برای Server ارسال نمائید.

مثال :

<META HTTP-EQUIV="Author" CONTENT="Amir Sorouri">

باید به این نکته تاکید کرد که تمامی مرورگرها موظف به استفاده از HTTP-EQUIV هستند اگر واقعا این اطلاعات درون HTTP headers وجود داشته باشند اما همیشه این اطلاعات در درون HTTP headers ساخته نمی شود.
سازندگان و گردانندگان Server ها دریافتند که استفاده از تگهای <meta> با خصوصیت HTTP-EQUIV بار محاسباتی بر روی Server را بسیار افزایش میدهد و این موضوع باعث کند شدن زمان بارگذاری صفحات وب و همچنین فشار بیش از حد بر روی سرورها می شود. بنا براین از خصوصیت

<meta name="...">

به عنوان جایگزینی برای

<meta HTTP-EQUIV="...">

استفاده نمودند.

در حال حاضر تعداد معدودی از سرورها به طور کامل از HTTP-EQUIV پشتیبانی می کنند. می توانید اطلاعات بیشتری را در این خصوص از سرویس دهنده وب سایت خود دریافت نمائید (web Hosting Service)

.در زیر می توانید لیستی از خصوصیات و مقادیر تگ <meta> را ملاحظه نمائید و با جایگذاری مقادیر ، از آنها استفاده کنید.

DTD مشخص کننده نوع سند HTML است. S=Strict, T=Transitional, and F=Frameset


Attribute Value Description DTD
content text Specifies the content of the meta information STF
Attribute Value Description DTD
http-equiv content-typecontent-style-type

expires

refresh

set-cookie

Provides an HTTP header for the information in the content
attribute
STF
name authordescription

keywords

generator

revised

others

Provides a name for the information in the content
attribute
STF
scheme format/URI Specifies a scheme to be used to interpret the value of the
content attribute
STF

<meta name="value" />

مثال :

<head>
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<meta name="author" content="Amir Sorouri" />
</head>
Value Description
author Defines the author of the document
copyright Defines copyright information of the document
description Defines a description of the document
distribution Defines the distribution level of the document (like “Global”)
generator Defines the program used to generate the document
keywords Defines keywords to describe the document
progid Defines the id of a program used to generate the document
rating Defines webpage rating
resource-type Defines the type of the web resource
revisit-after Defines the expected update rate of the web resource
robots Defines rules for robots (web crawlers for search engines)
others You can define your own names in a schema

<meta http-equiv="value" />

مثال :

<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
</head>
Value Description
Allow Defines the methods supported by the server
Content-Encoding Defines additional content-encoding for the document
Content-Length Defines the size of the
document (in bytes)
Content-Type Defines the MIME type of the
document (like text/html)
Date Defines when the document was created
Expires Defines when the document will be considered obsolete
Last-Modified Defines when
the document was last modified
Location Defines an absolute URL for the document
Refresh Defines
a time interval for the document to refresh itself
Set-Cookie Defines a cookie-value
WWW-Authenticate Defines authentication rules returned by the server

<meta scheme="value" />

مثال :

<head>
<meta name="date" content="2009-01-02" scheme="YYYY-MM-DD" />
<meta name="identifier" content="0-2345-6634-6" scheme="ISBN" />
</head>
Value Description
format/URI Defines the format (or points to an URI that contains the
information) of the value inside the content attribute

چگونگی استفاده از Script ها درصفحات وب

تگ <script> در واقع برای معرفی client-side script مانند JavaScript در صفحات وب مورد استفاده قرار می گیرد.

با استفاده از تگ<script> می تواند اسکریپت ها را به صورت مستقیم و یا با استفاده از یک سند خارجی در صفحات وب وارد نمائید.

<script type="text/javascript">
document.write("Hello World!")
</script>

ویا

<script src="myJavascript.js" type="text/javascript"></script>

از اسکریپت هایی مانند JavaScript به طور نمونه به عنوان ویرایش کننده تصاویر ، اعتبار سنج فرمها و یا برای تغیرات پویا در صفحات وب استفاده می شود. (image manipulation, form validation, and dynamic changes of content )
تگ <noscript>

در مواقعی که Script ها نتوانند بر روی مرورگر شما فعال شوند ( هنگامی که با استفاده از تنظیمات مرورگر خود اجرای Script ها را محدود کرده باشند و یا اینکه تعدادی از مرورگرها از آن Script پشتیبانی نکنند و … ) می توان از این تگ به عنوان هشدار دهنده استفاده نمود.

محتویات این تگ تنها هنگامی نمایش داده می شوند که یکی از دلایل ذکر شده وجود داشته باشد ( not supported, or disabled )

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>



فایل pdf

آموزش HTML قسمت اول

آموزش HTML قسمت دوم

آموزش HTML قسمت سوم

آموزش HTML قسمت چهارم

آموزش HTML قسمت پنجم

آموزش HTML قسمت ششم

آموزش HTML قسمت هفتم

آموزش HTML قسمت هشتم

Be Sociable, Share!


۱۷ دیدگاه


  1. حسین هاشمی
    ۲۰ مرداد ۱۳۸۹

    مطلب بسیار به جا و خوبی بود ، ممنونم .




  2. امیر
    ۲۰ مرداد ۱۳۸۹

    هاشمی >> خواهش می کنم ، شما لطف داری استاد.




  3. امیر
    ۲۰ مرداد ۱۳۸۹

    واقعا سایت بسیار پرباری دارید خواهش می کنم که این مباحث را ادامه دهید




  4. وحید
    ۲۱ مرداد ۱۳۸۹

    سلام. مفید بود. ممنون.




  5. محسن هاشمی
    ۲۱ مرداد ۱۳۸۹

    سلام

    خیلی مفید بود.

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




  6. من
    ۲۲ مرداد ۱۳۸۹

    مرسی واقعا!




  7. susan
    ۲۶ مرداد ۱۳۸۹

    آموزشاتون واقعا عالیه خیلی روون توضیح دادید برای خود من این وب سایت یکی از بهترین وب سایتهای آموزشیه فقط اگه میشه به همین خوبی php رو هم ………..
    واقعا ممنونم




  8. کامران
    ۲۶ مرداد ۱۳۸۹

    دوست عزیز، اینکه با اسامی مختلف و ایمیلهای مختلف تو پستهای مختلف بیای بگی که PHP هم آموزش بدید راهش نیست که به خواستت بررسی .چون از IP مشا مسخص میشه که همه این کامنت های مربوط به PHP رو یک نفر میزاره




  9. علیرضا
    ۲۶ مرداد ۱۳۸۹

    یه سوال کوچک:
    ایا محدودیتی برای تعداد کلمات استفاده شده در تگ meta وجود دارد؟




  10. امیر
    ۲۶ مرداد ۱۳۸۹

    علیرضا >> در جوب سوال شما : محدودیتی برای نوشتن کلمات در description و keyword وجود نداره ولی موتورهای جستجو تعداد محدودی از این کرکترها رو که در قسمت description نوشته شده در صفحه نتایج جستجو نشون می دن که حدودا “۱۵۰” کرکتر هست , در مورد keyword ها هم محدودیت خاصی وجود نداره , از به کار بردن تعداد زیاد کلمات و کلمات تکراری خود داری کنید و سعی کنید از کلمات موجود در title و description استفاده کنید و با علامت ” , ” از هم جدا بشن . در مورد title i هم باید بگم که تا تعداد ۶۰ کرکتر در صفحات نتیجه جستجو نمایش داد می شن .




  11. mary
    ۳۰ مرداد ۱۳۸۹

    salam,mochakeram az matalebe amozeshi
    man be tazegi ba site shoma ashna shodam vali kheili zood yeki az tarafdaraie saite shoma shodam
    hamishe movafagh va salamat bashid




  12. رضا
    ۸ مهر ۱۳۸۹

    سلام
    واقعا لذت بردم از مطالبت و خیلی برام مفید بود
    موفق باشید




  13. لیدا
    ۲۶ مهر ۱۳۸۹

    سلام معرکه است.کارم راه افتاد




  14. masi
    ۱ تیر ۱۳۹۰

    سلام من تازه تصمیم گرفتم طراحی سایت یاد بگیرم خیلی عالیه مچکرم.




  15. mahnaz
    ۱۵ آبان ۱۳۹۰

    سلام خیلی خوب بود




  16. امیر
    ۱۲ دی ۱۳۹۰

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




  17. masih
    ۷ فروردین ۱۳۹۱

    ممنون شما هستیم . موفق باشید



دیدگاه خود را بنویسید