محدوده کد صفحه HTML را مشخص می کند و به مرورگر مي فهماند که اين يک صفحه HTML است . فقط کدهاي درون اين محدوده توسط مرورگر اجرا می شود .
مثال : در مثال زير بدنه اصلی يک صفحه با تگ < html > مشخص شده است :
Example | |
کد | |
< html > < head > < title > The title of the page < /title > < /head > < body > ... The content of the page ... < /body > < /html > |
محدوده اصلی صفحه html تگ سر عنوان head تگ عنوان صفحه بدنه اصلی صفحه . . . پايان بدنه اصلی صفحه پايان محدوده اصلی صفحه |
اين تگ بدنه اصلی صفحه HTML را معرفی می کند و شامل کليه محتويات قابل نمايش در صفحه ازقبيل نوشته ها ، عکس ها ، لينک ها و ... است . فقط محتويات اين قسمت توسط مرورگر به عنوان خروجی نمايش داده می شوند .
کدهای محتويات خروجی بين تگ باز و بسته < body > تعريف می شوند .
خواص مهم | ||
نام خاصيت | نوع خاصيت | شرح |
alink |
نام رنگ rgb(x,x,x) #xxxxxx |
> مشخص کننده رنگ لينک های فعال در صفحه است . رنگ میتواند به روش های زير تعيين شود :
|
background |
URL نام - مسير فايل |
آدرس عکس يا فایلی که به عنوان پس زمينه صفحه مورد استفاده قرار می گيرد را تعيين می کند . |
bgcolor |
نام رنگ rgb(x,x,x) #xxxxxx |
می توان توسط اين خاصيت يک رنگ را به عنوان رنگ پس زمينه صفحه قرار داد . |
link |
نام رنگ rgb(x,x,x) #xxxxxx |
مشخص کننده رنگ کليه لينک های صفحه است . |
text |
نام رنگ rgb(x,x,x) #xxxxxx |
رنگ پيش فرض نوشته های درون صفحه را تعيين می کند که به صورت استاندارد مشکی است . |
vlink |
نام رنگ rgb(x,x,x) #xxxxxx |
رنگ لينک هايی در صفحه که قبلا يکبار کليک شده اند را مشخص می کند و به اين منظور استفاده می شود که کاربر متوجه شود آن لينک را قبلا مشاهده کرده است . |
Example |
کد |
< html > < head > < title > The title of the page < /title > < /head > < body > ... The content of the page محتويات قابل نمايش توسط مرورگر ... < /body > < /html > |
تگ < head > در بر گيرنده ااطلاعات کلی درباره سند وب است که اين اطلاعات Meta-Information به معنای (اطلاعات درباره) ناميده می شود .
کليه اطلاعات درون تگ < head > توسط مرورگر نمايش داده نمی شوند .براساس استاندارد HTML فقط تگ های زیر قابل استفاده در بخش head هستند :
< base > , < link > , < meta > , < title > , < style > , < script >
خواص مهم | ||
نام خاصيت | نوع خاصيت | شرح |
profile | URL مسير | ليستی از آدرس فايل ها يا صفحاتی که در بر گيرنده اطلاعات کلی (meta-information) راجع به محتويات صفحه هستند ، را شامل می شود . |
اين تگ عنوان صفحه را که مرورگر در هنگام باز کردن صفحه در نوار عنوان نمايش می دهد را مشخص می کند . متنی که بين تگ باز وبسته < title > قرار بگيرد عنوان صفحه را تعيين می کند . تگ < title > بايد در قسمت head صفحه قرار بگيرد .
عنوان صفحه ارتباطی به نام فايل صفحه ندارد و بهتر است حداکثر تا 15 حرف باشد .
Example | |
کد | |
< html > < head > < title > This is the title of the page عنوان صفحه < /title > < /head > < body > ... < /body > < /html > |
اين تگ اولين سطر از کد صفحه وب است و به مرورگر نوع و نسخه استفاده شده از زبان برنامه نويسی HTML يا XHTML را اعلام می کند . لازم به ذکر است که هر صفحه فقط می تواند يک نوع Doctype داشته باشد .
نکته : تگ < Doctype! > تنها تگی است که تگ انتهايي ندارد و در تگ ابتدايي هم توسط علامت / بسته نمی شود .
انواع ورژن های قابل استفاده در صفحات وب :
1) HTML :
زبان HTML سه حالت کلی دارد :
Strict , Traditional , Frameset
کدهای زير بايد در قسمت < Doctype! > جهت استفاده از هر يک از حالت های فوق تايپ شود :
HTML Strict DTD | نام |
زمانی مورد استفاده قرار می گيرد که طراح بخواهد از شيوه قالب دهی به صفحات (CSS) استفاده نمايد . | شرح |
کد |
HTML Traditional DTD | نام |
زمانی مورد استفاده قرار می گيرد که طراح می خواهد از قابليت های جديد HTML استفاده نکند ، زيرا مرورگر بازديد کنندگان سايت ممکن است از شيوه قالب دهی صفحات (CSS) پشتيبانی نکند . | شرح |
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > | کد |
HTML Frameset DTD | نام |
زمانی مورد استفاده قرار می گيرد که بخواهيم در صفحات از قاب ها (Frames) استفاده کنيم . | شرح |
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd" > | کد |
2) XHTML :
زبان XHTML سه حالت کلی دارد :
Strict , Traditional , Frameset
کدهای زير بايد در قسمت < Doctype! > جهت استفاده از هر يک از حالت های فوق تايپ شود :
XHTML Strict DTD | نام |
زمانی مورد استفاده قرار می گيرد که طراح بخواهد از شيوه قالب دهی به صفحات (CSS) استفاده نمايد . | شرح |
کد |
XHTML Traditional DTD | نام |
زمانی مورد استفاده قرار می گيرد که طراح می خواهد از قابليت های جديد XHTML استفاده نکند ، زيرا مرورگر بازديد کنندگان سايت ممکن است از شيوه قالب دهی صفحات (CSS) پشتيبانی نکند . | شرح |
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > | کد |
XHTML Frameset DTD | نام |
زمانی مورد استفاده قرار می گيرد که بخواهيم در صفحات از قاب ها (Frames) استفاده کنيم . | شرح |
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" > | کد |
اين تگ اطلاعات کلی درباره مطالب درون صفحه وب ، توضيحات ضروری و واژه های کليدی مرتبط با موضوع صفحه جهت استفاده موتورهای جستجو را شامل می شود .
چيدمان مناسب و استفاده از کليد واژه های مرتبط به موضوع صفحه ، باعث بهتر نمايش داده شدن صفحه و سايت در قسمت جستجوی موتورهای جستجو می شود .
- تعيين کليدواژه ها برای موتورهای جستجو :
موتورهای جستجو ، هنگام جستجو برای يافتن مطالب در مورد يک موضوع خاص ، آن مطلب را با کليدواژه های تعريف شده در سايت مقايسه کرده و در صورت يکسان بودن ، صفحه وب سايت شما را در ليست نتايج جستجو نمايش می دهند .
< meta name ="keywords" content="Html,CSS,XML,Java Script,VB Script" /> |
- تعيين يک توضيح درباره مطالب صفحه :
< meta name ="discription" content="Free web teaching on Html,CSS,XML,Java Script and VB script" /> |
- تعيين آخرين زمان بازبينی و به روز کردن صفحه :
< meta name ="rivised" content="6/11/07" /> |
-تعيين زمان refresh شدن صفحه برای هر 5 ثانيه يکبار :
< meta http - equiv ="refresh" content="5" /> |
خواص مهم | ||
نام خاصيت | نوع خاصيت | شرح |
content | متن Text | اطلاعات مربوط به خاصيت تعيين شده در قسمت name يا http-equiv را نگهداری می کند . |
http - equiv | content-type | اطلاعات درون content خود را به سرور اتقال می دهد . |
name |
auther description keywords generator revised others |
اطلاعات درون content خود را به نام تعيين شده ارتباط می دهد که می تواند يکی از حالت های زير را داشته باشد : - auther : نام نويسنده یا گروه نويسندگان و طراحان صفحه وب را مشخص می کند . - description : توضيح مختصری راجع به محتويات درون صفحه ارائه می دهد . - keywords : کليدواژه های مورد استفاده موتورهای جستجو را تعيين می کند . - generator : مشخصاتی راجع به نرم افزاری که صفحه با آن طراحی و توليد شده است را ارائه می دهد . - revised : برای اعمال آخرين تاريخ به روز رسانی سايت استفاده می شود . - others : برای ذرج ساير اطلاعات مورد نظر استفاده می شود . |
scheme | متن Text | قالبی را برای تفسير و اجرای اطلاعات درون خاصيت content مشخص میکند . |
از اين تگ برای وارد کردن توضيحات درون بخش کدنويسی صفحه وب استفاده می شود . محتویات درون اين تگ به طور کامل توسط مرورگر ناديده گرفته شده و بروی صفحه نمايش داده نمی شوند .
از توضيحات می توان برای تشريح کدهای صفحه برای افراد ديگر و يا علامت گذاری آنها برای فهم بهتر و ويرايش در آينده استفاده کرد .
نکته : از اين تگ همچنين می توان برای مخفی کردن اسکريپت ها از ديد مرورگرهای قديمی که امکان اجرای اسکريپت ها را ندارند، نيز استفاده کرد . مرورگرهای جديد به طور هوشمند محتويات درون اين نوع تگ ها را بررسی کرده و چنانچه حاوی کدهای اسکرپت باشند آنها را اجرا کرده و در غير اين صورت آنها را نمايش نمی دهند .
Example | |
کد | خروجی |
< !-- This text will not display -- > < p > This text will display < /p > |
This text will display |
اين تگ يک آدرس پايه برای کليه لينک های موجود در صفحه تعيين می کند .
مثال : فرض کنيد که آدرس يک عکس در صفحه به صورت زير است :
< img src="http://www.DeveloperStudio.ir/images/smile.gif" / > |
در صورتی که تگ < base > در قسمت head به صورت زير وارد شود :
< base href="http://www.DeveloperStudio.ir/images/" >
< /head >
در هنگام وارد کردن عکس فوق در صفحه ، می توان برای وارد کردن آدرس عکس فقط ادامه مقدار آدرس عکس را در تگ < img > به صورت زير وارد کرد :
< img src="smile.gif" /> |
خواص مهم | ||
نام خاصيت | نوع خاصيت | شرح |
href | URL | مشخص کننده آدرس پيش فرض برای کليه لينک های صفحه است . |
target |
blank self parent top |
مقصد باز شدن پنجره کليه لينک های صفحه را تعيين می کند .چنانچه درون تگ يک لينک ، مقدار اين خاصيت به صورت جدا تعيين شود اين قاعده برای آن لينک زير پا گذاشته می شود . اين خاصيت میتواند يکی از مقادير زير را داشته باشد : - blank : تمام لينک ها در يک پنجره جديد باز خواهند شد . - self : تمام لينک ها در همان پنجره يا قابی که کليک شده اند باز خواهند شد . -parent : تمام لينک ها در قاب اصلی يا مادر باز خواهند شد . -top : تمام لينک ها در همان پنجره ای که کليک شده اند به طور کامل باز خواهند شد . |
منبع: دنیای فناوری با حساس کامپیوتر