آموزش html از مبتدی تا پیشرفته

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

رهائي از شرفريم ها
اين مثال کاربرد شناسه target و مقدار top_ و نحوه رهائي از فريم ها راشرح خواهد داد.

نحوه ايجاد يک پيوند mailto
اين مثال نحوه ايجاد يکپيوند از نوع mailto براي باز کردن برنامه مديريت ايميل ها را نشان ميدهد. در اينحالت اگر بازديدکننده سايت برنامه هاي مربوط به ارسال و مديريت ايميل ها را نصبکرده باشد ميتواند به ارسال ايميل بپردازد.

مثالي کاملتر در مورد mailto
مثال از ارسال ايميل با امکان تعيين مقادير cc ، bcc، subject و body

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


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

target="_blank" مرورگر پيوند را در يک پنجرهجديد باز ميکند.

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

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

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



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


جداول، آرايه ها
مثال ساده اي براي ايجاد جداول

مرز جداول
نقش شناسه border در تعيين مرز جداول

مثالهاي بيشتر
جدولها

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

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

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

<table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
<td>رديف 1، سلول 3</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>رديف 2، سلول 2</td>
<td>رديف 2، سلول 3</td>
</tr>
</table>
رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3
رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3


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

در مثال بالا شناسه border مرز جدول را مشخص ميکند، مقدار 1 مرزي با ضخامت يک پيکسل را نمايش خواهد داد و مقدار صفر جدول را بدون مرز نمايش خواهد داد. توجه داشته باشيد که حالت پيش فرض يعني جدولي بدون شناسه border ، جداول بدون مرز را نمايش خواهد داد.
در مثال بالا شناسه dir يا direction و مقدار rtl براي آن، سبب تعيين نمايش جهت متون از راست به چپ خواهد شد و چو ن در داخل تک table تعريف شده است به تمامي سلولهاي جدول اعمال خواهذ شد.
ساده ترين جدول ممکن در اچتمل، جدولي است با يک سطر و يک ستون!
سرستون در جداول (Headings)

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

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

<table border="1" dir="rtl">
<tr>
<th>سرستون ا</th>
<th>سرستون 2</th>
<th>سرستون 3</th>
</tr>
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
<td>رديف 1، سلول 3</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>رديف 2، سلول 2</td>
<td>رديف 2، سلول 3</td>
</tr>
</table>
سرستون ا سرستون 2 سرستون 3
رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3
رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3


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

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

<table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td></td>
</tr>
</table>
رديف 1، سلول 1 رديف 1، سلول 2
رديف 2، سلول 1



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

<table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td> </td>
</tr>
</table>
رديف 1، سلول 1 رديف 1، سلول 2
رديف 2، سلول 1

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

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

مرز در جداول
اين مثال کاربرد شناسه border را درنمايش جداول نشان ميدهد.

تعيين جهت نمايش متن در خانه هاي يک جدول
اينمثال کاربرد شناسه dir است در تعيين جهت نمايش متن در خانه هاي يک جدول.

عنوان جداول و تگ caption
مثالي در مورد تگ caption در تعريف جداول

توسعه سطري يا ستوني در جداول
مثالي در مورد شناسه هاي colspan و rowspan در جداول

جدولي با محتويات مختلف
محتوي يک خانه جدول تقريباميتواند هر عنصر اچتملي باشد.

فاصله گذاري بين خانه هاي جداول
اين مثالنحوه ايجاد فاصله بين خانه هاي جدول را نشان ميدهد.(cellspacing)

لايهگذاري خانه هاي جدول
اين مثال نحوه ايجاد فاصله خالي بين خانه هاي جدول و مرزآنها را نشان ميدهد.(cellpadding)

تعيين رنگ زمينه يا تصوير زمينه کل يکجدول
تعيين رنگ زمينه يا تصوير زمينه سراسري جداول با کمک شناسه هاي bgcolor و background

تعيين رنگ زمينه يا تصوير زمينه يک يا چند خانه ازجدول
تعيين رنگ زمينه يا تصوير زمينه در خانه هاي جداول با کمک شناسه هاي bgcolor و background

تراز بندي محتوا در خانه هاي جداول
اين مثال نحوهترازبندي محتواي خانه هاي جداول با کمک شناسه "align" را نشان ميدهد.

شناسه frame در جداول
مثالي در مورد کاربرد شناسه "frame" در المان table جهت تعيينشکل مرز جداول.

تراز بندي محتوا در خانه هاي جداول
اين مثال نحوهترازبندي محتواي خانه هاي جداول با کمک شناسه "align" و "valign" را نشان ميدهد.
تگهاي جداول
Start Tag Purpose کاربرد
<table> Defines a table تعريف جدول

<th> Defines a table header تعريف سرستون درجداول

<tr> Defines a table row تعريف رديف ها در جداول

<td> Defines a table cell تعريف سلول يا خانه هاي يک جدول

<caption> Defines a table caption تعريف عنوان جدول