امروز با در خواست یکی از بازدید کنندگان در مورد خاصیت float و جاوا اسکرپت صحبت میکنیم. احتمالاً با خاصیت float در CSS آشنایی دارید. این خاصیت به ویژه وقتی مورد استفاده قرار میگیرد که طراح قصد داشته باشد بدون استفاده از جدولها چهارچوب صفحه را طراحی کند.

این خاصیت باعث میشود تا یک بلوک HTML بسته به مقداری که به این ویژگی داده میشود تا حد امکان در سمت چپ یا راست المنت والد آن نمایش داده شود، به طوری که سایر المنتها و متن موجود در المنت والد در اطراف بلوک مورد نظر قرار گیرند. توضیح بیشتر در مورد این خاصیت مربوط به بخش آموزش CSS هست بنابراین به همین مقدار توضیح بسنده میکنیم.

برای اختصاص دادن یک ویژگی CSS به المنتهای HTML از شیء style استفاده می شود. اما این نکته را باید در نظر داشته باشیم که float از کلمات کلیدی رزرو شده در جاوا اسکرپت است. به همین دلیل نمیتوانیم از متد style.float برای این منظور استفاده کنیم.

برای جلوگیری از تداخل بین float مورد استفاده در CSS و کلمه کلیدی float در جاوا اسکرپت به منظور اختصاص این ویژگی به المنتهای HTML از متد cssFloat استفاده میکنیم. برای درک بهتر میتوانید به مثال زیر در دو حالت قبل و بعد از اختصاص این ویژگی با به المنت توجه کنید:

ما برای نوشتن اسکرپت با استفاده از دکمه ها، ابتدا باید بدانیم چگونه می توان یک دکمه را در یک صفحه قرار داد. برای این کار شما باید از تگهای  <FORM> در اطراف تگ دکمه استفاده کنید. در مثال زیر نمونه یک HTML که یک دکمه را در یک صفحه قرار می دهد آورده شده است:

این فرمان یک دکمه را در صفحه شما قرار می دهد، اما اگر روی آن کلیک کنید اتفاقی نمی افتد...

در زیر کار هر قسمت از فرمان بالا را می بینیم:

1. <FORM>
   این قسمت یک فرم را ایجاد می کند بنابر این ما می توانیم یک دکمه بسازیم.

وقت اون رسیده که نوشتن اولین اسکرپت خود را شروع کنید. این یکی راحته چون مجبور نیستیم درگیر اضافه کردن تگهای SCRIPT شویم. این اسکرپت کوچک به دلخواه شما وقتی نشانگر ماوستان روی یک لینک قرار می گیرد متنی را در نوار وضعیت مرورگرتان می نویسد. به مثال نگاه کنید:
 

شما هم امتحان کنید و ببینید چگونه کار می کند. نشانگر ماوس خود را روی لینک زیر قرار دهید ولی کلیک نکنید (اگر کلیک کنید، چون در کد بالا آدرس لینک، آدرس همین صفحه است پس از کلیک کردن دوباره همین صفحه باز می شود). حالا پایین پنجره مرورگر خود به نوار وضعیت نگاه کنید باید این جمله را بینید: « آموزش جاوا اسکرپت »

ماوس خود را روی این لینک قرار دهید!!!
 

بسیار خوب، این چیزی است که با فرمان onMouseover اتفاق می افتد:

با استفاده از دستور if امکان این وجود دارد که برنامه را حداکثر به یکی از دو جهت ممکن هدایت کنیم. یعنی اگر شرط مورد نظر برقرار بود اسکرپت یک سری کد را اجرا می کند و در صورت عدم برقراری شرط یک سری کد دیگر اجرا می شود. اگر بخواهیم برای اسکرپت خود مسیرهای بیشتری در نظر بگیریم یک راه موجود استفاده از دستورات if تو در تو است. این روش ممکن است در موارد جزئی کارایی داشته باشد اما اگر تعداد شرطها زیاد شود ما را مجبور می کند از تعداد زیادی if و else در اسکرپت خود استفاده کنیم که این مسئله هم باعث طولانی شدن برنامه و هم باعث گیج کننده شدن آن می شود از طرفی امکان اشتباه را هم بالا می برد.

راه حل دیگر استفاده از دستور شرطی switch است. این دستور را می توان در هنگامی که می خواهیم یک متغیر را با چندین مقدار مقایسه کنیم و مقدار متناسب با آنرا پیدا کنیم کار برد دارد. ساختار این دستور به صورت زیر است :

switch(x) 
{
case مقدار اول:
این کد در صورت برابری متغیر x با مقدار اول اجرا می شود
break    
case مقدار دوم:
این کد در صورت برابری متغیر x با مقدار دوم اجرا می شود
break
default:
این کد در صورتی اجرا می شود که مقدار متغیر x با هیچکدام از مقادیر ذکر شده برابر نباشد
}

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

دستور شرطی if

به یک مثال برای دستور if توجه کنید :

برای اینکه کد بالا را آزمایش کنید لینک زیر را کلی کنید و در پیامی که نمایش داده می شود دکمه OK را کلیک کنید. اگر دکمه Cancel را کلیک کنید شرط بالا برقرا نمی شود و بدون اجرا شدن دستور شرطی صفحه مثال باز می شود.

در جاوا اسکرپت این امکان وجود دارد که متنی را نوشته و در صفحه نمایش بدهیم. متن مورد نظر را می توانیم قالب بندی کنیم و از تگهای HTML نیز در آن استافده کنیم. برای این کار از فرمان ()document.write استفاده می کنیم که یک فرمان جاوا اسکرپت مخصوص چاپ کردن خروجی در صفحه است. روش کار به صورت زیر است :

نوشتن متنهای ساده

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

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

نوشتن متنهای ساده با استفاده از جاوا اسکرپت

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

این فرمان هشدار است:

حالا برای استفاده از آن ما باید آنرا در یک فرمان دیگر قرار دهیم. بیایید آنرا در یک فرمان آشنا مثل فرمان onMouseover استفاده کنیم. اسکرپت مقابل باعث ظاهر شدن یک کادر هشدار وقتی که ما نشانگر ماوس خود را روی لینک به وجود آمده قرار می دهیم می شود. مثلاً در لینکی که نمی خواهیم بیننده کلیک کند:

آنرا امتحان کنید. فقط ماوس خود را روی آن قرار دهید:

ماوس خود را روی این لینک قرار دهید

در جاوا اسکرپت برای جمع، تفریق، مقایسه و بسیاری از عملیات دیگر از عملگرها استفاده می کنیم. عملگرها به چند دسته تقسیم می شوند : عملگرهای محاسباتی، مقایسه ای، جایگزینی، منطقی، رشته ای، و شرطی. در ادامه به ارائه توضیحاتی برای هر نوع از این عملگرها خواهیم پرداخت.

عملگرهای محاسباتی

از این نوع عملگرها برای انجام عملیات ریاضی نظیر جمع و ضرب استفاده می شود. می توانید این عملگرها را در اینجا مشاهده کنید ( در مثال زیر متغیر x را برابر 8 و متغیر y را برابر 4 در نظر بگیرید ) :

از عملگرهای افزایش و کاهش به ترتیب برای افزودن 1 به مقدار قبلی و کم کردن 1 از مقدار قبلی استفاده می شود.

به طور کلی به سه طریق می توانیم از جاوا اسکرپت در یک صفحه استفاده کنیم:

1. وارد کردن اسکرپت در بخش <head> صفحه
2. وارد کردن جاوا اسکرپت در بخش <body> صفحه
3. استفاده از فایل اسکرپت خارجی

به یاد داشته باشید که می توانید از همه روشهای بالا به طور همزمان برای وارد کردن جاوا اسکرپت در صفحه استفاده کنید.

در دو روش اول کدهای جاوا اسکرپت به طور مستقیم وارد صفحه HTML می شوند. برای وارد کردن جاوا اسکرپت در این دو روش از تگscript استفاده می شود. تمامی کدهای جاوا اسکرپتی که می خواهید به طور مستقیم وارد صفحه کنید باید در تگ script قرار داشته باشند وگرنه مرورگر به جای به کار بردن آنها را به صورت متن در صفحه نمایش می دهد. معمولاً کدهای جاوا اسکرپت با ساختار زیر وارد صفحه می شوند :

در تگ بالا برای مشخص کردن نوع موتور اسکرپتی که مرورگر باید برای تفسیر کردن کد استفاده کند از دو شناسه language و typeاستفاده می کنیم.

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

نکته : باید توجه داشت که جاوا اسکرپت یک زبان طرف کاربر (Client Side) است توسط کامپیوتر شخصی کاربر تفسیر می شود. کدهای مربوط به جاوا اسکرپت توسط کاربر نهایی قابل مشاهده هستند پس توصیه می شود از آن برای مقاصد مهم نظیر اتصال به دیتابیس استفاده نشود.

می توان کدهای جاوا اسکرپت را به صورت تعبیه شده در صفحات HTML استفاده کرد و یا کدهای جاوا اسکرپت را در یک فایل جداگانه با پسوند js. ذخیره کرد ولی در هر صورت یان فایلها هم باید توسط یک صفحه HTML فراخوانی شده و نتیجه آنها در صفحات HTML نمایان خواهد شد.

بهتر است قبل از شروع به یادگیری جاوا اسکرپت با HTML و CSS آشنایی داشته باشد تا بتوانید به خوبی از قابلیتهای جاوا اسکرپت استفاده کنید. برای یادگیری زبانهای ذکر شده می توانید از پیوندهای زیر استفاده کنید :

• آموزش HTML به زبان فارسی
• آموزش سی اس اس (CSS)

برای آزمایش کردن اسکرپتهایی که می نویسید باید از مرورگری استفاده کنید که از جاوا اسکرپت پشتیبانی می کند. قابل ذکر است که تقریباً همه مرورگرهای جدید از جاوا اسکرپت پشتیبانی می کنند از جمله این مرورگرها می توان به اینترنت اکسپلورر (IE) که در ویندوز به صورت پیش فرض نصب می شود که توصیه نمیشه، گوگل کروم (googlrchorom) من اینو توصیه میکنم چون نسخه ی جدید کدهای سی اس اس و ... همه رو نشون و پشتیبانی میکنه  و فایر فوکس (Firefox) و اپرا (Opera) اشاره کرد. به خاطر داشته باشید که نسخه های قبل از نسخه 4.0 اینترنت اکسپلورر و Netscape از جاوا اسکرپت پشتیبانی نمی کنند.

با استفاده از استایل این امکان وجود دارد که شکل نشانگر ماوس را وقتی روی قسمت مشخصی از صفحه قرار می گیرد تغییر دهیم. به این منظور می توانیم از ویژگی زیر در استایل مربوط به تگ مورد نظر استفاده کنیم:

برای مثال فرض کنید می خواهیم وقتی نشانگر ماوس روی یک قسمت متن قرار می گیرد به شکل ساعت شنی در آید. می توانیم به صورت زیر عمل کنیم (ما برای مشخص شدن متن از رنگ قرمز در تگ span استفاده کرده ایم.):

نتیجه را می توانید اینجا مشاهده کنید:

اگر بخواهید وقتی ماوس کاربر روی یک قسمت مشخص از صفحه مثلاً جدولها قرار می گیرد شکل خاصی داشته باشد می توانید در بخش HEAD صفحه این ویژگی را برای جدول تعریف کنید تا در همه جدولهای صفحه به کار گرفته شود. از class و id هم می توانید استفاده کنید. روش ساده تر هم استفاده از شناسه style در تگهای HTML است.

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

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

برای استفاده از این ویژگیها و کاربرد آنها برای تگ BODY می توانید یک استایل در قسمت HEAD متن تعریف کنید یا از استایل خارجی استفاده کنید. مثلاً برای تصویر زمینه صفحات سایت ما می توان در قسمت HEAD متن یک استایل به صورت زیر تعریف کرد:

background-color

این ویژگی به ما اجازه می دهد تا تقریباً برای هر چیزی در صفحه رنگ زمینه مشخص کنیم. برای این کار باید این ویژگی را به همراه رنگ مورد نظر وارد تگ مربوط به قسمت مورد نظر کنیم. اگر بخواهیم زمینه قسمتی از یک متن را مشخص کنیم می توانیم از این ویژگی در یک تگ SPAN در اطراف متن مورد نظر استفاده کنیم.

در مثال زیر زمینه قسمتی از یک متن را به رنگ زرد در می آوریم:

این هم متن نهایی:

متن بدون زمینه. این قسمت زمینه زرد دارد.

همینطور می توانیم از این ویژگی برای تغییر زمینه یک جدول یا DIV هم استفاده کنیم:

color

از ویژگی color برای تغییر رنگ متن قسمتهای مختلف صفحه استفاده می شود. برای مثال می توانید رنگ متن یک جدول را تغییر دهیم و یا قسمتی از متن صفحه را که با تگ SPAN مشخص کرده ایم با رنگ متفاوتی با بقیه متن نمایش دهیم. این تگ از آن جهت که کاربرد تگ <FONT> و در نتیجه شناسه color که در تگ فونت استفاده می شود، در HTML4 در حال محدود شدن است اهمیت بیشتری پیدا می کند.

البته در قسمتهای قبلی هم از این ویژگی استفاده کرده ایم اما در باره آن توضیحی داده نشده است.

مانند COLOR در تگ FONT رنگها در این ویژگی به دو صورت تعیین می شوند. شکل کلی این ویژگی به صورت زیر است:

اگر می خواهید از رنگهای معمولی که با نام شناخته می شوند استفاده کنید کافی است تا نام رنگ مورد نظر خود را در این ویژگی استفاده کنید. این روش ساده تر است ولی انعطاف پذیری کمتری هم دارد چون تنها می توانید رنگ مورد نظر خود را از بین تعداد اندکی نام رنگ انتخاب کنید.

در این قسمت به ادامه ویژگیهایی که بر روی متن ها اثر می گذارند می پردازیم.

text-transform

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

به یک مثال در مورد این ویژگی توجه کنید:

این هم نتیجه:

همانطور که مشاهده می کنید بدون استفاده از حروف بزرگ در نوشتن کد، متن ما با حروف بزرگ نمایش داده می شود.

در این قسمت برخی از ویژگیهای متن را که در CSS استفاده می شوند به شما معرفی می کنیم. با کمک این ویژگیها می توانیم نحوه قرار گرفتن متن در صفحه، فاصله بین حروف و بسیاری از خواص یک متن را تغییر دهیم.

letter-spacing

ین ویژگی به ما اجازه می دهد تا فاصله میان حروف یک کلمه را در یک متن تعیین کنیم. این ویژگی می تواند مقادیری را در مقیاس پیکسل به خود بگیرد یا از مقدار normal استفاده کند. گزینه پیش فرض برای این ویژگی همان normal است. در اینجا به ذکر یک مثال در مورد این ویژگی می پردازیم:

فرض کنید می خواهیم از این ویژگی برای متن موجود در یک تگ DIV استفاده کنیم:

نتیجه را به صورت زیر مشاهده خواهید کرد:

position

ویژگی position به ما اجازه می دهد تا تعیین کنیم که آیا می خواهیم موقعیت یک عنصر در صفحه مشخص شود یا نه. اگر می خواهیم آن عنصر موقعیت مشخصی داشته باشد موقعیت عنصر را در صفحه تعیین می کند. چندین مقدار را می توان برای این ویژگی قرار داد. در اینجا می توانید این مقادیر را با کمی توضیح در مورد هر کدام ببینید:

• static : 
  این مقدار پیش فرضی است که در صورت تعریف نشدن position در صفحه استفاده می شود. با این مقدار اجزا در همان جایی که کد آنها را می نویسید دیده می شوند.

  ---

• absolute : 
  این مقدار به ما اجازه می دهد تا یک عنصر از صفحه را در هر موقعیتی نسبت به بالا، راست، پایین یا چپ صفحه که بخواهیم نمایش دهیم.

  ---

• fixed : 
  این گزینه به ما اجازه می دهد تا موقعیت یک عنصر صفحه را در پنجره مرورگر مشخص کنیم. در صورتی که برای یک عنصر از این ویژگی استفاده کنیم، موقعیت آن عنصر حتی در صورتی که به بالا و پایین صفحه برویم یا اندازه پنجره مرورگر را تغییر دهیم به همان صورت قبلی باقی می ماند. البته اینترنت اکسپلورر در ویندوز از این ویژگی پشتیبانی نمی کند ولی اینترنت اکسپلورر در مکینتاش همچنین مرورگرهای نت اسکیپ از این ویژگی پشتیبانی می کنند.

position

ویژگی position به ما اجازه می دهد تا تعیین کنیم که آیا می خواهیم موقعیت یک عنصر در صفحه مشخص شود یا نه. اگر می خواهیم آن عنصر موقعیت مشخصی داشته باشد موقعیت عنصر را در صفحه تعیین می کند. چندین مقدار را می توان برای این ویژگی قرار داد. در اینجا می توانید این مقادیر را با کمی توضیح در مورد هر کدام ببینید:

• static : 
  این مقدار پیش فرضی است که در صورت تعریف نشدن position در صفحه استفاده می شود. با این مقدار اجزا در همان جایی که کد آنها را می نویسید دیده می شوند.

  ---

• absolute : 
  این مقدار به ما اجازه می دهد تا یک عنصر از صفحه را در هر موقعیتی نسبت به بالا، راست، پایین یا چپ صفحه که بخواهیم نمایش دهیم.

  ---

• fixed : 
  این گزینه به ما اجازه می دهد تا موقعیت یک عنصر صفحه را در پنجره مرورگر مشخص کنیم. در صورتی که برای یک عنصر از این ویژگی استفاده کنیم، موقعیت آن عنصر حتی در صورتی که به بالا و پایین صفحه برویم یا اندازه پنجره مرورگر را تغییر دهیم به همان صورت قبلی باقی می ماند. البته اینترنت اکسپلورر در ویندوز از این ویژگی پشتیبانی نمی کند ولی اینترنت اکسپلورر در مکینتاش همچنین مرورگرهای نت اسکیپ از این ویژگی پشتیبانی می کنند.

حاشیه ها

margin-left

این گزینه به ما اجازه وی دهد تا برای هر یک از اجزای صفحه حاشیه چپ مشخصی را تعیین کنیم. در حقیقت این گزینه مقدار فاصله اجزا را از سمت چپ صفحه مشخص می کند. به یک مثال در این مورد توجه کنید:

همانطور که می بینید کد بالا یک DIV را با کادر مضاعف و 200 پیکسل حاشیه از چپ نشان می دهد:

margin-right

این گزینه هم مانند گزینه بالا عمل می کند با این تفاوت که مقدار حاشیه را از سمت راست تعیین می کند:

همانطور که می بینید کد بالا یک DIV را با کادر مضاعف و 200 پیکسل حاشیه از راست نشان می دهد:

کادر (Boder)

border-style

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

1. none
   با استفاده از این مقدار تعیین می کنیم که نمی خواهیم کادر داشته باشیم. در صورتی که مقداری غیر از none تعیین شود کادر خواهیم داشت.
    
2. solid
     
   This DIV have a solid border
   
   
3. dashed
     
   This DIV have a dashed border
   
   

عرض و ارتفاع

width

این مشخصه به ما امکان می دهد تا عرض یک بخش از صفحه را تعیین کنیم. برای مثال می توانیم با آن عرض یک DIV را تعیین کنیم. در مثال زیر برای DIV عرضی معادل 200 پیکسل تعیین می کنیم:

نتیجه به صورت زیر خواهد بود:

مقادیری که برای پارامتر width قرار می دهید می تواند بر اساس پیکسل باشد که در این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید.

فرض کنید می خواهیم برای چندین صفحه از یک سری استایل استفاده کنیم که در همه صفحات مشابه هستند. در این مورد می توانیم از یک فایل استایل خارجی استفاده کنیم تا نیازی به چندین بار نوشتن استایلها نباشد.

برای شروع با استفاده از یک ویرایشگر متن مانند Notepad در ویندوز یک فایل متنی ایجاد کنید. سپس اطلاعات زیر را در این فایل وارد کنید:

حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هر نامی که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشته باشید که پسوند فایل باید css. باشد. ).

برای پیوند دادن یک فایل استایل خارجی به صفحه HTML باید از تگ <LINK> استفاده کنیم که در بخش HEAD در متن HTML قرار می گیرد. یک نمونه از این تگ را می توانید در اینجا ببینید:

ساده ترین راه برای افزودن استایل به یک صفحه استفاده از شناسه style در تگهای HTML است.
برای افزودن استایل به یک تگ باید عبارت " "=style را وارد تگ مربوطه کنیم و ویژگیهای مورد نیاز خود را بین دو دابل کوت ( " ) وارد می کنیم. مثلاً فرض کنید می خواهیم به یک تگ DIV استایل اضافه کنیم. در این صورت تگ DIV به صورت زیر در می آید.

برای نمونه وقتی بخواهیم متن داخل یک DIV به رنگ سبز نمایش داده شود می توانیم به صورت زیر تگ DIV را بنویسیم:

توجه کنید که بین ویژگی color و رنگ سبز ( green ) از علامت دو نقطه ( : ) استفاده شده نه از علامت مساوی که در تگهای HTML استفاده می شود. همچنین لازم نیست مقادیر مورد نظر را بین علامت های نقل قول ( " ) قرار دهیم. می توانید نتیجه به کارگیری کد بالا را در سطر زیر مشاهده کنید:

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

این ناسازگاری ممکن است به دلیل کامل نشدن بارگزاری صفحه ایجاد شده باشد یا به دلیل اینکه در هنگام طراحی Encoding متناسب با زبان فارسی انتخاب نشده باشد یا اصلاً در طراحی صفحه هیچگزینه ای برای Encoding صفحه در نظر گرفته نشده باشد.

در اکثر مواقع می توانید صفحه مورد نظر را به روش زیر به صورت فارسی مشاهده کنید:

• مرورگر اینترنت اکسپلورر در ویندوز (Microsoft Internet Explorer) :
  از منوی view گزینه Encoding را انتخاب کنید و گزینه utf-8 را کلیک کنید. در صورتی که در لیست اولیه کد پیجهای مختلف نتوانستید utf-8 را مشاهده کنید نشانگر ماوس خود را روی گزینه More نگهدارید و utf-8 را از بین کد پیجهای مختلف پیدا کرده و روی آن کلیک کنید. 
  در سایر مرورگر ها هم به همین روش باید عمل کنید فقط مسیر منو ها کمی تفاوت دارد. می توانید مسیر های زیر را دنبال کنید.
• مرورگر فایر فوکس : (Firefox)
  view --> Character Encoding --> unicode (utf-8)
  یا
  view --> Character Encoding --> More Encodings --> Unicode --> Unicode (utf-8)
• مرورگر اپرا : (Opera)
  view --> Encoding --> Unicode --> UTF-8