آموزش HTML

آموزش نحوه ساختن چک باکس برای استفاده در فرمهای html
چک باکس (checkbox)

برای ساختن چک باکس هم باید از تگ <input> استفاده کنیم. برای این کار باید از checkbox به عنوان مقدار شناسه type استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن چک باکس آورده شده است:
<input name="someNeme" type="checkbox" value="مقدار مورد نظر">

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

در اینجا به توضیح برخی از شناسه هایی که برای چک باکس به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ <input> به کار روند.

* type :
برای اینکه چک باکس متنی ایجاد کنیم باید مقدار این شناسه را checkbox قرار دهیم.
* name :
این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود.
* value :
این شناسه در مورد در مورد چک باکس مقداری است که در صورت انتخاب شدن این دکمه باید به صفحه action انتقال داده شود. استفاده از این شناسه در مورد چک باکس و دکمه های رادیو ضروری است.
* "checked="checked :
این شناسه فقط برای چک باکس و دکمه های رادیو مورد استفاده قرار می گیرد و باعث می شود تا در هنگام باز شدن صفحه این دکمه ها به صورت انتخاب شده نمایش داده شوند.
* "disabled="disabled :
از این شناسه برای غیر فعال چک باکس استفاده می شود. به صورتی که کاربر نمی تواند دکمه مربوطه را انتخاب کند یا آنرا به صورت انتخاب نشده در آورد. مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور ارسال نمی شوند.

برای مشاهده چک باکس در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در چک باکس زیر مشاهده کنید:

حالت مورد نظر شما : فعال غیر فعال

چک باکس نمونه :

آموزش نحوه ساختن دکمه های رادیو در فرمهای html
دکمه های رادیو (Radio Button)

برای ساختن دکمه های رادیو هم باید از تگ <input> استفاده کنیم. برای این کار باید از radio به عنوان مقدار شناسه type استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن دکمه رادیو آورده شده است:
<input name="someNeme" type="radio" value="مقدار مورد نظر">

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

حتماً تا به حال دکمه های رادیویی را که در یک زمان فقط یکی از آنها می تواند انتخاب شده باشد مشاهده کرده اید. برای ساختن این نوع دکمه ها از کد بالا استفاده می شود همه دکمه هایی که باید به این گونه رفتار کنند دارای یک نام هستند اما مقادیر قرار گرفته شده در شناسه value در آنها متفاوت است. در زیر می توانید کد مربوط به یک دسته دکمه رادیو را ببینید:
<input name="Neme" type="radio" value="مقدار دکمه اول">Radio Button 1 <br>
<input name="Neme" type="radio" value="مقدار دکمه دوم">Radio Button 2 <br>
<input name="Neme" type="radio" value="مقدار دکمه سوم">Radio Button 3 <br>

در اینجا هم می توانید این دکمه ها را مشاهده کرده و آنها را آزمایش کنید:
Radio Button 1
Radio Button 2
Radio Button 3

در اینجا به توضیح برخی از شناسه هایی که برای دکمه های رادیو به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ <input> به کار روند.

* type :
برای اینکه یک دکمه رادیو ایجاد کنیم باید مقدار این شناسه را radio قرار دهیم.
* name :
این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود.
* value :
این شناسه در مورد در مورد دکمه رادیو مقداری است که در صورت انتخاب شدن این دکمه باید به صفحه action انتقال داده شود. استفاده از این شناسه در مورد چک باکس و دکمه های رادیو ضروری است.
* "checked="checked :
این شناسه فقط برای چک باکس و دکمه های رادیو مورد استفاده قرار می گیرد و باعث می شود تا در هنگام باز شدن صفحه این دکمه ها به صورت انتخاب شده نمایش داده شوند.
توجه داشته باشید که در یک دسته دکمه رادیو که در بالا یک نمونه از آن آورده شده است نباید بیش از یک دکمه دارای این شناسه باشد.
* "disabled="disabled :
از این شناسه برای غیر فعال دکمه رادیو استفاده می شود. به صورتی که کاربر نمی تواند دکمه مربوطه را انتخاب کند. مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور ارسال نمی شوند.

برای مشاهده دکمه رادیو در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در دکمه رادیوی زیر مشاهده کنید:

حالت مورد نظر شما : فعال غیر فعال

دکمه رادیو نمونه :

ساختن دکمه ها با استفاده از تگ input در html
دکمه ارسال فرم (Submit)

برای ساختن دکمه ارسال فرم باید از تگ <input> استفاده کنیم. برای این کار باید از submit به عنوان مقدار شناسه type استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن دکمه ارسال فرم آورده شده است:
<input name="buttonName" type="submit">

در اینجا می توانید دکمه ارسال فرم ایجاد شده را مشاهده کنید البته چون این دکمه در تگ <form> قرار ندارد با کلیک کردن بر روی آن اتفاقی رخ نمی دهد اما اگر این دکمه در تگ فرم قرار داشته باشد با کلیک کردن بر روی آن اطلاعات وارد شده در فرم به صفحه action ارسال می شوند.
دکمه پاک کردن فرم (Reset)

برای ساختن این دکمه هم از تگ <input> استفاده می شود به این صورت که برای شناسه type از مقدار reset استفاده می کنیم. در اینجا می توانید یک نمونه از کدی را که برای ساختن این دکمه استفاده می شود ملاحظه کنید:
<input name="buttonName" type="reset">

در اینجا می توانید دکمه ای را که با استفاده از تگ بالا ساخته شده است ملاحظه کنید. این دکمه هم مثل دکمه ارسال فرم باید در تگ فرم قرار داشته باشد تا با کلیک بر روی آن اطلاعاتی که کاربر وارد کرده است حذف شوند و فرم به حالت اولیه بازگردد.
ساختن دکمه (Button)

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

در اینجا به توضیح برخی از شناسه هایی که برای دکمه های رادیو به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ <input> به کار روند. برای مثال دکمه هایی که در پایین همین صفحه قرار دارند و برای رفتن به بخش قبلی یا بعدی استفاده می شوند از همین نوع دکمه ها هستند.

از کد زیر برای ساختن این دکمه ها استفاده می شود:
<input name="buttonName" type="button">

در اینجا به معرفی برخی از شناسه هایی که برای دکمه ها در تگ <input> استفاده می شوند می پردازیم :

* type :
برای دکمه ارسال فرم باید از submit برای مقدار این شناسه استفاده شود.
برای دکمه پاک کردن فرم باید از reset برای مقدار این شناسه استفاده شود.
برای سایر دکمه ها باید از button برای مقدار این شناسه استفاده شود.
* name :
این شناسه برای اختصاص یک نام به هر دکمه استفاده می شود.
* value :
در مورد دکمه ها این شناسه مشخص کننده متنی است که در روی دکمه نمایش داده می شود.
* "disabled="disabled :
از این شناسه برای غیر فعال دکمه ها استفاده می شود. به صورتی که کاربر نمی تواند دکمه مربوطه را کلیک کند. مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور ارسال نمی شوند.

برای مشاهده دکمه زیر در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در دکمه زیر مشاهده کنید:

حالت مورد نظر شما : فعال غیر فعال

دکمه نمونه :

کادر کلمه عبور و فیلدهای مخفی در طراحی فرمهای HTML
کادر کلمه عبور (Password)

احتمالاً تا به حال به سایتی برخورد کرده اید که برای ورود به آن نیاز به کلمه عبور داشته باشید. شما مسلماً تمایل ندارید وقتی کلمه عبور خود را وارد می کنید کلمه عبور شما نمایش داده شود و دیگران قادر به مشاهده آن باشند. به همین دلیل معمولاً سایتها برای اینکه کلمه عبور کاربران در هنگام پر کردن فرم نمایش داده نشود از نوعی کادر ورودی استفاده می کنند که کاملاً شبیه کادری است که برای وارد کردن متن استفاده می شود (Text Box) با این تفاوت که به جای نمایش کاراکترهای کلمه عبور به جای هر کاراکتر از یک نقطه یا ستاره (بستگی به مرورگر دارد) نمایش می دهد.

برای ساختن کادر کلمه عبور می توانید از کد زیر استفاده کنید:
<input type="password" name="someName" size="30">

کادر به دست آمده مانند زیر است. می توانید متنی را در آن بنویسید و نتیجه را مشاهده کنید:

همانطور که در کد بالا مشاهده می کنید ما از شناسه "size="30 برای این کادر استفاده کردیم. تقریباً همه شناسه هایی که برای کادرهای متنی استفاده می شوند در مورد کادر کلمه عبور هم قابل استفاده هستند. برای مشاهده این شناسه ها می توانید لینک زیر را کلیک کنید:
آموزش نحوه ساخت کادرهای متنی یک سطری. (لینک در صفحه جدید باز می شود)
فیلدهای مخفی (Hidden Fields)

ممکن است برای شما پیش آمده باشد که بخواهید قسمتی از اطلاعات به همراه فرم ارسال شوند ولی کاربر آنها را مشاهده نکند و نیازی نباشد آنها را وارد کند. برای این کار می توانید از فیلدهای مخفی استفاده کنید. کد زیر مربوط به یک فیلد مخفی است:
<input type="hidden" name="FieldName" value="اطلاعات مورد نظر شما" >

در کد بالا شما می توانید مقدار مورد نظر خود را در قالب شناسه value به صفحه action ارسال کنید بدون اینکه در صفحه نمایش داده شود.

کادر متنی با بیش از یک سطر (Text Area)
کادر های متنی با بیش از یک سطر (Text Area)

از یک Text Area کاربران می توانند برای وارد کردن تعداد نامحدودی کاراکتر در بیش از یک سطر وارد کنند. بهتر است تا برای متنهای طولانی به جای Text Box از Text Area استفاده کنید تا کاربران راحتتر بتوانند متن خود را مشاهده کنند و یا آنرا ویرایش کنند.

برای ایجاد Text Area باید از تگ <textarea> استفاده کنید. این تگ بر خلاف تگ <input> یک تگ پایانی دارد و باید به وسیله تگ <textarea/> بسته شود. در مثال زیر می توانید کد مربوط به یک Text Area را مشاهده کنید:
<textarea name="someName" cols="40" rows="3">
این متن به صورت متن داخلی کادر نمایش داده می شود
</textarea>

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

همانطور که مشاهده می کنید متنی که بین تگ ابتدایی و تگ پایانی یک Text Area نوشته شود به صورت پیش فرض در کادر Text Area نمایش داده می شود.

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

* cols :
این شناسه عرض کادر را بر حسب تعداد کاراکتر تعیین می کند. مقدار این شناسه باید عددی مثبت باشد. البته این عرض بستگی به اندازه فونت تعریف شده برای صفحه و مرورگر دارد. استفاده از این شناسه برای تگ <textarea> الزامی است.
* rows :
این شناسه مشخص کننده تعداد سطرهای قابل مشاهده در کادر است. این مقدار هم باید عددی مثبت باشد. استفاده از شناسه rows برای تگ <textarea> الزامی است.
* name :
از این شناسه می توان برای اختصاص دادن یک نام مشخص به textarea استفاده کرد.
* "readonly="readonly :
این شناسه کادر را به صورت فقط خواندنی در می آورد و کاربر نمی تواند متن موجود در کادر را تغییر دهد.
* "disabled="disabled :
این شناسه کادر را به صورت غیر فعال در می آورد و بازدید کننده نمی تواند متن موجود در آن را تغییر دهد یا آنرا انتخاب کند. (این رفتار بسته به مرورگر متفاوت است)

برای مشاهده کادر در حالات فقط خواندنی (readonly) و غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در Text Area زیر مشاهده کنید:

حالت مورد نظر شما : فقط خواندنی غیر فعال

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



در تگ <textarea> علاوه بر شناسه های بالا که مربوط به همین تگ هستند می توان از شناسه های استاندارد زیر هم استفاده کرد:
id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

همچنین از رویدادهای زیر هم می توان در تگ <textarea> استفاده کرد :
onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

اصول نوشتن لیستهای کشویی برای استفاده در فرمهای HTML
لیستهای کشویی (Select)

برای ساختن لیستهای کشویی که به کاربران اجازه می دهد یک یا چند گزینه موجود در لیستی را در یک فرم انتخاب کند باید از تگ <select> استفاده کنیم. گزینه های موجود در این تگ بین <option> و <option/> قرار می گردند و پس از گزینه ها تگ پایانی لیست به صورت <select/> نوشته می شود.

در اینجا می توانید یک نمونه از کدی را که با آن یک لیست کشویی ساخته می شود مشاهده کنید:
<select name="someName">
<option value="value 1" >گزینه اول</option>
<option value="value 2">گزینه دوم</option>
<option value="value 3">گزینه سوم</option>
</select>

در این قسمت می توانید لیست مربوط به کد بالا را ملاحظه کنید:

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

از شناسه های زیر می توان در تگ <select> استفاده کرد:

* name :
از این شناسه برای تخصیص یک نام به لیست استفاده می شود.
* size :
این شناسه مشخص می کند چه تعدادی از گزینه ها در یک زمان قابل مشاهده باشند. در واقع رتفاع لیست را بر حسب تعداد گزینه ها مشخص می کند. مقدار این شناسه باید عددی بزرگتر از صفر باشد.
* "multiple="multiple :
در صورتی که این شناسه به تگ <select> اضافه ضود بازدید کننده می تواند بیش از یک گزینه از گزینه های لیست را انتخاب کند.
* "disabled="disabled :
این شناسه لیست را برای کاربر غیر فعال می کند و در نتیجه گزینه های آن امکان انتخاب شدن ندارند.

برای مشاهده لیست در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را مشاهده کنید:

حالت مورد نظر شما : فعال غیر فعال

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

از رویداد های زیر هم می توانیم در تگ <select> استفاده کنیم:
onfocus, onblur, onchange
وارد کردن گزینه ها به لیست با تگ <option>

برای ساختن گزینه هایی که در لیست نمایش داده می شود باید از تگ <option> استفاده کنیم. با استفاده از مقداری که برای این تگ با استفاده از شناسه value تعریف می کنیم می توانیم در اطلاعات ارسال شده فرم گزینه انتخاب شده توسط بازدید کننده را تشخیص دهیم.

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

* value :
این گزینه مشخص کننده متنی است که در صورت انتخاب شدن گزینه مربوطه به عنوان مقدار لیست کشویی به صفحه action ارسال می شود.
* "selected="selected :
از این گزینه برای مشخص کردن گزینه ای که به هنگام باز کردن صفحه به صورت پیش فرض انتخاب شده است استفاده می شود. در صورتی که برای هیچکدام از گزینه های موجود در لیست از این شناسه استفاده نشده باشد گزینه اول به عنوان گزینه پیش فرض استفاده می شود.

استفاده از رویداد های زیر در تگ <option> مجاز است:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
دسته بندی گزینه های لیست های کشویی با استفاده از <optgroup>

اگر یک لیست کشویی طولانی دارید توانید برای سهولت کار برای بازدید کننده گزینه های مرتبط با هم را در یک دسته قرار دهید به صورتی که از سایر گزینه ها جدا باشند. برای انجام این کار می توانید از تگ <optgroup> استفاده کنید. با استفاده از این تگ می توانید گزینه های مورد نظر خود برای یک دسته را بین <optgroup> و <optgroup/> قرار دهید.

کد زیر یک نمونه از لیست کشویی را نشان می دهد که گزینه ها در آن دسته بندی شده اند:
<select>
<optgroup label="عنوان گروه اول">
<option value ="some value "> گزینه اول در گروه اول </option>
<option value ="saab"> گزینه دوم در گروه اول </option>
</optgroup>
<optgroup label="عنوان گروه دوم">
<option value ="mercedes"> گزینه اول در گروه دوم </option>
<option value ="audi"> گزینه دوم در گروه دوم </option>
</optgroup>
</select>

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

استفاده از شناسه زیر در تگ <optgroup> الزامی است :

* label :
این شناسه برای هر گروه از گزینه ها یک عنوان یا برچسب مشخص می کند که در لیست در بالای هر گروه نمایش داده می شود و آن گروه را از سایر گزینه ها جدا می کند.

از رویدادهای زیر می توانید در تگ <optgroup> استفاده کنید:
tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

استفاده از موزیک در صفحه

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

در ابتدا به اولین روش می پردازیم:

فرض کنید می خواهیم یک فایل صوتی با نام example.mid را در صفحه قرار دهیم. در صورتی که فایل در همان پوشه صفحه قرار داشته باشد می توانیم به این صورت عمل کنیم:
<a href="example.mid">متن لینک موزیک</a>

به این طریق می توان یک لینک به یک فایل موزیک ایجاد کرد. در این مثال ما از یک فایل MIDI استفاده کردیم، همین کار را می توان با فایلهایی با پسوند، wav و aud و اغلب فرمتهای صوتی انجام داد. کاربر پس از باز شدن صفحه لینکی مشابه زیر را خواهد دید که با کلیک کردن بر روی آن دانلود فایل موزیک شروع می شود.


متن لینک موزیک


احتمالاً پس از اتمام داتلود فایل پنجره جدیدی باز می شود و شروع به پخش فایل می کند. کاربر بسته به plug-in هایی که دارد ممکن است توانایی جلو و عقب بردن موزیک و متوقف کردن آنرا نیز داشته باشد. در این حالت کاربر توانایی ذخیره فایل صوتی را مانند یک تصویر دارد. کاربر می تواند پنجره جدید را ببندد و به ادامه بازدیدش از سایت بدون صدای موزیک بپردازد. مشکل این روش این است که کاربر باید لینک موزیک را کلیک کند و صبر کند تا آن دانلود شود. البته این مسئله در مواقعی که شما آهنگهای زیادی در صفحه خود دارید می تواند به کاربر کمک کند تا آهنگ مورد علاقه خود را پیدا کند.

جاسازی موزیک در صفحه:

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

برای نمونه به تگ زیر نگاه کنید:
<embed src="example.mid">

این تگ به مرورگر می گوید تا فایل صوتی را همان جایی که شما تگ را قرار داده اید در صفحه قرار دهد. در این روش نیز شما مجبور نیستید صرفاً از فایلهای MIDI استفاده کنید و می توانید از فرمتهای دیگر استفاده کنید. همانطور که می بینید در این تگ فرمان " "=src مشخص کننده محل قرار گیری فایل صوتی در سایت شما است. شما می توانید از آدرس کامل فایل در اینجا استفاده کنید یا اگر فایل و صفحه ای که می خواهید فایل در آن شنیده شود در یک پوشه هستند می توانید از نام فایل استفاده کنید.

برای مثال در این روش شما چیزی شبیه این را خواهید دید:

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

* width :
این فرمان تعیین کننده عرض فایل صوتی در صفحه است. شما با قرار دادن یک عدد در مقیاس پیکسل بین دو دابل کوت این فرمان می توانید تعیین کنید فایل شما با چه میزان عرض در صفحه به نمایش درآید.
* height :
این فرمان تعیین کننده ارتفاع فایل صوتی در صفحه است. شما با قرار دادن یک عدد در مقیاس پیکسل بین دو دابل کوت این فرمان می توانید تعیین کنید فایل شما با چه میزان ارتفاع در صفحه به نمایش درآید. معمولاً برای این فرمان از ارتفاع 60 پیکسل استفاده می شود.
* "autostart="true :
مرورگر را وادار می کند تا بلافاصله پس از بارگذاری صفحه شروع به پخش فایل صوتی کند. شما می توانید این گزینه را با قرار دادن مقدار false به جای true غیر فعال کنید. معمولاً این گزینه به طور پیش فرض غیر فعال است.
* "loop="true :
این فرمان مرورگر را وادار می کند پس از به اتمام رسیدن فایل دوباره از اول آنرا اجرا کند، و این عمل تا هنگامی که صفحه باز است یا کاربر دکمه توقف را کلیک نکرده است ادامه پیدا می کند. شما می توانید با قرار دادن false به جای true این گزینه را غیر فعال کنید. البته معمولاً این گزینه به صورت پیش فرض غیر فعال است.
* "hidden="true :
این فرمان به مرورگر دستور مخفی کردن رابط گرافیکی پخش صدا را می دهد. در این صورت کاربران نمی توانند برنامه ای را که صدا را پخش می کند و همچنین دکمه های کنترل آنرا ببینند. در این صورت صدا تا زمانی که به پایان نرسیده یا تا زمانی که تنظیم شده باشد پخش می شود و کاربر نمی تواند از پخش آن جلوگیری کند. این گزینه با قرار دادن false به جای true غیر فعال می شود. به صورت پیش فرض هم این گزینه غیر فعال است.

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

ورود به صفحه جدید برای پخش موزیک

این هم تگ سازنده مثال بالا:
<embed src="example.mid" width="300" height="60" autostart="true" loop="true" hidden="true">

آشنایی با متا تگها و موارد استفاده آنها در HTML

تگهای META مورد استفاده موتورهای جستجو برای بررسی و شاخص گذاری صفحات قرار می گیرند. مخصوصاً اگر صفحه شما فریم (قاب) داشته باشد. این تگها باید در قسمت HEAD صفحه شما قرار گیرند.

در سطر زیر یکی از معمول ترین تگهای META را می بینید:
<head>
<title>عنوان صفحه</title>
<meta name=" " content=" ">
</head>

* شناسه name :
مشخص کننده نوع متا تگی است که شما قصد استفاده از آن را دارید.
* شناسه content :
تعیین کننده محتویات متا تگ برای موتورهای جستجو است.

در این بخش به توضیح دو متا تگ که برای موتورهای جستجو اهمیت بیشتری دارند می پردازیم.
META Keywords
<meta name="keywords" content="متا تگ, موتور جستجو">



* "name="keywords
این فرمان برنامه اسپایدر موتورهای جستجو را از وجود یک دسته از کلمات کلیدی این صفحه در این تگ آگاه می کند.
* "متا تگ، موتور جستجو"=content
این قسمت لیستی از کلمات کلیدی موجود در این صفحه است. در این قسمت برای جدا کردن کلید واژه ها از یکدیگر از علامت کاما استفاده می شود.

توجه داشته باشید که نباید یک کلید واژه را چندین بار تکرار کنید و کلی واژه ها باید با متن شما در صفحه مربوطه ارتباط باشند. موتورهای جستجو معمولاً رتبه بندی صفحاتی را که در آنها با تکرار بیش از حد یک کلید واژه یا ذکر کلید واژه ای که با متن صفحه ارتباطی ندارد سعی می شود رتبه بالایی را به دست بیاورند، متوقف می کنند.


META Description

این تگ محتویات صفحه را توصیف می کند.
<meta name="description" content="افزودن متا تگ به صفحه">

* "name="description
این بخش توضیحی در باره صفحه برای برنامه اسپایدر موتورهای جستجو است.
* "افزودن متا تگ به صفحه"=content
این بخش توصیفی است که شما از صفحه خود می نویسید. در این قسمت هر چیزی را که می خواهید درباره صفحه خود توضیح دهید، همچنین می توانید از یک دو تا از کلید واژه ها هم استفاده کنید. بسیاری از موتورهای جستجو این قسمت را در لیست نتایج جستجو به عنوان توضیح صفحه نشان می دهند.

دو متا تگ ذکر شده در بالا از بقیه متا تگها پر کاربرد تر هستند. متا تگ های دیگری هم وجود دارند که در زیر به برخی از آنها اشاره می شود:
<meta name="author" content="نام نویسنده صفحه">

این تگ به شما اجازه می دهد که نویسنده صفحه را مشخص کنید. فقط نام نویسنده را در این تگ بنویسید تا هر کسی که کدهای HTML این صفحه را می بیند، بداند چه کسی این صفحه را نوشته است. موتور های جستجو معمولاً از این تگ برای رتبه بندی صفحات استفاده نمی کنند.
<meta name="generator" content="نام برنامه مورد استفاده شما">

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

تغییر مسیر بازدید کنندگان پس از مدت مشخص با HTML

اگر صفحه شما جابجا شد یا به هر دلیلی خواستید مسیر بازدیدکنندگان خود را تغییر دهید می توانید از تگ meta refresh برای بردن بازدید کنندگان به صفحه مورد نظرتان استفاده کنید. البته در استفاده از این روش برای تغییر مسیر بازدید کنندگان، مخصوصاً در صفحه اصلی سایت خود باید به این نکته توجه کنید که برخی از موتورهای جستجو به دنبال تگهای meta refresh می گردند که بازدید کنندگان را از یک صفحه که با کلمات کلیدی پر شده است، به صفحه واقعی می برند که ممکن است در آن از کلمات کلیدی استفاده نشده باشد و در نتیجه با موضوع مورد نظر بازدید کننده مرتبط نباشد. بنابراین تغییر مسیر بازدید کننده از یک صفحه با سرعت زیاد (معمولاً کمتر از 10 ثانیه) ممکن است باعث شود این صفحه در لیست موتور جستجو قرار نگیرد. البته اگر این صفحه صفحه اصلی سایت شما نباشد ممکن است نخواهید در لیست موتور جستجو قرار گیرد.

بسیار خوب، کد زیر را می توان برای تغییر مسیر بازدید کننده استفاده کرد:
<html>
<head>
<meta http-equiv="refresh" content="3;url=http://www.yoursite.com/destinationpage.htm">
<title>این صفحه جا به جا شده است</title>
</head>
<body>
متن مورد نظر شما
</body>
</html>

برای مشاهده نتیجه، لینک زیر را کلیک کنید:

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

این نکته را مد نظر داشته باشید که تگ Meta refresh قبل از عنوان صفحه (TITLE) نوشته می شود.

فرمان " "=content دو کار را انجام می دهد. اول مشخص می کند که مرورگر قیل از تغییر مسیر چند ثانیه باید صبر کند. دوم آدرس صفحه ای که باید مسیر به آن آدرس تغییر یابد. به این نکته توجه کنید که هر دو قسمت زمان و آدرس صفحه در یک جفت دابل کوت قرار دارند نه دو جفت. برای جدا کردن این دو قسمت باید از نقطه ویرگول ( استفاده کرد.

در بخش BODY هم ر چیزی که بخواهید می توانید بنویسید. همچنین می توانید برای کاربرانی که از مرورگرهای قدیمی استفاده می کنند یک لینک را قرار دهید تا به صورت دستی به صفحه جدید وارد شوند.
<html>
<head>
<meta http-equiv="refresh" content="3;url=http://www.yoursite.com/destinationpage.htm">
<title>این صفحه جا به جا شده است</title>
</head>
<body>
این صفحه جا به جا شده است. اگر مرورگر شما به صورت اتوماتیک به صفحه جدید نرفت <a
href="http://www.yoursite.com/destinationpage.htm">اینجا</a> را کلیک کنید تا به صورت دستی به صفحه جدید وارد شوید
</body>
</html>

شناسه های مختلف قابل استفاده برای خط افقی

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

* width :
این فرمان مقدار عرض خط افقی را مشخص می کند. ر این فرمان شما می توانید از مقیاس پیکسل یا درصد استفاده کنید. گزینه پیش فرض برای این فرمان 100% است.
* "align="left :
این فرمان سمت قرار گرفتن خط افقی را مشخص می کند. شما می توانید خط را به صورت چپ چین، راست چین و در مرکز صفحه قرار دهید. گزینه پیش فرض این فرمان center است که خط را در مرکز صفحه قرار می دهد. البته زمانی این وضعیت مشخص می شود که عرض خط افقی کمتر از عرض صفحه باشد.
* "size="3 :
این فرمان اندازه خط را مشخص می کند. اندازه پیش فرض برای خط 2 است.
* "noshade="noshade :
این فرمان خط را به صورت تو پر نشان می دهد.

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

---------------------------------------------------------------------------------------------------------------
<hr width="250">

با این فرمان خطی افقی مانند زیر خواهید داشت:

---------------------------------------------------------------------------------------------------------------
<hr width="250" align="right">

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

---------------------------------------------------------------------------------------------------------------
<hr width="250" size="10">

با این تگ یک خط افقی با عرض 250 پیکسل و پهنای 10 خواهید داشت:

---------------------------------------------------------------------------------------------------------------

حالا یک اندازه بزرگ را برای پهنای خط انتخاب می کنیم، مثلاً 80 ، نتیجه به این صورت خواهید بود:

همانطور که ملاحظه می کنید، خط به صورت تو خالی و مانند یک حباب به نظر می رسد.

حالا اگر از فرمان noshade استفاده کنید، خط به صورت تو پر نمایش داده می شود:
<hr width="250" noshade="noshade">

این بار با اندازه 80 این تگ را امتحان می کنیم:
<hr width="250" size="80" noshade>

---------------------------------------------------------------------------------------------------------------

در برخی مرورگرها مانند اینترنت Internet Explorer 4.0 به بعد و Mozilla Firefox امکان تغییر رنگ خط نیز وجود دارد. اما ممکن است این رنگ در همه مرورگرها مثلاً Opera 9.0 قابل مشاهده نباشد و خط به رنگ پیش فرض مشاهده شود.

در این قسمت اگر با مرورگری مثل اینترنت اکسپلورر صفحه را مشاهده می کنید، می توانید خطی را به رنگ زرد مشاهده کنید اما اگر با مرورگری مثل Opera این صفحه را مشاهده می کنید، خط زیر را به رنگ خاکستری (رنگ پیش فرض) خواهید دید.
<hr width="250" size="20" color="yellow" noshade>

تنظیم قلم مورد استفاده برای متن در HTML

اگر تمایل دارید شکل فونت متن خود را در یک صفحه تغییر دهید، می توانید این کار را با استفاده از تگ font انجام دهید.( این روش تأثیری بر تصاویر موجود در صفحه شما ندارد).

با افزودن این شناسه: " "=face به تگ فونت می توانید شکل آنرا تغییر دهید. به یک مثال توجه کنید:
<font face="Times New Roman">This line is Written by Times New Roman font face</font>

این هم متن نوشته شده با فونت Times New Roman:

This line is Writen by Times New Roman font face

البته نکاتی هست که باید به آنها توجه کنید:

1.

افرادی که صفحه شما را تماشا می کنند برای اینکه بتوانند صفحه را با فونتی که شما برای آن تنظیم کرده اید ببینند باید حداقل مرورگر اینترنت اکسپلورر یا نت اسکیپ 3 به بالا داشته باشند.(زیاد نگران این قسمت نباشید، اکنون تقریباً تمامی کاربران مرورگرهای جدیدتری دارند)
2.

افراد بیننده صفحه شما باید فونت مورد استفاده شما را قبلاً نصب کرده باشند تا بتوانند صفحه شما را به خوبی مشاهده کنند.
وقتی شما در صفحه خود می خواهید از یک فونت خاص استفاده کنید مراقب باشید و فونتی را استفاده کنید که بیشتر افراد به صورت پیش فرض داشته باشند. برای مثال وقتی ویندوز XP را نصب می کنید چندین فونت به صورت خودکار بر روی کامپیوتر شما نصب می شوند. مثلاً Tahoma, Arial, Times New Roman و چندین فونت دیگر.

قابل ذکر است که اگر بیننده شما فونت مورد استفاده شما را نداشته باشد مرورگر به طور خودکار از فونت پیش فرض خود که به طور معمول Times New Roman است استفاده می کند.

در اینجا لیستی از فونتهایی که زیاد مورد استفاهد قرار می گیرد آورده شده است که می تواندی با شناسه " "=face استفاده کنید:
متن نمونه برای زبان فارسی Arial Arial
متن نمونه برای زبان فارسی Tahoma Tahoma
متن نمونه برای زبان فارسی Times New Roman Times New Roman
متن نمونه برای زبان فارسی Arial Black Arial Black
متن نمونه برای زبان فارسی Courier Courier
متن نمونه برای زبان فارسی Courier New Courier New
متن نمونه برای زبان فارسی Modern Modern
متن نمونه برای زبان فارسی Terminal Terminal
متن نمونه برای زبان فارسی Symbol Symbol

البته باید توجه داشته باشید که اگرچه تگ <font> هنوز در HTML4.01 کارایی دارد ولی استفاده از این تگ توصیه نمی شود. بهتر است برای تنظیم فونت متن خود از CSS استفاده کنید.

مشاهده صفحات لینک شده در پنجره جدید

برای اینکه یک لینک را وادار کنیم که در یک صفحه جدید باز شود، باید این شناسه را به تگ لینک اضافه کنیم: "target="_blank
تگ لینک به این صورت به نظر می رسد:
<a href="http://www.neopersia.org/" target="_blank">آموزش طراحی صفحات وب </a>

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

آموزش CSS

شما می توانید از این روش برای باز کردن تصاویر در یک پنجره جدید استفاده کنید.
به این منظور می توانید به صورت زیر عمل کنید:
<a href="http://learn_html.gif" target="_blank">
<img src="learn_html.gif">
</a>

در اینجا یک تصویر داریم که با کلیک کردن بر روی آن تصویر در پنجره جدید باز می شود.
می توانید آنرا امتحان کنید:

Learn HTML with NeoPersia.org

شناسه target مقادیر دیگری هم می تواند داشته باشد. برای مثال از top_ برای باز کردن لینک در تمام پنجره استفاده می شود. البته در صورتی که صفحه در فریم استفاده نشده باشد این top_ تأثیر و کاربردی ندارد بیشتر کارایی آن هنگامی است که صفحه در یک فرم قرار دارد و شما نمی خواهید لینک در همان فرم باز شود.

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

ایجاد متن های متحرک در صفحه HTML

تگ <marquee> به شما اجازه می دهد که یک متن را به دلخواه خود در صفحه به حرکت در آورید. برای انجام این کار به جاوا اسکرپت نیاز ندارید. تنها مشکل این است که مرورگرهایی که بر پایه Netscape ساخته شده اند، نمی توانند به طور کامل با این تگ سازگار شوند و در پاره ای از اوقات با آن مشکل پیدا می کنند و تنها متن بدون حرکت را نشان می دهند.

در اینجا می توانید کدی را که برای ساخت متن متحرک ستفاده می شود مشاهده کنید:
<marquee loop="infinite">متن مورد نظر خود را اینجا بنویسید</marquee>

می خواهید ببینید چگونه کار می کند:

متن مورد نظر خود را اینجا بنویسید

شناسه "loop="infinte باعث می شود که متن تا هنگامی که صفحه باز است به حرکت خود ادامه دهد. شما می توانید به جای این شناسه از "loop="-1 هم استفاده کنید.

شما می توانید تغییراتی را در این تگ ایجاد کنید به جای infinite در شناسه loop می توانید از اعداد استفاده کنید. برای مثال "loop="2 به مرورگر می گوید که حرکت متن را پس از دو بار چرخش متوقف کند.

می توانید با وارد کردن شناسه " "=bgcolor به شما امکان این را می دهد که رنگ زمینه محلی را که متن در آن در حال چرخش است تغییر دهید. می توانید برای تغییر رنگ زمینه از نام رنگ یا معادل هگزادسیمال آنها استفاده کنید. به یک مثال توجه کنید:
<marquee loop="infinite" bgcolor="yellow">
متن مورد نظر خود را اینجا بنویسید
</marquee>

و این هم نتیجه این تگ:

متن مورد نظر خود را اینجا بنویسید

با اضافه کردن شناسه " "=width می توانید عرض متن متحرک خود را تعیین کنید. در این شناسه می توانید از مقیاس پیکسل و یا در صد استفاده کنید.
<marquee loop="infinite" bgcolor="yellow" width="400">
متن مورد نظر خود را اینجا بنویسید
</marquee>

با تگ بالا می توانید یک متن متحرک با عرض 400 پیکسل و رنگ زمینه زرد ایجاد کنید. مانند زیر:

متن مورد نظر خود را اینجا بنویسید


<marquee loop="infinite" bgcolor="yellow" width ="50%">
متن مورد نظر خود را اینجا بنویسید
</marquee>

با تگ بالا می توانید متنی متحرک با 50 در صد عرض پنجره مرورگر و با رنگ زمینه زرد ایجاد کنید. مانند زیر:

متن مورد نظر خود را اینجا بنویسید

آموزش ساختن جدول در طراحی صفحه با HTML

آیا شما می خواهید یک جدول (table) در صفحه خود ایجاد کنید؟ برای ایجاد یک جدول باید از این تگ استفاده کنید:
<table>
........محتویات جدول.......
</table>

برای ایجاد یک جدول باید تگ ابتدایی آن یعنی <table> را در جایی که می خواهید جدول وارد شود، قرار دهید. و در پایان جدول هم از تگ پایانی آن یعنی <table/> استفاده کنید.
برای افزودن محتویات به جدول باید از تگ <td> استفاده کنید. نام این تگ مخفف table data است. محتویات جدول چیزهایی هستند که شما بعد از این تگ قرار می دهید. در پایان هم باید پس از محتویات جدول از تگ پایانی <td/>قبل از تگ پایانی جدول استفاده کنید. مانند زیر:
<table>
<td>
........محتویات جدول......
</td>
</table>

جدول به دست آمده مانند زیر به نظر می رسد:

........محتویات جدول......

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

می توانیم برای جدول کادر (border) هم تعریف کنیم. برای این کار باید شناسه مربوطه را در تگ جدول قرار دهیم. مانند زیر:
<table border="3">
<td>
........محتویات جدول......
</td>
</table>

حالا جدول ما کمی مشخص تر شد، به آن نگاه کنید:
........محتویات جدول......

شما می توانید ضخامت کادر جدول را به دلخواه خود تغییر دهید. برای این کار فقط کافی است تا عددی را که به عنوان مقدار شناسه border به کار بردیم، تغییر دهید. اگر مقدار این عدد را صفر قرار دهید کادر دیده نخواهد شد.

تا اینجا هر چه گفتیم درباره جدولی با یک سلول بود. برای اینکه جدولی با تعداد بیشتری سلول داشته باشیم، مثلاً بخواهیم یک سلول دیگر در همان خط ایجاد کنیم، باید دوباره از تگ td استفاده کنیم. مانند زیر:
<table border="3">
<td>
سلول اول
</td>
<td>
سلول دوم
</td>
</table>

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

حالا فرض کنید می خواهیم به خط بعدی یا به اصطلاح به ردیف بعدی برویم. برای این کار باید از تگ tr استفاده کنیم. این تگ با <tr> شروع و با <tr/> پایان می پذیرد. مانند زیر:

<table border="3">
<td>
سطر اول و سلول اول
</td>
<td>
سطر اول و سلول دوم
</td>
<tr>
<td>
سطر دوم و سلول اول
</td>
<td>
سطر دوم و سلول دوم
</td>
</tr>
</table>

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

سطر اول و سلول اول سطر اول و سلول دوم
سطر دوم و سلول اول سطر دوم و سلول دوم



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

* cellspacing :
برای ایجاد فاصله بین سلولها عدد مورد نظر خود را در این فرمان وارد کنید.
* cellpadding :
از این فرمان برای افزودن فضا به داخل یک سلول استفاده کنید. مقدار فضای مورد نظر خود را در این فرمان وارد کنید.

فرض کنید می خواهیم در مثال قبل بین سلولها یک فاصله به اندازه 10 ایجاد کنیم. تگ جدول را مطابق زیر تغییر می دهیم:
<table border="3" cellspacing="10">

جدول به دست آمده به شکل زیر خواهد بود:
سطر اول و سلول اول سطر اول و سلول دوم
سطر دوم و سلول اول سطر دوم و سلول دوم

حالا فرض کنید می خواهیم یک فاصله به اندازه 10 را به داخل سلولهای جدول مثال قبل اضافه کنیم. تگ جدول را به این صورت تغییر می دهیم:
<table border="3" cellpadding="10">

جدول به دست آمده به صورت زیر خواهد بود:
سطر اول و سلول اول سطر اول و سلول دوم
سطر دوم و سلول اول سطر دوم و سلول دوم

حالا می خواهیم هر دو مثال قبل را با هم امتحان کنیم، یعنی تگ جدول را مطابق زیر تغییر دهیم:
<table border="3" cellspacing="10" cellpadding="10">

نتیجه را ملاحظه کنید:
سطر اول و سلول اول سطر اول و سلول دوم
سطر دوم و سلول اول سطر دوم و سلول دوم

شما می توانید هر چیزی را که بخواهید داخل سلولها وارد کنید. مانند عکس، لینک، پاراگراف و...
برای این کار فقط کد مورد نظر خود را بین تگ <td> و <td/> وارد کنید. برای مثال فرض کنید می خواهیم یک لینک در جدول ایجاد کنیم. مانند زیر عمل می کنیم:
<table border="2">
<td>
<a href="../javascript/index.html">آموزش جاوا اسکرپت</a>
</td>
</table>

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

برای وارد کردن عکس نیز می توانیم به این صورت عمل کنیم:
<table border="2">
<td>
<img src="learn_html.gif">
</td>
</table>

این هم نتیجه کد:
اصول کار با جدولها

برای ادامه معرفی خواص جدولها با ما به بخش بعدی بیایید.

جداول 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>

این هم جدول به دست آمده:
صورتی این ردیف صورتی است
خاکستری این ردیف خاکستری است

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

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

برای حل این مشکل می توانید دو جدول مورد نظر را در یک جدول که آنها را در بر می گیرد قرار دهیم. در این صورت می توان دو جدول در یک سطر ایجاد کرد.

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

بهتر است در هنگام نوشتن کدها عرض جدولها را مشخص کنید تا در پایان به هم ریخته نباشند.

با این روش می توانید هر تعداد جدول که نیاز داشته باشید در کنار هم قرار دهید.

اصول طراحی صفحات حاوی فریم -- بخش اول

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

ایجاد صفحات با استفاده از فریمها

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

برای ایجاد فریم در یک صفحه به جای تگ body از تگ frameset استفاده می کنیم. می توانیم برای ساخت صفحه ای که فریمها در آن قرار می گیرند از کد زیر استفاده کنیم:
<html>
<head>
<title>نمایش یک فریم ساده</title>
</head>
<frameset cols="50%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
</html>

در اینجا به وظیفه تگهای مورد استفاده در اینجا می پردازیم:

* <FRAMESET> :
این تگ به مرورگر می گوید که به جای یک صفحه معمولی منتظر یک دسته فرم باشد.
* "cols="50%,50% :
این فرمان به مرورگر می گوید که صفحه را به دو قسمت عمودی تقسیم کند و پهنای هر کدام از این قسمتها نیمی از پهنای پنجره باشد. شما می توانید این نسبت را تغییر دهید یا به جای درصد از مقیاس پیکسل استفاده کنید. اما اگر می خواهید از مقیاس درصد استفاده کنید فراموش نکنید که از نشانه درصد یعنی % در بعد از هر عدد استفاده کنید. اگر فقط برای یکی از اعداد علامت درصد استفاده کنید مرورگر عدد دیگر را در مقیاس پیکسل فرض می کند.
* <"FRAME SRC="frame_1.htm> :
این فرمان آدرس صفحهء اولین فریم از سمت چپ را برای مرورگر مشخص می کند.
* <"FRAME SRC="test2.htm> :
این فرمان آدرس صفحه بعدی را برای فریم بعدی از سمت چپ مشخص می کند.

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

<html>

<head>
<title>نمایش سه فریم در یک صفحه </title>
</head>
<frameset cols="33%,33%,33%">
<frame src="page1.htm">
<frame src="page2.htm">
<frame src="page3.htm">
</frameset>

</html>

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

سه فریم در یک صفحه

فرض کنید می خواهیم فریمها را به صورت عمودی و زیر یکدیگر در صفحه قرار دهیم. در این صورت باید به جای شناسه cols در تگ frameset از شناسه rows استفاده کنیم.

به کد زیر توجه کنید:

<html>

<head>
<title>نمایش فریمها به صورت افقی و عمودی</title>
</head>
<frameset cols="50%,50%">
<frame src="page1.htm">
<frameset rows="50%,50%">
<frame src="page2.htm">
<frame src="page3.htm">
</frameset>
</frameset>

</html>

لینک زیر را برای مشاهده نتیجه کلیک کنید:

فریمها به صورت افقی و عمودی

1.

ما با اوین تگ frameset به مرورگر می گوییم که صفحه را به دو قسمت ( دو ستون ) تقسیم کند.
2.

<"FRAME SRC="page1.htm> به مرورگر می گوید که ستون اول از سمت چپ باید با صفحه page1.htm پر شود.
3.

تگ frameset دوم درون تگ frameset اول قرار دارد. این تگ به مرورگر می گوید که ستون دوم را به دو ردیف افقی تقسیم کند. ( فریم دوم از سمت چپ خود به دو فریم تبدیل می شود )
4.

تگ <"FRAME SRC="page2.htm> به مرورگر می گوید که بالاترین فریم قرار گرفته در ستون دوم صفحه را با صفحه page2.htm پر کند.
5.

تگ <"FRAME SRC="page3.htm> به مرورگر می گوید که دومین فریم از بالا را در ستون دوم صفحه با صفحه page3.htm پر کند.

در پایان فراموش نکنید که همه تگهای frameset باز شده را در پایان ببندید.

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

حالا شما می توانید یک صفحه با استفاده از فریمها بسازید. اما وقتی که شما یک لینک را در یک فریم قرار می دهید پس از کلیک کردن لینک در همان فریم باز می شود. این مسأله به این دلیل است که هر فریم یک صفحه 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>

حالا کاربرانی که نمی توانند فریمها را مشاهده کنند پیغام شما را به جای یک صفحه خالی می بینند.

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

اگر شما می خواهید در صفحه خود از فریمهای نامرئی استفاده کنید، یعنی نمی خواهید خط حاشیه فریمها قابل دیدن باشد باید چند فرمان را به تگ <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
این شناسه باعث می شود در صورتی که محتویات فریمها از اندازه پنجره بزرگتر بود نوار اسکرول بار نمایش داده نشود.

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

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

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

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

با قرار دادن این تگ در کد 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 در تگ فریم استفاده کنید تا در فریم اسکرول بار نداشته باشید.

رویدادهای مربوط به پنجره مرورگر و فرمها در 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>

رویدادهای مربوط به صفحه کلید و ماوس در 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('متن پیام') تابع جاوا اسکرپتی است که در صفحه مثال تعریف شده است. به جای آن می توانید از کدهای دیگری استفاده کنید.

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

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

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

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

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