آموزش مفاهیم~ Html ~ [آرشيو] - P30World Forums - انجمن های تخصصی پی سی ورلد

Aref_2008

24-07-2009, 15:29

با آموزش HTML شما یاد خواهید گرفت چگونه از HTML در ساخت صفحات وب خودتان استفاده کنید.
یادگیری HTML بسیار ساده است و شما از آن لذت خواهید برد.

یک فایل HTML چیست؟

HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language).
یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست
بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد
یک فایل HTML باید دارای پسوند html. یا html. باشد
یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود.

Aref_2008

24-07-2009, 15:30

آیا می خواهید یکبار امتحان کنید؟

اگر در حال کار با ویندوز هستید برنامه note pad را اجرا کنید. متن زیر را تایپ کنید.

<html>
<head>
<title>title of page </title>
</head>
<body>
This is my first home page.<b> This text is bold </b>
</body>
</html>
فایل را تحت عنوان "mypage.htm"ذخیره کنید.
مرورگر اینترنت خود را باز کنید، از منوی فایل گزینه "open" یا "open page" را انتخاب کنید. یک جعبه گفتگو ظاهر خواهد شد .گزینه "brows" یا "choose file" را انتخاب کنید و در مکانی که فایل HTML خود را ساخته اید قرار گیرید. آن را انتخاب کنید و روی گزینه "open" کلیک کنید.حالا شما یک آدرس در جعبه گفتگوی خود مشاهده خواهید کرد. بعنوان مثال "C:\mypage.html" گزینه ok را کلیک کنید و مرورگر صفحه را به شما نشان خواهد داد.

Aref_2008

24-07-2009, 15:31

مثال تشریح شده

اولین برچسب در فایل HTML شما ، <html> است.این برچسب به مرورگر شما می فهماند که این آغاز یک فایل HTML است، آخرین برچسب در فایل شما <html/> است.این برچسب به فایل شما می فهماند که این انتهای یک فایل HTML است.
متن های بین برچسب و اطلاعات سرانداز (header)شماست .اطلاعات سر انداز در پنجره مرورگر نشان داده نخواهد شد. متن بین برچسب <title>، سرتیتر پرونده شماست. سرتیتر در قسمت عنوان صفحه مرورگر نشان داده خواهد شد.
متنی که در مرورگر نشان داده خواهد شد ، متنی است که بین برچسب <body> نشان داده خواهد شد.
متنی که بین برچسب <b> قرار گیرد در مرورگر بصورت برجسته نشان داده خواهد شد. :10:

Aref_2008

24-07-2009, 15:31

پسوند htm. یا html. ?

هنگامی که شما یک فایل HTML را ذخیره می کنید شما می توانید هرکدام از پسوندهای htm. یا html. را انتخاب کنید.ما در مثال هایمان از پسوند htm. استفاده می کنیم. این ممکن است یک رفتار بد موروثی از گذشته باشد که بیشتر نرم افزارهایی که استفاده می شوند فقط پسوند سه حرفی را قبول می کنند.با نرم افزار جدیدتر ما فکر می کنیم که اگر از پسوند html. استفاده کنیم بسیار ایمن تر خواهیم بود.

Aref_2008

24-07-2009, 15:32

به ویرایشگر های HTML توجه کنید:

شما می توانید به سادگی با استفاده از یک ویرایشگر WYSIWY("what you see is what you get") فایل های HTML را ویرایش کنید ، مثل FRONT PAGE,Claris Home Page یا Adob PageMill.
اگر شما می خواهید یک توسعه دهنده وب توانا باشید ما توصیه اکید می کنیم که شما از یک ویرایشگر متنی ساده استفاده کنید تا اصول اولیه HTML را یاد بگیرید.

Aref_2008

24-07-2009, 15:33

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

برچسب های HTML

برچسب های HTML برای نشانه گذاری عناصر HTML استفاده می شوند
بر چسب های HTML توسط دو کاراکتر < و > محاط می شوند
این کاراکتر های محاط کننده قلاب نامیده می شوند
بر چسب های HTML معمولا بصورت جفت می آیند <b> , <b/>
اولین برچسب دوتایی برچسب شروع و دومی برچسب پایانی است
متن های بین برچسب ابتدایی و انتهایی محتوای عناصر هستند
برچسبهای HTML به حروف کوچک و بزرگ حساس نیستند <b> معادل <B> است. :11:

Aref_2008

24-07-2009, 15:35

عناصر HTML

مثال HTML در صفحه قبل را بخاطر بیاورید. این یک عنصر HTML است:

<b>This text is bold</b>
عنصر HTML با یک برچسب شروع ، آغاز می شود:<b>
محتوای عنصر HTML: This text is bold
عنصر HTML با یک برچسب پایانی تمام می شود:<b/>
هدف برچسب <b> این است که تعریف کند عناصر HTML باید بصورت برجسته نشان داده شوند این نیز همچنین یک عنصر HTML است:

<body>
This is my first homepage.<b>This text is bold</b>
</body>
این عنصر HTML با برچسب آغازین <body> شروع و با برچسب پایانی <body/> تمام می شود.
هدف برچسب <body> این است که عناصر HTML را که محتوای بدنه HTML هستند تعریف کند.

چرا ما از برچسب هایی با حروف کوچک استفاده می کنیم؟

ما فقط گفتیم که برچسب های HTML حساس به حروف کوچک و بزرگ نیستند و <B>همان معنی <b>را می دهد.هنگامی که شما به وب گردی می پردازد، متوجه خواهید شد که بیشتر آموزش ها در مثال هایشان از حروف بزرگ برچسب های HTML استفاده می کنند.ما همیشه از برچسب های حروف کوچک استفاده می کنیم. چرا؟
اگر شما می خواهید خود را برای نسل های بعدی HTML آماده کنیدشما باید شروع کنید و از برچسبهای حروف کوچک استفاده کنید.کنسرسیوم شبکه گسترده جهانی (W3C) در نظریه HTML4 خود برچسب های حروف کوچک را توصیه کرده و XHTML(نسل بعدی HTML) برچسبهای حروف کوچک را خواستار شده است.

Aref_2008

24-07-2009, 15:42

عناصر برچسب:

برچسبها خود می توانند شامل عناصری باشند ، عناصر می توانند اطلاعات اضافی در باره عناصر HTML در صفحه شما را فراهم کنند.این برچسب عنصر بدنه را در صفحه شما معرفی می کند:
<body>
با اضافه کردن عنصر <bgcolor>شما می توانید به مرورگر بگویید که رنگ پس زمینه شما باید قرمز باشد مثل این:<"body bgcolor="red>
این برچسب یک جدول HTML را معرفی می کند:<table>. با اضافه کردن عنصر حاشیه شما می توانید به مرورگر بگویید که جدول نباید هیچ لبه و حاشیه ای داشته باشد: <"table border="0>
عناصر همیشه در یک زوج نام/مقدار می آیند، مثل این: نام="مقدار"
عناصر همیشه به برچسب شروع عناصر HTML اضافه می شوند :21:

Aref_2008

24-07-2009, 15:43

حالتهای کتیشن ، 'قرمز' یا "قرمز"؟

محتوای عناصر باید همیشه در کتیشن ها محدود شوند ، از هر دو حالت کتیشن و دوبل کتیشن می توان استفاده کرد ولی استفاده از دوبل کتیشن ها متداول تر است. در بعضی موقعیت های نادر مثل هنگامی که محتوای عناصر خود دارای کتیشن هستند لازم است که از تک کتیشن استفاده کنیم: 'Name='john "shotgun" Nelson

Aref_2008

24-07-2009, 15:46

سر تیتر ها

سر تیترها با برچسب های <h1>تا<h6>معرفی می شوند.<h1>بیانگر بزرگترین سرتیتر و<h6> بیانگر کوچکترین سر تیتر است. HTML بطور خودکار فضای خالی اضافی به قبل و بعد از سر تیترها اضافه می کند.

<h1> This is a heading </h1>
<h2> This is a heading </h2>
<h3> This is a heading </h3>
<h4> This is a heading </h4>
<h5> This is a heading </h5>
<h6> This is a heading </h6>

Aref_2008

24-07-2009, 15:47

پاراگراف ها

پاراگراف ها با برچسب <p> معرفی می شوند.HTML بطور خودکار فضای خالی اضافی به قبل و بعد از یک پاراگراف اضافه می کند.

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

Aref_2008

24-07-2009, 15:49

پرش به خط بعد

برچسب <br> هنگامی استفاده می شود که بخواهیم یک خط را پایان دهیم اما نمی خواهیم یک پاراگراف جدید را آغاز کنیم.برچسب <br> شما را از هر جا که قرار دارید به یک خط پایین تر می برد. برچسب <br> یک برچسب تکی است و هیچ برچسب پایانی ندارد.

Aref_2008

24-07-2009, 15:50

توضیحات در HTML

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


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

Aref_2008

24-07-2009, 15:52

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

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

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

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

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

Aref_2008

24-07-2009, 16:09

برچسب های توضیحات

<html> یک پرونده HTML را معرفی می کند

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

تفاوت بین HTML و XHTML
برچسب xmlns در XHTML مورد نیاز است نه در HTML. هرچند که معتبرساز w3.org وقتی که این موجودیت از برچسب HTML به فایل XHTML رفت شکایتی نکرد. این بدین دلیل است که "xmlns=[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]" یک مقدار ثابت دارد و به برچسب html اضافه می شود حتی اگر شما آن را اضافه نکنید.

مثال

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

موجودیت های مورد نیاز
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.
موجودیت مقدار توضیحات DTD
xmlns
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید یک موجودیت فضای نامی XHTML معرفی می کند. STF

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

dir, lang, xml:lan

<body> بدنه پرونده را معرفی می کند

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

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

مثال

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

موجودیت های انتخابی
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

<h1> to <h6> سر تیتر 1 تا 6 را معرفی می کند

برچسب h1-h6
تعریف و کاربرد
برچسب های 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

موجودیت های انتخابی
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

<p> یک پاراگراف را معرفی می کند

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

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

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

موجودیت های انتخابی
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

<br> یک خط خالی را معرفی می کند

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

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

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

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

خواص استاندارد
id, class, title, style

<hr> یک خط افقی را معرفی می کند

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

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

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

موجودیت های انتخابی
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



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

برچسب DOCTYPE
تعریف و کاربرد

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

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

از این استاندارد زمانی استفاده می شود که صفحه ما فقط حاوی برچسبهای توصیف متن است و توصیف نحوه نمایش در CSS آمده است. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]">

HTML Transitional DTD

در صورتیکه در صفحه از برچسبهای توصیف نمایش استفاده شده باشد و یا مرورگر مورد استفاده، CSS را پشتیبانی نکند، از این از این استاندارد استفاده می کنیم. این استاندارد شامل برچسبهای توصیف متن و تمام برچسبهای توصیف نمایش است که W3C انها را به CSS منتقل کرده است. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]">

Frameset DTD

در صورت استفاده از برچسب frameset باید از این استاندارد استفاده کنیم. این استاندارد همانند استاندارد Transitional است با این تفاوت که در آن به جای برچسب body از برچسب frameset استفاده شده است. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]">

XHTML

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

همانند استاندارد همنام خود در HTML، این استاندارد نیز برای صفحه هایی است که فقط از برچسبهای توصیف متن استفاده می کنند.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]">

XHTML Transitional DTD

می خواهید XHTMLی که دارای برچسبهای نمایشی باشد بنویسید; مرورگر شما CSS را پشتیبانی نمی کند; این استاندارد برای شماست.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]">

XHTML Frameset DTD

اگر از frameset استفاده می کنید، از این استاندارد بهره ببرید.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]">

Aref_2008

24-07-2009, 16:10

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

Aref_2008

24-07-2009, 16:12

<small> متن را کوچک معرفی می کند
<i> متن را مورب معرفی می کند
<big> متن را بزرگ معرفی می کند
<b> متن را برجسته معرفی می کند

برچسب های TT,I,B,BIG,SMALL
تعریف و کاربرد
عناصر زیر همگی عناصر ظاهر font هستند.
<tt> به حالت ماشین نویسی نمایش می دهد
<i> بصورت مورب نمایش داده می شود
<b> بصورت برجسته نمایش داده می شود
<big> بزرگتر نمایش داده می شود
<small> کوچکتر نمایش داده می شود.

تفاوت بین HTML و XHTML
تفاوتی ندارد
مثال
منبع خروجی
<tt>Teletype text</tt><br>
<i>Italic text</i><br>
<b>Bold text</b><br>
<big>Big text</big><br>
<small>Small text</small><br> Teletype text
Italic text
Bold text
Big text
Small text

خواص استاندارد
id, class, title, style, dir, lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown onkeyup

Aref_2008

24-07-2009, 16:14

<em> متن را مورب معرفی می کند

برچسب های em,strong,dfn,code,samp,kbd,var,cite
تعریف و کاربرد
عناصر زیر همگی عناصر عبارات هستند. عناصر خوبی هستند اما بوسیله style sheet می توان نتایج بهتری گرفت.
<em> برجسته نشان داده می شود
<strong> بصورت درشت نشان داده می شود
<dfn> بصورت یک عبارت توصیفی نشان داده می شود
<code> بصورت کد کامپیوتری نشان داده می شود
<samp> بصورت مثال های کامپیوتری نشان داده می شود
<kbd> به حالت متن صفحه کلید نشان داده خواهد شد
<var> یک متغیر را معرفی می کند
<cite> بصورت نقل قول نمایش می دهد

تفاوت بین HTML و XHTML
تفاوتی ندارد
مثال
منبع خروجی
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<dfn>Definition term</dfn><br>
<code>Computer code text</code><br>
<samp>Sample computer code text</samp><br>
<kbd>Keyboard text</kbd><br>
<var>Variable</var><br>
<cite>Citation</cite> Emphasized text
Strong text
Definition term
Computer code text
Sample computer code text
Keyboard text
Variable
Citation

خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Aref_2008

24-07-2009, 16:15

<strong> متن را برجسته معرفی می کند

برچسب های em,strong,dfn,code,samp,kbd,var,cite
تعریف و کاربرد
عناصر زیر همگی عناصر عبارات هستند. عناصر خوبی هستند اما بوسیله style sheet می توان نتایج بهتری گرفت.
<em> برجسته نشان داده می شود
<strong> بصورت درشت نشان داده می شود
<dfn> بصورت یک عبارت توصیفی نشان داده می شود
<code> بصورت کد کامپیوتری نشان داده می شود
<samp> بصورت مثال های کامپیوتری نشان داده می شود
<kbd> به حالت متن صفحه کلید نشان داده خواهد شد
<var> یک متغیر را معرفی می کند
<cite> بصورت نقل قول نمایش می دهد

تفاوت بین HTML و XHTML
تفاوتی ندارد
مثال
منبع خروجی
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<dfn>Definition term</dfn><br>
<code>Computer code text</code><br>
<samp>Sample computer code text</samp><br>
<kbd>Keyboard text</kbd><br>
<var>Variable</var><br>
<cite>Citation</cite> Emphasized text
Strong text
Definition term
Computer code text
Sample computer code text
Keyboard text
Variable
Citation

خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Aref_2008

24-07-2009, 16:15

<sup> متن را بالانویس دار معرفی می کند

برچسب های sub,sup
تعریف و کاربرد
برچسب sub یک متن زیرنویس تعریف می کند و برچسب sup یک متن بالا نویس تعریف می کند.
تفاوت بین HTML و XHTML
تفاوتی ندارد
مثال
منبع خروجی
This text contains <sub>subscript</sub>

This text contains <sup>superscript</sup> This text contains subscript

This text contains superscript

خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Aref_2008

24-07-2009, 16:16

<ins> قطعه متنی را که در متن اصلی جا داده شده معرفی می کن

تعریف و کاربرد
یک متن وارد شده را تعریف می کند.
تفاوت بین HTML و XHTML
تفاوتی ندارد
نکات
به همراه برچسب <del> استفاده کنید تا به روز رسانی واصلاح در یک پرونده را نشان دهد.
مثال
منبع خروجی
a dozen is <del>20</del> <ins>12</ins> pieces a dozen is 20 12 pieces

خواص انتخابی
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.
خاصیت مقدار توضیحات DTD
cite URL یک url به پرونده دیگر که بیان می کند چرا متن وارد شده. STF
datetime YYYYMMDD زمان و تاریخ وارد شدن متن را بیان می کند STF

خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Aref_2008

24-07-2009, 16:17

<del> قطعه متنی را که از متن اصلی حذف شده نشان می دهد

برچسب del
تعریف و کاربرد
یک متن حذف شده را تعریف می کند.
تفاوت بین HTML و XHTML
تفاوتی ندارد
نکات
به همراه برچسب <ins> استفاده کنید تا به روز رسانی واصلاح در یک پرونده را نشان دهد.
مثال
منبع خروجی
a dozen is <del>20</del> 12 pieces a dozen is 20 12 pieces

خواص انتخابی
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset. خاصیت مقدار توضیحات DTD
cite URL یک url به پرونده دیگر که بیان می کند چرا متن وارد شده. STF
datetime YYYYMMDD زمان و تاریخ وارد شدن متن را بیان می کند STF

خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Aref_2008

24-07-2009, 16:18

برچسب s,strike

برچسب s,strike
تعریف و کاربرد
برچسب های <s> و <strike> یک متن اصلاح شده را تعریف می کنند.
تفاوت بین HTML و XHTML
برچسب های <s> و <strike> در HTML 4.01 توصیه نمی شوند.
این بر چسب ها در XHTML پشتیبانی نمی شوند.
نکات
به جای برچسب <del> استفاده می شود.
مثالمنبع خروجی
A new version is <s>not yet available.</s> now available!
<br />
<br />
A new version is <strike>not yet available.</strike> now available! A new version is not yet available. now available!

A new version is not yet available. now available!

خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Aref_2008

24-07-2009, 16:19

تعریف و کاربرد
برچسب <u> برای متن ، زیر خط تعریف می کند.
تفاوت بین HTML و XHTML
عنصر u در HTML4.0 توصیه نمی شود.
عنصر u در XHTML1.0 پشتیبانی نمی شود و بطور اکید در DTD.
مثال
منبع خروجی
A new version is <u>now available.</u> A new version is now available.

خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Aref_2008

24-07-2009, 16:20

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

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

Aref_2008

24-07-2009, 16:21

<code> متن کد کامپیوتری را معرفی می کند

برچسب های em,strong,dfn,code,samp,kbd,var,cite
تعریف و کاربرد
عناصر زیر همگی عناصر عبارات هستند. عناصر خوبی هستند اما بوسیله style sheet می توان نتایج بهتری گرفت.
<em> برجسته نشان داده می شود
<strong> بصورت درشت نشان داده می شود
<dfn> بصورت یک عبارت توصیفی نشان داده می شود
<code> بصورت کد کامپیوتری نشان داده می شود
<samp> بصورت مثال های کامپیوتری نشان داده می شود
<kbd> به حالت متن صفحه کلید نشان داده خواهد شد
<var> یک متغیر را معرفی می کند
<cite> بصورت نقل قول نمایش می دهد

تفاوت بین HTML و XHTML
تفاوتی ندارد
مثال
منبع خروجی
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<dfn>Definition term</dfn><br>
<code>Computer code text</code><br>
<samp>Sample computer code text</samp><br>
<kbd>Keyboard text</kbd><br>
<var>Variable</var><br>
<cite>Citation</cite> Emphasized text
Strong text
Definition term
Computer code text
Sample computer code text
Keyboard text
Variable
Citation

خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

:21:

Aref_2008

24-07-2009, 16:22

<kbd> متن صفحه کلید را معرفی می کند

برچسب های em,strong,dfn,code,samp,kbd,var,cite
تعریف و کاربرد
عناصر زیر همگی عناصر عبارات هستند. عناصر خوبی هستند اما بوسیله style sheet می توان نتایج بهتری گرفت.
<em> برجسته نشان داده می شود
<strong> بصورت درشت نشان داده می شود
<dfn> بصورت یک عبارت توصیفی نشان داده می شود
<code> بصورت کد کامپیوتری نشان داده می شود
<samp> بصورت مثال های کامپیوتری نشان داده می شود
<kbd> به حالت متن صفحه کلید نشان داده خواهد شد
<var> یک متغیر را معرفی می کند
<cite> بصورت نقل قول نمایش می دهد

تفاوت بین HTML و XHTML
تفاوتی ندارد
مثال
منبع خروجی
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<dfn>Definition term</dfn><br>
<code>Computer code text</code><br>
<samp>Sample computer code text</samp><br>
<kbd>Keyboard text</kbd><br>
<var>Variable</var><br>
<cite>Citation</cite> Emphasized text
Strong text
Definition term
Computer code text
Sample computer code text
Keyboard text
Variable
Citation

خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Aref_2008

24-07-2009, 16:22

برچسب های em,strong,dfn,code,samp,kbd,var,cite
تعریف و کاربرد
عناصر زیر همگی عناصر عبارات هستند. عناصر خوبی هستند اما بوسیله style sheet می توان نتایج بهتری گرفت.
<em> برجسته نشان داده می شود
<strong> بصورت درشت نشان داده می شود
<dfn> بصورت یک عبارت توصیفی نشان داده می شود
<code> بصورت کد کامپیوتری نشان داده می شود
<samp> بصورت مثال های کامپیوتری نشان داده می شود
<kbd> به حالت متن صفحه کلید نشان داده خواهد شد
<var> یک متغیر را معرفی می کند
<cite> بصورت نقل قول نمایش می دهد

تفاوت بین HTML و XHTML
تفاوتی ندارد
مثال
منبع خروجی
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<dfn>Definition term</dfn><br>
<code>Computer code text</code><br>
<samp>Sample computer code text</samp><br>
<kbd>Keyboard text</kbd><br>
<var>Variable</var><br>
<cite>Citation</cite> Emphasized text
Strong text
Definition term
Computer code text
Sample computer code text
Keyboard text
Variable
Citation

خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Aref_2008

24-07-2009, 16:24

رچسب pre
تعریف و کاربرد
عنصر pre متن از پیش قالب بندی شده را تعریف می کند. متنی که بین عنصر pre قرار می گیرد معمولا فاصله ها و پرش به خط بعد را حفظ می کند. متن در یک قالب ثابت نمایش داده می شود.
تفاوت بین HTML و XHTML
موجودیت width در عنصر pre در HTML4.0 توصیه نمی شود.
موجودیت width در عنصر u در XHTML1.0 پشتیبانی نمی شود و بطور اکید در DTD.
نکات pre
نکته قابل توجه درباره این برچسب این است که، زمانی که برچسب >xmp< نا معتبر اعلام شد و به جای آن برچسب >pre< تعریف شد، برچسب جدید توانایی های برچسب پیشین را نداشت. برای نمونه

<pre><b>Hello</b></pre> نمایش می دهد Hello
ولی

<xmp><b>Hello</b></xmp> نمایش می دهد <b>Hello</b>
مثالمنبع خروجی
<pre>
This text is
in a fixed-pitch
font, and it preserves
both spaces and
line breaks
</pre> This text is
in a fixed-pitch
font, and it preserves
both spaces and
line breaks

خواص انتخابی
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset. خاصیت مقدار توضیحات DTD
width number تعداد کاراکتر ها رادر هر خط تعریف می کند.
(معمولا 40 ، 80 یا 132) TF

خواص استاندارد
id, class, title, style, dir, lang, xml:lang, xml:space
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Aref_2008

24-07-2009, 16:25

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

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

Aref_2008

24-07-2009, 16:26

<abbr> یک کلمه مخفف را معرفی می کند

برچسب abbr
تعریف و کاربرد
یک حالت مخفف را نشان می دهد مثل "Inc." یا "etc." . با نشان گذاری مخفف ها شما می توانید اطلاعات مفیدی رادر مرورگرها ، کنترل کننده املا ، سیستم های ترجمه و موتورهای جستجو بدهید.
تفاوت بین HTML و XHTML
تفاوتی ندارد
نکات
نکته: در بعضی از مرورگرها موجودیت title در عنصر acronym می تواند نسخه کامل عبارت را وقتی شما ماوس را بر روی مخفف نگه می دارید نشان دهد.
مثال
منبع خروجی
<acronym title="United Nations"> un </acronym> UN

خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

:21:

Aref_2008

24-07-2009, 16:27

<acronym> یک سرنام را معرفی می کند

برچسب acronym
تعریف و کاربرد
برچسب acronym شروع یک سرنام را معرفی می کند مثل "NATO".با نشان گذاری مخفف ها شما می توانید اطلاعات مفیدی رادر مرورگرها ، کنترل کننده املا ، سیستم های ترجمه و موتورهای جستجو بدهید.
تفاوت بین HTML و XHTML
تفاوتی ندارد
نکات
نکته: در بعضی از مرورگرها موجودیت title در عنصر acronym می تواند نسخه کامل عبارت را وقتی شما ماوس را بر روی مخفف نگه می دارید نشان دهد.
مثال
منبع خروجی
<acronym title="World Wide Web"> www </acronym> www

خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Aref_2008

24-07-2009, 16:27

برچسب address
تعریف و کاربرد
برچسب address شروع یک آدرس را نشان می دهد. شما باید از آن در تعریف آدرس ها ، دست نوشته ها و متن اصلی یک پرونده استفاده کنید.
تفاوت بین HTML و XHTML
تفاوتی ندارد
نکات
آدرس معمولا بصورت مورب نشان داده می شود.بیشتر مرورگرها ممکن است یک پرش به خط بعد قبل و بعد از عنصر address قرار دهند اما پرش به خط بعد داخل متن را باید خودتان قرار دهید.
مثال
منبع خروجی
<address><br>
Donald Duck <br>
Box 555 <br>
Disneyland
</address> Donald Duck
Box 555
Disneyland

خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Aref_2008

24-07-2009, 16:29

<bdo> جهت متن را معرفی می کند

برچسب bdo
تعریف و کاربرد
برچسب bdo مسیر متن پیش فرض را باطل می کند.
تفاوت بین HTML و XHTML
تفاوتی ندارد
مثالمنبع خروجی
<bdo> Here is some Hebrew text </bdo> Here is some Hebrew text

خواص انتخابی
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset. موجودیت مقدار توضیحات DTD
dir ltr
rtl مسیر متن را مشخص می کند. STF

خواص استاندارد
id, class, title, style, dir, lang, xml:lang

Aref_2008

24-07-2009, 16:29

<blockquote> یک کتیشن بلند را معرفی می کند

برچسب blockquote
تعریف و کاربرد
برچسب blockquote یک کتیشن بلند را تعریف می کند.
تفاوت بین HTML و XHTML
برچسب <blockqoute> برای عناصر بلاک بندی شده نیز استفاده می شود وفقط برای متون ساده نیست.
برای معتبر سازی یک صفحه بعنوان یک XHTML صریح ، شما باید یک عنصر بلاک بندی را در اطراف متن و در میان برچسب <blockquote> قرار دهید. مثل این:

< blockquote >
<p> here is a long quotation here is a long quotation </p>
</blockquote>
نکات
عنصر blockquote در هر دو طرف متن فاصله سفید ایجاد می کند.
مثال
منبع خروجی
Here comes a long quotation:
<blockquote> here is a long quotation
here is a long quotation
here is a long quotation
here is a long quotation
here is a long quotation
here is a long quotation
here is a long quotation
here is a long quotation
here is a long quotation
here is a long quotation
here is a long quotation </blockquote> Here comes a long quotation:
here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation

خواص انتخابی
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset. خاصیت مقدار توضیحات DTD
cite url url کتیشن را اگر از وب گرفته شده باشد. STF

خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Aref_2008

24-07-2009, 16:30

<q> یک کتیشن کوتاه را معرفی می کند

برچسب Q
تعریف و کاربرد
برچسب q شروع یک کتیشن کوتاه را معرفی می کند.
تفاوت بین HTML و XHTML
تفاوتی ندارد
نکات
عنصر q بعنوان هیچ چیز خاصی معرفی نمی شود و شما مجبورید از style برای قالب بندی متنتان استفاده کنید.
مثالمنبع خروجی
Here comes a short quotation: <q>here is a short quotation here is a short quotation </q> Here comes a short quotation: "here is a short quotation here is a short quotation"

خواص انتخابی
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset. خاصیت مقدار توضیحات DTD
cite citation یک علامت نقل قول را برای یک کتیشن معرفی می کند. STF

خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Aref_2008

24-07-2009, 16:31

Aref_2008

24-07-2009, 16:31

<dfn> یک عبارت توضیحی را معرفی می کند

برچسب های em,strong,dfn,code,samp,kbd,var,cite
تعریف و کاربرد
عناصر زیر همگی عناصر عبارات هستند. عناصر خوبی هستند اما بوسیله style sheet می توان نتایج بهتری گرفت.
<em> برجسته نشان داده می شود
<strong> بصورت درشت نشان داده می شود
<dfn> بصورت یک عبارت توصیفی نشان داده می شود
<code> بصورت کد کامپیوتری نشان داده می شود
<samp> بصورت مثال های کامپیوتری نشان داده می شود
<kbd> به حالت متن صفحه کلید نشان داده خواهد شد
<var> یک متغیر را معرفی می کند
<cite> بصورت نقل قول نمایش می دهد

تفاوت بین HTML و XHTML
تفاوتی ندارد
مثال
منبع خروجی
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<dfn>Definition term</dfn><br>
<code>Computer code text</code><br>
<samp>Sample computer code text</samp><br>
<kbd>Keyboard text</kbd><br>
<var>Variable</var><br>
<cite>Citation</cite> Emphasized text
Strong text
Definition term
Computer code text
Sample computer code text
Keyboard text
Variable
Citation

خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Aref_2008

24-07-2009, 16:33

موجودیت های HTML

تعدادی از کاراکترها مثل کاراکتر ">" یک معنی خاص در HTML دارندو از این رو نمی توان از آنها در متن ها استفاده کرد. برای نشان دادن علامت کوچکتر از ">" ما باید از یک موجودیت کاراکتر استفاده کنیم.
موجودیت های کاراکتر
تعدادی از کاراکترها یک معنی خاص در HTML دارند.مثل علامت کوچکتر از ">" که شروع یک برچسب HTML را معرفی می کند.اگر ما بخواهیم که مرورگر عملا این کاراکتر ها را نشان بدهد باید در منبع کد HTML موجودیت های کاراکتر را وارد کنیم.
یک موجودیت کاراکتر سه بخش دارد: یک علامت "&" ، یک موجودیت اسم یا یک علامت "#" و یک موجودیت عددو در نهایت یک ";".
برای نمایش یک علامت کوچکتر از در یک پرونده HTML ما باید بنویسیم: ;lt& یا ;60#& .
فایده استفاده از یک نام بجای یک عدد این است که به خاطر سپردن یک نام آسان تر است و اشکال آن این است که همه مرورگر ها موجودیت کاراکترها را پشتیبانی نمی کنند در حالی که تقریبا همه مرورگرها خیلی خوب از موجودیت عددها پشتیبانی می کنند.
توجه کنید که موجودیت ها حساس به حروف کوچک و بزرگ هستند.
فاصله بدون شکست
یکی از موجودیت کاراکترهای پر استفاده در HTML فاصله بدون شکست است. بطور عادی HTML فاصله ها را در متن شما کوتاه خواهد کرد ، اگر شما ده فاصله در متن خود بگذارید HTML 9 تای آن را از بین خواهد برد. برای اضافه کردن فاصله در متنتان ، از موجودیت کاراکتر ;nbsp& استفاده کنید.

:21:

Aref_2008

24-07-2009, 16:35

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

برچسب Frameset
برچسب <frameset> معرفی می کند که چگونه می شود پنجره را به قابها تقسیم کرد.
هر frameset یک مجموعه از سطرها یا ستون ها را معرفی می کند.

برچسب Frame
برچسب <frame> پرونده HTML ای را معرفی می کند که در هر قاب قرار می گیرد.
در مثال پایین یک frameset با دو ستون داریم. ستون اول با پهنای 25% از پنجره مرورگر ست شده است.ستون دوم با پهنای 75% از پنجره مرورگر ست شده است. پرونده "HTML "frame_a.html در ستون اول قرار گرفته و پرونده "HTML "frame_b.html در ستون دوم قرار داده شدهاست.

<frameset cols="25%,75%">
<frame src="frame_a.html">
<frame src="frame_b.html">
</frameset>

نکات پایه ای-اطلاعات مفید
اگر یک قاب حاشیه پدیدار داشته باشد کاربر می تواند با کشیدن حاشیه آن ، اندازه آن را تغییر دهد. برای جلوگیری از این عمل کاربر ، شما می توانید "noresize="noresize را به برچسب <frame> اضافه کنید. اگر برچسب <noframes> را اضافه کنیم ، مرورگر قاب را پشتیبانی نمی کند.
مهم:شما نمی توانید برچسب های <body> </body> و <frame> </frame> را با هم استفاده کنید. هر چند اگر شما برچسب <noframes> را در مرورگر هایی که قابها را پشتیبانی نمی کنند و حاوی مقداری متن نیز باشد اضافه کنید شما باید متن را بین برچسب های <body> </body> قرار دهید.

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

Aref_2008

24-07-2009, 16:38

جدول های HTML

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

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

جدول ها و عنصر حاشیه
اگر شما عنصر حاشیه را معین نکنید ، جدول بدون حاشیه نشان داده خواهد شد. گاهی اوقات این می تواند مفید باشد اما بیشتر مواقع شما می خواهید که حاشیه ها نشان داده شوند.برای نشان دادن جداول با حاشیه شما باید از عنصر حاشیه (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> پاورقی جدول را معرفی می کند

Aref_2008

24-07-2009, 16:39

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

لیست های نامرتب
یک لیست نامرتب ، لیستی از اقلام است.اقلام لیست بوسیله گلوله نشان گذاری می شوند (معمولا یک دایره سیاه کوچک).یک لیست نامرتب با یک برچسب <ul> آغاز می شوند.هر کدام از اقلام لیست با برچسب <li> آغاز می شوند. <ul>
<li> Cofee <ul>
<li> Milk <ul>
</ul> Cofee
Milk

داخل اقلام لیست می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و ... قرار دهید.
لیست های مرتب
یک لیست مرتب شده نیز لیستی از اقلام است. اقلام لیست بوسیله شماره نشان گذاری می شوند.یک لیست مرتب با برچسب <ol> آغاز می شود.هرکدام از اقلام لیستبا برچسب <li> آغاز می شوند. <ol>
<li> Cofee <ul>
<li> Milk <ul>
</ol> Cofee
Milk

داخل اقلام لیست می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و ... قرار دهید.
لیست های تعریفی
یک لیست تعریفی ، لیستی از اقلام نیست. این لیست ، لیستی از عبارات و توضیحات آن عبارات است.یک لیست تعریفی با برچسب<dl> آغاز می شود.هر کدام از اقلام لیست تعریفی با برچسب <dt> آغاز می شود.هر تعریف در لیست تعریفی با برچسب <dd> آغاز می شود <dl>
<dt> Cofee </dt>
<dd> Black hot drink </dd>
<dt> Milk </dt>
<dd> White cold drink </dd>
</dl> Cofee
Black hot drink
Milk
White cold drink

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

برچسب Anchor

<ol> یک Anchor را معرفی می کند
<ul> یک Anchor را معرفی می کند
<li> یک Anchor را معرفی می کند
<dl> یک Anchor را معرفی می کند
<dt> یک Anchor را معرفی می کند
<dd> یک Anchor را معرفی می کند
<dir> یک Anchor را معرفی می کند
<menu> یک Anchor را معرفی می کند

:5:

Aref_2008

24-07-2009, 16:42

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

فرم ها
یک فرم ، منطقه ای حاوی عناصر فرم است.عناصر فرم ، عناصری هستند که به کاربر اجازه می دهند تا اطلاعات را (مثل فیلدهای متنی ، فیلدهای text area ، لیست های پایین افتان، دکمه های رادیویی ، چک باکس ها و...) در فرم وارد کند.یک فرم با برچسب <form> معرفی می شود.

<form>
<input>
<input>
</form>

input
در برچسب <form> برچسب <input>بیشترین استفاده را دارد.نوع ورودی با خواص آن تعیین می شود.انواع پر کاربرد ورودی ها در پایین توضیح داده شده اند.

فیلدهای متنی
فیلد متنی هنگامی استفاده می شود که شما می خواهید کاربر ، حروف ، اعداد و... را تایپ کند.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

دکمه های رادیویی
دکمه های رادیویی زمانی استفاده می شوند که شما می خواهید از بین تعداد محدودی انتخاب، یکی را انتخاب کند.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

توجه کنید که فقط یک گزینه می تواند انتخاب شود.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

نصر Action فرم و دکمه Submit
هنگامی که کاربر روی دکمه "Submit" کلیک می کند ، محتویات فرم به یک فایل دیگر فرستاده می شوند. فایل معرفی شده در عنصر Action معمولا کاری را با اطلاعات ورودی دریافتی انجام می دهد. <form name="input value" action="action1.asp">
username:
<input type="text" name="username">
<input type="submit" value="submit">
</form>
username:

اگر شما تعدادی کاراکتر در فیلد متنی بالا تایپ کنید و دکمه "Submit" را کلیک کنید شما ورودی خود را به صفحه ای که "action1.asp" نام دارد خواهید فرستاد.آن صفحه به شما ورودی های دریافتی را نشان خواهد داد.

برچسب های فرم

برچسب ها توضیحات
<form> یک فرم برای ورودی کاربران معرفی می کند
<input> فیلد ورودی معرفی می کند
<textarea> یک ورودی متن چند خطی معرفی می کند
<label> یک برچسب برای ورودی ها معرفی می کند
<fieldset> یک مجموعه از فیلدها معرفی می کند
<legend> یک عنوان برای fieldset معرفی می کند
<select> یک لیست قابل انتخاب معرفی می کند
<optgroup> یک گروه از گزینه ها معرفی می کند
<option> یک گزینه در لیست باز شونده معرفی می کند
<button> یک دکمه را معرفی می کند
<isindex> توصیه می شود به جای آن از input استفاده کنید

Aref_2008

24-07-2009, 16:43

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

<"img src="url >
url به محلی اشاره می کند که تصویر در آنجا قرار دارد . تصویری که "boat.gif" نامیده شده در دایرکتوری "images" در "[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]" دارای این url است:

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

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

<"img src="url" alt="Big Boat>
اگر مرورگر نتواند تصویری را بارگیری نماید ، موجودیت alt به خواننده می گوید که آن را در صفحه از دست داده است ، سپس مرورگر متن جایگزین را بجای آن نشان خواهد داد.

نکات پایه ای - اطلاعات مفید
اگر یک فایل HTML حاوی 10 تصویر باشد ، برای نمایش کامل صفحه به 11 فایل احتیاج است. بارگیری تصاویر وقت گیر است ، بنابر این بهترین توصیه من اینست که از تصاویر به دقت استفاده کنید.

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

____---___

Aref_2008

24-07-2009, 16:44

پس زمینه های HTML

برچسب <body> دو موجودیت دارد که شما می توانید با استفاده از آن پس زمینه را تعیین کنید. پس زمینه می تواند یک رنگ یا تصویر باشد.
Bgcolor
موجودیت Bgcolor ، رنگ پس زمینه یک صفحه HTML را تعیین می کند.محتوای این موجودیت می تواند یک عدد مبنای 16 ، یک مقدار RGB یا نام یک رنگ باشد:

< body bgcolor="#000000" >
< body bgcolor="black" >
< body bgcolor="rgb(0,0,0)" >
خطوط بالا رنگ پس زمینه را به رنگ مشکی ست می کنند.
پس زمینه
موجودیت Background یک تصویر را برای پس زمینه یک صفحه HTML تعیین می کند . محتوای این موجودیت url تصویری است که شما می خواهید از آن استفاده کنید. اگر تصویر کوچکتر از پنجره مرورگرتان است ، تصویر خودش را تکرار می کند تا پنجره مرورگرتان را پرکند.

< body background="./content/fa/home/background/clouds.gif" >
< body background="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]" >
url می تواند مرتبط باشد (مثل خط اول) ویا کامل باشد(مثل خط دوم).
توجه: اگر شما می خواهید از یک تصویر در پس زمینه استفاده کنید باید به خاطر داشته باشید:
آیا تصویر پس زمینه زمان بارگیری را بهبود می بخشد؟
آیا تصویر پس زمینه با تصاویر دیگر در صفحه خوب به نظر می رسد؟
آیا تصویر پس زمینه با رنگ متن ها خوب به نظر می رسد؟
آیا تصویر پس زمینه هنگامی که در صفحه تکرار می شود ، خوب به نظر می رسد؟
آیا تصویر پس زمینه مرتبا تمرکز را از متن می گیرد؟

نکات پایه ای-اطلاعات مفید
bg color, background و موجودیت های متن در برچسب <body> در آخرین نسخه HTML بد دانسته شده است. کنسرسیوم شبکه گسترده جهانی(w3c) این موجودیت ها را از نظریه های خود حذف کرده.
به جای آن از CSS باید استفاده کرد(برای معرفی طرح بندی و نمایش خواص عناصر).

Aref_2008

24-07-2009, 16:46

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

محتوای رنگ ها
رنگ ها با استفاده از نشان گذاری مبنای 16 برای ترکیب مقدار رنگ قرمز و سبز آبی معرفی می شوند. پایین ترین مقدار رنگی که می توان به یک منبع رنگی داد صفر است (hex #00) و بالاترین مقدار 255 است(hex #ff).

نام رنگ ها
یک کلکسیون از نام رنگ ها بوسیله بیشتر مرورگرها پشتیبانی می شود.
توجه: فقط 16 رنگ توسط استاندارد W3C HTML4.0 پشتیبانی می شود ( aqua , black , blue , fuchsia , gray , green , lime , maroon , navy , olive , purple , red , silver , teal , white , yellow ). برای تمام رنگ های دیگر ، شما باید از مقدار شما باید از مقدار مبنای 16 رنگها استفاده کنید.

رنگ های ایمن وب
چندین سال پیش که کامپیوترها فقط 256 رنگ متفاوت را پشتیبانی می کردند ، لیستی از 216 رنگ ایمن وب بعنوان استاندارد وب پیشنهاد شد. دلیل این پیشنهاد آن بود که سیستم عامل های مایکروسافت و Mac از 40 رنگ ثابت از پیش تعیین شده سیستمی استفاده می کردند.

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

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

Aref_2008

24-07-2009, 16:48

مقادیر رنگ های HTML

رنگ ها با ترکیب نورهای قرمز و سبز آبی نمایش داده می شوند.
مقدار رنگ ها
رنگ های HTML با استفاده از نوشتن یک عدد مبنای 16 از ترکیب مقدار رنگ های قرمز و سبز وآبی معرفی می شود. کمترین مقداری که می توان به یکی از منابع نوری داد صفر است (hex#00)بیشترین مقدار هم 255 است (hex#ff)
قرمز را خاموش کنید
اگر شما رنگ قرمز را بطور کامل خاموش کنید، 65536 رنگ متفاوت از ترکیب آبی و سبز وجود خواهد داشت.

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

6 میلیون رنگ متفاوت
ترکیب مقادیر قرمز و سبز آبی از صفر تا 255 بیش از 16 میلیون رنگ متفاوت (256*256*256) می دهد. بیشتر نمایشگرهای مدرن قادر به نمایش 16384 رنگ متفاوت هستند.اگر شما به جدول رنگ پایین نگاه کنید، شما نتایج مختلف تغییرات رنگ قرمز از صفر تا 255 را در حالی که سبز و آبی صفر هستند خواهید دید. برای دیدن لیست کامل 16384 رنگ متفاوت که بر پایه قرمز از صفر تا 255 هستند بر روی یکی از مقادیر مبنای 16 یا rgb زیر کلیک کنید.

Red Light HEX RGB
#000000 rgb(0,0,0)
#080000 rgb(8,0,0)
#100000 rgb(16,0,0)
#180000 rgb(24,0,0)
#200000 rgb(32,0,0)
#280000 rgb(40,0,0)
#300000 rgb(48,0,0)
#380000 rgb(56,0,0)
#400000 rgb(64,0,0)
#480000 rgb(72,0,0)
#500000 rgb(80,0,0)
#580000 rgb(88,0,0)
#600000 rgb(96,0,0)
#680000 rgb(104,0,0)
#700000 rgb(112,0,0)
#780000 rgb(120,0,0)
#800000 rgb(128,0,0)
#880000 rgb(136,0,0)
#900000 rgb(144,0,0)
#980000 rgb(152,0,0)
#A00000 rgb(160,0,0)
#A80000 rgb(168,0,0)
#B00000 rgb(176,0,0)
#B80000 rgb(184,0,0)
#C00000 rgb(192,0,0)
#C80000 rgb(200,0,0)
#D00000 rgb(208,0,0)
#D80000 rgb(216,0,0)
#E00000 rgb(224,0,0)
#E80000 rgb(232,0,0)
#F00000 rgb(240,0,0)
#F80000 rgb(248,0,0)
#FF0000 rgb(255,0,0)

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

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

Aref_2008

24-07-2009, 16:49

در این صفحه شما یک جدول از اسامی رنگ هایی پیدا خواهید کردکه با بیشتر مرورگرها پشتیبانی می شوند.
توجه: فقط 16 نام رنگ با استاندارد W3C HTML 4.0 پشتیبانی می شوند. برای بقیه رنگ ها باید از مقادیر مبنای 16 آنها استفاده کرد.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

Aref_2008

24-07-2009, 16:50

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

ظاهر بندی HTML - استفاده از جداول
یکی از تمرین های متداول با HTML استفاده از جداول برای ظاهر بندی یک صفحه است.

یک بخش از این صفحه مانند صفحات روزنامه به دو ستون قالب بندی شده است

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

مهم نیست که چقدر متن به این صفحه اضافه می کنید، آن در ستون خودش قرار خواهد گرفت.

همان ظاهر بندی - رنگ اضافه شده
یکی از تمرین های متداول با HTML استفاده از جداول برای ظاهر بندی یک صفحه است.

یک بخش از این صفحه مانند صفحات روزنامه به دو ستون قالب بندی شده است

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

مهم نیست که چقدر متن به این صفحه اضافه می کنید، آن در ستون خودش قرار خواهد گرفت.

Aref_2008

24-07-2009, 16:52

برچسب font در HTML دیگر توصیه نمی شود و گمان می شود که از نسخه های بعدی HTML حذف شود. هرچند تعداد زیادی از مردم از آن استفاده کنند ، شما باید سعی کنید که از آن اجتناب کنید وبجای آن از style استفاده کنید.

برچسب font در HTML
با کد های HTML مثل این شما می توانیداندازه و نوع خروجی مرورگر را تعیین کنید:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

موجودیت های font

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

برچسب font نباید استفاده شود
برچسب font در آخرین نسخه های HTML توصیه نمی شود (HTML4.0,XHTML).
W3C برچسب font را از لیست توصیه هایش حذف کرده است.در نسخه های آینده HTML از CSS برای ظاهر بندی ونمایش موجودیت های اجزا HTML استفاده خواهد شد.

Aref_2008

24-07-2009, 16:54

HTML3.2 خیلی اشتباه بود
HTML اصلی هرگز قصد نداشت که حاوی برچسب هایی برای قالب بندی یک پرونده باشد.برچسب های HTML قصد داشتند محتویات یک پرونده را قالب بندی کنند. مثل:

<p> This is a paragraph </p>
<h1> this is a heading </h1>
هنگامی که برچسب هایی از قبیل font و موجودیت های رنگ به HTML3.2 اضافه شدند یک کابوس برای توسعه دهندگان وب آغاز شد.توسعه وب سایت های بسیار بزرگ که اطلاعات فونت و رنگ باید به هر صفحه آن اضافه شود یک روند بلند ، گران و بی جهت دردناک شد.
_______________________________________

چه چیز در مورد HTML4.0 بسیار عالیست؟
در HTML4.0 همه قالب بندی ها می تواند از فایل HTML حذف شده و در یک CSS جداگانه قرار گیرد.
چون HTML4.0 ارائه را از ساختار پرونده جدا می کند ، ما باید چیزی را که همیشه نیاز داریم بگیریم: کنترل نهایی ظاهر بندی ارائه بدون از دست دادن محتویات پرونده.
_______________________________________

شما در آن مورد چه باید انجام دهید؟
از موجودیت های ارائه در میان برچسب های HTML استفاده نکنید، اگر می توانید از آن اجتناب کنید.از برچسب هایی که توصیه نمی شوند استفاده نکنید.

_______________________________________

خودتان را برای XHTML آماده کنید
XHTML همان HTML جدید است. مهمترین چیزی که شما می توانید انجام دهید این است که نوشتن صحیح XHTML4.0 را آغاز کنید. همچنین شروع به نوشتن برچسب ها با حروف کوچک کنید. همیشه عناصر برچسب را ببندید. هرگز یک پاراگراف را بدون <p/> نبندید.
نکته: HTML4.01 رسمی استفاده از برچسب ها با حروف کوچک را توصیه می کند.
_______________________________________

Aref_2008

24-07-2009, 16:56

با HTML4.0 همه قالب بندی ها می تواند به یک CSS جداگانه به خارج از پرونده HTML برده شود.

چگونه از style استفاده کنیم
هنگامی که یک مرورگر CSS را می خواند، پرونده را بر طبق آن قالب بندی خواهد کرد. 3 راه برای وارد کردن یک CSS وجود دارد.
CSS خارجی:
یک CSS خارجی زمانی ایده آل است که آن style در بیشتر صفحات استفاده شود. با یک CSS خارجی شما می توانید ظاهر یک سایت را با تغییر دادن یک فایل تغییر دهید.هر صفحه باید با استفاده از برچسب <link> به CSS پیوند داده شود. برچسب link در داخل بخش head قرار می گیرد.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

CSS داخلی:
یک CSS داخلی باید هنگامی استفاده شود که یک تک پرونده یک style واحد دارد. شما style داخلی را با برچسب style در قسمت head می توانید معرفی کنید.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

style درون خطی

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

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

برچسب های style

<style> یک تعریف style را تعریف می کند
<link> منبع یک مرجع را معرفی می کند
<div> یک بخش در یک پرونده را معرفی می کند.
<span> یک بخش در یک پرونده معرفی می کند.
<font> به جای آن از style استفاده کنید
<basefont> به جای آن از style استفاده کنید
<center> به جای آن از style استفاده کنید

Aref_2008

24-07-2009, 16:58

عنصر head
عنصر head حاوی اطلاعات اصلی که همچنین meta-information نیز نامیده می شود در یک پرونده است.

اطلاعات داخل عنصر head
عناصر داخل عنصر head نباید توسط مرورگر نشان داده شوند. مطابق HTML استاندارد فقط برچسب های کمی بطور قانونی داخل بخش head هستند که عبارتند از , <script> <style> , <title> , <meta> , <link> , <base>
به ساختار ناصحیح زیر دقت کنید

<head>
<p>This is some text</p>
</head>
در این حالت مرورگر دو گزینه دارد:
نمایش متن ، چون داخل عنصر پاراگراف قرار دارد
مخفی کردن متن ، چون داخل برچسب head قرار دارد
اگر شما یک عنصر HTML مثل <h1> و <p> را داخل عنصر head قرار دهید مرورگر باید آن را نمایش دهد هرچند غیر متعارف باشد.

برچسب های head

Tag توضیحات
<head> اطلاعاتی را در مورد پرونده معرفی می کند
<title> تیتر پرونده را معرفی می کند
<base> یک URL پایه برای تمام پیوندها در صفحه معرفی می کند
<link> منبع یک مرجع را معرفی می کند
<meta> اطلاعات meta را معرفی می کند.

:11:

Aref_2008

24-07-2009, 16:59

عنصر meta
همانطور که در بخش قبل توضیح دادیم عنصر head حاوی اطلاعات کلی درباره پرونده است. html همچنین حاوی یک عنصر به نام Meta است که در داخل عنصر head قرار می گیرد.هدف عنصر Meta فراهم کردن اطلاعات کلی درباره یک پرونده است.
در بیشتر مواقع عنصر Meta برای فراهم کردن اطلاعاتی که برای مرورگرها یا موتورهای جستجو مناسب است استفاده می شود، مثل توضیح محتویات پرونده.

کلمات کلیدی برای موتورهای جستجو
تعدادی از موتورهای جستجو در www از موجودیت های Name , Content در برچسب Meta برای اندیس کردن صفحات خود استفاده خواهند کرد. این عنصر Meta یک توضیح برای صفحه شما فراهم خواهد کرد.

<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML" >
این عنصر Meta کلمات کلیدی برای صفحه شما تعریف می کند.

<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" >
هدف موجودیت های Name,Content توضیح محتویات صفحه است. هرچند از زمانی که تعداد زیادی از توسعه دهندگان وب از برچسب های Meta برای spamming استفاده کردند مثل تکرار کلمات کلیدی برای بالا بردن صفحات، تعدادی از موتورهای جستجو استفاده کامل از آن را متوقف کردند.

موجودیت های ناشناخته Meta
گاهی اوقات شما موجودیت هایی از Meta را می بینید که برای شما ناشناخته اند، مثل این:

<meta name="security" content="low">
سپس شما باید قبول کنید که این یک چیز یکتا در سایت و یا در تالیف سایت است و شاید هیچ ارتباطی به شما ندارد.

Aref_2008

24-07-2009, 17:02

پیوندهای HTML
هنگامی که شما در یک پرونده HTML بر روی یک پیوند کلیک می کنید برچسب <a> یک موجودیت به نام href دارد که آدرس آن صفحه در وب در آنجا قرار می گیرد ، مثل این:
<a href= "lastpage.htm"> Last Page </a>

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

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

قواعد نحوی زیر پیروی می کند

scheme://host.domain:port/path/filename:
شما (scheme) نوع سرویس اینترنتی را تعریف می کند . بیشتر انواع متداول ، http است. domain نام دامنه اینترنتی را تعریف می کند مثل html.ir
host نیز میزبانی دامنه را تعریف می کند. اگر حذف شده باشد میزبان پیش فرض برای http , www است.
port شماره پورت در میزبان را معرفی می کند. شماره پورت بطور عادی از قلم می افتد. شماره پورت پیش فرض برای http ، 80 است.
path یک مسیر را در سرور معرفی می کند.اگر مسیر حذف شده باشد منابع باید در پوشه ریشه وب سایت باشند.
filename نام یک پرونده را معرفی می کند. نام فایل پیش فرض ممکن است default.asp , index.asp , index.html یا چیز دیگری وابسته به تنظیمات وب سرور باشد.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

دسترسی به گروه های خبری
کد HTML زیر یک پیوند به یک گروه خبری می سازد:
<a href="news:alt.html">HTML Newsgroup</a>

پیوند به mail system
کد html زیر یک پیوند به mail system شما می سازد.

<a href="mailto:info@html.ir">info@html.ir</a>

Aref_2008

24-07-2009, 17:05

اسکریپت ها را به صفحاتتان اضافه کنید تا آنها را پویاتر و فعال تر بسازید.

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

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

اسکریپت بالا این خروجی را خواهد داشت:
Hello world!

چگونه مرورگرهای قدیمی را راه بیندازیم
یک مرورگر که نمی تواند برچسب <script> را تشخیص دهد ، آن را بعنوان متن در صفحه نمایش خواهد داد. برای جلوگیری از مرورگر از انجام این کار شما باید script را در برچسب های توضیح مخفی کنید. یک مرورگر قدیمی که نمی تواند script را تشخیص دهد توضیحات را نادیده خواهد گرفت و محتویات آن برچسب را نشان نخواهد داد.درحالیکه یک مرورگر جدید می فهمد که اسکریپت ها باید اجرا شوند حتی اگر با برچسب توضیحات محدود شده باشند.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

رچسب <noscript>
در مجموع برای مخفی کردن اسکریپت درون توضیحات شما می توانید یک برچسب <noscript > اضافه کنید.این برچسب برای نشان دادن یک متن درصورتیکه اسکریپت اجرا نشود بکار می رود.این برچسب برای مرورگرهایی بکار می رود که برچسب script را تشخیص نمی دهند و اسکریپت های درون را پشتیبانی نمی کنند. بنابراین این مرورگرها بجای آن ، متن داخل برچسب <noscript > را نشان می دهد.

JavaScript:
<script type="text/javascript">

</script>
<noscript>Your browser does not support JavaScript!</noscript>

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

برچسب های scriptبرچسب توضیحات
<script> یک اسکریپت تعریف می کند
<noscript> یک متن جایگزین برای زمانی که اسکریپت کار نکند تعریف می کند
<object> یک شی تعریف می کند
<param> تنظیمات زمان اجرا برای اسکریپت تعریف می کند
<applet> به جای آن از object استفاده کنید

:21:

Aref_2008

24-07-2009, 17:06

برچسب های HTML می توانند موجودیت داشته باشند.موجودیت های خاص هر برچسب در زیر لیست شده . موجودیت های فوق هسته هستند و موجودیت زبان برای همه برچسب ها استاندارد است.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

Aref_2008

24-07-2009, 17:13

در زیر یک منبع از کاراکترهای اسکی در فرم url-encoding آمده است.مقادیر مبنای 16 می توانند برای نمایش حروف غیر استاندارد و کاراکترهای در مرورگرها و plug-in استفاده شوند.

URL-encoding from %00 to %8fمقدار ASCII URL-encode مقدار ASCII URL-encode مقدار ASCII URL-encode
æ %00 0 %30 ` %60
%01 1 %31 a %61
%02 2 %32 b %62
%03 3 %33 c %63
%04 4 %34 d %64
%05 5 %35 e %65
%06 6 %36 f %66
%07 7 %37 g %67
backspace %08 8 %38 h %68
tab %09 9 %39 i %69
linefeed %0a : %3a j %6a
%0b ; %3b k %6b
%0c < %3c l %6c
c return %0d = %3d m %6d
%0e > %3e n %6e
%0f ? %3f o %6f
%10 @ %40 p %70
%11 A %41 q %71
%12 B %42 r %72
%13 C %43 s %73
%14 D %44 t %74
%15 E %45 u %75
%16 F %46 v %76
%17 G %47 w %77
%18 H %48 x %78
%19 I %49 y %79
%1a J %4a z %7a
%1b K %4b { %7b
%1c L %4c | %7c
%1d M %4d } %7d
%1e N %4e ~ %7e
%1f O %4f %7f
space %20 P %50 € %80
! %21 Q %51 %81
" %22 R %52 ‚ %82
# %23 S %53 ƒ %83
$ %24 T %54 „ %84
% %25 U %55 … %85
& %26 V %56 † %86
' %27 W %57 ‡ %87
( %28 X %58 ˆ %88
) %29 Y %59 ‰ %89
* %2a Z %5a Š %8a
+ %2b [ %5b ‹ %8b
, %2c \ %5c Œ %8c
- %2d ] %5d %8d
. %2e ^ %5e Ž %8e
/ %2f _ %5f %8f

URL-encoding from %90 to %ffمقدار ASCII URL-encode مقدار ASCII URL-encode مقدار ASCII URL-encode
%90 À %c0 ð %f0
‘ %91 Á %c1 ñ %f1
’ %92 Â %c2 ò %f2
“ %93 Ã %c3 ó %f3
” %94 Ä %c4 ô %f4
• %95 Å %c5 õ %f5
– %96 Æ %c6 ö %f6
— %97 Ç %c7 ÷ %f7
˜ %98 È %c8 ø %f8
™ %99 É %c9 ù %f9
š %9a Ê %ca ú %fa
› %9b Ë %cb û %fb
œ %9c Ì %cc ü %fc
%9d Í %cd ý %fd
ž %9e Î %ce þ %fe
Ÿ %9f Ï %cf ÿ %ff
%a0 Ð %d0
¡ %a1 Ñ %d1
¢ %a2 Ò %d2
£ %a3 Ó %d3
%a4 Ô %d4
¥ %a5 Õ %d5
| %a6 Ö %d6
§ %a7 %d7
¨ %a8 Ø %d8
© %a9 Ù %d9
ª %aa Ú %da
« %ab Û %db
¬ %ac Ü %dc
¯ %ad Ý %dd
® %ae Þ %de
¯ %af ß %df
° %b0 à %e0
± %b1 á %e1
² %b2 â %e2
³ %b3 ã %e3
´ %b4 ä %e4
µ %b5 å %e5
¶ %b6 æ %e6
· %b7 ç %e7
¸ %b8 è %e8
¹ %b9 é %e9
º %ba ê %ea
» %bb ë %eb
¼ %bc ì %ec
½ %bd í %ed
¾ %be î %ee
¿ %bf ï %ef

Aref_2008

24-07-2009, 17:15

قدم اول شما یک وب سرور شخصی
اگر شما می خواهید دیگران صفحات شما را ببینند باید آنها را publish کنید
برای publish کردن کارتان شما باید فایل هایتان را در یک وب سرور کپی کنید
رایانه خودتان اگر به یک شبکه متصل است می تواند بعنوان یک وب سرور عمل کند
اگر شما win98 را اجرا می کنید می توانید از PWS استفاده کنید
PWS در پوشه PWS در CD ویندوز است

وب سرور شخصی PWS
PWS هر کامپیوتر ویندوز را به یک سرور تبدیل می کند. PWS نصب آسانی دارد و برای اجرا برنامه های کاربردی وب ایده آل است. PWS برای ایستگاه های کاری بهینه می باشد اما نیازمند یک وب سرور کامل است .آن همچنین ASP را مانند برادر بزرگتر خود IIS اجرا می کند.

چگونه یک وب سرور pws نصب کنیم
نصب ویندوز را مرور کنید تا ببینید pws را نصب کرده اید یا نه
اگر نصب نکرده اید آن را از پوشه pws ویندوز نصب کنید
با توجه به دستورالعمل رفتار کنید و آن را نصب کنید
نکته: نسخه های win xp home edition گزینه pws برای نصب ندارند.

)
وب سرور IIS در win2000 ساخته شد که ساختن برنامه های کاربردی بزرگ برای وب را آسان ساخت. IIS و PWS هردو شامل ASP هستند. یک اسکریپت نویسی استاندارد سمت سرور که می تواند برای ساخت صفحات پویا و برنامه های فعل و انفعالی استفاده شود. IIS اکنون برای WIN NT آماده است.

قدم بعدی یک وب سرور حرفه ای
اگر شما نمی خواهید از PWS یا IIS استفاده کنید ، شما باید پروفایلتان را در یک سرور عمومی آپلود کنید.بیشتر ISP ها پیشنهاد میزبانی صفحات وب را به شما خواهند داد
اگر کارمند شما یک سرور اینترنت دارد می توانید از او بخواهید تا میزبان وب سایت شما شود.
اگر شما واقعا در این مورد جدی هستید باید سرور اینترنت خودتان را نصب کنید.

farzad206

09-12-2009, 12:08