مدرسه HTML
اگر یک قاب حاشیه پدیدار داشته باشد کاربر می تواند با کشیدن حاشیه آن ، اندازه آن را تغییر دهد. برای جلوگیری از این عمل کاربر ، شما می توانید "noresize="noresize را به برچسب <frame> اضافه کنید. اگر برچسب <noframes> را اضافه کنیم ، مرورگر قاب را پشتیبانی نمی کند.
مهم:شما نمی توانید برچسب های <body> </body> و <frame> </frame> را با هم استفاده کنید. هر چند اگر شما برچسب <noframes> را در مرورگر هایی که قابها را پشتیبانی نمی کنند و حاوی مقداری متن نیز باشد اضافه کنید شما باید متن را بین برچسب های <body> </body> قرار دهید.
برچسب noframes
در صورتیکه مرورگر، امکان نمایش قابها را نداشت، به کمک این برچسب، می توان نمایش مناسبی را ارایه کرد.
قابهای پیچیده(ترکیبی از قابهای عمودی و افقی)
این مثال، صفحه ای که در آن قبهای عمودی و افقی، با هم وجود دارند را نشان می دهد.
قابی با موجودیت noresize="noresize"
با کنترل این موجودیت، از تغییر اندازه قابها می توان جلوگیری کرد.
این مثال روش ساخت یک قاب محتوایی را نشان می دهد. صفحه از دو قاب اصلی ساخته شده که یکی ازآنها، فهرست و دیگری محتوای سرفصل انتخابی را نمایش می دهند. در قاب فهرست، سه فراپیوند به صورت زیر تعریف شده که موجودیت traget هر فرا پیوند به نام قاب محتوا اشاره می کند.
<a href ="frame_a.htm" target ="showframe">Frame a</a><br>
<a href ="frame_b.htm" target ="showframe">Frame b</a><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a>
قاب محتوا، محتوای هر یک از این فراپیوندها را نمایش می دهد.
قاب درجا
این مثال روش استفاده از قابهای درجا را نشان می دهد(این قابها را می توان به طور مستقیم، داخل html استفاده کرد و دیگر نیازی به قاب بندی کل صفحه نیست).
پرش به قسمت خاصی در داخل یک قاب
به کمک این روش می توان به قسمتی از محتوای قاب، در هنگام نمایش پرش کرد. برای این منظور پس از آدرس محتوای قاب، فراپیوند محل مورد نظر را قرار می دهیم. به مثال توجه کنید.
پرش به محل خاص در صفحه دارای قاب محتوا
این مثال ترکیبی از مثال "قاب محتوا" و مثال "پرش" است.
| برچسب ها | توضیحات |
|---|---|
| <frameset> | یک مجموعه از قاب ها را معرفی می کند |
| <frame> | یک زیر پنجره (قاب) را معرفی می کند |
| <noframes> | برای مرورگر هایی که قاب ها را پشتیبانی نمی کنند ، بخش بدون قاب را معرفی می کند. |
| <iframe> | یک زیر پنجره درون برنامه ای را معرفی می کند. |
تعریف و کاربرد
برچسب frameset یک frameset را معرفی می کند. آن به منظور سازمان دادن پنجره های چندگانه مورد استفاده قرار می گیرد.
هر قاب یک پرونده جداگانه را در اختیار دارد. در ساده ترین استفاده آن ، عنصر frameset توضیح می دهد که چندسطر یا ستون در frameset وجود خواهد داشت. شما باید از موجودیت rows یا cols استفاده کنید.
تفاوت بین HTML و XHTML
تفاوتی ندارد
نکات
اگر شما بخواهید یک صفحه حاوی قاب را معتبر کنید مطمئن شوید کهDTD بر روی" frameset DTD" شده باشد.
مهم: شما نمی توانید برچسب های <body></body> و <frameset><frameset> را باهم استفاده کنید. هرچند اگر شما برچسب <noframe> را به برخی متن ها اضافه کنید برای برخی مرورگرها که frame را پشتیبانی نمی کنند ، شما می توانید آن متن را بین برچسب <body> و </body> قرار دهید.
مثال
| منبع | خروجی |
|---|---|
|
<html> <frameset cols = "25%, 50%,25%"> <frame src ="frame_a.html" /> <frame src ="frame_b.html" /> <frame src ="frame_c.html" /> </frameset> </html> |
برای دیدن نتیجه کد را در این آدرس جایگذاری نمایید |
خواص انتخابی
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.
| خاصیت | مقدار | توضیحات | DTD |
|---|---|---|---|
| cols |
pixels % * |
تعداد و اندازه ستون در frameset را تعیین می کند. | F |
| rows |
pixels % * |
تعداد و اندازه سطر در frameset را تعیین می کند. | F |
خواص استاندارد
id, class, title, style
خواص رویداد
ندارد
تعریف و کاربرد
یک زیر پنجره (قاب) تعریف می کند.
تفاوت بین HTML و XHTML
در HTML برچسب frame ، برچسب پایانی ندارد.
اما در XHTML برچسب frame باید بسته شود.
نکات
نکته: اگر شما می خواهید یک صفحه را که حاوی قاب است معتبر سازید ، مطمئن شوید که DTD برروی "Frameset DTD" هماهنگ شده است.
مثال
| منبع | خروجی |
|---|---|
|
<html> <frameset cols = "25%, 50%,25%"> <frame src ="frame_a.html" /> <frame src ="frame_b.html" /> <frame src ="frame_c.html" /> </frameset> </html> |
برای دیدن نتیجه کد را در این آدرس جایگذاری نمایید |
خواص انتخابی
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.
| موجودیت | مقدار | توضیحات | DTD |
|---|---|---|---|
| frameborder |
0 1 |
به اطراف قاب حاشیه اختصاص می دهد | F |
| longdesc | URL | یک url برای توضیحات بلند در مورد محتویات قاب. برای مرورگرهایی استفاده می شود که قاب را پشتیبانی نمی کنند. | F |
| marginheight | pixels | حاشیه بالا و پایین به قاب اختصاص می دهد | F |
| marginwidth | pixels | حاشیه چپ و راست به قاب اختصاص می دهد | F |
| name | frame_name | یک نام یکتا به قاب اختصاص می دهد.(برای استفاده در scriptها) | F |
| noresize | noresize | هنگامی که روی noresize هماهنگ می شود کاربر نمی توانداندازه قاب را تغییر دهد. | F |
| scrolling |
yes no auto |
عملیات نوار لغزان را تعیین می کند | F |
| src | URL | url فایلی را مشخص مشخص می کندکه در قاب استفاده می شود. | F |
موجودیت های استاندارد
id, class, title, style
تعریف و کاربرد
برچسب noframe متنی را به مرورگرهایی که قاب را پشتیبانی نمی کنند نشان می دهد. عناصر noframe درون عناصر frameset قرار می گیرند.
تفاوت بین HTML و XHTML
تفاوتی ندارند.
نکات
نکته: اگر مرورگری قاب را پشتیبانی کند ، متن نشان داده نخواهد شد.
مهم: اگر شما برچسب noframe را اضافه کردید باید متن را داخل برچسب body قرار دهید.
نکته:برچسب noframe در XHTML 1.0 strict DTD اجازه داده نمی شود.
مثال
<frameset cols = "25%, 25%,*">
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
<frame src ="blue.html" >
<frame src ="yellow.html" >
<frame src ="green.html" >
</frameset>
موجودیت های استاندارد
id, class, title, style, dir, lang, xml:lang
تعریف و کاربرد
عنصر iframe یک قاب درون برنامه ای می سازد که حاوی پرونده دیگر است.
تفاوت بین HTML و XHTML
تفاوتی ندارد.
مثال
| منبع | خروجی |
|---|---|
|
<iframe src ="http://www.farajpour.ir" width="100%" > |
خواص انتخابی
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.
| موجودیت | مقدار | توضیحات | DTD |
|---|---|---|---|
| align |
left right top middle bottom |
مشخص می کند که iframe را چگونه مطابق متن های اطرافش قرار دهیم. | TF |
| frameborder |
1 0 |
مشخص می کند که آیا حاشیه قاب را نشان دهد یا نه | TF |
| height |
pixels % |
عرض iframe را مشخص می کند | TF |
| longdesc | URL | یک url برای توضیح طولانی محتویات قاب | TF |
| marginheight | pixels | بالاچین یا پایین چین بودن iframe را تعیین می کند | TF |
| marginwidth | pixels | چپ چین یا راست چین بودن قاب را مشخص می کند. | TF |
| name | frame_name | یک نام یکتا برای iframe تعیین می کند. | TF |
| scrolling |
yes no auto |
نوار لغزان تعریف می کند | TF |
| src | URL | url پرونده را برای نشان دادن در قاب تعیین می کند. | TF |
| width |
pixels % |
طول iframe را تعیین می کند | TF |
خواص استاندارد
id, class, title, style
به وسیله HTML شما می توانید جدول بسازید
مثالها
این مثال به ما نشان می دهد که چگونه می توانیم یک جدول بکشیم.
این مثال حاشیه های مختلف جدول را نشان می دهد.
جداول بوسیله برچسب<table>معرفی می شوند.هر جدول به سطرها (بوسیله برچسب <tr>)و هر سطر به سلول های داده تقسیم می شود (بوسیله برچسب <td>) حروف td بیانگر داده جدولی (table data) هستند که حاوی سلول داده است.یک سلول داده می تواند حاوی متن ، عکس ، لیست ها ، پاراگراف ها ، فرم ها ، خط های افقی و جدول ها و... باشد.
|
<table border="1"> <tr> <td>row1,cel1</td> <td>row1,cel2</td> </tr> <tr> <td>row1,cel1</td> <td>row1,cel1</td> </tr> </table> |
اگر شما عنصر حاشیه را معین نکنید ، جدول بدون حاشیه نشان داده خواهد شد. گاهی اوقات این می تواند مفید باشد اما بیشتر مواقع شما می خواهید که حاشیه ها نشان داده شوند.برای نشان دادن جداول با حاشیه شما باید از عنصر حاشیه (border) استفاده کنید.
<table border="1">
<tr>
<td>row1,cel1</td>
<td>row1,cel2</td>
</tr>
<tr>
<td>row2,cel1</td>
<td>row2,cel2</td>
</tr>
</table>
سرتیترها در یک جدول با برچسب <th>مشخص می شوند.
|
|
<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row1,cel1</td> <td>row1,cel2</td> </tr> </table> |
سلول های جداول با محتوای خالی در بیشتر مرورگرها خوب نشان داده نمی شوند.
|
<table border="1"> <tr> <td>row1,cell1</th> <td>row1,cell2</th> </tr> <tr> <td>row2,cel1</td> <td></td> </tr> </table> |
این کدها در مرورگر بدین صورت نشان داده می شوند.توجه کنید که حاشیه های اطراف سلول خالی جدول از بین رفته است(موزیلا فایر فاکس(Fire Fox) حاشیه را نشان می دهد.).برای جلوگیری از آن یک فاصله نا مقطوع(;nbsp&) به سلول داده خالی اضافه کنید تا حاشیه را مشخص سازید.
|
<table border="1"> <tr> <td>row1,cell1</th> <td>row1,cell2</th> </tr> <tr> <td>row2,cel1</td> <td> </td> </tr> </table> |
عناصر <thead>، <tbody>و <tfoot>به دلیل پشتیبانی بد مرورگر ها به ندرت مورد استفاده قرار می گیرند. انتظار می رود که در نسخه های بعدی XHTML این روند تغییر کند.
| برچسب ها | توضیحات |
|---|---|
| <table> | یک جدول معرفی می کند |
| <th> | سرتیتر جدول معرفی می کند |
| <tr> | یک سطر جدول معرفی می کند |
| <td> | یک سلول جدول معرفی می کند |
| <caption> | عنوان جدول معرفی می کند |
| <colgroup> | یک گروه از ستون ها معرفی می کند |
| <col> | یک مقدار موجودیت برای یک یا چند ستون معرفی می کند |
| <thead> | سر یک جدول را معرفی می کند |
| <tbody> | بدنه یک جدول را معرفی می کند |
| <tfoot> |
پاورقی جدول را معرفی می کند |
تعریف و کاربرد
برچسب table یک جدول تعریف می کند. داخل این برچسب، می توانید سرستونها، سطرها، سلولهای جدول و یا جدولی دیگر وارد کنید.
تفاوت بین HTML و XHTML
موجودیت "align" و "bgcolor" در HTML 4.01 دیگر توصیه نمی شوند.
موجودیت "align" و "bgcolor" در XHTML 1.0 نوع Strict دیگر توصیه نمی شوند.
مثال
| منبع | خروجی | ||
|---|---|---|---|
|
<table border = "1"> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </table> |
|
خواص انتخابی
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.
| موجودیت | مقدار | توضیحات | DTD |
|---|---|---|---|
| align |
left center right |
چیدمان متن در سلول را تعیین می کند. به جای آن از style استفاده کنید. | TF |
| bgcolor |
rgb(x,x,x) #xxxxxx colorname |
برای سلول رنگ پس زمینه تعیین می کند. توصیه می شود به جای آن از style استفاده کنید. | TF |
| border | pixels |
پهنای حاشیه جدول را تعیین می کند.
با قرار دادن border="0" جدولی بدون حاشیه بدست می آید! |
STF |
| cellpadding |
pixels % |
فاصله بین دیواره و محتوای سلولها را تعیین می کند. | STF |
| cellspacing |
pixels % |
فاصله بین سلولها را می توان با این موجودیت، تعیین کرد. | STF |
| frame |
void above below hsides lhs rhs vsides box border |
نوع نمایش حاشیه بیرونی جدول را مشخص می کند.
این موجودیت به همراه موجودیت "border" استفاده می شود! |
STF |
| rules |
none groups rows cols all |
برای تنظیم نمایش خطوط افقی و عمودی درون جدول استفاده می شود.
این موجودیت به همراه موجودیت "border" استفاده می شود! |
STF |
| summary | text | خلاصه ای از محتوای جدول را برای بیان در مرورگرهای صوتی تعریف می کند. | STF |
| width |
% pixels |
عرض جدول را تعیین می کند. | STF |
خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup