0
عضویت / ورود
شنبه، 20 بهمن 1403 ( جهش تولید با مشارکت مردم )

مدرسه HTML

 
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

نکات پایه ای-اطلاعات مفید

اگر یک قاب حاشیه پدیدار داشته باشد کاربر می تواند با کشیدن حاشیه آن ، اندازه آن را تغییر دهد. برای جلوگیری از این عمل کاربر ، شما می توانید "noresize="noresize را به برچسب <frame> اضافه کنید. اگر برچسب <noframes> را اضافه کنیم ، مرورگر قاب را پشتیبانی نمی کند.
مهم:شما نمی توانید برچسب های <body> </body> و <frame> </frame> را با هم استفاده کنید. هر چند اگر شما برچسب <noframes> را در مرورگر هایی که قابها را پشتیبانی نمی کنند و حاوی مقداری متن نیز باشد اضافه کنید شما باید متن را بین برچسب های <body> </body> قرار دهید.
پنج شنبه 17 اردیبهشت 1394  3:29 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

مثالهای بیشتر - قاب های HTML

برچسب noframes

<html>
 
<frameset cols="25%,50%,25%">
  <frame src="./content/media/tryit/frame_a.htm">
  <frame src="./content/media/tryit/frame_b.htm">
  <frame src="./content/media/tryit/frame_c.htm">
 
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
 
</frameset>
 
</html>

در صورتیکه مرورگر، امکان نمایش قابها را نداشت، به کمک این برچسب، می توان نمایش مناسبی را ارایه کرد.

 

قابهای پیچیده(ترکیبی از قابهای عمودی و افقی)

<html>
 
<frameset rows="50%,50%">
 
<frame src="./content/media/tryit/frame_a.htm">
 
<frameset cols="25%,75%">
<frame src="./content/media/tryit/frame_b.htm">
<frame src="./content/media/tryit/frame_c.htm">
</frameset>
 
</frameset>
 
</html>

این مثال، صفحه ای که در آن قبهای عمودی و افقی، با هم وجود دارند را نشان می دهد.

 

قابی با موجودیت noresize="noresize"

<html>
 
<frameset rows="50%,50%">
 
<frame noresize="noresize" src="./content/media/tryit/frame_a.htm">
 
<frameset cols="25%,75%">
<frame noresize="noresize" src="./content/media/tryit/frame_b.htm">
<frame noresize="noresize" src="./content/media/tryit/frame_c.htm">
</frameset>
 
</frameset>
 
</html>
 

با کنترل این موجودیت، از تغییر اندازه قابها می توان جلوگیری کرد.

<html>
 
<frameset cols="120,*">
 
<frame src="./content/media/tryit/tryhtml_contents.htm">
<frame src="./content/media/tryit/frame_a.htm" 
name="showframe">
 
</frameset>
 
</html>

این مثال روش ساخت یک قاب محتوایی را نشان می دهد. صفحه از دو قاب اصلی ساخته شده که یکی ازآنها، فهرست و دیگری محتوای سرفصل انتخابی را نمایش می دهند. در قاب فهرست، سه فراپیوند به صورت زیر تعریف شده که موجودیت 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>
<body>
 
<iframe src="http://www.farajpour.ir"></iframe>
 
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
 
 
</body>
</html>

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

پرش به قسمت خاصی در داخل یک قاب

<html>
 
<frameset cols="20%,80%">
 
 <frame src="./content/media/tryit/frame_a.htm">
 <frame src="./content/media/tryit/link.htm#C10">
 
</frameset>
 
</html>

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

 

پرش به محل خاص در صفحه دارای قاب محتوا

<html>
 
<frameset cols="180,*">
 
<frame src="./content/media/tryit/content.htm">
<frame src="./content/media/tryit/link.htm" name="showframe">
 
</frameset>
 
</html>

این مثال ترکیبی از مثال "قاب محتوا" و مثال "پرش" است.

 
پنج شنبه 17 اردیبهشت 1394  3:33 PM
تشکرات از این پست
siryahya
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب های قاب

 

برچسب ها توضیحات
<frameset> یک مجموعه از قاب ها را معرفی می کند
<frame> یک زیر پنجره (قاب) را معرفی می کند
<noframes> برای مرورگر هایی که قاب ها را پشتیبانی نمی کنند ، بخش بدون قاب را معرفی می کند.
<iframe> یک زیر پنجره درون برنامه ای را معرفی می کند.

 
پنج شنبه 17 اردیبهشت 1394  3:38 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب frameset

تعریف و کاربرد

برچسب 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

خواص رویداد

ندارد
پنج شنبه 17 اردیبهشت 1394  3:40 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب frame

تعریف و کاربرد

یک زیر پنجره (قاب) تعریف می کند.

تفاوت بین 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
پنج شنبه 17 اردیبهشت 1394  3:41 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب noframes

تعریف و کاربرد

برچسب 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
پنج شنبه 17 اردیبهشت 1394  3:42 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب Iframe

تعریف و کاربرد

عنصر 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
پنج شنبه 17 اردیبهشت 1394  3:44 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

جدول های HTML

به وسیله HTML شما می توانید جدول بسازید

مثالها

<html>
<body>
 
<p>
Each table starts with a table tag. 
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>
 
<h4>One column:</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>
 
<h4>One row and three columns:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>
 
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>
 
</body>
</html>

این مثال به ما نشان می دهد که چگونه می توانیم یک جدول بکشیم.

<html>
<body>
 
<h4>With a normal border:</h4>  
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
 
<h4>With a thick border:</h4>  
<table border="8">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
 
<h4>With a very thick border:</h4>  
<table border="15">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
 
</body>
</html>

این مثال حاشیه های مختلف جدول را نشان می دهد.
پنج شنبه 17 اردیبهشت 1394  3:50 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

جدول ها

جداول بوسیله برچسب<table>معرفی می شوند.هر جدول به سطرها (بوسیله برچسب <tr>)و هر سطر به سلول های داده تقسیم می شود (بوسیله برچسب <td>) حروف td بیانگر داده جدولی (table data) هستند که حاوی سلول داده است.یک سلول داده می تواند حاوی متن ، عکس ، لیست ها ، پاراگراف ها ، فرم ها ، خط های افقی و جدول ها و... باشد.

row1,cel1 row1,cel2
row2,cel1 row2,cel2
<table border="1">
<tr>
<td>row1,cel1</td>
<td>row1,cel2</td>
</tr>
<tr>
<td>row1,cel1</td>
<td>row1,cel1</td>
</tr>
</table>

 
پنج شنبه 17 اردیبهشت 1394  3:51 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

جدول ها و عنصر حاشیه

اگر شما عنصر حاشیه را معین نکنید ، جدول بدون حاشیه نشان داده خواهد شد. گاهی اوقات این می تواند مفید باشد اما بیشتر مواقع شما می خواهید که حاشیه ها نشان داده شوند.برای نشان دادن جداول با حاشیه شما باید از عنصر حاشیه (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>
پنج شنبه 17 اردیبهشت 1394  3:51 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

سر تیترها در جداول

سرتیترها در یک جدول با برچسب <th>مشخص می شوند.

 

Another Heading Heading
row1,cel2 row1,cel1

 

 <table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row1,cel1</td>
<td>row1,cel2</td>
</tr>
</table>

 
پنج شنبه 17 اردیبهشت 1394  3:52 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

سلول های خالی در جداول

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

row1,cel2 row1,cel1
  row2,cel1
<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&) به سلول داده خالی اضافه کنید تا حاشیه را مشخص سازید.

row1,cel2 row1,cel1
  row2,cel1
<table border="1">
<tr>
<td>row1,cell1</th>
<td>row1,cell2</th>
</tr>
<tr>
<td>row2,cel1</td>
<td> &nbsp; </td>
</tr>
</table>

 
پنج شنبه 17 اردیبهشت 1394  3:52 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

نکته های پایه ای-اطلاعات مفید - جدول های HTML

عناصر <thead>، <tbody>و <tfoot>به دلیل پشتیبانی بد مرورگر ها به ندرت مورد استفاده قرار می گیرند. انتظار می رود که در نسخه های بعدی XHTML این روند تغییر کند.
پنج شنبه 17 اردیبهشت 1394  3:53 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب های جدول

 

برچسب ها توضیحات
<table> یک جدول معرفی می کند
<th> سرتیتر جدول معرفی می کند
<tr> یک سطر جدول معرفی می کند
<td> یک سلول جدول معرفی می کند
<caption> عنوان جدول معرفی می کند
<colgroup> یک گروه از ستون ها معرفی می کند
<col> یک مقدار موجودیت برای یک یا چند ستون معرفی می کند
<thead> سر یک جدول را معرفی می کند
<tbody> بدنه یک جدول را معرفی می کند
<tfoot> پاورقی جدول را معرفی می کند
 

 
پنج شنبه 17 اردیبهشت 1394  3:54 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب Table

تعریف و کاربرد

برچسب 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>
Cell A Cell B

 

خواص انتخابی

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
پنج شنبه 17 اردیبهشت 1394  3:55 PM
تشکرات از این پست
دسترسی سریع به انجمن ها