مطالب تصادفی
تگ هد-تایتل-استایل-
جلسه هفتم

تگ هد-تایتل-استایل-

تگ < head > :

 

تگ < head > در بر گيرنده ااطلاعات کلی درباره سند وب است که اين اطلاعات Meta-Information به معنای (اطلاعات درباره) ناميده می شود . 
کليه اطلاعات درون تگ < head > توسط مرورگر نمايش داده نمی شوند .براساس استاندارد HTML فقط تگ های زیر قابل استفاده در بخش head هستند :

 

تگ < title > :

اين تگ عنوان صفحه را که مرورگر در هنگام باز کردن صفحه در نوار عنوان نمايش می دهد را مشخص می کند . متنی که بين تگ باز وبسته < title > قرار بگيرد عنوان صفحه را تعيين می کند . تگ < title > بايد در قسمت head صفحه قرار بگيرد .
عنوان صفحه ارتباطی به نام فايل صفحه ندارد و بهتر است حداکثر تا 15 حرف باشد .

 

 

	 < html >
	  < head > 
	    < title > This is the title of the page   عنوان صفحه < /title >
	  < /head > 
	  < body >
	    ... 
	  < /body >
	< /html >
	
	  
 

 تگ < script > :

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


 

محل قرار دادن تگ < script > :

 

 

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

مثال : اسکريپت زير به محض اجرای صفحه اجرا شده و پيغام زير را نمايش می دهد :


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

 

مثال : می توان يک اسکريپت را در يک فايل خارجی ( برای مثال يک فايل با پسوند js برای Java Script ) ايجاد کرده و سپس توسط يک تگ < script > و خاصيت src در بخش head يا body به آن اسکريپت پيوند ايجاد کرد : 


		 < html > 
		  < head > 
		    < script type = "text/javascript" src = "http://www.onlymsm.ir/Scripts/javasample.js" >
		  < /head >
		  < body > 
		    < script type = "text/javascript" src = "http://www.onlymsm.ir/Scripts/javasample.js" >
		  < /body >
		< /html > 
		

نحوه مديريت مرورگرهای قديمی در برخورد با تگ های < script > :

برخی از مرورگرهای قديمی تگ < script > را نمي شناسند و باعث می شوند تا متن دستورات اسکريپت ها را ، همانند متن ساده بر روی صفحه نمايش دهند . برای جلوگيری از اين مسئله و مخفی کردن تگ های اسکريپت از ديد مرورگرهای قديمی ، تگ < script > را در درون يک comment ( توضيح ) به صورت زير قرار می دهيم . مرورگرهای جديد به صورت هوشمند ، متن درون commnet ها را بررسی کرده و چنانجه حاوی دستورات اسکريپتی باشند ، آنها را اجرا می کنند .

مثال : Script زير را با قرار دادن بين علامت های توضيح comment ، از ديد مرورگرهای قديمی مخفی کرده ايم . چنانچه در بخش خروجی ، خروجی درستی نداريد ، ورژن مرورگر خود را عوض کنيد چون خيلی قديمی است !!! .

 
 

			 
			 
			 For Java Script
			< script type="text/javascript" >
			<!--
			document.write (" This is not suitable for old browsers ")
			//-->
			< /script >
			
For VB Script  < script type="text/vbscript" > <!-- document.write (" This is not suitable for old browsers ") '--> < /script >  
 
خواص مهم تگ script
نام خاصيت نوع خاصيت شرح
type text/javascript
text/ecmascript
text/vbscript
applicattion/javascript
applicattion/ecmascript
applicattion/vbscript
text/VB
text/C#
text/J# 
نوع و زبان برنامه نويسی اسکريپت را مشخص می کند که می تواند يکی از حالت های زير باشد :
texxt/javascript : از نوع متن و زبان برنامه نويسی javascript .
text/ecmascript : از نوع متن و زبان برنامه نويسی ecmascript .
text/vbscript : از نوع متن و زبان برنامه نويسی vbscript .
applicattion/javascript : از نوع برنامه کاربردی و زبان برنامه نويسی javascript .
applicattion/ecmascript : از نوع برنامه کاربردی و زبان برنامه نويسی ecmascript .
applicattion/vbscript : از نوع برنامه کاربردی و زبان برنامه نويسی vbscript .
حالت های زير فقط برای صفحات سرور سايدی ( مثل ASP و PHP ) است : 
text/VB : از نوع برنامه متن و زبان برنامه نويسي Visual Basic .
text/C# : از نوع برنامه متن و زبان برنامه نويسي Visual C# .
text/J# : از نوع برنامه متن و زبان برنامه نويسی Visual J# .
charset charset نحوه کد گذاري و ترجمه کاراکترها را در اسکريپت مشخص می کند .
defer defer مشخص می کند که اسکريپت هيچ محتوای جديدی را در صفحه ايجاد نخواهد کرد و مرورگر بايد صفحه را با همان فرمت و کد اصلی اجرا کند .
language javascript
vbscript
ecmascript
live script
زبان برنامه نويسی اسکريپت را تعيين می کند ، که می تواند يکی از زبان های زير باشد : 
javascript
vbscript
ecmascript
live script
src URL 
مسير فايل
مسير کامل فايلی که دستورات اسکريپت در آن قرار دارد را مشخص می کند . اين خاصيت در هنگام استفاده از يک فايل خارجی و پيوند آن به صفحه استفاده می شود .

 

تگ < noscript > :

 

 

اين تگ برای نمايش يک متن هشدار يا جايگزين ، در صورتی که اسکريپت قبل از آن اجرا نشده باشد ، به کار می رود . اين حالت در مورد مرورگرهايی که تگ < script > را می شناسند ، ولی قادر به اجرای دستورات موجود در آن نيستند به کار می رود ، که در اين صورت متن درون تگ < noscript > را نمايش خواهد داد . 
چنانچه مرورگر موفق به اجرای اسکريپت شود ، از تگ < noscript > به طور کامل چشم پوشی می کند . 
نکته : تگ < script > بايد بلافاصله بعد از تگ < script > به کار رود . 
مثال : در مثال زير يک اسکريپت ارائه شده که يک تگ < noscript > بلافاصله بعد ازآن قرار داده شده است . خروجی مثال زير بستگی به ورژن مرورگر شما دارد ... ! :


			 < script type="text/javascript" >
			  document.write (" Hi every body . Welcome ! ")
			< /script >
			< noscript >
			  Your browser doesn`t support javascript 
			< /noscript >
			
			

 

 تگ < style > :

تاکنون در تمامی تگ های معرفی شده HTML ، ما خواص مورد نظر هر تگ را در درون خود تگ تعیین و مقدار دهی کردیم. در روش های طراحی وب قدیمی تر، ما مجبور بوديم برای هرعنصری در صفحه به صورت مجزا خاصيت ها را تعيين می کنيم . این کار چند اشکال عمده داشت :

  • باعث تکرار شدن خواص مشابه در تگ های عنصرها می شد .
  • حجم کد نویسی بالا رفته و سرعت طراحی کاهش می يافت .
  • احتمال بروز خطا و اشتباه را افزايش می داد .
  • اعمال تغييرات به صفحات و عناصر وقت و کار زیادی را طلب می کرد .

اما با معرفی روش قالب دهی صفحات ( Cascading Style Sheet ) یا CSS  ، ما به وسـيله خاصيت تگ Style ،  تمام خواص و تنظيمات مورد نياز را برای هر عنصر را در تگ  Style  تعيين می کنيم . خصوصيات موجود در تگ Style تقريبا تمامی نيازهای ويرايش ، تغيير شکل و افزودن جلوه های مختلف را به عناصر شامل می شود.
همانطور که قبلا ذکر شد ، صفحات HTML از یک سری عناصر تشکيل شده اند،که هر کدام توسط یک تگ معرفی می شوند . 3 روش عمده برای اعمال خواص از طريق  Style  به يک عنصر وجود دارد :

  1. تعيين خواص مورد نظر در خاصيت Style در درون تگ عنصر .
  2. تعيين خواص عناصر در تگ style در بخش head هر صفحه برای عناصر آن صفحه .
  3. تعيين خواص از طريق یک تگ Style بيرونی و پيوند ان عنصر به تگ Style . در اين حالت ابتدا باید مجموعه خواص را در یک تگ Style بيرونی به یکی از روش ارائه شده در پائين صفحه ايجاد می کنيم .

نکته : برای يادگيری کليه خاصيت های style و مقادير آنها به بخش آموزش CSS برويد .

 
خواص مهم تگ style
نام خاصيت نوع خاصيت شرح
type text/css نوع محتويات درون تگ style را تعيين می کند که برای استفاده از قالب CSS آن را برابر text/css تنظيم می کنيم .
media screen
tty
ty
projection
handheld
print
braille
auarl
all
نوع رسانه نمايش دهنده صفحه اينترنتی را برای اعمال قالب های style به آنها را تعيين می کند . چنانچه فقط يک نوع رسانه خاص در اين قسمت عنوان شود ، خصوصيات style مورد نظر فقط در هنگام نمايش صفحه وب در آن رسانه اعمال خواهد شد و برای ساير رسانه ها به صورت ساده نمايش داده می شود . که می تواند يکی از موارد زير باشد :
screen : صفحه نمايش کامپيوترهای معمولی .
tty : ماشين تحرير راه دور ، تله تايپ ( برای ماشين هايی که دارای نحوه نمايش ثابت هستند ) . 
tv : وسايلی همچون تلويزيون با رزوليشن پايين .
projection : برای نمايش در پروژکتورها .
handheld : برای کامپيوتر های دستی و جيبی .
barille : در اسناد مخصوص به افراد نابينا ( بريل ) . 
print : برای پرينت در دستگاه های چاپگر .
auarl : برای سيستم های صوتی .
all : برای همه نوع سيستم ها .


 در زیر3 روش عمده برای تعيين خواص مورد نظر در تگ style را بيان می کنيم :

 

1 ) External Style Sheet : 

هنگامی که قرار است مقادیر style به اجزای چندین صفحه مختلف به طور یکسان اعمال می شود ، بهترین روش استفاده از یک صفحه Style sheet خارجی و پس لینک کردن آن به صفحه مورد نظر است. این کار دو مزیت عمده دارد:

 

  1. کدهای مربوط به style را فقط یکبار در sheet style نوشته و از آن می توان برای هزاران صفحه به صورت مشترک استفاده کرد.
  2. می توان ظاهر و مشخصات کليه صفحاتی که style به انها اعمال شده است را با یک تغيير کوچک در style sheet تغيير داد .

برای لينک کردن یک صفحه style خارجی به یک صفحه ، از تگ < link > در قسمت < head > صفحه استفاده می شود ، توجه شود که پسوند فایل های css ، style sheet است .
مثال : در مثال زير يک صفحه style sheet خارجی را به صفحه HTML پيوند زده ايم . توجه شود که اين کار بايد در قسمت head صفحه انجام شود :

 

 


				< head > 
				  < link rel = "stylesheet" type = "text/css" href = "mystyle.css" />
				< /head >
				
				


نکته مهم : خصوصيات مختلف style در صفحه style sheet بر مبنای پارامترهای دسته بندی مثل کلاس ، id یا نوع عنصر تعيين می شود . سپس در صفحه های وب باید بر اساس دسته بندی فوق ، اجزای مختلف را در class های مورد نظر قرار داده یا id آنها برابر مقدار در نظر گرقته شده ، قرار داد . در ادامه مطالب اين مسئله را بررسی می کنيم .


دسته بندی و تعيين عناصر در Style Sheet ها :

 

هر عنصر HTML دو خاصيت id و class دارد . خاصيت id تعيين کننده يک نام منحصر به فرد برای عنصر است و خاصيت class به کلاسی که عنصر در آن عضويت دارد ، اشاره می کند . يک class محجموعه ای از عناصر مختلف است که در يک گروه واحد قرار دارند . به روش های زير تعيين می کنيم که چه عناصری با چه id و class به style مورد نظر ارتباط دارند :

  1. برای تعیين عناصر بر پايه id آنها از روش زير استفاده می شود :

    #id عنصر مورد نظر

    مثال : عنصری که id آن برابر label است .

    مثال : #label

  2. برای تعیين عناصر بر پايه class آنها از روش زير استفاده می شود :

    . نام کلاس عنصر مورد نظر

    مثال : عنصری که class آن برابر header است .

    مثال : .header

  3. برای تعیين عناصر بر پايه نوع و کلاس آنها از روش زير استفاده می شود :

    نام کلاس عنصر مورد نظر . نوع عنصر

    مثال : تمام عناصری که از نوع td و عضو کلاس header هستند .

    مثال : td.header

    مثال : تمام عناصری که از نوع p و عضو کلاس matn هستند .

    مثال : p.matn

  4. برای تعیين عناصر بر پايه نوع و id آنها از روش زير استفاده می شود :

    عنصر مورد نظر # نوع عنصر id

    مثال : عنصری از نوع p ، که id آن برابر header است .

    مثال : p#header

 

تعيين خواص مورد نظر برای هر گروه :

پس از تعيين عناصر مورد نظر ، مجموعه خواص مورد نياز را در يک کروشه در مقابل نام آنها تعيين می کنيم . هر خاصيت به وسيله يک سمی کوولن ( ; ) از خاصيت ديگر جدا می شود و آخرين خاصيت نيازی به سمی کولون ندارد . به طور کلی از روش زير برای تعيين خاصيت ها استفاده می کنيم .

{ ... و مقدار 2 : خاصيت 2 ; مقدار 1 : خاصيت 1 } نام عنصر يا عناصر مورد نظر

مثال : در مثال زير چندين ويژگی برای عناصر از نوع جدول که عضو کلاس ex هستند ، تعيين کرده ايم :


					 table.ex { border : solid 2px blue ; width : 100px ; padding : 2px }
					 
					 

  2 ) Internal Style Sheet :

اين نوع قالب دهی توسط تگ < style > در قسمت < heade > صفحه تعيين می شود . مجوعه مقادير موجود در اين style فقط به عناصر صفحه جاری اعمال می شود . کليه مقادير مورد نظر برای اجزای مختلف را بايد در تگ باز و بسته < style > فرار داد :

مثال : در مثال زير توسط تگ < style > در بخش head برای چند عنصر صفحه ويژگی هايي تعيين شده است . به توضيحات مثال دقت کنيد :

 
 

					 
					 < head >
					  < style type = "text/css" >
					     1 p#farsi { text-align : right ; direction : rtl }
					     2 table.ex { border : solid 2px blue }
					  < /style >
					< /head >
					 
					
 
  در مثال فوق دو نوع قالب دهی به 2 عناصر دسته از عناصر اعمال شده است : 
  1. در خط 1 برای عنصر پاراگراف ( p ) که id آن برابر farsi است ، چيدمان نوشته ( text-align ) از سمت راست و جهت نوشته ( direction ) از راست به چپ تعيين شده است .
  2. در خط 2 برای کليه عناصری از نوع table که عضو کلاس ex هستند ، در خاصيت ترکيبی border حاشيه ای به رنگ آبی ، با اندازه 2 پیکسل تعيين شده است .
نکته : برای يادگيری کليه خاصيت های style و مقادير آنها به بخش آموزش CSS برويد .

 
3 ) Inline Style :

در اين نوع قالب دهی ، خصوصيات مورد نظر توسط خاصيت style در درون تگ عنصر مورد نظر تعيين می شود . اين خصوصيات فقط به عنصر مورد نظر اعمال می شوند .
مثال : در مثال زير برای يک پاراگراف توسط خاصيت style چندين ويژگی را تعيين کرده ايم :

  

						 < p style = "color : blue ; text-align : left ; direction : ltr >
						  This is a paragraph which is formatted with CSS .
						< /p > 
						

 خروجی 
This is a paragraph which is formatted with CSS .

ارسال نظر

نام:* ایمیل:*
 
پررنگ کج خط دار خط دار در وسط | سمت چپ وسط سمت راست | قرار دادن شکلک قراردادن لینکقرار دادن لینک حفاظت شده انتخاب رنگ | پنهان کردن متن قراردادن نقل قول تبدیل نوشته ها به زبان روسی قراردادن Spoiler
 

نظرات

عضویت ویژه / تمامی مطالب / تماس با ما

طراحی شده توسط چشم انداز رسانه ها | پشتیبانی توسط سرور های قدرتمند میهن وب هاست