آموزش html

[B@RBOD]

جداول HTML : رنگ زمینه، نحوه قرارگیری افقی و عمودی ...


اگر بخواهیم عرض یک جدول را تغییر دهیم می توانیم از شناسه width استفاده کنیم. با اضافه کردن این شناسه به تگ جدول می توانیم مقدار عرض جدول را مشخص کنیم. این مقدار می تواند در مقیاس پیکسل باشد یا به صورت درصد. برای تغییر دادن ارتفاع جدول نیز میتوانیم از شناسه height استفاده کنیم. برای مثال اگر بخواهیم یک جدول با عرض 500 پیکسل و ارتفاع 50 پیکسل داشته باشیم می توانم به صورت زیر عمل کنیم:
<table border="3" width="500" height="50">
<td>
محتویات جدول
</td>
</table>
در اینجا می بینید که برخلاف متن درون جدول که متن کوتاهی است عرض جدول نسبتاً زیاد است (همان 500 پیکسلی که برای آن تعریف کردیم):
محتویات جدول اگر بخواهیم نحوه قرار گرفتن محتویات درون جدول را تعیین کنیم می توانیم از شناسه های زیر را در تگ <td> استفاده کنیم:

• "align="left :
  این شناسه محتویات جدول شما را در سمت چپ آن قرار می دهد.
• "align="right :
  با این شناسه می توانید محتویات جدول را به صورت راست چین نمایش دهید.
• "align="center :
  با این شناسه می توانید محتویات جدول را متمایل به مرکز جدول قرار دهید.

حالا این شناسه ها را در یک جدول به کار می بریم:
<table width="600" border="3">
<td align="left">
متمایل به چپ
</td>
<td align="center">
متمایل به مرکز
</td>
<td align="right">
متمایل به راست
</td>
</table>
می توانید نحوه قرارگیری محتویات سلولها را در جدول زیر ملاحظه کنید:
متمایل به چپ متمایل به مرکز متمایل به راست اگر بخواهیم نحوه قرارگیری محتویات سلولها را به صورت عمودی تنظیم کنیم، می توانیم از شناسه valign استفاده کنیم:

• "valign="top :
  با این شناسه محتویات سلول در بالای آن قرار می گیرند.
• "valign="middle :
  به وسیله این شناسه محتویات سلول در وسط آن به نمایش در می آیند.
• "valign="bottom :
  با این شناسه محتویات سلول در پایین آن نمایش داده می شوند.

در مثال زیر می توانید نحوه استفاده از شناسه های بالا در یک جدول را ببینید:
<table width="600" height="100" border="3">
<td align="center" valign="top">
متمایل به بالا
</td>
<td align="center" valign="middle">
متمایل به وسط
</td>
<td align="center" valign="bottom">
متمایل به پایین
</td>
</table>
این هم جدول نهایی:
متمایل به بالا متمایل به وسط متمایل به پایین نحوه قرارگیری عمودی محتویات سلولها زمانی مفید خواهد بود که تعداد سطرهای محتویات سلولهای مختلف در یک ردیف جدول با هم برابر نباشند. در حقیقت زمانی که همه سلولها دارای یک تعداد سطر باشند و نحوه قرار گیری عمودی محتویات آنها به یک صورت است.
شناسه های دیگری نیز وجود دارد که می توانیم در تگ td استفاده کنیم:

• rowspan :
  این شناسه مشخص کننده این است که ارتفاع سلول معادل چند سلول است
• colspan :
  این شناسه مشخص کننده اندازه افقی یک سلول بر اساس تعداد سلول است.

به یک مثال توجه کنید:
<table border="2">
<td align="center">
سلول اول
</td>
<td rowspan="2" align="center">
<img src="learn_html.gif">
</td>
<tr>
<td align="center">
سلول دوم
</td>
</tr>
</table>
این هم جدول به دست آمده. همانطور که می بینید سلولی که محتوی عکس است در کنار دو سلول دیگر قرار گرفته است نه در قسمت بالای سلول دوم:
سلول اول سلول دوم حال فرض کنید می خواهیم یک جدول مانند زیر داشته باشیم:
سلول اول سلول دوم سلول سوم سلول چهارم برای ایجاد این جدول در تگ <td> در ردیف اول از شناسه "3"=colspan استفاده می کنیم. با این کار سلول موجود در ردیف اول به اندازه سه سلول در عرض کشیده می شود.
در اینجا می توانید کد مربوط به این جدول را ببینید:
<table border="1">
<tr>
<td align="center" colspan="3">
<b>سلول اول</b>
</td>
</tr>
<tr>
<td align="center">
سلول دوم
</td>
<td align="center">
سلول سوم
</td>
<td align="center">
سلول چهارم
</td>
</tr>
</table>
شما می توانید در صورت تمایل رنگ زمینه جدول، سطر، ستون یا هر سلول را در جدول که بخواهید تغییر دهید.
برای تعیین کردن رنگ زمینه برای جدول باید این شناسه bgcolor را در تگ جدول به کار ببرید و رنگ مورد نظر خود را در این شناسه به کار ببرید.
برای مثال اگر بخواهیم جدولی با زمینه زرد ایجاد کنیم، می توانیم به این صورت عمل کنیم:
<table border="3" bgcolor="yellow">
<td>
محتویات جدول
</td>
</table>
جدول زیر به دست می آید:
محتویات جدول قابل ذکر است که اگر به جای تگ ابتدایی جدول از تگ زیر نیز استفاده کنیم همان نتیجه را به دست می آوریم:
<table border="3" bgcolor="#ffff00">
اگر بخواهیم هر سلول رنگ زمینه مربوط به خودش را داشته باشد باید شناسه مربوط به رنگ زمینه را به تگ <td> اضافه کنیم. برای نمونه به جدول زیر توجه کنید:
محتویات سلول اول محتویات سلول دوم آیا می خواهید کد مربوط به این جدول را ببینید:
<table border="3">
<td bgcolor="yellow">
محتویات سلول اول
</td>
<td bgcolor="green">
محتویات سلول دوم
</td>
</table>
در آخر می خواهیم رنگ زمینه هر ردیف را تغییر دهیم. برای این کار شناسه مربوط به رنگ زمینه را در تگ <tr> قرار می دهیم:
<table border="3" width="300">
<tr bgcolor="pink">
<td>صورتی</td>
<td>این ردیف صورتی است</td>
<tr bgcolor="gray">
<td>خاکستری</td>
<td>این ردیف خاکستری است</td>
</table>
این هم جدول به دست آمده:
صورتی این ردیف صورتی است خاکستری این ردیف خاکستری است

[B@RBOD]

قرار دادن دو جدول در کنار هم با استفاده از یک جدول بزرگتر


فرض کنید می خواهیم دو جدول را در یک سطر قرار دهیم. اگر بخواهیم دو تگ جدول را پشت سر هم استفاده کنیم، جدول دوم در سطر بعدی و زیر جدول اول قرار می گیرد.
برای حل این مشکل می توانید دو جدول مورد نظر را در یک جدول که آنها را در بر می گیرد قرار دهیم. در این صورت می توان دو جدول در یک سطر ایجاد کرد.
در اینجا می توانید کدی را که یک جدول را درون یک جدول دیگر ایجاد می کند:
<table width="500" border="4"><!-- تگ آغازی جدول بیرونی -->
<td align="center"><!-- سلول اول در جدول بیرونی -->
<table width="400" border="2"><!-- آغاز جدول درونی -->
<td align="center"><!-- اولین سلول جدول درونی -->
محتویات جدول درونی
</td><!-- پایان سلول جدول درونی -->
</table><!-- پایان جدول درونی -->
</td><!-- پایان سلول جدول بیرونی -->
</table><!-- پایان جدول بیرونی -->
این هم جدول به دست آمده:
محتویات جدول درونی به یاد داشته باشید که جدولهای درونی را باید در سلولهای جدول بیرونی قرار دهید یعنی بین <td> و <td/> در جدول بیرونی.
حالا فرض کنید می خواهیم بیش از یک جدول درون یک جدول ایجاد کنیم. برای اینکه این جدولهای درونی، در یک سطر قرار گیرد کافی است به تعداد جدولهای درونی، در جدول بیرونی سلول ایجاد کنیم و جدولها را در سلولهای جدول بیرونی قرار دهیم.
برای مثال فرض کنید می خواهیم دو جدول را در یک سطر داشته باشیم. می توانیم مانند زیر عمل کنیم:
<table width="600" border="4"><!-- تگ آغازی جدول بیرونی -->
<td align="center"><!-- سلول اول در جدول بیرونی -->
<table width="250" border="2"><!-- آغاز جدول درونی -->
<td align="center"><!-- اولین سلول جدول درونی -->
محتویات اولین جدول درونی
</td><!-- پایان سلول اولین جدول درونی -->
</table><!-- پایان اولین جدول درونی -->
</td><!-- پایان اولین سلول جدول بیرونی -->
<td align="center"><!-- آغاز دومین سلول جدول بیرونی -->
<table width="250" border="2"><!-- آغاز دومین جدول درونی -->
<td align="center"><!-- آغاز سلول دومین جدول درونی -->
محتویات دومین جدول درونی
</td><!-- پایان سلول دومین جدول درونی -->
</table><!-- پایان دومین جدول درونی -->
</td><!-- پایان دومین سلول جدول بیرونی -->
</table><!-- پایان جدول بیرونی -->
این هم نتیجه به دست آمده:
محتویات اولین جدول درونی محتویات دومین جدول درونی قابل ذکر است که ما در این مثالها برای بهتر مشخص شدن محل جدولها از شناسه border استفاده کرده ایم. شما می توانید به دلخواه از آن استفاده کنید.
بهتر است در هنگام نوشتن کدها عرض جدولها را مشخص کنید تا در پایان به هم ریخته نباشند.
با این روش می توانید هر تعداد جدول که نیاز داشته باشید در کنار هم قرار دهید.

[B@RBOD]

فریمها، باز کردن لینکها در یک فریم مشخص


حالا شما می توانید یک صفحه با استفاده از فریمها بسازید. اما وقتی که شما یک لینک را در یک فریم قرار می دهید پس از کلیک کردن لینک در همان فریم باز می شود. این مسأله به این دلیل است که هر فریم یک صفحه HTML است و مانند یک صفحه عمل می کند. پس اگر برای لینک شناسه ای را تعریف نکنیم در همان صفحه (در حقیقت در همان فریم) باز می شود. شما می توانید صفحه را طوری طراحی کنید که لینکهای یک فریم در فریم دیگری باز شوند یا در یک صفحه جدید باز شوند که فریمی ندارد.
برای این کار باید ابتدا فریمها را نامگذاری کنیم و سپس از شناسه target در تگ لینک استفاده کنیم. به یک مثال در این رابطه توجه کنید:
<html>
<head>
<title>تعیین فریم مقصد برای لینکها</title>
</head>
<frameset cols="25%,75%">
<frame src="page4.htm" name="left">
<frame src="page2.htm" name="right">
</frameset>
</html>

ما در این مثال از دو فریم با نامهای left و right استفاده کردیم. شما می توانید هر نامی را که مناسب می دانید استفاده کنید.(این نامی است که در تگ لینک مورد استفاده قرار خواهد گرفت و لزوماً نباید همان نام فایل HTML قرار گرفته شده در فریم باشد.)
حالا که فریمها را نامگذاری کردیم می توانیم از این نامها به عنوان مقادیری برای شناسه target در تگ لینکها در هر کدام از فریمها استفاده کنیم. فرض کنید ما در فریم سمت چپ لیستی از صفحات را داریم که می خواهیم با کلیک کردن بر روی آنها در فریم سمت راست باز شوند. در این حالت باید این شناسه را به تگ لینکهای موجود در فریم سمت چپ اضافه کنید:
"target="right . برای مثال به لینک زیر توجه کنید:
<a href="../../html/index.htm" target="right">آموزش HTML </a>
حالا پس از کلیک کردن لینک، فریم سمت چپ دست نخورده باقی می ماند و لینک در فریم سمت راست باز می شود. شما می توانید این کار را در صفحاتی که بیش از یک فریم هم دارند انجام دهید. فقط فراموش نکنید که فریمها را نامگذاری کنید.
در اینجا می توانید یک مثال برای این نوع صفحات را ببینید. لینک زیر را کلیک کنید و به صفحه آزمایشی وارد شوید تا لینکهای قرار گرفته در فریمها را امتحان کنید:

ورود به صفحه آزمایشی

میتوان لینکها را به جای اینکه در یک فریم باز کنیم، ر تمام پنجره و بدون فریم باز کنیم. برای این کار باید شناسه "target="_top را به تگ لینک اضافه کنیم. مثلاً می توانیم تگ لینکی مانند زیر بنویسیم:
<a href="http://www.neopersia.org/html/index.html" target="_top">این لینک در تمام صفحه باز می شود.</a>
در اینجا تعدادی از شناسه هایی را که می توان به تگ frame اضافه کرد آورده ایم. با این شناسه ها می توانیم رفتار این فریمها را بهتر کنترل کنیم:

• "scrolling="no :
  این فرمان به شما اجازه می دهد که اسکرول بار (scroll bar) را از سمت راست صفحه حذف کنید، تا کاربران نتوانند با استفاده از آن به بالا و پایین صفحه بروند. اگر از این شناسه استفاده نکنید، مرورگر تصمیم می گیرد که آیا اسکرول بار را در صفحه ای که درون فریم قرار دارد نشان دهد یا نه.
  اگر مقدار این شناسه yes باشد، اسکرول بار همیشه نشان داده خواهد شد. اگر no باشد اسکرول بار هرگز نمایش داده نخواهد شد. در صورتی که نیاز داشته باشید در این صفحه به بالا یا پایین و چپ و راست بروید می توانید با کلیدهای جهتی صفحه کلید این کار را انجام دهید.
• "border="3 :
  این شناسه به شما اجازه می دهد تا مقدار کلفتی حاشیه های فریم را تعیین کنید.
• "resize"no :
  این فرمان ب شما امکان می دهد تعیین کنید که آیا کاربر می توان اندازه فریم را تغییر دهد یا نه. اگر مقدار این شناسه no باشد کاربر نمی تواند با قرار دادن نشانگر ماوس خود در لبهء فریمها، اندازه آنها را تغییر دهد. اگر مقدار آن yes باشد کاربر می تواند اندازه فریمها را تغییر دهد. گزینه پیش فرض این شناسه yes است.
• "noresize="no :
  شما می توانید از این شناسه به جای "resize="no استفاده کنید، چون همه مرورگرها شناسه قبلی را نمی شناسند. در هر حال می توانید برای اطمینان از هر دو شناسه با هم استفاده کنید.
• "marginwidth="2 و "marginheight="2 :
  این شناسه ها به شما امکان می دهد میزان حاشیه محتویات فریم را از لبه فریم تعیین کنید.

برخی از مرورگرهای قدیمی ممکن است نتوانند فریمها را نشان دهند. شاید شما بخواهید برای این دسته از کاربران با مرورگرهای قدیمی پیغامی را بنویسید یا لینک صفحه ای را که در آن از فریم استفاده نکرده اید به آنها نشان دهید. برای این کار می توانید از فرمان زیر استفاده کنید:
<noframes>
متن پیغامی که در صورت نمایش ندادن فریمها مشاده می شود.
</noframes>
حالا کاربرانی که نمی توانند فریمها را مشاهده کنند پیغام شما را به جای یک صفحه خالی می بینند.

[B@RBOD]

استفاده از فریمهای نامرئی در صفحه


اگر شما می خواهید در صفحه خود از فریمهای نامرئی استفاده کنید، یعنی نمی خواهید خط حاشیه فریمها قابل دیدن باشد باید چند فرمان را به تگ <frameset> اضافه کنید و تگهای <frame> را آنطور که دوست دارید تنظیم کنید. در اینجا می توانید کدی را که یک صفحه را با فریمهای نا مرئی می سازد می بینید:
<html>
<head>
<title>مخفی کردن فریم در صفحه</title>
</head>
<frameset cols="25%,75%" border="0" framespacing="0" frameborder="0">
<frame src="page1.htm" name="left" scrolling="no">
<frame src="page2.htm" name="right">
</frameset>
</html>

در تگ <frameset> از شناسه های مختلفی می توان استفاده کرد که در اینجا لیست برخی از آنها را مشاهده می کنید:

• "border="0
  این شناسه میزان ضخامت کادر اطراف فریم را تعیین می کند که ما در اینجا آنرا صفر قرار داده ایم.
• "frameborder="0
  مقدار حاشیه فریمها را صفر قرار می دهیم تا نمایش داده نشوند.
• "framespacing="0
  فاصله بین فریمها را صفر قرار می دهیم تا بین آنها فاصله ای دیده نشود.
• "scrolling="no
  این شناسه باعث می شود در صورتی که محتویات فریمها از اندازه پنجره بزرگتر بود نوار اسکرول بار نمایش داده نشود.

[B@RBOD]

آموزش ایجاد فریم های داخلی


به لطف HTML 4.0 ما توانایی ایجاد فریمها را در بدنه صفحات پیدا کردیم. با استفاده از این نوع فریمها (inline frame) می توانیم صفحه خود را به صورت عادی طراحی کنیم و در هر کجای آن که مایل بودیم دریچه ای به یک صفحه دیگر بسازیم.
Your browser does not support inline frames or is currently configured not to display inline frames. در قسمتهای قبل با طرز ساختن فریمها و خواص آنها آشنا شدیم. در این قسمت می خواهیم به ساختن فریمهای درونی بپردازیم. یک نمونه از این فریمها را می توانید در سمت راست این نوشته ببینید.
احتمالاً در بسیاری از صفحات نمونه هایی از این نوع فریم را دیده اید. اگر به ساختن آنها علاقه مند شده اید به سراغ تگ سازنده این فریمها می رویم:
با قرار دادن این تگ در کد HTML صفحه در جایی که می خواهید فریم قرار بگیرد می توانید یک فریم اینلاین بسازید:
<iframe src="../examples/html/page1.htm" width="400" height="250" frameborder="1"></iframe>
با این تگ شما می توانید یک فریم در صفحه خود بسازید. همانطور که می بینید ما در صفحه اصلی از تگ body استفاده کردیم و از تگ frameset هم استفاده نشد.
در اینجا به توضیح شناسه های قابل استفاده در این تگ می پردازیم:

• <iframe> :
  این تگ آغازی یک فریم اینلاین است.
• "src="frame_1.htm :
  این قسمت مشخص کننده آدرس صفحه ای است که می خواهیم در فریم نمایش داده شود.
• "width="350 :
  مشخص کننده مقدار عرض فریم در مقیاس پیکسل است. البته می توانیم از مقیاس درصد هم استفاده کنیم.
• "height="250 :
  مشخص کننده ارتفاع فریم در صفحه است. مقیاس آن می تواند پیکسل یا درصد باشد.
• "frameborder="1 :
  مشخص کننده ضخامت لبه های فریم است.

در مورد لینکها هم رفتار این فریمها مانند بقیه فریمها است. می توانیم به آنها یک نام بدهیم و از شناسه target در لینکها استفاده کنیم. به یک مثال توجه کنید:
در ابتدا به تگ فریم خود یک نام نسبت می دهیم. مانند زیر:
<iframe src="../examples/html/page1.htm" width="400" height="250" frameborder="1" name="inlineframe1"></iframe>
در مرحله بعد به تگ لینک مورد نظر شناسه target را اضافه می کنیم. مانند زیر:
<a href="index.html" target="inlineframe1">این صفحه در فریم نمایش داده خواهد شد.</a>
حالا می توانید لینک زیر را کلیک کنید. خواهید دید که لینک در فریم همین صفحه باز خواهد شد:

این صفحه در فریم نمایش داده خواهد شد.

مانند بقیه فریمها می توانید از شناسه "scrolling="no در تگ فریم استفاده کنید تا در فریم اسکرول بار نداشته باشی

[B@RBOD]

رویدادهای مربوط به پنجره مرورگر و فرمها در HTML


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

• رویدادهای مربوط به پنجره مرورگر

این رویدادها باید فقط در تگهای body و frameset استفاده شوند. دو رویداد در این دسته قرار می گیرند که در زیر آنها را مشاهده می کنید:

• onload :
  این رویداد باعث می شود تا اسکرپتی که به عنوان مقدار آن قرار داده شده است در هنگام باز شدن صفحه اجرا شود.
• onunload :
  اسکرپتی که به عنوان مقدار این شناسه قرار می گیرد در هنگامی که بازدید کننده از صفحه خارج می شود اجرا می شود.
• onResize :
  این رویداد هنگامی که اندازه پنجره مرورگر را تغییر می دهید اجرا می شود.

برای مشاهده یک مثال برای این رویدادها لینک زیر را کلیک کنید. صفحه ای که به آن وارد می شوید حاوی دو رویداد بالا در تگ body خود است.

ورود به صفحه آزمایشی برای رویدادهای مربوط به پنجره مرورگر

می توانید تگ body مورد استفاده در مثال بالا را در اینجا مشاهده کنید:
<body onload="alert('به این صفحه آزمایشی خوش آمدید')" onunload="alert('شما از این صفحه خارج شدید')" onresize="alert('شما اندازه پنجره را تغییر دادید')>

• رویدادهای مربوط به فرمها

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

• onchange :
  اسکرپت موجود در این شناسه به هنگام ایجاد تغییر در عناصر موجود در فرمها اجرا می شود.
• onsubmit :
  وقتی که فرم ارسال می شود اسکرپت موجود در این شناسه اجرا می شود.
• onreset :
  وقتی که دکمه reset ( پاک کردن فرم ) فشار داده شود اسکرپت موجود در این شناسه اجرا می شود.
• onselect :
  وقتی که قسمتی از فرم که این شناسه را در خود دارد انتخاب شود اسکرپت موجود در این شناسه اجرا می شود.
• onfocus :
  وقتی که تگی که حاوی این شناسه است مورد استفاده کاربر قرار گیرد اسکرپت موجود در این رویداد اجرا می شود.
• onblur :
  این شناسه بر عکس شناسه بالا عمل می کند یعنی وقتی کار کاربر با یک تگ تمام شد و به سراغ قسمت دیگری از صفحه رفت اجرا می شود.

برای مشاهده مثال برای رویدادهای مربوط به فرمها اینجا را کلیک کنید.

در اینجا می توانید کدی را که در مثال بالا استفاده شده ببینید البته فقط قسمتهای ضروری آن آورده شده است:
<form action="#" method="post" onsubmit="msg('onSubmit')" onreset="msg('onReset')">
<input type="text" onfocus="msg('onFocus')" onblur="msg('onBlur')" />
<select name="select" onchange="msg('onChange')">
<option>گزینه اول</option>
<option>گزینه دوم</option>
<option>گزینه سوم</option>
<option>گزینه چهارم</option>
</select>
<textarea onSelect="msg('onSelect')">وقتی متنی را که در یا تگ با شناسه onselect قرار دارد انتخاب کنید اسکرپت موجود در این رویداد اجرا می شود.</textarea>
<input type="reset" name="reset" value="reset" />
<input type="submit" name="Submit" value="Submit" />
</form>

[B@RBOD]

رویدادهای مربوط به صفحه کلید و ماوس در HTML


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

• رویدادهای مربوط به صفحه کلید

سه رویداد در این دسته قرار می گیرد:

• onkeydown :
  در هنگام فشار دادن دکمه صفحه کلید اسکرپت تعریف شده در مقدار این شناسه اجرا می شود.
• onkeypress :
  وقتی که یک دکمه در صفحه کلید فشرده می شود و رها می شود اسکرپت موجود در این شناسه اجرا می شود.
• onkeyup :
  در هنگام رها شدن یک کلید این شناسه فعال می شود.

رویدادهای مربوط به صفحه کلید نباید در تگهای زیر استفاده شود:
<base>, <br>, <bdo>, <frame>, <frameset>, <iframe>, <html>, <head>, <meta>, <param>, <script>, <style>, <title>

برای مشاهده مثال برای رویدادهای مربوط به فرمها اینجا را کلیک کنید.

کدی را که در نوشتن این مثال از آن استفاده شده است می توانید در اینجا مشاهده کنید:
<input value="onkeypress" type="text" onKeyPress="msg('onkeypress')" />
<input value="onkeypress" type="text" onKeyUp="msg('onkeyup')" />
<input value="onkeypress" type="text" onKeyDown="msg('onkeydown')" />

• رویدادهای مربوط به ماوس

هفت رویداد در این دسته قرار دارند:

• onclick :
  در هنگام کلیک کردن بر روی قسمتی که این شناسه را دارد اجرا می شود.
• ondblclick :
  مقدار موجود در این شناسه به هنگام دابل کلیک بر روی قسمتی که این شناسه در آن به کار رفته اجرا می شود.
• onmousedown :
  وقتی که کلید ماوس فشرده می شود این شناسه عمل می کند.
• onmousemove :
  وقتی که ماوس را در صفحه حرکت می دهید این رویداد اجرا می شود.
• onmouseover :
  وقتی ماوس روی قسمتی که حاوی این شناسه است قرار می گیرد این رویداد اجرا می شود.
• onmouseout :
  این رویداد وقتی که ماوس از روی قسمتی که حاوی این رویداد است خارج می شود اجرا می شود.
• onmouseup :
  وقتی که کلید ماوس رها می شود این رویداد اجرا می شود.

رویدادهای مربوط به ماوس هم مانند رویدادهای صفحه کلید نباید در تگهای زیر استفاده شوند:
<base>, <br>, <bdo>, <frame>, <frameset>, <iframe>, <html>, <head>, <meta>, <param>, <script>, <style>, <title>

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

می توانید کدی را که در نوشتن این مثال از آن در سلولهایی که حاوی رویدادها هستند استفاده شده است در اینجا مشاهده کنید:
<td onClick="msg('onClick')">در این قسمت کلیک کنید تا رویداد onClick اجرا شود.</td>

<td onDblClick="msg('onDblClick')">در این قسمت دابل کلیک کنید تا رویداد onDblClick اجرا شود.</td>

<td onMouseDown="msg('onMouseDown')">در این قسمت کلید ماوس را پایین نگهدارید تا رویداد onMouseDown اجرا شود.</td>

<td onMouseMove="msg('onMouseMove')">روی این قسمت ماوس خود را حرکت دهید تا رویداد onMouseMove اجرا شود.</td>

<td onMouseOver="msg('onMouseOver')">ماوس خود را روی این قسمت قرار دهید تا رویداد onMouseOver اجرا شود.</td>

<td onMouseOut="msg('onMouseOut')">وقتی ماوس از روی این قسمت کنار رود رویداد onMouseOut اجرا می شود.</td>

<td onMouseUp="msg('onMouseUp')">وقتی کلید ماوس روی این قسمت رها شود رویداد onMouseUp اجرا می شود.</td>
در این مثال msg('متن پیام') تابع جاوا اسکرپتی است که در صفحه مثال تعریف شده است. به جای آن می توانید از کدهای دیگری استفاده کنید.

[B@RBOD]

تنظیم پیج کد مورد استفاده در صفحه


حتماً تا به حال با صفحاتی مواجه شده اید که به زبان فارسی نوشته شده اند، اما وقتی از آنها بازدید می کنید با کلماتی به هم ریخته و غیر قابل فهم مواجه می شوید. دلیل این مشکل ناسازگار بودن 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

البته اگر به این روش مشکل صفحه مورد نظر شما حل نشد به دلیل این است که صفحه با پیج کد دیگری نوشته شده است. می توانید گزینه هایی مثل (Arabic(Windows رانیز امتحان کنید.
برای اینکه یک صفحه فارسی طراحی کنیم دو چیز را باید مد نظر قرار دهیم:
راست به چپ بودن صفحه

برای اینکه یک صفحه راست به چپ طراحی کنیم می توانیم به چند طریق عمل کنیم.

• استفاده از شناسه "dir="rtl در تگ <html>
  از این شناسه در بسیاری از تگهای HTML می توان استفاده نمود. در صورتی که صفحه ای راست به چپ باشد و بخواهیم از قسمتهای چپ به راست نیز در آن صفحه استفاده کنیم می توانیم از شناسه "dir="ltr استفاده کنیم.
• استفاده از CSS برای تعیین direction صفحه
  مثلاً استفاده از یک استایل خارجی یا در بخش HEAD متن یا استفاده از شناسه "style="direction: rtl در تگهایی که می خواهیم به صورت راست به چپ نمایش داده شود

تنظیم Encoding در هنگام طراحی صفحه

برای تنظیم Encoding صفحه باید از یک متاتگ در بخش HEAD متن استفاده کنیم. این متاتگ برای کد پیج utf-8 که بیشترین سازگازی را با صفحات فارسی دارد به صورت زیر است:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> اگر در طراحی صفحه ای از این متاتگ استفاده شود کد پیج utf-8 در مرورگر به صورت خودکار برای آن صفحه اعمال می شود.