آموزی زبان HTML با شیوه Encoding

سیناساندیس · 15 سپتامبر 2012

در تگ <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

سیناساندیس · 15 سپتامبر 2012

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

سیناساندیس · 15 سپتامبر 2012

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

سیناساندیس · 15 سپتامبر 2012

برای ساختن گزینه هایی که در لیست نمایش داده می شود باید از تگ <option> استفاده کنیم. با استفاده از مقداری که برای این تگ با استفاده از شناسه value تعریف می کنیم می توانیم در اطلاعات ارسال شده فرم گزینه انتخاب شده توسط بازدید کننده را تشخیص دهیم.
برای تگ <option> هم می توانید از شناسه هایی استفاده کنید که در این جا مشاهده می کنید:
value :
این گزینه مشخص کننده متنی است که در صورت انتخاب شدن گزینه مربوطه به عنوان مقدار لیست کشویی به صفحه action ارسال می شود.
"selected="selected :
از این گزینه برای مشخص کردن گزینه ای که به هنگام باز کردن صفحه به صورت پیش فرض انتخاب شده است استفاده می شود. در صورتی که برای هیچکدام از گزینه های موجود در لیست از این شناسه استفاده نشده باشد گزینه اول به عنوان گزینه پیش فرض استفاده می شود.
استفاده از رویداد های زیر در تگ <option> مجاز است:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

sasy23 · 16 سپتامبر 2012

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

okhpatoos · 17 سپتامبر 2012

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

خب اونجوری دیگه نمیتونن سریع از حالت نیویوزری درآن! :lol:

okhpatoos · 17 سپتامبر 2012

تگ DOCTYPE آیا تا کنون دقت کرده اید که برنامه های ویرایشگر اچتمل مانند دریم ویور و فرانت پیج در ابتدای صفحات ، یک تگ DOCTYPE قبل از تگ html مینویسند که برداشتن آن نیز تاثیر خاصی در صفحه ندارد ؟

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

اما کار این تگ چیست ؟ این خط به برنامه مرورگر می فهماند که شما قصد استفاده از HTML نسخه 4 را برای طراحی صفحه وب خود دارید . در صورتی که بخواهید از XHTML جهت طراحی صفحه وب خود استفاده کنید باید کد فوق را کمی تغییر دهید . پس چرا حذف آن تاثیری در صفحه وب ما ندارد ؟ این کد در ایجاد صفحات HTML اختیاری و در صفحات XHTML اجباری است . اگر این تگ را به همراه یک URL در بالای صفحه وب خود اعلان کنید ، سبب میشود که برنامه های مرورگر فعلی ، هنگام باز کردن صفحه شما در مد standards کنار کنند . بدین صورت میتوانید کدهای خود را مطابق استاندارد نوشته و کنترل بیشتری بر چگونگی نمایش این صفحه در برنامه های مرورگر مختلف داشته باشید. در صورت نگذاشتن این کد ، مرورگر از روش های قدیمی تر برای نمایش صفحه شما استفاده می کند . یک مثال عملی :در هنگام تعیین رنگ با شماره های هگزادسیمال ، یک علامت شارپ (#) در ابتدای شماره رنگ قرار میگیرد که حذف آن باعث نادیده گرفتن این رنگ در زمان نمایش صفحه میشود . اما اگر کد DOCTYPE را از ابتدای صفحه پاک کنید ،مرورگرتان از این مورد ایراد نمی گیرد و آن رنگ را نشان میدهد . برای تست این مثال از مرورگر فایرفاکس استفاده کنید . چون مرورگر Internet Explorer بطور معمولی هم از حذف علامت # ایراد نمی گیرد و ممکن است شما فکر کنید علامت # اختیاری است !

okhpatoos · 17 سپتامبر 2012

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

okhpatoos · 17 سپتامبر 2012

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

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

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')" />

okhpatoos · 17 سپتامبر 2012

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

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

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

okhpatoos · 17 سپتامبر 2012

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

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

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

okhpatoos · 17 سپتامبر 2012

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

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

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

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

okhpatoos · 17 سپتامبر 2012

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

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

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

okhpatoos · 17 سپتامبر 2012

برای اینکه یک لینک را وادار کنیم که در یک صفحه جدید باز شود، باید این شناسه را به تگ لینک اضافه کنیم: "target="_blank
تگ لینک به این صورت به نظر می رسد:
<a href="http://www.night-skin.com/" target="_blank">آموزش طراحی صفحات وب </a>
لینک شما در صفحه نهایی به صورت زیر مشاهده می شود. می توانید روی آن کلیک کنید و مطمئن این صفحه را از دست نخواهید داد، چون لینک در یک پنجره جدید باز خواهد شد.
شما می توانید از این روش برای باز کردن تصاویر در یک پنجره جدید استفاده کنید.
به این منظور می توانید به صورت زیر عمل کنید:
<a href="http://learn_html.gif" target="_blank">
<img src="learn_html.gif">
</a>
شناسه target مقادیر دیگری هم می تواند داشته باشد. برای مثال از top_ برای باز کردن لینک در تمام پنجره استفاده می شود. البته در صورتی که صفحه در فریم استفاده نشده باشد این top_ تأثیر و کاربردی ندارد بیشتر کارایی آن هنگامی است که صفحه در یک فرم قرار دارد و شما نمی خواهید لینک در همان فرم باز شود.
البته وقتی صفحه در فریم قرار دارد، در صورتی که سایر فریمهای پنجره نام گذاری شده باشند می توان از نام آن فریمها در شناسه targrt استفاده کرد تا لینک در آن فریمی که نام آنرا به کار برده اید باز شود نه در فریمی که خود آن قرار دارد.

okhpatoos · 17 سپتامبر 2012

تگ <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

okhpatoos · 17 سپتامبر 2012

آیا شما می خواهید یک جدول (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

okhpatoos · 17 سپتامبر 2012

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

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

okhpatoos · 17 سپتامبر 2012

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

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

okhpatoos · 17 سپتامبر 2012

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

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

ما با اوین تگ frameset به مرورگر می گوییم که صفحه را به دو قسمت ( دو ستون ) تقسیم کند.
<"FRAME SRC="page1.htm> به مرورگر می گوید که ستون اول از سمت چپ باید با صفحه page1.htm پر شود.
تگ frameset دوم درون تگ frameset اول قرار دارد. این تگ به مرورگر می گوید که ستون دوم را به دو ردیف افقی تقسیم کند. ( فریم دوم از سمت چپ خود به دو فریم تبدیل می شود )
تگ <"FRAME SRC="page2.htm> به مرورگر می گوید که بالاترین فریم قرار گرفته در ستون دوم صفحه را با صفحه page2.htm پر کند.
تگ <"FRAME SRC="page3.htm> به مرورگر می گوید که دومین فریم از بالا را در ستون دوم صفحه با صفحه page3.htm پر کند.

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

okhpatoos · 17 سپتامبر 2012

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

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

آموزی زبان HTML با شیوه Encoding

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

تبلیغات متنی