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

مدرسه HTML

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

برچسب Form

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

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

تفاوت بین HTML و XHTML

تفاوتی ندارد

مثال

منبع خروجی
<form action="form_action.asp"
method="get">

First name: 
<input type="text" name="fname" value="Mickey" />
<br />
Last name: 
<input type="text" name="lname" value="Mouse" />
<br />
<input type="submit" value="Submit" />

</form> 

<p dir=rtl>

اگر شما روی دکمه "submit" کلیک کنید شما ورودی های خود را به یک صفحه جدید به نام form_action.asp خواهید فرستاد. 

</p>		 First name:  
Last name:  

اگر شما روی دکمه "submit" کلیک کنید شما ورودی های خود را به یک صفحه جدید به نام form_action.asp خواهید فرستاد.

موجودیت های مورد نیاز

DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.

موجودیت مقدار توضیحات DTD
action URL یک URL که مشخص می کند داده ها به هنگام فشردن دکمه submit کجا روند. STF

 

خواص انتخابی

موجودیت مقدار توضیحات DTD
accept list of contenttypes یک لیست از انواع داده ها که با کاما از هم جداشده اند سروری که این فرم را پردازش می کند می تواند داده ها را بدرستی اجرا کند STF
accept-charset charset_list یک لیست که با کاما جدا شده از مجموعه کاراکترهای ممکن برای داده های یک فرم. داده پیش فرض "unknown" است. STF
enctype mimetype The mime type used to encode the content of the form STF
method get
post		 یک شیوه فرستادن داده های فرم به صفحه action در HTTP که پیش فرض آن get است.

"method="get: این شیوه داده های فرم را در URL می فرستد: URL?name=value&name=value. 
نکته:اگر محتویات فرم حاوی کاراکترهای non-ASCII یا بیش از 100 کاراکتر بود شما باید از شیوه post استفاده کنید

"method="post: این روش محتویات را در بدنه درخواست می فرستد. 
نکته: بیشتر مرورگرها نمی توانند درخواست post را نشان دهند.

 STF
name form_name یک نام منحصر به فرد برای فرم تخصیص می دهد. TF
target _blank
_self
_parent
_top

URL هدف کجا باز شود

  • URL - blank_ هدف در یک پنجره جدید باز می شود.
  • URL - self_ هدف در همان قابی که کلیک شده باز می شود
  • URL - parent_ هدف در قاب مادر باز خواهد شد.
  • URL - top_ هدف در تمام پنجره باز خواهد شد
 TF

خواص استاندارد

id, class, title, style, dir, lang, xml:lang

خواص رویداد

onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
پنج شنبه 17 اردیبهشت 1394  4:34 PM
تشکرات از این پست
siryahya
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب Input

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

برچسب input شروع یک فیلد ورودی را نشان می دهد که کاربر می تواند داده های خود را تعریف کند.

تفاوت بین HTML و XHTML

در HTML برچسب input برچسب پایانی ندارد.
در XHTML برچسب input باید برچسب پایانی داشته باشد.

نکات:

برچسب input خالی است و فقط حاوی موجودیت هاست.
برای ساخت یک برچسب از label استفاده کنید.

مثال

منبع خروجی
<form action="form_action.asp"
method="get">

First name: 
<input type="text" name="fname" value="Mickey" />
<br />
Last name: 
<input type="text" name="lname" value="Mouse" />
<br />
<input type="submit" value="Submit" />

</form> 

<p dir=rtl>

اگر شما روی دکمه "submit" کلیک کنید شما ورودی های خود را به یک صفحه جدید به نام form_action.asp خواهید فرستاد. 

</p>		 First name:  
Last name:  

اگر شما روی دکمه "submit" کلیک کنید شما ورودی های خود را به یک صفحه جدید به نام form_action.asp خواهید فرستاد.

خواص انتخابی

DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.

موجودیت مقدار توضیحات DTD
accept list_of_mime_types A comma-separated list of MIME types that indicates the MIME type of the file transfer.

نکته: فقط با "type="file استفاده می شود.

 STF
align left
right
top
texttop
middle
absmiddle
baseline
bottom
absbottom		 چیدمان متن زیر تصویر را مشخص می کند.

نکته: "with type="image

 TF
alt text یک متن برای تصویر معرفی می کند.

نکته: فقط برای "type="image استفاده می شود.

 STF
checked checked  مشخص می کند که عنصر باید در اولین باری که صفحه بارگیری می شود انتخاب شده باشد.

نکته: فقط با "type="checkbox و "type="radio استفاده می شود.

 STF
disabled disabled عنصر ورودی را دراولین باری که بارگیری می شودغیر فعال می کند. بنابراین کاربر نمی تواند در آن متنی وارد کند یا آن را انتخاب کند.

نکته: نمی تواند با "type="hidden استفاده شود.

 STF
maxlength number Defines بیشترین تعداد کاراکتری که اجازه دارد در فیلد متنی قرار بگیرد.

نکته: فقط با "type="text استفاده می شود.

 STF
name field_name برای عنصر ورودی یک نام یکتا درنظر می گیرد.

Note: این موجودیت برای type="button", type="checkbox", type="file", type="hidden", type="image", type="password", type="text", and "type="radio مورد نیاز است.

 STF
readonly     readonly مشخص می کند که محتوای این فیلد قابل تغییر نیست.

نکته: فقط برای "type="text استفاده می شود.

 STF
size number_of_char اندازه عنصر ورودی را مشخص می کند.

نکته: نمی تواند برای "type="hidden استفاده شود.

 STF
src URL URL تصویری راکه نشان داده می شود را مشخص می کند.

نکته: فقط برای "type="image استفاده می شود.

 STF
type button
checkbox
file
hidden
image
password
radio
reset
submit
text

نوع عنصر ورودی را مشخص می کند.. عنصر پیش فرض "text" است.

نکته:این یک موجودیت مورد نیاز نیست، اما ما فکر می کنیم شما باید آن را قرار دهید.. اگر از قلم بیفتد ie 5.5 یک فیلد متنی نشان خواهد داد اما Netscape نه.

 STF
value value برای دکمه ها ، دکمه Reset , Submit: متن روی دکمه را مشخص می کند.

برای دکمه های تصویری: یک نتیجه نمادین برای فیلدی که به script پاس داده می شود معرفی می کند.

برای check box و دکمه های رادیویی:نتیجه عناصر ورودی وقتی کلیک می شوند را مشخص می کند. نتیجه به URL صفحه action ارسال می شود.

برای فیلد های متنی ، رمزعبور و مخفی:مقدار پیش فرض آن فیلد را معرفی می کند

نکته: نمی تواند با "type="file استفاده شود.

نکته: این موجودیت برای type="checkbox" and "type="radio مورد نیاز است.

 STF

خواص استاندارد

id, class, title, style, dir, lang, xml:lang

خواص رویداد

tabindex, accesskey, onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
پنج شنبه 17 اردیبهشت 1394  4:35 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب Textarea

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

یک فیلد ورودی متن چند خطی را معرفی می کند. یک کاربر می تواند متن در textarea وارد کند. در یک textarea شما می توانید به میزان نامحدود کاراکتر وارد کنید.

تفاوت بین HTML و XHTML

تفاوتی ندارند.

مثال

منبع خروجی
<textarea rows="2" cols="20">
در اینجا می توان به میزان نامحدود کاراکتر وارد کرد....
</textarea>

موجودیت های مورد نیاز

DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.

موجودیت مقدار توضیحات DTD
cols number تعداد ستون هایی را که در textarea نشان داده می شود را مشخص خواهد کرد. STF
rows number تعداد سطرهایی را که در textarea نشان داده خواهد شد را مشخص می کند. STF

خواص انتخابی

موجودیت مقدار توضیحات DTD
disabled disabled textarea را اولین بار که بارگیری می شود غیر فعال می کند. STF
name name_of_textarea یک نام برای textarea مشخص می کند. STF
readonly readonly مشخص می کند که نمی توان محتویات textarea را تغییر داد. STF

خواص استاندارد

id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

خواص رویداد

onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
پنج شنبه 17 اردیبهشت 1394  4:36 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب Label

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

برای یک کنترل یک برچسب معرفی می کند. اگر روی متنی که در برچسب است کلیک کنید ، آن فکر می کند که شما کنترل را کلیک کرده اید.

تفاوت بین HTML و XHTML

تفاوتی ندارند.

مثال

منبع خروجی
<p>Try clicking on the text labels:</p>
<form name="input" action="">
<input type="radio" name="sex" id="male" />
<label for="male">Male</label>
<br />
<input type="radio" name="sex" id="female" />
<label for="female">Female</label>
</form>

Try clicking on the text labels:

  
 

خواص انتخابی

DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.

موجودیت مقدار توضیحات DTD
for id_of_another_field نشان می دهد که برچسب برای کدام عنصر فرم است.. یک id یک عنصر فرم تخصیص می دهد.

نکته: اگر این موجودیت مشخص نشده باشدآن برچسب به محتویاتش وابسته است.

 STF

خواص استاندارد

id, class, title, style, dir, lang, xml:lang

خواص رویداد

accesskey, onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
پنج شنبه 17 اردیبهشت 1394  4:37 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب Fieldset

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

عنصر fieldset یک کادر اطراف عناصری که شامل آنها می شود می کشد.

تفاوت بین HTML و XHTML

تفاوتی ندارند.

مثال

منبع خروجی
<fieldset>
Height <input type="text" size="3" /><br />
Weight <input type="text" size="3" />
</fieldset>
Height 
Weight 

خواص استاندارد

id, class, title, style, dir, lang, xml:lang

خواص رویداد

accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
پنج شنبه 17 اردیبهشت 1394  4:38 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب Legend

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

برچسب legend یک عنوان برای fieldset قرار می دهد.

تفاوت بین HTML و XHTML

برچسب menu در HTML4.0 توصیه نمی شود.
برچسب menu در XHTML 1.0 پشتیبانی نمی شود.

تفاوت بین HTML و XHTML

موجودیت align در HTML 4.0 توصیه نمی شود. 
موجودیت align در XHTML 1.0 پشتیبانی نمی شود.

مثال

منبع خروجی
<fieldset>
<legend align="right">Health information:</legend>
Height <input type="text" size="3" />
Weight <input type="text" size="3" />
</fieldset>
اطلاعات سلامتیHeight  Weight 

خواص انتخابی

DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.

موجودیت مقدار توضیحات DTD
align top
bottom
left
right		 چیدمان محتویات fieldset را معرفی می کند. پیش فرض top است.. TF

خواص استاندارد

id, class, title, style, dir, lang, xml:lang

خواص رویداد

accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
پنج شنبه 17 اردیبهشت 1394  4:39 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب Select

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

برچسب select یک لیست پایین بازشو را معرفی می کند.

تفاوت بین HTML و XHTML

تفاوتی ندارند.

مثال

منبع خروجی
<select>
  <option value ="volvo">Volvo</option>
  <option value ="BMW">Saab</option>
  <option value ="Ford">Opel</option>
  <option value ="Toyota">Audi</option>
</select>

خواص انتخابی

DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.

موجودیت مقدار توضیحات DTD
disabled disabled لیست پایین باز شو غیر فعال می شود. STF
multiple multiple چند گزینه در آن واحد می توانند انتخاب شوند. STF
name unique_name یک نام یکتا برای لیست انتخاب می کند. STF
size number تعداد عناصری که قابل دیدن در لیست هستند را مشخص می کند. STF

خواص استاندارد

id, class, title, style, dir, lang, xml:lang, accesskey, tabindex

خواص رویداد

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

برچسب Optgroup

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

یک لیست گروهی درست می کنند. این عنصر یه شما اجازه می دهد تا انتخابات را گروه بندی کنید. هنگامی که شما یک لیست لند از گزینه ها دارید، گروه های انتخاب های مرتبط با هم برای اجرا آسانتر است. عنصر fieldset یک کادر اطراف عناصری که شامل آنها می شود می کشد.

تفاوت بین HTML و XHTML

تفاوتی ندارند.

مثال

منبع خروجی
<select>
<optgroup label="خودرو های سوئدی">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="خودرو های آلمانی">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>

موجودیت های مورد نیاز

DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.

موجودیت مقدار توضیحات DTD
label text_label یک برچسب برای گروه گزینه ها انتخاب می کند. STF

خواص انتخابی

موجودیت مقدار توضیحات DTD
disabled disabled در اولین بارگیری لیست گزینه ها را غیرفعال می کند. STF

خواص استاندارد

id, class, title, style, dir, lang, xml:lang

خواص رویداد

tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
پنج شنبه 17 اردیبهشت 1394  4:41 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب Option

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

عنصر option یک گزینه در لیست پایین بازشو معرفی می کند.

تفاوت بین HTML و XHTML

در HTML برچسب option برچسب انتهایی ندارد. 
در XHTML برچب option باید حتما بسته شود. تفاوتی ندارند.

نکات:

نکته: برچسب option می تواند هیچ موجودیتی نداشته باشد اما شما معمولا به موجودیت value احتیاج دارید که نشان می دهد چه عنصری به سرور فرستاده می شود. 
نکته:از این برچسب برای همبستگی با select استفاده کنید. علی رغم اینکه این معنی را نمی دهد.

مثال

منبع خروجی
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value ="opel" selected="selected">Opel</option>
<option value ="audi">Audi</option>
</select>

خواص انتخابی

DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.

موجودیت مقدار توضیحات DTD
disabled disabled مشخص می کند که در اولین بارگیری کدام گزینه باید نشان داده شود. STF
label text یک برچسب برای استفاده از <optgroup> معرفی می کند. STF
selected selected مشخص می کند که گزینه باید بصورت انتخاب شده نشان داده شود (اولین عنصر لیست نشان داده خواهد شد) STF
value text مقدار گزینه ای را که به سرور ارسال خواهد شد مشخص می کند. server STF

خواص استاندارد

id, class, title, style, dir, lang, xml:lang, tabindex

خواص رویداد

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
پنج شنبه 17 اردیبهشت 1394  4:42 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب Button

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

یک دکمه فشاری را معرفی می کند. در داخل دکمه شما می توانید محتویاتی مانند متن یا تصویر داشته باشید. تفاوت بین این و دکمه ها با

تفاوت بین HTML و XHTML

تفاوتی ندارند.

مثال

منبع خروجی
<button>Click Me!</button>

خواص انتخابی

DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.

موجودیت مقدار توضیحات DTD
disabled disabled دکمه را غیر فعال می کند STF
name button_name یک نام یکتا برای دکمه انتخاب می کند STF
type button
reset
submit 		 نوع دکمه را مشخص می کند STF
value some_value یک مقدار آغازین برای دکمه مشخص می کند. مقدار می تواند با script عوض شود. STF

خواص استاندارد

id, class, title, style, dir, lang, xml:lang, accesskey, tabindex

خواص رویداد

onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
پنج شنبه 17 اردیبهشت 1394  4:42 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

عکس های HTML

با HTML شما می توانید در یک پرونده عکس نشان دهید.

نمایش عکس

<html>
<body>
 
<p>
An image:
<img src="./content/media/tryit/constr4.gif"
width="144" height="50">
</p>
 
<p>
A moving image:
<img src="./content/media/tryit/hackanm.gif"
width="48" height="48">
</p>
 
<p>
Note that the syntax of inserting a moving image is no different from that of a non-moving image.
</p>
 
</body>
</html>

این مثال چگونگی نمایش عکس را نشان می دهد.

 

نمایش عکس از محلی دیگر

<html>
<body>
 
<p>
An image from another folder:
<img src="./content/media/tryit/images/netscape.gif"
width="33" height="32">
</p>
 
<p>
An image from W3Schools:
<img src="http://www.w3schools.com/images/ie.gif">
</p>
 
</body>
</html>

در صورتیکه عکس مورد نظر در محلی دیگر باشد(آدرسی در شبکه)، می توانید برای نمایش آن، از این مثال کمک بگیرید.
پنج شنبه 17 اردیبهشت 1394  4:46 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب Images و موجودیت Src

در HTML عکس ها با برچسب <img > معرفی می شوند.برچسب <img > خالی است بدین معنا که آن فقط حاوی موجودیت هاست و برچسب پایانی ندارد.
برای نمایش یک تصویر در یک صفحه ، شما احتیاج دارید که از موجودیت Src استفاده کنید. Src مخفف source (منبع) است. محتوای موجودیت url ، Src تصویری است که شما می خواهید در صفحه تان نمایش دهید. نحوه معرفی یک تصویر: 

<"img src="url >

url به محلی اشاره می کند که تصویر در آنجا قرار دارد . تصویری که "boat.gif" نامیده شده در دایرکتوری "images" در "www.farajpour.ir" دارای این url است:

http://farajpour.ir/wp-content/uploads/2015/04/java.jpg

مرورگر تصویر را جایی قرار می دهد که بر چسب تصویر پرونده در آنجا قرار گرفته است.اگر شما برچسب تصویر را بین دو پاراگراف قرار دهید ، مرورگر ابتدا پاراگراف اول ، سپس تصویر و سپس پاراگراف دوم را نشان می دهد.
پنج شنبه 17 اردیبهشت 1394  4:47 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

موجودیت Alt

موجودیت Alt برای معرفی متن جایگزین به جای یک تصویر استفاده می شود. محتوای موجودیت Alt یک متن توصیفی است:

<"img src="url" alt="Big Boat>

اگر مرورگر نتواند تصویری را بارگیری نماید ، موجودیت alt به خواننده می گوید که آن را در صفحه از دست داده است ، سپس مرورگر متن جایگزین را بجای آن نشان خواهد داد.
پنج شنبه 17 اردیبهشت 1394  4:48 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

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

اگر یک فایل HTML حاوی 10 تصویر باشد ، برای نمایش کامل صفحه به 11 فایل احتیاج است. بارگیری تصاویر وقت گیر است ، بنابر این بهترین توصیه من اینست که از تصاویر به دقت استفاده کنید.
پنج شنبه 17 اردیبهشت 1394  4:49 PM
تشکرات از این پست
saeidfarajpour
saeidfarajpour
کاربر طلایی1
تاریخ عضویت : آذر 1392 
تعداد پست ها : 2734
محل سکونت : اردبیل

برچسب های تصویر

 

برچسب توضیحات
<img> یک تصویر را معرفی می کند.
<map> یک تصویر نقشه را معرفی می کند
<area> داخل یک تصویر نقشه یک منطقه قابل کلیک را تعریف می کند

 
پنج شنبه 17 اردیبهشت 1394  4:50 PM
تشکرات از این پست
دسترسی سریع به انجمن ها