آموزش مقدماتی HTML

قسمت چهارم:

ی) فريمها ( Frames )

با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. در اين درس با مفاهيم فريم ( Frame ) و تگ های مربوطه مخصوصا تگهای Frame و Frameset آشنا خواهيد شد.

فريمها ( Frames ):

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

معايب استفاده از فريمها:

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

تگ فريم (Frame) :

کاربرد اصلی تگ <frame> تعيين source يا نام صفحه ای است که بايد در فريم ها نمايش داده شود.

مثال زير مجموعه ای از فريمها را که شامل دو فريم عمودی ميباشند معرفی ميکند. از سمت چپ فريم اول 75 درصد و فريم دوم 25 درصد از عرض پنجره مرورگر را به خود نمايش خواهند داد. در ادامه تعريف محتويات هر فريم، درون فريم اول فايل "frame_left.html" و درون فريم دوم فايل "frame_right.html" نمايش داده خواهد شد.

<html>

<frameset cols="75%,25%">

<frame src="frame_left.html">

<frame src="frame_right.html">

</frameset>

</html>

برای نمايش مثال بالا به سه فايل نياز داريد، frame_left.html ،frame_right.html و فايل کد اچتمل بالا.

شناسه های cols و rows در تگ frameset

شناسه	مقدار شناسه	کارکرد
cols	عرض پنجره بر اساس پيکسل، درصد يا علامت *	تعيين تعداد و اندازه ستونها در فريم ست
rows	عرض پنجره بر اساس پيکسل، درصد يا علامت *	تعيين تعداد و اندازه رديفها در فريم ست

مثالهای زير را در نظر بگيريد:

مثال 1

مثال 2

<html>

<frameset cols="*,200">

<frame src="frame_2.html">

<frame src="frame_1.html">

</frameset>

</html>

<html>

<frameset cols="25%,50%,25%">

   <frame src="frame_3.html">

   <frame src="frame_2.html">

   <frame src="frame_1.html">

</frameset>

</html>

در مثال يک عرض فريم اول از سمت راست 200 پيکسل تعيين شده و بقيه عرض پنجره که با علامت * مشخص ميشود به فريم دوم اختصاص خواهد يافت.

در مثال دوم عرض پنجره با مقادير درصدی به فريمها اختصاص يافته است.

در مورد شناسه rows دقيقا قراردادهای بالا برقرارند.

نکات کاربردی:

* اگر فريمهای طراحی شده مرزهای قابل مشاهده دارند توسط کاربر قابل تغيير اندازه (resize) خواهند بود و برای جلوگيری از تغيير اندازه فريمها توسط کاربر بايد از شناسه ای به نام noresize در داخل تگ <frame> استفاده شود.

* اگر ميخواهيد که فريمها scroll نشوند (بالا و پايين بردن صفحه توسط ماوس) بايد در تگ frame مقدار شناسه scrolling را برابر "no" قرار دهيد. (مقادير ممکن "yes" ، "no" و "auto" ميباشند.)

* اگر ميخواهيد که مرز بين فريمها نمايش داده نشوند بايد در تگ frame مقدار شناسه frameborder را برابر "0" قرار دهيد.

* درصد بسيار کمی از مرورگرها از تگهای مربوط به frame و frameset پشتيبانی نميکنند. برای اين موارد بايد از تگ <noframes> جهت نمايش صفحه جايگزين استفاده شود.

تگ های فریم

Start Tag	Purpose	کاربرد
<frameset>	Defines a set of frames	تعريف مجموعه ای از فريم ها
<frame>	Defines a sub window (a frame)	تعريف يک فريم
<noframes>	Defines a noframe section for browsers that do not handle frames	تعريف جايگزين برای مرورگرهائي که از فريم ها پشتيبانی نميکنند.
<iframe>	Defines an inline sub window (frame)	تعريف فريم های درجا (inline)

مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها

ک) فهرستها ( Lists )

اين درس شما را با نحوه نمايش انواع فهرستها شامل فهرستهای مرتب(ordered) ، نامرتب(unordered) و فهرستهای تعريفی(definition lists) و تگ های مربوطه يعنی li ، ol ، ul ، dl ، dt و dd آشنا خواهد کرد.

فهرستهای نامرتب(unordered list)

فهرستهائی هستند از يک يا چند قلم اطلاعات که معمولا با دايرهای کوچک و سياه رنگ در شروع نمايش داده ميشوند. يک فهرست از نوع نامرتب با تگ <ul> شروع شده و هر رقم اطلاعات با تگ <li> مشخص ميگردد.

نمايش توسط مرورگر

HTML code

Red
Blue
Green

<ul>

<li>Red</li>

<li>Blue</li>

<li>Green</li>

</ul>

قهوه
شير
چای

<ul dir="rtl" >

<li>قهوه</li>

<li>شير</li>

<li>چای</li>

</ul>

داخل تگهای <li> ميتوانيد از پاراگرافها، تگهای br ، تصاوير و حتي فهرستهای ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به فهرستها ممکن ميباشد.

فهرستهای مرتب(ordered list)

اين نوع فهرست بسيار شبيه فهرستهای نامرتب بوده و فقط مرورگر به هنگام نمايش اقلام اطلاعاتی از اعداد به جای دايره های کوچک سياه رنگ استفاده ميکند. يک فهرست از نوع مرتب با تگ <ol> شروع شده و همانند فهرستهای نامرتب هر رقم اطلاعات با تگ <li> مشخص ميگردد.

نمايش توسط مرورگر

HTML code

Red
Blue
Green

<ol>

<li>Red</li>

<li>Blue</li>

<li>Green</li>

</ol>

قهوه
شير
چای

<ol dir="rtl" >

<li>قهوه</li>

<li>شير</li>

<li>چای</li>

</ol>

فهرستهای تعريفی(definition list)

فهرست تعريفی فهرستی است از اصطلاح ها و تشريح و توصيف آنها.

فهرستهای تعريفی با <dl> شروع شده و هر ذوج اصطلاح و تعريف مربوط به آن با تگهای <dt> و <dd> تعريف ميشوند.

نمايش توسط مرورگر

HTML code

HTTP

Hypertext Transfer Protocol

FTP

File Transfer Protocol

Internet Protocol

<dl>

<dt>HTTP</dt>

<dd>Hypertext Transfer Protocol</dd>

<dt>FTP</dt>

<dd>File Transfer Protocol</dd>

<dt>IP</dt>

<dd>Internet Protocol</dd>

</dl>

مقدمه

خلاصه ای از مقدمه

فصل 1

خلاصه ای از فصل1

فصل 2

خلاصه ای از فصل2

<dl dir="rtl" >

<dt >مقدمه</dt>

<dd>خلاصه ای از مقدمه</dd>

<dt>فصل 1</dt>

<dd>خلاصه ای از فصل 1</dd>

<dt>فصل 2</dt>

<dd>خلاصه ای از فصل 2</dd>

</dl>

داخل تگهای تشريح يعنی <dd> ميتوانيد از پاراگرافها، تگهای br ، تصاوير و حتي فهرستهای ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به فهرستها ممکن ميباشد.

تگ های فهرست

Start Tag	Purpose	کاربرد
<ol>	Defines an ordered list	تعريف فهرستهای مرتب
<ul>	Defines an unordered list	تعريف فهرستهای نامرتب
<li>	Defines a list item	تعريف يک آيتم و قلم از يک فهرست
<dl>	Defines a definition list	تعريف فهرستهای تعريفی
<dt>	Defines a definition term	تعريف اصطلاح در فهرستهای تعريفی
<dd>	Defines a definition description	تعريف معنی و شرح اصطلاح در فهرستهای تعريفی

مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها

ل) فرمها ( Forms )

از طريق استفاده از عنصر <form> و چند تگ مرتبط قادر به دريافت اطلاعات از بازديدکنندگان صفحاتتان و يا تبادل اطلاعات بين صفحات مختلف خواهيد شد. با کمک اين گروه از تگ ها قادر به نمايش باکسهای ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، راديو باتونها (radio-buttons) و ... شده و همچنين امکان گذاشتن دکمه های ارسال (submit button) و يا حذف (reset) را خواهيد داشت. اين فصل با شرح تگ های form و input و ... به چگونگی ايجاد ارتباط با بازديدکنندگان و گرفتن اطلاعات از آنها بصورت لاتين و يا فارسی خواهد پرداخت.

توجه داشته باشيد که برای پردازش اطلاعات دريافتی از کاربر بايد با يکی از زبانهای cgi از قبيل ASP، perl، PHP، CFM ، JSP يا Java آشنائی داشته باشيد. مثالهای cgi مدرسه وب از ربان اسکريپت Perl استفاده ميکنند.

فرمها (Forms)

تمامی عناصر و تگهائی که تاکنون ديده ايد فقط به نمايش اطلاعات پرداخته اند و هيچکدام به گرفتن و اخذ اطلاعات از کاربر نپرداخته اند. فرمها که با تگ <form> معرفی ميشوند، طراح سايت را قادر به جمع آوری و اخذ اطلاعات از بازديدکننده سايت خواهند کرد. عنصر فرم و گروهی از عناصر و تگهای درون آن به دريافت و ارسال اطلاعات به سمت وب سرور کمک خواهند کرد و لازم به ذکر است که تمامی تگهای مربوط به فرمها بايد درون تگهای <form> و <form/> قرار ميگيرند.

درون تگ فرم گروه زيادی از عناصر و تگهای مختلف قابل استفاده هستند از قبيل عناصر ورود متن يک سطری(text fields)، عناصر ورود متنهای چند سطری (Textarea)، منوهای drop-down و radio buttons و ...

تگ Input

به عنوان پر مصرف ترين تگ مربوط به ورود اطلاعات بايد از تگ <input> نام برد. در اين تگ شناسه ای به نام type به تعيين نوع اطلاعات ورودی اختصاص دارد. مقادير ممکن برای اين شناسه به قرار زيرند:
text , checkbox , radio , password , hidden , submit , reset , button , file , image
در ادامه به شرح بعضی از type های کاربردی خواهيم پرداخت:

وروديهای متن (Text Fields)

اگر ميخواهيد که بازديدکننده اطلاعاتی از قبيل متن، اعداد و ... را وارد کند از شناسه ای با مقدار "text" استفاده ميشود.

نمايش توسط مرورگر

کد اچتمل

Top of Form

First name:
Last name:

Bottom of Form

<form>

First name:

<input type="text" name="firstname">

<br>

Last name:

<input type="text" name="lastname">

</form>

Top of Form

نـــــــــــــــام:
نام خانوادگی:

Bottom of Form

<form dir="rtl" >

نـــــــــــــــام:

<input type="text" name="firstname">

<br>

نام خانوادگی:

<input type="text" name="lastname">

</form>

توجه داشته باشيد که تگ <form> چيزی را به نمايش نخواهد گذاشت بلکه تگهای درون آن توسط مرورگر نمايش داده خواهند شد. در مثال فارسی بالا به شناسه dir و مقدار rtl آن توجه داشته باشيد.لازم به يادآوری است که اغلب مرورگرها در حالت پيش فرض برای وروديهای متن اندازه 20 کاراکتر را در نظر ميگيرند و اگر ميخواهيد که اندازه پيش فرض وروديهای متن را تغيير دهيد بايد از شناسه ای به نام size استفاده کنيد.

وروديهای Radio Buttons

اگر ميخواهيد که بازديدکننده گزينه ای را از بين چند گزينه محدود انتخاب کند، از مقدار "radio" برای شناسه type استفاده کنيد:

نمايش توسط مرورگر

کد اچتمل

Top of Form

Male
Female

<form>

<input type="radio" name="sex" value="male"> Male

<br>

<input type="radio" name="sex" value="female"> Female

</form>

Top of Form

مرد
زن

Bottom of Form

Bottom of Form

<form dir="rtl">

<input type="radio" name="sex" value="male"> مرد

<br>

<input type="radio" name="sex" value="female"> زن

</form>

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

وروديهای Checkboxes

اگر ميخواهيد که بازديدکننده يک يا چند گزينه را از بين چند گزينه محدود انتخاب کند، از مقدار "checkbox" برای شناسه type استفاده کنيد:

نمايش توسط مرورگر

کد اچتمل

Top of Form

I have a bike
I have a car

<form>

<input type="checkbox" name="bike">

I have a bike

<br>

<input type="checkbox" name="car">

I have a car

</form>

Top of Form

دوچرخه دارم
ماشين دارم

Bottom of Form

Top of Form

Bottom of Form

<form dir="rtl">

<input type="checkbox" name="bike">

دوچرخه دارم

<br>

<input type="checkbox" name="car">

ماشين دارم

</form>

شناسه Action و دکمه Submit در فرمها ( Form's Action Attribute & Submit Button)

در فرمها برای ارسال اطلاعات کسب شده از دکمه ای به نام ارسال يا Submit Button استفاده ميشود و در اثر کليک کاربر بروی اين دکمه "Submit" ، اطلاعات درون فرم به فايلی ديگر ارسال خواهند شد. برای تعيين مقصد ارسال اطلاعات بايد درون تگ form از شناسه ای به نام action استفاده کنيد. مقدار شناسه action آدرس يا url فايلی است که به دريافت و سپس پردازش اطلاعات دريافتی خواهد پرداخت. معمولا فايلهای بخش action برنامه ها و اسکريپت هائی نوشته شده با ربانهای cgi مانند ASP، Perl ، PHP و ... بوده و وظيفه آنها دريافت اطلاعات فرمها و سپس پردازش آنها ميباشد.

تعيين مقدار "submit" برای شناسه type سبب نمايش دکمه Submit يا ارسال خواهد گرديد.

نمايش توسط مرورگر

کد اچتمل

Top of Form

Username:

Bottom of Form

Top of Form

<form>

<input type="checkbox" name="bike">

I have a bike

<br>

<input type="checkbox" name="car">

I have a car

</form>

Top of Form

نام کاربر

Bottom of Form

Top of Form

Bottom of Form

Top of Form

Bottom of Form

<form dir="rtl">

<input type="checkbox" name="bike">

دوچرخه دارم

<br>

<input type="checkbox" name="car">

ماشين دارم

</form>

در مثال بالا در باکس ورودی متن، کلمه ای را وارد کرده و دکمه ارسال را کليک کنيد. مرورگر به محض کليک دکمه ارسال، اطلاعات درون فرم را که در اين مثال متنی ساده است به سمت فايلی که در شناسه action تعيين شده است ارسال کرده و در اين مثال برنامه ای به زبان Perl با نام form_action.cgi در سمت سرور به ذخيره و سپس نمايش متنی خبری خواهد پرداخت.

ورود متن فارسی در عناصری مانند Text field يا Text area:

همانطور که در مثالهای بالا مشاهده کردید در مورد المانهای Text field و Textarea با کمک شناسه dir میتوان سمت و جهت ورود اطلاعات را "از راست به چپ" تعیین کنید. ولی اگر کاربری ویندوز فارسی نداشته باشد، از کامپیوترهای مکینتاش استفاده کند و یا سیستمش را فارسی نکرده باشد قادر به ورود اطلاعات به زبان فارسی نخواهد بود و نویسه های تایپ شده لاتین خواهند بود!، در اینگونه موارد چه باید کرد؟
معمولا برنامه نویسان وب برای فراهم ساختن امکان ورود متن فارسی از یکی از دو روش زیر استفاده میکنند:

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

 استفاده از زبان جاوا اسکریپت و با این عیب که سورس و کد اصلی JavaScript قابل مشاهده و استفاده توسط دیگران است!

تگهای فرم

Start Tag	Purpose	کاربرد
<form>	Defines a form for user input	تعريف فرم ورود اطلاعات
<input>	Defines an input field	تعريف ورودی از نوع Input
<textarea>	Defines a text-area (a multi-line text input control)	تعريف ورودی متن چند سطری يا text-area
<label>	Defines a label to a control	تعريف برچسب يا label
<fieldset>	Defines a fieldset	تعريف fieldset
<legend>	Defines a caption for a fieldset	تعريف عنوان برای fieldset ها
<select>	Defines a selectable list (a drop-down box)	تعريف فهرستهای انتخابی يا drop-down box
<optgroup>	Defines an option group	تعريف option group ها
<option>	Defines an option in the drop-down box	تعريف گزينه ای از drop-down box ها
<button>	Defines a push button	تعريف دکمه فشاری، متفاوت با button تگ input

مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها

+ نوشته شده توسط علیرضا در سه شنبه بیست و ششم تیر 1386 و ساعت 8:33 |

آموزش مقدماتی HTML (قسمت سوم)

آموزش مقدماتی HTML

قسمت سوم :

ح) پيوندهای اچتمل ( HTML Links )

در اين درس با پيوندها ( Links ) ، تگ های مربوطه مخصوصا تگ Anchor يا A و نحوه به کار گيری آنها آشنا خواهيد شد. همچنين شناسه های بسيار مهم href ،target و name تشريح خواهند شد.

در محيط وب، صفحات اچتمل با کمک پيوندها به يکديگر متصل (Link) ميشوند. اصطلاح ابرمتن (Hyper Text) در مقابل متن خطی (Linear) قرار دارد. در يک متن معمولی خواندن به شکل خطی و از ابتدا به انتها ميباشد و در مقابل در يک متن مختلط (Hyper) با کمک پيوندها ميتوان از يک متن به هر صفحه ديگر در وب متصل شد.اين کار با کمک عنصری معلوم الحال! به نام A يا Anchor ميسر ميگردد.

تگ Anchor و شناسه href

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

Some Text

در مثال بالا تگ <a> برای ايجاد پيوندی به صفحه ای ديگر که آدرس اينترنتی آن url ميباشد بکار رفته است. برای تعيين مقصد و يا آدرس صفحه جديد از شناسه ای به نام href که همان hyerlink reference ميباشد، استفاده ميشود و مقدار اين شناسه در واقع همان آدرس اينترنتی صفحه مقصد است. بخش قابل رويت پيوند و در واقع متــنــی (و يا تصويری ) که توسط مرورگر نمايش داده خواهد شد و بازديدکننده روی آن کليک خواهد کرد ميان تگهای <a> و قرار داده ميشود و هر چند که در مثال بالا اين بخش متن "Some Text" است ولی ميتواند حتی يک تصوير باشد.

برای نمونه کد اچتمل زير پيوندی به سايت google.com ايجاد خواهد کرد:

Visit Google Site

و مرورگر پيوند بالا را به شکل زير نمايش داده و در اثر کليک روی پيوند توسط بازديدکننده، مرورگر به سايت Google خواهد رفت.

شناسه target در پيوندها:

با کمک شناسه target امکان تعيين مقصد پيوند جديد فراهم ميشود. در مثال بالا پس از کليک روی پيوند، مرورگر سايت google.com را باز کرده و جايگزين سایت فعلی خواهد شد. اگر ميخواهيد که مرورگر پيوند را در صفحه ای جديد باز کند بايد از شناسه target و مقدار "_blank" برای آن استفاده کنيد . مثال زير سبب باز شدن سايت google.com در پنجره جديدی خواهد شد:

Visit Google Site

شناسه Name :

با کمک شناسه name ميتوانيد پيوندها را نام گذاری کنيد.پيوندهای نامگذاری شده امکان حرکت ميان قسمتهای مختلف يک صفحه يا page را فراهم ميکنند. در اينصورت مثلا برای رفتن به آخر يک متن ديگر نيازی به Scrool down کردن تمامی صفحه نيست و کافی است که بازديدکننده روی پيوندی که به آخر صفحه اشاره ميکند کليک کند.

استفاده از پيوندهای نامگذاری شده شامل دو مرحله است:

1- ايجاد يک پيوند نامگذاری شده (اين قسمت به عنوان لنگر کار خواهد کرد.) :

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

Text to be displayed

وظيفه شناسه name تعيين نام برای پيوند است و مقدارآن همان نام پيوند ميباشد. نام پيوند هم هر نام لاتينی ميتواند باشد. در فرم کلی بالا، نام پيوند label و متنی که بعنوان پيوند نمايش داده ميشود عبارت "Text to be displayed" خواهد بود. مثال زير به ايجاد يک پيوند نامگذاری شده با نام top ميپردازد:

Here is top of my page!

2- ايجاد يک پيوند به پيوند نامگذاری شده ديگر:

برای دادن لينک به پيوندی نام گذاری شده، کافی است که پيوندی معمولی ايجاد کرده و در قسمت href آن ابتدا url مقصد و سپس نويسه # و در نهايت نام پيوند نامگذاری شده را درج کنيد. مثال زير ايجاد پيوندی است که به لينک نامگذاری شده ای به نام top اشاره ميکند:

Goto Top!

در اثر کليک روی پيوند بالا مرورگر مستقيما به ابتدای بخش top صفحه index.htm خواهد رفت.

اگر مقصد پيوند در همان صفحه قرار دارد نيازی به قيد url نيست و فقط نويسه # و سپس نام پيوند کافی است:

Goto Top!

چند نکته کاربردی در مورد پيوندها:

*** يکی از کاربردهای رايج پيوندهای نام گذاری شده در صفحات و متونی ميباشد که فهرست و يا ليستی از اقلام نمايش داده شده است، مانند بخش سرفصل مطالب، فهرست FAQ و يا ... در همين صفحه در دو مورد از پيوندهای نامگذاری شده استفاده شده است، آيا ميتوانيد آنها را بيابيد؟!

*** اگر مرورگر نتواند يک پيوند نامگذاری شده را بيابد ابتدای صفحه مقصد را نمايش خواهد داد.

Start Tag	Purpose	کاربرد عنصر Anchor
	Defines an anchor	تعريف يک پيوند يا Anchor در يک صفحه اچتمل

Target Attributes	کاربرد حالتهای مختلف شناسه target
target="_blank"	مرورگر پيوند را در يک پنجره جديد باز ميکند.
target="_self"	مرورگر پيوند را همان پنجره باز ميکند. (حالت پيش فرض يا default)
target="_parent"	مرورگر پيوند را فريم parent باز ميکند. (کاربرد در مبحث فريمها)
target="_top"	مرورگر پيوند را در فريم مادر و اصلی باز ميکند.(روشی خوب برای نجات از شر فريمها )

مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها

ط) جداول ( Tables)

در اين درس با المان جدول ( Table ) ، سلولها يا خانه ها، مرز و border در جداول و تگ های مربوطه مخصوصا تگهای TABLE ، TD , TR آشنا خواهيد شد. توجه داشته باشید که جداول یکی از مهمترین المانهای آرایش و layout میباشند.

جدولها

برای تعريف جداول از تگ <table> استفاده ميشود. يک جدول از يک يا چند سطر که با کمک تگ <tr> تعريف ميشوند، تشکيل ميشود. هر رديف يا row از يک يا چند سلول، خانه يا cell تشکيل گرديده که با کمک تگ <td> ايجاد ميشوند. نام های td و tr به ترتيب خلاصه شده table row و table data ميباشند.
محتوی يک سلول ميتواند متن، تصوير، فهرستها، جداول ديگر، پاراگرافها و ... باشد.

مثال زير جدولی است با دو سطر و سه ستون :

کد اچتمل جدولی با دو سطر و سه ستون

نمايش جدول روبرو توسط مرورگر

رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3

رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3

رديف 1، سلول 1	رديف 1، سلول 2	رديف 1، سلول 3
رديف 2، سلول 1	رديف 2، سلول 2	رديف 2، سلول 3

جدولها و شناسه border و dir :

 در مثال بالا شناسه border مرز جدول را مشخص ميکند، مقدار 1 مرزی با ضخامت يک پيکسل را نمايش خواهد داد و مقدار صفر جدول را بدون مرز نمايش خواهد داد. توجه داشته باشيد که حالت پيش فرض يعنی جدولی بدون شناسه border ، جداول بدون مرز را نمايش خواهد داد.

 در مثال بالا شناسه dir يا direction و مقدار rtl برای آن، سبب تعيين نمايش جهت متون از راست به چپ خواهد شد و چو ن در داخل تک table تعريف شده است به تمامی سلولهای جدول اعمال خواهذ شد.

 ساده ترين جدول ممکن در اچتمل، جدولی است با يک سطر و يک ستون!

سرستون در جداول (Headings)

سرستونها در جداول با کمک تگ <th> تعريف ميشوند. مثال زير نحوه تعريف سرستونها را در جداول نمايش ميدهد:

کد اچتمل جدولی با سه سطر و سه ستون

نمايش جدول روبرو توسط مرورگر

سرستون ا سرستون 2 سرستون 3

رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3

رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3

سر ستون 1	سر ستون 2	سرستون 3
ردیف 1،سلول 1	ردیف 1،سلول 2	ردیف 1،سلول 3
ردیف 2،سلول 1	ردیف 2،سلول 2	ردیف 2،سلول 3

همانطوريکه مشاهده ميکنيد سر ستونها مانند سلولهای معمولی جداول تعريف ميشوند و فقط به جای td از th استفاده شده و لی در نمايش محتوای سر ستونها bold يا توپر نمايش داده خواهند شد.

خانه های خالی در جداول (Empty Cells)

اگر محتوای خانه ای از يک جدول خالی باشد چه چيزی بايد نمايش داده شود؟ بسته به مرورگری که استفاده ميکنيد نتيجه نمايش متفاوت است و مثلا در مثال زير خانه خالی جدول بدون مرز نمايش داده خواهد شد:

کد اچتمل جدولی با دو سطر و دو ستون

نمايش جدول روبرو توسط مرورگر

رديف 1، سلول 1 رديف 1، سلول 2

رديف 2، سلول 1

ردیف 1،سلول 1	ردیف 1،سلول 2
ردیف2،سلول 1

در اينگونه موارد برای رفع مشکل کافی است که از non-breaking space ( ) يا همان نويسه و کاراکتر قاصله و بلانک استفاده شود و در مورد مثال ذکر شده مرورگر جدول را به شکل زير نمايش خواهد داد:

کد اچتمل جدولی با دو سطر و دو ستون

نمايش جدول روبرو توسط مرورگر

رديف 1، سلول 1 رديف 1، سلول 2

رديف 2، سلول 1

رديف 1، سلول 1	رديف 1، سلول 2
رديف 2، سلول 1

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

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

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

 شناسه dir قابل استفاده در بسياری از تگها ( مثلا table ، tr ، td ، th ) ميباشد. با کمک شناسه dir و مقدار rtl برای آن، جهت نمايش متون فارسی از "راست به چپ" تعيين ميگردد. توجه داشته باشيد که مقدار شناسه dir به صورت موروثی از table به tr و th و از tr و th به td خواهد رسيد.مثلا برای تعيين مقدار rtl برای تمامی خانه های يک جدول کافی است که فقط شناسه مزبور را در تگ table قيد کنيد و نيازی به قيد آن در تمامی خانه های جدول نيست. البته ميتوانيد که در مورد يک رديف خاص و يا يک خانه خاص شناسه dir را موردی تعيين کنيد.

تگهای جداول

+ نوشته شده توسط علیرضا در دوشنبه بیست و چهارم اردیبهشت 1386 و ساعت 14:34 |

کاغذ دیواری(Wallpaper) ویندوز

کاغذ دیواری(Wallpaper) ویندوز

با سلام؛ این بار تصمیم گرفتيم برای تنوع بیشتر دانلود 40 wallpaper درباره ویندوز های Apple و

Linux و Longhorn و Vista و XP در اختیار شما قرار دهم. امید وارم مورد توجه شما قرار

گرفته و آنها را دانلود نمایید(با کلیک راست روی اسم هر یک از عکس ها). ولی از پست بعد باز هم

موضوع آموزش مقدماتی ویندوز را ادامه خواهیم داد. منتـــــــــــــــــــــــــــــــــــظر نظرات گرم و سازنده

شما هستیم.با تشکر...

http://i16.tinypic.com/3532glu.jpg

http://i17.tinypic.com/2dsk1w3.jpg

http://i17.tinypic.com/4h7qqeu.jpg

http://i17.tinypic.com/3yphkes.jpg

http://i15.tinypic.com/2ik73i1.jpg

http://i18.tinypic.com/49hx0fo.jpg

http://i17.tinypic.com/2vsp2fq.jpg

http://i18.tinypic.com/2nvuxkm.jpg

http://i18.tinypic.com/2ib0lkm.jpg

http://i16.tinypic.com/2z8n9t2.jpg

http://i16.tinypic.com/34nh0t4.jpg

http://i15.tinypic.com/2yjxybs.jpg

http://i18.tinypic.com/2d8ql3s.jpg

http://i15.tinypic.com/35a0zlh.jpg

http://i19.tinypic.com/43782m1.jpg

http://i17.tinypic.com/4c13yfa.jpg

http://i18.tinypic.com/2qthhs7.jpg

http://i17.tinypic.com/2d0b91s.jpg

http://i19.tinypic.com/4ckf7mv.jpg

http://i16.tinypic.com/42o1211.jpg

http://i18.tinypic.com/2r4omj4.jpg

http://i15.tinypic.com/2pzft74.jpg

http://i15.tinypic.com/2a4wjgl.jpg

http://i19.tinypic.com/2hnufrn.jpg

http://i17.tinypic.com/3ymzxbc.jpg

http://i19.tinypic.com/2vxm0ls.jpg

http://i19.tinypic.com/2ql71qd.jpg

http://i16.tinypic.com/3zvw9yv.jpg

http://i16.tinypic.com/2s1u7pw.jpg

http://i16.tinypic.com/2vrzas9.jpg

http://i16.tinypic.com/2eq5pwi.jpg

http://i19.tinypic.com/4dmbbba.jpg

http://i15.tinypic.com/48xrbt3.jpg

http://i16.tinypic.com/2hd5krs.jpg

http://i17.tinypic.com/2naspsn.jpg

http://i16.tinypic.com/2ymg38k.jpg

http://i15.tinypic.com/29y2m9w.jpg

http://i17.tinypic.com/34fxo40.jpg

+ نوشته شده توسط علیرضا در چهارشنبه شانزدهم اسفند 1385 و ساعت 20:43 |

آموزش مقدماتی HTML (قسمت دوم)

با سلام،امیدواریم قسمت اول مقاله «آموزش مقدماتی HTML» مورد توجه شما قرار گرفته باشد.در زیر قسمت دوم این مقاله ارایه شده است. منتظر نظرات گرانقدرتان هستیم.

آموزش مقدماتی HTML

قسمت دوم:

د)تگ های اصلی ( Basic Tags )

تگ ها ( tags ) اجزا تشکيل دهنده عناصر يا elements های اچتمل هستند و در اين بخش با عناصر و تگ های پايه و مهم: <hr> , <br> , <h1> .... <h6> ,  , <p> آشنا خواهيد شد . يکی از بهترين روش های يادگيری تگ های اچتمل ديدن مثالها و تغيير آنها مي باشد مي توانيد به مطالعه و يادگيری مثالها پرداخته، کدهای اچتمل را تغییر داده و به مشاهده نتايج بپردازيد.

سر تيترها (Headings)

سر تيترها با کمک تگ های <h1> تا <h6> تعيين ميشوند. <h1> معرف بزرگترين سر تيتر و <h6> معرف کوچکترين سر تيتر است. مرورگر به هنگام نمايش يک سر تيتر بصورت اتوماتيک يک سطر خالی قبل و بعد از هر سر تيتر اضافه خواهد کرد.

Start Tag

purpose

کاربرد

Defines a table

تعريف جدول

Defines a table header

تعريف سرستون در جداول

Defines a table row

تعريف رديف ها در جداول

Defines a table cell

تعريف سلول يا خانه های يک جدول

Defines a table caption

تعريف عنوان جدول

مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها

<h1>This is a heading</h1>

<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

پاراگرافها (Paragraphs)

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

<p>This is a paragraph</p>
<p>This is another paragraph</p>

سطر جديد (Line Breaks)

برای رفتن سر سطر جديد از تگ <br> استفاده ميشود.در اينحالت يک پاراگراف جديد ايجاد نميشود. تگ <br> از نوع تگ های خالی بوده و دارای تگ انتهائی (مثلا <br/> ) نمي باشد.

<p>This <br> is a para<br>graph with line breaks</p>

کامنت ها در اچتمل (Comments)

برای نوشتن شرح و توضيحات در مورد کدهای اچتمل بايد از تگ خاصی استفاده کنيد. برای اينکار بايد متن و شرحتان را درون علائم <-- و --!> قرار دهيد. مرور تگ های comment را در نظر نگرفته و محتوی آنها را نمايش نخواهد داد و فقط شرح و توضيحات برای برنامه نويس و ديگر افرادی که احتمالا در آينده با کد اچتمل کار خواهند کرد مفيد خواهد بود. (به محل نويسه "!" توجه کنيد! فقط يکی و آنهم در ابتدا)

چند نکته کاربردی:

◄توجه داشته باشيد که بدليل وجود مرورگرهای متفاوت (اکسپلورر، نت اسکيپ، ..) و به دليل تفاوت دقت نمايش صفحه نمايش کامپيوترها، صفحات اچتمل با اندکی تفاوت در حالتهای مختلف نمايش داده ميشوند و هميشه سعی کنيد که صفحاتتان را نه تنها با اکسپلورر که معروفترين مرورگر است بلکه با نت اسکيپ و حتی مرورگرهای کامپيوترهای مکينتاش چک کرده و همچنين در دقت های نمايش 800x600 و 1024X768 آن را امتحان کنيد.

◄از نظر فاصله و سطر بندی، متنی که در صفحه اديتورتان تايپ ميکنيد با چيزی که مرورگر نمايش خواهد داد متفاوت خواهد بود.هميشه به ياد داشته باشيد که فاصله های اضافی (space) و خطهای خالی متن در صفحه اديتور توسط مرورگر در نظر گرفته نشده و نمايش داده نخواهد شد.

◄برای نمايش بيش از يک فاصله خالی بايد از نويسها يا ترکيب کاراکتری خاصی (None Breaking Space) استفاده کنيد.

◄فاصله های اضافی بين کلمات در يک متن اچتمل توسط مرورگرها ديده نخواهد شد و در نمايش هميشه تبديل به يک فاصله (space) خواهد شد. در ضمن يک خط خالی در متن اديتور بصورت يک فاصله يا space نمايش داده خواهد شد.

◄برای ايجاد يک سطر جديد هيچگاه از يک تگ <p> خالی استفاده نکنيد و به جای آن از تگ <br> استفاده کنيد.

◄مرورگرها به هنگام نمايش بعضی عناصر بصورت اتوماتيک يک سطر خالی قبل و بعد از آن عنصر نمايش خواهند داد. برای نمونه اين گروه از عنصرها ميتوان از پاراگراف (<p>) و سرتيترها (<h..>) نام برد.

◄تگ <hr> يا Horizontal Roler سبب نمايش يک خط افقی خواهد شد و در واقع بخش های مختلف مطالب اين صفحات با کمک اين تگ از هم جدا شده اند.

تگهای اصلی

در جدول زير عناصر معرفی شده در اين فصل به همراه لينکهای مربوطه جهت مطالعه بيشتر آورده شده است. توجه داشته باشيد که برای هر عنصر فهرستی از شناسه ها يا Attributes موجود است و همچنين به شناسه های کنارگذاشته شده (Deprecated) در نسخه های آينده اچتمل توجه داشته باشيد و سعی کنيد که از آنها استفاده نکنيد.

Start Tag	Purpose	کاربرد
<html>	Defines a html document	نشان شروع متن اچتمل
<body>	Defines the document's body	تعيين بدنه و قسمت اصلی صفحه اچتمل
<h1>-<h6>	Defines heading 1 to heading 6	تعريف سر تيترهای h1 تا h6
<p>	Defines a paragraph	تعريف پاراگراف
<br>	Inserts a single line break	رفتن سر خط جديد
<hr>	Defines a horizontal rule	نمايش خط افقی
<!-->	Defines a comment in the HTML source code	نوشتن شرح و comment

ه) فارسی نويسی

در اين بخش با فارسی نويسی، فارسی سازی و استاندارد يونيکد و نحوه استفاده از اديتور آنلاين و فارسی آشنا خواهيد شد. همچنين متاتگ http-equiv و شناسه dir نيز معرفی خواهد شد.

◄سؤالات مربوط به فارسی نويسی را ميتوان به سه گروه عمده تقسيم کرد:

- چگونه فارسی بنويسم ؟
- چگونه فارسی بخوانم؟
- چگونه صفحات اچتمل فارسی را نمايش دهم؟

دو نکته بسيار مهم در مورد فارسی نويسی:

روش کدگزاری UTF-8

 اکيدا توصيه ميشود که برای تايپ و تمايش متون فارسی از استاندارد يونيکد و روش کدگزاری UTF-8 اسنفاده شود و اين روشی است که مطالب اين سايت و اديتور آنلاينش از آن استفاده ميکند.نکته مهم در نمايش صحيح متون فارسی تعيين نوع کدگزاری يا encoing صفحات فارسی است که برای اينکار بايد از متاتگ خاصی به نام http-equiv در بخش head صفحات اچتمل به شکل زير استفاده شود:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

در اينصورت مرورگر يا Browser قبل از نمايش صفحه از روی متاتگ فوق نوع کدگزاری (Encoding) را تشخيص داده و ديگر مثلا نيازی به تعيين دستی (دراکسپلورور 5 : View/Encoing/Unicode / UTF-8 ) نوع Encoing توسط بازديدکننده سايت نخواهد بود.

شناسه يا attribute ی به نام dir

جهت نمايش متون لاتين به صورت پيش فرض و default از چپ به راست (ltr) ميباشد.در مورد متون و جملات فارسی بايد با کمک روشی جهت نمايش پيش فرض را به "راست به چپ" تغيير دهيد. شناسه يا attribute ی به نام dir يا همان direction اين کار را برای شما انجام ميدهد. اين شناسه دارای دو مقدار ممکن ميباشد :

dir="ltr" , Left-to-right text. چپ به راست
dir="rtl" , Right-to-left text. راست به چپ

مثلا برای نمايش جمله فارسی "سلام بر دنيای وب!" با کمک عناصر p يا div کافی است که به يکی از شکلهای زير عمل شود:

<p dir="rtl"> سلام بر دنيای وب </p>
<div dir="rtl"> سلام بر دنيای وب </div>

در بسياری از عناصر و تگ های اچتمل امکان استفاده از شناسه dir ميسر بوده و به عنوان نمونه ميتوان از عناصر زير نام برد:

<p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 ... h6> , <input> , <pre> , <select> , <span> , ...

و) فرمت دهي formating

وظيفه گروهی از تگ های اچتمل فرمت دهی و تعيين شکل نمايش متون ( مثلا ضخیم و bold بودن و يا مورب و ايتاليک بودن ) ميباشد و در این بخش با اين گروه از تگهای formating آشنا خواهيد شد:

نحوه ديدن سورس کدهای اچتمل (HTML Source)

اگر ميخواهيد که سورس کدهای اچتمل صفحات وب را ببينيد کافی است که در منوی View مرورگرتان حالت Source يا Page Source را انتخاب کرده و مرورگر کد اچتمل را درون اديتوری باز کرده و قابل ذخيره توسط شما برای استفاده های بعدی ميباشد.

اگر صفحه مورد نظر از مجموعه فريمها (Frameset) استفاده کرده باشد برای ديدن سورس کد اصلی فريمها کافی است که ابتدا با کمک روش بالا به مشاهده سورس کدهای اچتمل پرداخته (لازم به توضيح است که در اين حالت فقط تعاريف کلی فريمها قرار دارند.) و سپس برای ديدن کد اچتمل اختصاصی هر صفحه بايد پس از "Right Click" روی هر صفحه "View Source" کرده و کد اچتمل هر فريم را جداگانه ببينيد.

اگر طراح سايت با کمک Java Script مانع ديدن سورس توسط شما ميشود، ابتدا در منوی Tools/Internet Options.../Security/Custom Level مرورگرهای اکسپلورر امکانات جاواسکريپت مرورگر را غير فعال کرده (disable) و سپس مراحل بالا را تکرار کنيد!!!

چند نکته کاربردی:

در استفاده از Underline دقت كنيد چون در اكثر مرورگرها، پيوندها با اين خطوط نشان داده مي شوند و اين مساله ميتواند كاربران را دچار اشتباه كند .
به كارگيري تگهاي EM و STRONG كه جايگزين تگهاي I و B هستند ، اين اطمينان را مي دهد كه صفحه شما توسط همه مرورگرها بصورت صحيح نمايش داده خواهد شد .
به ترتيب بسته شدن تگهاي پاياني در مثال زير دقت كنيد، همان گونه كه مشاهده مي كنيد عنصر STRONG بعد از عنصر U شروع شده است ، به همين خاطر تگ خاتمه دهنده آن قبل از تگ خاتمه دهنده U قرار مي گيرد.

<U>version <STRONG>2.0</STRONG></U>

:تگهای فرمت دهی متون

کاربرد	Purpose	Start Tag
نمايش توپر	Defines bold text	<b>
نمايش در اندازه بزرگ	Defines big text	<big>
نمايش بصورت تاکيد شده	Defines emphasized text	<em>
نمايش ايتاليک يا کج	Defines italic text	<i>
نمايش در اندازه کوچک	Defines small text	<small>
نمايش قوی ؟!	Defines strong text	<strong>
نمايش پايين تر از خط افقی	Defines subscripted text	<sub>
نمايش بالاتر از خط افقی	Defines superscripted text	<sup>
نمايش به صورت خط زير	Defines inserted text	<ins>
نمايش به صورت خط خورده	Defines deleted text	<del>
از رده خارج	Deprecated. Use <del> instead	<s>
از رده خارج	Deprecated. Use <del> instead	<strike>
از رده خارج	Deprecated. Use styles instead	<u>
نمايش کدهای برنامه نويسی	Deprecated. Use styles instead	<code>
نمايش متن بصورت صفحه کليدی	Defines keyboard text	<kbd>
نمايش کدهای نمونه برنامه نويسی	Defines sample computer code	<samp>
نمايش تله تايپ	Defines teletype text	<tt>
نمايش متغييرها	Defines a variable	<var>
نمايش متون از قبل فرمت شده	Defines preformatted text	<pre>

ز) نهادها entities

در استاندارد اچتمل گروهی از نويسه ها (Character)دارای معنی خاصی بوده ( مثلا نويسه < شروع يک تگ و نويسه > انتهای يک تگ را نشان ميدهد.) و برای نمايش آنها در صفحاتتان مستقيما قابل مصرف نمي باشند. در اين بخش با فهرست اين نويسه ها آشنا شده و نحوه درج آنها را با کمک Character Entities فرا خواهيد گرفت.

Character Entities

در اچتمل بعضی از نويسه ها دارای معنی خاصی بوده و برای نمايش آنها در صفحاتتان بايد از character entities ها استفاده کنيد. يک character entities از سه قسمت تشکيل ميشود:

1- نويسه ampersand (&)
2- نام entity يا نويسه # و سپس شماره عددی entity
3 - و نهايتا نويسه semicolon (;)
برای مثال برای نمايش نويسه > دو روش وجود دارد، بايد از < يا از < استفاده کنيد. در اين مثال lt نام entity و 60 شماره عددی آن ميباشد.

مزيت استفاده از نام entity در مقابل استفاده از شماره عددی آن سهولت يادآوری آن از روی نامش ميباشد و عيب آن اين است که تمامی مرورگرها نام گذاريهای موجود برای Entity ها را قبول ندارند ولی در عوض همگی شماره های عددی entity ها را بخوبی ميشناسند. توجه داشته باشيد که entity ها به کوچک و بزرگي حروف حساس هستند و در واقع Case Sensitive ميباشند.

پر کاربردترين character entity در اچتمل، نويسه فاصله يا Space يا Blank ميباشد و نام رسمی آن non-breaking space ميباشد. همانطور که ميدانيد مرورگرها فاصله های اضافی را در نظر نگرفته (truncate spaces) و مثلا از 10 نويسه فاصله، 9 تای آنرا ناديده ميگيرند و برای نمايش فاصله های اضافی بايد از   استفاده کنيد.

فهرست پرکاربردترين Character Entities ها

Result (نمايش)

Description (شرح)

در اين درس با پيوندها ( Links ) ، تگ های مربوطه مخصوصا تگ Anchor يا A و نحوه به کار گيری آنها آشنا خواهيد شد. همچنين شناسه های بسيار مهم href ،target و name تشريح خواهند شد.

تگ Anchor و شناسه href

و مرورگر پيوند بالا را به شکل زير نمايش داده و در اثر کليک روی پيوند توسط بازديدکننده، مرورگر به سايت Google خواهد رفت.

شناسه target در پيوندها:

Visit Google Site

شناسه Name :

استفاده از پيوندهای نامگذاری شده شامل دو مرحله است:

1- ايجاد يک پيوند نامگذاری شده (اين قسمت به عنوان لنگر کار خواهد کرد.) :

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

Text to be displayed

Here is top of my page!

2- ايجاد يک پيوند به پيوند نامگذاری شده ديگر:

در اثر کليک روی پيوند بالا مرورگر مستقيما به ابتدای بخش top صفحه index.htm خواهد رفت.

اگر مقصد پيوند در همان صفحه قرار دارد نيازی به قيد url نيست و فقط نويسه # و سپس نام پيوند کافی است:

Goto Top!

چند نکته کاربردی در مورد پيوندها:

*** اگر مرورگر نتواند يک پيوند نامگذاری شده را بيابد ابتدای صفحه مقصد را نمايش خواهد داد.

Start Tag

Purpose

کاربرد عنصر Anchor

Defines an anchor

تعريف يک پيوند يا Anchor در يک صفحه اچتمل

Target Attributes

کاربرد حالتهای مختلف شناسه target

target="_blank"

مرورگر پيوند را در يک پنجره جديد باز ميکند.

target="_self"

مرورگر پيوند را همان پنجره باز ميکند. (حالت پيش فرض يا default)

target="_parent"

مرورگر پيوند را فريم parent باز ميکند. (کاربرد در مبحث فريمها)

target="_top"

مرورگر پيوند را در فريم مادر و اصلی باز ميکند.(روشی خوب برای نجات از شر فريمها )

مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها

ط) جداول ( Tables)

جدولها

مثال زير جدولی است با دو سطر و سه ستون :

کد اچتمل جدولی با دو سطر و سه ستون

نمايش جدول روبرو توسط مرورگر

رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3 رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3

رديف 1، سلول 1

رديف 1، سلول 2

رديف 1، سلول 3

رديف 2، سلول 1

رديف 2، سلول 2

رديف 2، سلول 3

جدولها و شناسه border و dir :

 ساده ترين جدول ممکن در اچتمل، جدولی است با يک سطر و يک ستون!

سرستون در جداول (Headings)

سرستونها در جداول با کمک تگ <th> تعريف ميشوند. مثال زير نحوه تعريف سرستونها را در جداول نمايش ميدهد:

کد اچتمل جدولی با سه سطر و سه ستون

نمايش جدول روبرو توسط مرورگر

سرستون ا سرستون 2 سرستون 3 رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3 رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3

سر ستون 1

سر ستون 2

سرستون 3

ردیف 1،سلول 1

ردیف 1،سلول 2

ردیف 1،سلول 3

ردیف 2،سلول 1

ردیف 2،سلول 2

ردیف 2،سلول 3

خانه های خالی در جداول (Empty Cells)

کد اچتمل جدولی با دو سطر و دو ستون

نمايش جدول روبرو توسط مرورگر

رديف 1، سلول 1 رديف 1، سلول 2 رديف 2، سلول 1

ردیف 1،سلول 1

ردیف 1،سلول 2

ردیف2،سلول 1

کد اچتمل جدولی با دو سطر و دو ستون

نمايش جدول روبرو توسط مرورگر

رديف 1، سلول 1 رديف 1، سلول 2 رديف 2، سلول 1

رديف 1، سلول 1

رديف 1، سلول 2

رديف 2، سلول 1

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

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

رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3

رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3

سرستون ا سرستون 2 سرستون 3

رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3

رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3

رديف 1، سلول 1 رديف 1، سلول 2

رديف 2، سلول 1

رديف 1، سلول 1 رديف 1، سلول 2

رديف 2، سلول 1