مدرسه HTML

saeidfarajpour کاربر طلایی1

تعداد پست ها : 2734

تاریخ عضویت : آذر 1392

برچسب توضیحات برای وارد کردن توضیحات در منبع کد HTML استفاده می شود.توضیحات توسط مرورگرها نادیده گرفته می شوند. شما می توانید از توضیحات برای تشریح کد های خود استفاده کنید که می تواند به شما هنگامی که در آینده کد منبع خود را ویرایش می کنید کمک کند.

توجه کنید که شما بعد از باز کردن براکت به علامت تعجب نیاز دارید اما قبل از بستن نیاز ندارید.

saeidfarajpour کاربر طلایی1

تعداد پست ها : 2734

تاریخ عضویت : آذر 1392

هنگامی که شما یک متن HTML می نویسید هرگز نمی توانید مطمئن باشید این متن در یک مرورگر دیگر چطور نشان داده می شود.تعدادی از مردم صفحه نمایش بزرگ کامپیوتر دارند و تعدادی کوچک. هر بار که کاربر اندازه پنجره را تغییر دهد متن دوباره قالب بندی خواهد شد. هرگز سعی نکنید که با اضافه کردن خطوط خالی و فاصله در متن آن را در ویرایشگرتان قالب بندی کنید.
HTML فاصله ها را از متن حذف می کند، هر تعدادی از فاصله ها تنها به یک فاصله تبدیل می شوند.

مقداری اطلاعات اضافی

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

برای وارد کردن یک خط خالی یک عملکرد بد است.بجای آن از برچسب <br>استفاده کنید.(اما از <br> برای ساخت لیست خالی استفاده نکنید ، صبر کنید تا در مورد لیستهای HTML یاد بگیرید)
شما ممکن است متوجه باشید که پاراگراف ها می توانند بدون بستن برچسب <p/> نوشته شوند.نسخه بعدی HTML اجازه نخواهد داد که هیچ برچسب پایانی را جا بیندازید.HTML بطور خود کار یک خط خالی اضافی قبل و بعد از برخی عناصر اضافه می کند مثل قبل و بعد از پاراگراف و قبل و بعد از سر تیتر ها.ما از یک خط افقی (برچسب<hr>) برای جدا کردن بخش های مختلفدرسمان استفاده کرده ایم.

saeidfarajpour کاربر طلایی1

تعداد پست ها : 2734

تاریخ عضویت : آذر 1392

<html>

<body>

<p>

This paragraph

contains a lot of lines

in the source code,

but the browser

ignores it.

</p>

<p>

This paragraph

contains a lot of spaces

in the source code,

but the browser

ignores it.

</p>

<p>

The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.

</p>

</body>

</html>

این مثال رفتار برچسب پاراگراف را با نمایش چند نمونه از آن، نشان می دهد.

<html>

<body>

<p>

To break<br>lines<br>in a<br>paragraph,<br>use the br tag.

</p>

</body>

</html>

با استفاده از برچسب سر خط، به ابتدای خط بعد می رویم. این مثال رفتار این برچسب را نشان می دهد.

<html>

<body>

<p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

<p>Note that your browser simply ignores your formatting!</p>

</body>

</html>

با این مثال، متوجه می شوید، در صورتی که از برچسبها استفاده نکنید، صفحه بندی شما، نادیده گرفته می شود.

<html>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

<p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p>

</body>

</html>

در این مثال طریق متمایز کردن جملات سر فصل را می بینید.

<html>

<body>

<h1 align="center">This is heading 1</h1>

<p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p>

</body>

</html>

این مثال نشان می دهد که چگونه می توان،محل نمایش جمله، در خط را تعیین کرد.

<html>

<body>

<p>The hr tag defines a horizontal rule:</p>

<hr>

<p>This is a paragraph</p>

<hr>

<p>This is a paragraph</p>

<hr>

<p>This is a paragraph</p>

</body>

</html>

این مثال روش نمایش یک خط افقی را نشان می دهد.

<html>

<body>

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

</body>

</html>

گاهی، نیاز به نوشتن توضیحی درباره html خود دارید. این توضیح باید در حالت نمایش دیده نشود. این مثال روش نوشتن چنین متن هایی را، داخل html، نشان می دهد.

<html>

<h2>Look: Colored Background!</h2>

</body>

</html>

می توانید رنگ زمینه html خود را تعیین کنید. این مثال را ببینید.

saeidfarajpour کاربر طلایی1

تعداد پست ها : 2734

تاریخ عضویت : آذر 1392

برچسب ها	توضیحات
<html>	یک پرونده HTML را معرفی می کند
<body>	بدنه پرونده را معرفی می کند
<h1> to <h6>	سر تیتر 1 تا 6 را معرفی می کند
<p>	یک پاراگراف را معرفی می کند
<br>	یک خط خالی را معرفی می کند
<hr>	یک خط افقی را معرفی می کند
<!-->	توضیحات را معرفی می کند

saeidfarajpour کاربر طلایی1

تعداد پست ها : 2734

تاریخ عضویت : آذر 1392

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

این برچسب به مرورگر می فهماند که این یک فایل html است.

تفاوت بین HTML و XHTML

برچسب xmlns در XHTML مورد نیاز است نه در HTML. هرچند که معتبرساز w3.org وقتی که این موجودیت از برچسب HTML به فایل XHTML رفت شکایتی نکرد. این بدین دلیل است که "xmlns=http://www.w3.org/1999/xhtml" یک مقدار ثابت دارد و به برچسب html اضافه می شود حتی اگر شما آن را اضافه نکنید.

مثال

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

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

موجودیت	مقدار	توضیحات	DTD
xmlns	http://www.w3.org/1999/xhtml	یک موجودیت فضای نامی XHTML معرفی می کند.	STF

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

dir, lang, xml:lang

خودتان بیازمایید

<html>

<body>

The content of the body element is displayed in your browser.

</body>

</html>

این مثال ساده ترین نمونه html است که در آن، از کمترین برچسب ممکن، استفاده شده است. در این مثال جمله نوشته شده درون برچسب body، نمایش داده می شود.

saeidfarajpour کاربر طلایی1

تعداد پست ها : 2734

تاریخ عضویت : آذر 1392

عریف و کاربرد

برچسب <!DOCTYPE>، اولین برچسبی است که حتی پیش از برچسب <html> در کد صفحه می آید. به کمک این برچسب، مرورگر را از نسخه استاندارد HTML و یا XHTMLی که در صفحه از آن استفاده شده، آگاه می کنیم.

HTML

استاندارد HTML 4.01، سه نوع صفحه را تعریف می کند: Strict، Transitional و Frameset.

HTML Strict DTD

از این استاندارد زمانی استفاده می شود که صفحه ما فقط حاوی برچسبهای توصیف متن است و توصیف نحوه نمایش در CSS آمده است.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML Transitional DTD

در صورتیکه در صفحه از برچسبهای توصیف نمایش استفاده شده باشد و یا مرورگر مورد استفاده، CSS را پشتیبانی نکند، از این از این استاندارد استفاده می کنیم. این استاندارد شامل برچسبهای توصیف متن و تمام برچسبهای توصیف نمایش است که W3C انها را به CSS منتقل کرده است.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset DTD

در صورت استفاده از برچسب frameset باید از این استاندارد استفاده کنیم. این استاندارد همانند استاندارد Transitional است با این تفاوت که در آن به جای برچسب body از برچسب frameset استفاده شده است.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML

استاندارد XHTML 1.0 سه نوع صفحه را پشتیبانی می کند: Strict، Transitional و Frameset.

XHTML Strict DTD

همانند استاندارد همنام خود در HTML، این استاندارد نیز برای صفحه هایی است که فقط از برچسبهای توصیف متن استفاده می کنند.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Transitional DTD

می خواهید XHTMLی که دارای برچسبهای نمایشی باشد بنویسید; مرورگر شما CSS را پشتیبانی نمی کند; این استاندارد برای شماست.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML Frameset DTD

اگر از frameset استفاده می کنید، از این استاندارد بهره ببرید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

saeidfarajpour کاربر طلایی1

تعداد پست ها : 2734

تاریخ عضویت : آذر 1392

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

برچسب body بدنه فایل را معرفی می کند. آن شامل تمام محتویات فایل است.(مثل متن ، تصلویر ، رنگها و ...)

تفاوت بین HTML و XHTML

همه موجودیت های ارائه در HTML دیگر توصیه نمی شوند.
همه موجودیت های ارائه در XHTML پشتیبانی نمی شوند.

مثال

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
The content of the document......
</body>
</html>

موجودیت های انتخابی

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

موجودیت	مقدار	توضیحات	DTD
alink	rgb(x,x,x) #xxxxxx colorname	رنگ پیوند فعال در صفحه را مشخص می کند..توصیه می شود به جای آن از style استفاده کنید.	TF
background	file_name	یک تصویر که بعنوان پس زمینه انتخاب شود.. توصیه می شود به جای آن از style استفاده کنید.	TF
bgcolor	rgb(x,x,x) #xxxxxx colorname	رنگ پس زمینه پرونده را مشخص می کند. توصیه می شود به جای آن از style استفاده کنید.	TF
link	rgb(x,x,x) #xxxxxx colorname	رنگ کل پیوندها در پرونده را مشخص می کند. توصیه می شود به جای آن از dtyle استفاده کنید.	TF
text	rgb(x,x,x) #xxxxxx colorname	رنگ متنم را در صفحق مشخص می کند. توصیه می شود به جای آن از style استفاده کنید	TF
vlink	rgb(x,x,x) #xxxxxx colorname	رنگ پیوندهای ملاقات شده در صفحه را نشان می دهد. توصیه می شود به جای آن از style استفاده کنید.	TF

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

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

خواص رویداد

onload, onunload, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

saeidfarajpour کاربر طلایی1

تعداد پست ها : 2734

تاریخ عضویت : آذر 1392

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

برچسب های h1 تا h6 سرتیتر تعریف می کنند. h1 بزرگترین و h6 کوچکترین سرتیتر را تعریف می کنند.

تفاوت بین HTML و XHTML

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

مثال

منبع	خروجی
<h1>This is header 1</h1> <h2>This is header 2</h2> <h3>This is header 3</h3> <h4>This is header 4</h4> <h5>This is header 5</h5> <h6>This is header 6</h6>	This is header 1 This is header 2 This is header 3 This is header 4 This is header 5 This is header 6

منبع

خروجی

<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<h4>This is header 4</h4>
<h5>This is header 5</h5>
<h6>This is header 6</h6>

This is header 1

This is header 2

This is header 3

This is header 4

This is header 5

This is header 6

موجودیت های انتخابی

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

موجودیت	مقدار	توضیحات	DTD
align	left center right justify	چیدمان متن در سرتیتر را معرفی می کند. توصیه می شود به جای آن از style استفاده کنید.	TF

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

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

خواص رویداد

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

saeidfarajpour کاربر طلایی1

تعداد پست ها : 2734

تاریخ عضویت : آذر 1392

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

برچسب p یک پاراگراف معرفی می کند.

تفاوت بین HTML و XHTML

همه موجودیت های ارائه برچسب p در HTML دیگر توصیه نمی شوند.
همه موجودیت های ارائه برچسب p در XHTML پشتیبانی نمی شوند.

مثال

منبع	خروجی
<p>This is some text in a very short paragraph</p>	This is some text in a very short paragraph</p>

موجودیت های انتخابی

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

موجودیت	مقدار	توضیحات	DTD
align	left right center justify	جهت چیدمان متن در پاراگراف را تعیین می کند. به جای آن از style استفاده کنید	TF

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

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

خواص رویداد

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

saeidfarajpour کاربر طلایی1

تعداد پست ها : 2734

تاریخ عضویت : آذر 1392

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

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

تفاوت بین HTML و XHTML

در HTML 4.0 برچسب br برچسب پایانی ندارد.
در XHTML برچسب br باید بسته شود مثل این: <br/>

نکات

از برچسب br برای درست کردن یک خط خالی استفاده کنید نه برای جداسازی پاراگراف ها.

مثال

منبع	خروجی
This text contains<br />a line break	This text contains a line break

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

id, class, title, style

saeidfarajpour کاربر طلایی1

تعداد پست ها : 2734

تاریخ عضویت : آذر 1392

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

برچسب hr یک خط افقی ایجاد می کند.

تفاوت بین HTML و XHTML

در HTML برچسب hr برچسب پایانی ندارد.
در XHTML برچسب hr باید کاملا بسته شود.
همه موجودیت های ارائه در HTML دیگر توصیه نمی شوند.
همه موجودیت های ارائه در XHTML پشتیبانی نمی شوند.

مثال

منبع	خروجی
This is some text <hr /> This is some text	This is some text This is some text

موجودیت های انتخابی

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

موجودیت	مقدار	توضیحات	DTD
align	center left right	چیدمان خط افقی را تعیین می کند. توصیه می شود به جای آن از style استفاده کنید.	TF
noshade	noshade	هنگامی که این خاصیت برابر true شود خط باید بصورت تک رنگ نشان داده شود. هنگامی که false شود خط باید بصورت دو رنگ نشان داده شود "groove".توصیه می شود به جای آن از style استفاده کنید.	TF
size	pixels %	پهنای خط افقی را مشخص می کند. توصیه می شود به جای آن از style استفاده کنید.	TF
width	pixels %	اندازه طول خط را مشخص می کند. توصیه می شود به جای آن از style استفاده کنید. rule Deprecated. Use styles instead	TF

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

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

خواص رویداد

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

saeidfarajpour کاربر طلایی1

تعداد پست ها : 2734

تاریخ عضویت : آذر 1392

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

برچسب comment استفاده می شود که یک توضیح کوتاه در کد منبع وارد کند. این توضیح توسط مرورگر نادیده گرفته خواهد شد. شما می توانید از این توضیحات برای تشریح کدهای خود استفاده کنید و می تواند شما را در ویرایش کدهایتان در آینده کمک کند.
شما همچنین می توانید اطلاعات خاص برنامه را در توضیحات نگهداری کنید. در این حالت این توضیحات قابل رویت نیستند ولی در کد برنامه وجود دارند.

مثال

منبع	خروجی
<!--This text is a comment--> <p>This is a regular paragraph</p>	This is a regular paragraph

saeidfarajpour کاربر طلایی1

تعداد پست ها : 2734

تاریخ عضویت : آذر 1392

مثالها

<html>

<body>

<br>

This text is strong

</strong>

<br>

<big>

This text is big

</big>

<br>

<em>

This text is emphasized

</em>

<br>

<i>

This text is italic

</i>

<br>

<small>

This text is small

</small>

<br>

This text contains

<sub>

subscript

</sub>

<br>

This text contains

<sup>

superscript

</sup>

</body>

</html>

در این مثال، نمایشهای گوناگون متن را می بینید.

<html>

<body>

<pre>

This is

preformatted text.

It preserves both spaces

and line breaks.

</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>

for i = 1 to 10

print i

next i

</pre>

</body>

</html>

به کمک برچسب pre، قالب بندی اولیه متن خود را(شامل فاصله ها و سرخط ها)، حفظ کنید.

<html>

<body>

<code>Computer code</code>

<br>

<kbd>Keyboard input</kbd>

<br>

<tt>Teletype text</tt>

<br>

<samp>Sample text</samp>

<br>

<var>Computer variable</var>

<br>

<p>

<b>Note:</b> These tags are often used to display computer/programming code.

</p>

</body>

</html>

نوشته های کامپیوتری، حالتهای خاصی دارند که می توان به کمک برچسبها، متن نوشته شده را به آن حالتها نمایش داد. مثال را ببینید.

<html>

<body>

Donald Duck<br>

BOX 555<br>

Disneyland<br>

USA

</address>

</body>

</html>

برچسب address، حالت خاص نمایش آدرس را به متن ما می دهد. ببینید.

<html>

<body>

<br>

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>

<p>This only works for the acronym element in IE 5.</p>

<p>This works for both the abbr and acronym element in Netscape 6.2.</p>

</body>

</html>

اگر بخواهیم مخفف و یا مترادف یک کلمه را در متن نشان دهیم چه می کنیم؟ مثال را ببینید.

<html>

<body>

<p>

If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):

</p>

Here is some Hebrew text

</bdo>

</body>

</html>

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

<html>

<body>

Here comes a long quotation:

This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.

</blockquote>

Here comes a short quotation:

<q>

This is a short quotation

</q>

<p>

With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special.

</p>

</body>

</html>

نقل قول در متن، با توجه به اینکه کوتاه یا بلند باشد، به صورت های مختلف نشان داده می شود. این مثال را ببینید.

<html>

<body>

<p>

a dozen is

<del>twenty</del>

<ins>twelve</ins>

pieces

</p>

<p>

Most browsers will overstrike deleted text and underline inserted text.

</p>

<p>

Some older browsers will display deleted or inserted text as plain text.

</p>

</body>

</html>

برای نمایش کلمات حذف و یا اضافه شده به متن اصلی، مثال را ببینید.

saeidfarajpour کاربر طلایی1

تعداد پست ها : 2734

تاریخ عضویت : آذر 1392

آیا شما تا حالا صفحه ای را دیده اید که از دیدن آن شگفت زده شده با شید وبگویید چگونه این کار را انجام داده اند؟
برای پیدا کردن آن بسادگی بروی گزینه view روی نوار ابزار کلیک کنید وگزینه source یا page source را انتخاب کنید.آن یک پنجره ای را باز خواهد کرد که به شما HTML واقعی آن صفحه را نشان خواهد داد.

saeidfarajpour کاربر طلایی1

تعداد پست ها : 2734

تاریخ عضویت : آذر 1392

برچسب ها	توضیحات
<b>	متن را برجسته معرفی می کند
<big>	متن را بزرگ معرفی می کند
<em>	متن را مورب معرفی می کند
<i>	متن را مورب معرفی می کند
<small>	متن را کوچک معرفی می کند
<strong>	متن را برجسته معرفی می کند
<sub>	متن را زیرنویس دار معرفی می کند
<sup>	متن را بالانویس دار معرفی می کند
<ins>	قطعه متنی را که در متن اصلی جا داده شده معرفی می کند
<del>	قطعه متنی را که از متن اصلی حذف شده نشان می دهد
<s>	توصیه نمی گردد. به جای آن از <del> استفاده کنید.
<strike>	توصیه نمی گردد. به جای آن از <del> استفاده کنید.
<u>	توصیه نمی گردد.به جای آن از خواص Style استفاده کنید

برچسب های خروجی کامپیوتر

برچسب ها	توضیحات
<code>	متن کد کامپیوتری را معرفی می کند
<kbd>	متن صفحه کلید را معرفی می کند
<samp>	متن نمونه مثال های کامپیوتری را معرفی می کند
<tt>	متن را بصورت ماشین نویس معرفی می کند
<var>	یک مقدار را معرفی می کند
<pre>	متن از پیش قالب بندی شده را معرفی می کند
<listing>	توصیه نمی گردد. به جای آن از <pre> استفاده کنید
<plaintext>	توصیه نمی گردد. به جای آن از <pre> استفاده کنید
<xmp>	توصیه نمی گردد. به جای آن از <pre> استفاده کنید

برچسب های نقل قول ، کتیشن و توضیحات

برچسب ها	توضیحات
<abbr>	یک کلمه مخفف را معرفی می کند
<acronym>	یک سرنام را معرفی می کند
<address>	یک عنصر آدرس را معرفی می کند
<bdo>	جهت متن را معرفی می کند
<blockquote>	یک کتیشن بلند را معرفی می کند
<q>	یک کتیشن کوتاه را معرفی می کند
<cite>	نقل قول را معرفی می کند
<dfn>	یک عبارت توضیحی را معرفی می کند