آموزش HTML از مبتدی تا پیشرفته

اين درس شما را با نحوه نمايش انواع فهرستها شامل فهرستهاي مرتب(ordered) ، نامرتب(unordered) و فهرستهاي تعريفي(definition lists) و تگ هاي مربوطه يعني li ، ol ، ul ، dl ، dt و dd آشنا خواهد کرد. مثالها:


فهرستهاي نامرتب
مثالي بسيار ساده در مورد فهرستهاي نامرتب

فهرستهاي مرتب
مثالي در مورد فهرستهاي مرتب و نحوه نمايش متون فارسي

مثالهاي بيشتر

فهرستهاي نامرتب(unordered list)

فهرستهائي هستند از يک يا چند قلم اطلاعات که معمولا با دايرهاي کوچک و سياه رنگ در شروع نمايش داده ميشوند. يک فهرست از نوع نامرتب با تگ <ul> شروع شده و هر رقم اطلاعات با تگ <li> مشخص ميگردد.
HTML code نمايش توسط مرورگر

<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
Red
Blue
Green


<ul dir="rtl" >
<li>قهوه</li>
<li>شير</li>
<li>چاي</li>
</ul>
قهوه
شير
چاي


داخل تگهاي <li> ميتوانيد از پاراگرافها، تگهاي br ، تصاوير و حتي فهرستهاي ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامي تگهاي مربوط به فهرستها ممکن ميباشد.

فهرستهاي مرتب(ordered list)

اين نوع فهرست بسيار شبيه فهرستهاي نامرتب بوده و فقط مرورگر به هنگام نمايش اقلام اطلاعاتي از اعداد به جاي دايره هاي کوچک سياه رنگ استفاده ميکند. يک فهرست از نوع مرتب با تگ <ol> شروع شده و همانند فهرستهاي نامرتب هر رقم اطلاعات با تگ <li> مشخص ميگردد.
HTML code نمايش توسط مرورگر

<ol>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ol>
Red
Blue
Green


<ol dir="rtl" >
<li>قهوه</li>
<li>شير</li>
<li>چاي</li>
</ol>
قهوه
شير
چاي


داخل تگهاي <li> ميتوانيد از پاراگرافها، تگهاي br ، تصاوير و حتي فهرستهاي ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامي تگهاي مربوط به فهرستها ممکن ميباشد.

فهرستهاي تعريفي(definition list)

فهرست تعريفي فهرستي است از اصطلاح ها و تشريح و توصيف آنها.

فهرستهاي تعريفي با <dl> شروع شده و هر ذوج اصطلاح و تعريف مربوط به آن با تگهاي <dt> و <dd> تعريف ميشوند.
HTML code نمايش توسط مرورگر

<dl>
<dt>HTTP</dt>
<dd>Hypertext Transfer Protocol</dd>
<dt>FTP</dt>
<dd>File Transfer Protocol</dd>
<dt>IP</dt>
<dd>Internet Protocol</dd>
</dl>
HTTP
Hypertext Transfer Protocol
FTP
File Transfer Protocol
IP
Internet Protocol


<dl dir="rtl" >
<dt >مقدمه</dt>
<dd>خلاصه اي از مقدمه</dd>
<dt>فصل 2</dt>
<dd>خلاصه اي از فصل 1</dd>
<dt>فصل 2</dt>
<dd>خلاصه اي از فصل 2</dd>
</dl>
مقدمه
خلاصه اي از مقدمه
فصل 1
خلاصه اي از فصل 1
فصل 2
خلاصه اي از فصل 2


داخل تگهاي تشريح يعني <dd> ميتوانيد از پاراگرافها، تگهاي br ، تصاوير و حتي فهرستهاي ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامي تگهاي مربوط به فهرستها ممکن ميباشد.
مثالهاي بيشتر

انواع فهرستهاي مرتب
مثالي در مورد فهرستهاي مرتب به همراه استفاده از شناسه type جهت تعيين نوع نمايش فهرست

انواع فهرستهاي نامرتب
مثالي در مورد فهرستهاي نامرتب به همراه استفاده از شناسه type جهت تعيين نوع نمايش فهرست

فهرستهاي تودرتو
مثالي در مورد فهرستهاي ترکيبي. اعضاي فهرست ميتوانند از فهرستهاي ديگر تشکيل شوند.

فهرستهاي تعريفي
مثالي در مورد فهرستهاي تعريفي به همراه استفاده از شناسه dir

تگهاي فهرست
Start Tag Purpose کاربرد
<ol> Defines an ordered list تعريف فهرستهاي مرتب

<ul> Defines an unordered list تعريف فهرستهاي نامرتب

<li> Defines a list item تعريف يک آيتم و قلم از يک فهرست

<dl> Defines a definition list تعريف فهرستهاي تعريفي

<dt> Defines a definition term تعريف اصطلاح در فهرستهاي تعريفي

<dd> Defines a definition description تعريف معني و شرح اصطلاح در فهرستهاي تعريفي



مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها

از طريق استفاده از عنصر <form> و چند تگ مرتبط قادر به دريافت اطلاعات از بازديدکنندگان صفحاتتان و يا تبادل اطلاعات بين صفحات مختلف خواهيد شد. با کمک اين گروه از تگ ها قادر به نمايش باکسهاي ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، راديو باتونها (radio-buttons) و ... شده و همچنين امکان گذاشتن دکمه هاي ارسال (submit button) و يا حذف (reset) را خواهيد داشت. اين فصل با شرح تگ هاي form و input و ... به چگونگي ايجاد ارتباط با بازديدکنندگان و گرفتن اطلاعات از آنها بصورت لاتين و يا فارسي خواهد پرداخت.

توجه داشته باشيد که براي پردازش اطلاعات دريافتي از کاربر بايد با يکي از زبانهاي cgi از قبيل ASP، perl، PHP، CFM ، JSP يا Java آشنائي داشته باشيد. مثالهاي cgi مدرسه وب از ربان اسکريپت Perl استفاده ميکنند.
مثالها:


وروديهاي متن يا Text fields
مثالي ساده در مورد ايجاد text field ها . با کمک text field ها کاربران قادر به وارد کردن و تايپ متن خواهند شد.

وروديهاي رمز عبور يا Password fields

مثالي ساده در مورد ايجاد password field ها . با کمک password field ها کاربران قادر به ورود رمز عبور يا پسورد خواهند شد.

مثالهاي بيشتر
فرمها (Forms)

تمامي عناصر و تگهائي که تاکنون ديده ايد فقط به نمايش اطلاعات پرداخته اند و هيچکدام به گرفتن و اخذ اطلاعات از کاربر نپرداخته اند. فرمها که با تگ <form> معرفي ميشوند، طراح سايت را قادر به جمع آوري و اخذ اطلاعات از بازديدکننده سايت خواهند کرد. عنصر فرم و گروهي از عناصر و تگهاي درون آن به دريافت و ارسال اطلاعات به سمت وب سرور کمک خواهند کرد و لازم به ذکر است که تمامي تگهاي مربوط به فرمها بايد درون تگهاي <form> و <form/> قرار ميگيرند.

درون تگ فرم گروه زيادي از عناصر و تگهاي مختلف قابل استفاده هستند از قبيل عناصر ورود متن يک سطري(text fields)، عناصر ورود متنهاي چند سطري (Textarea)، منوهاي drop-down و radio buttons و ...

تگ Input

به عنوان پر مصرف ترين تگ مربوط به ورود اطلاعات بايد از تگ <input> نام برد. در اين تگ شناسه اي به نام type به تعيين نوع اطلاعات ورودي اختصاص دارد. مقادير ممکن براي اين شناسه به قرار زيرند:
text , checkbox , radio , password , hidden , submit , reset , button , file , image
در ادامه به شرح بعضي از type هاي کاربردي خواهيم پرداخت:
وروديهاي متن (Text Fields)

اگر ميخواهيد که بازديدکننده اطلاعاتي از قبيل متن، اعداد و ... را وارد کند از شناسه اي با مقدار "text" استفاده ميشود.
کد اچتمل نمايش توسط مرورگر

<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
First name:
Last name:


<form dir="rtl" >
نـــــــــــــــام:
<input type="text" name="firstname">
<br>
نام خانوادگي:
<input type="text" name="lastname">
</form>
نـــــــــــــــام:
نام خانوادگي:


توجه داشته باشيد که تگ <form> چيزي را به نمايش نخواهد گذاشت بلکه تگهاي درون آن توسط مرورگر نمايش داده خواهند شد. در مثال فارسي بالا به شناسه dir و مقدار rtl آن توجه داشته باشيد.لازم به يادآوري است که اغلب مرورگرها در حالت پيش فرض براي وروديهاي متن اندازه 20 کاراکتر را در نظر ميگيرند و اگر ميخواهيد که اندازه پيش فرض وروديهاي متن را تغيير دهيد بايد از شناسه اي به نام size استفاده کنيد.
وروديهاي Radio Buttons

اگر ميخواهيد که بازديدکننده گزينه اي را از بين چند گزينه محدود انتخاب کند، از مقدار "radio" براي شناسه type استفاده کنيد:
کد اچتمل نمايش توسط مرورگر

<form>
<input type="radio" name="---" value="male"> Male
<br>
<input type="radio" name="---" value="female"> Female
</form>
Male
Female


<form dir="rtl">
<input type="radio" name="---" value="male"> مرد
<br>
<input type="radio" name="---" value="female"> زن
</form>
مرد
زن


همانطور که مشاهده ميشود فقط امکان يکي از گزينه ها براي کاربر ميسر است.
وروديهاي Checkboxes

اگر ميخواهيد که بازديدکننده يک يا چند گزينه را از بين چند گزينه محدود انتخاب کند، از مقدار "checkbox" براي شناسه type استفاده کنيد:
کد اچتمل نمايش توسط مرورگر

<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
I have a bike
I have a car


<form dir="rtl">
<input type="checkbox" name="bike">
دوچرخه دارم
<br>
<input type="checkbox" name="car">
ماشين دارم
</form>
دوچرخه دارم
ماشين دارم

شناسه Action و دکمه Submit در فرمها ( Form's Action Attribute & Submit Button)

در فرمها براي ارسال اطلاعات کسب شده از دکمه اي به نام ارسال يا Submit Button استفاده ميشود و در اثر کليک کاربر بروي اين دکمه "Submit" ، اطلاعات درون فرم به فايلي ديگر ارسال خواهند شد. براي تعيين مقصد ارسال اطلاعات بايد درون تگ form از شناسه اي به نام action استفاده کنيد. مقدار شناسه action آدرس يا url فايلي است که به دريافت و سپس پردازش اطلاعات دريافتي خواهد پرداخت. معمولا فايلهاي بخش action برنامه ها و اسکريپت هائي نوشته شده با ربانهاي cgi مانند ASP، Perl ، PHP و ... بوده و وظيفه آنها دريافت اطلاعات فرمها و سپس پردازش آنها ميباشد.

تعيين مقدار "submit" براي شناسه type سبب نمايش دکمه Submit يا ارسال خواهد گرديد.
کد اچتمل نمايش توسط مرورگر

<form name="input" action="form_action.cgi">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
Username:


<form name="input" action="form_action.cgi" dir="rtl">
نام کاربر
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
نام کاربر


در مثال بالا در باکس ورودي متن، کلمه اي را وارد کرده و دکمه ارسال را کليک کنيد. مرورگر به محض کليک دکمه ارسال، اطلاعات درون فرم را که در اين مثال متني ساده است به سمت فايلي که در شناسه action تعيين شده است ارسال کرده و در اين مثال برنامه اي به زبان Perl با نام form_action.cgi در سمت سرور به ذخيره و سپس نمايش متني خبري خواهد پرداخت.

ورود متن فارسي در عناصري مانند Text field يا Text area:
همانطور که در مثالهاي بالا مشاهده کرديد در مورد المانهاي Text field و Textarea با کمک شناسه dir ميتوان سمت و جهت ورود اطلاعات را "از راست به چپ" تعيين کنيد. ولي اگر کاربري ويندوز فارسي نداشته باشد، از کامپيوترهاي مکينتاش استفاده کند و يا سيستمش را فارسي نکرده باشد قادر به ورود اطلاعات به زبان فارسي نخواهد بود و نويسه هاي تايپ شده لاتين خواهند بود!، در اينگونه موارد چه بايد کرد؟
معمولا برنامه نويسان وب براي فراهم ساختن امکان ورود متن فارسي از يکي از دو روش زير استفاده ميکنند:
استفاده از اپلتهاي جاوا با اين مزيت که سورس و کد اصلي فارسي سازي قابل استفاده توسط ديگران نيست!!
استفاده از زبان جاوا اسکريپت و با اين عيب که سورس و کد اصلي JavaScript قابل مشاهده و استفاده توسط ديگران است!

مدرسه وب بر اساس دستورالعملهاي "پروژه فارسي وب" از روش دوم استفاده کرده و از کد جاوا اسکريپت فراهم شده توسط اين پروژه استفاده ميکند. مثال زير نحوه استفاده از کد فارسي ساز جاوا اسکريپتي مذکور را شرح خواهد داد:

فارسي ساز جاوا اسکريپتي
مثالي در مورد نحوه استفاده از فارسي ساز جاوا اسکريپتي در يک فرم متشکل از Textfield ها
مثالهاي بيشتر

حالتهاي مختلف ورودي Input
در تگ input و با کمک شناسه type و مقادير مختلف براي آن ميتوان انواع مختلف اطلاعات را از وبگرد گرفت.

Checkboxes
مثالي در مورد نحوه تعريف فرمي متشکل از Checkbox ها

Radiobuttons
مثالي در مورد نحوه تعريف فرمي متشکل از Radiobutton ها

فهرست کرکره اي ساده
مثالي در مورد نحوه تعريف فرمي متشکل از drop down box ها

فهرست کرکره اي ديگر
مثالي در مورد نحوه تعريف فرمي متشکل از drop down box ها با تعيين پيش گزينه

Textarea
مثالي در مورد نحوه تعريف فرمي متشکل از Textarea ، ناحيه اي براي ورود بيش از يک سطر متن (نکته: استفاده از اديتور ما براي اين مثال امکان پذير نيست! اگر گفتيد چرا!؟)

تعريف فرمي با کمک دکمه يا button
مثالي در مورد نحوه تعريف فرمي با کمک دکمه يا button

ترسيم مرز در اطراف فرم
مثالي در مورد نحوه تعريف فرمي دلخواه و ترسيم مرزي بدور آن به همراه تعيين عنواني براي فرم با کمک عنصر Fieldset

ارسال ايميل با کمک فرمها
مثالي در مورد نحوه ارسال ايميل با کمک فرمها

ساختن فهرستي از سايتهاي مورد علاقه
مثالي در مورد نحوه استفاده از تگ فرم و منوهاي کرکره اي و کمي جاوا اسکريپت براي ساخت فهرستي از سايتها

تگهاي فرم
Start Tag Purpose کاربرد
<form> Defines a form for user input تعريف فرم ورود اطلاعات

<input> Defines an input field تعريف ورودي از نوع Input

<textarea> Defines a text-area (a multi-line text input control) تعريف ورودي متن چند سطري يا text-area

<label> Defines a label to a control تعريف برچسب يا label

<fieldset> Defines a fieldset تعريف fieldset

<legend> Defines a caption for a fieldset تعريف عنوان براي fieldset ها

<select> Defines a selectable list (a drop-down box) تعريف فهرستهاي انتخابي يا drop-down box

<optgroup> Defines an option group تعريف option group ها

<option> Defines an option in the drop-down box تعريف گزينه اي از drop-down box ها

<button> Defines a push button تعريف دکمه فشاري، متفاوت با button تگ input



مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها

در اين درس با تگ img ، شناسه src و alt ، تگهاي Map و Area و چگونگي نمايش تصاوير و همچنين تنظيم محل آنها در سندهاي اچتمل آشنا خواهيد شد.
مثالها:


درج تصوير
نحوه درج تصاوير با کمک تگ img

درج تصويري واقع در فضاي آدرسي ديگر
درج تصويري واقع در دايرکتوريي غير از آدر س صفحه اچتمل و يا تصويري واقع در فضاي آدرسي ديگر سايتها

مثالهاي بيشتر

تگ img و شناسه src يا source

در زبان اچتمل تصاوير را با کمک تگ <img> تعريف ميکنند. تگ <img> از نوع تگهاي خالي است، بدين معنا که فقط داراي يک يا چند شناسه و attribute بوده و داراي تگ انتهائي يا <img/> نيست.

مهمترين شناسه براي درج و تعريف يک تصوير src يا source نام دارد و مقدار اين شناسه آدرس يا URL تصوير ميباشد. تصاويري که مرورگر در يک صفحه وب نمايش ميدهد ميتوانند در همان دايرکتوري صفحه اچتمل، در ديگر دايرکتوريهاي همان سايت و يا در فضاي بيکران وب قرار داشته باشند.
شکل ساده درج يک تصوير:


<img src="url">

مقدار url آدرس اينترنتي تصوير ميباشد و مثلا اگر تصويري که قرار است که در صفحه درج شود در همان دايرکتوري قرار دارد و نامش me.jpg ، کافي است که به جاي url فقط نام تصوير يعني me.jpg را بنويسيد و اگر تصوير در سايتي ديکر قرار دارد url کامل آنرا بنويسيد. مثلا تصوير لوگو سايت google.com داراي url ي برابر [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] است.در اين url نام تصوير logo.gif بوده، در دايرکتوري images قرار داشته و روي وب سايت google.com قرار دارد.

شناسه هاي width و height در تگ img

کاربرد شناسه هاي width و height تعيين عرض و ارتفاع نمايش تصوير است. اگر از اين شناسه ها استفاده نکنيد، مرورگر ابتدا تصوير را لود کرده و سپس طول و عرض آنرا يافته و در نهايت نمايش ميدهد. با نوشتن مقاديري غير از مقادير واقعي طول و عرض تصوير ميتوانيد به تغيير شکل و ابعاد آن بپردازيد و آنرا مثلا کوچکتر، بزرگتر و يا کشيده تر نمايش دهيد. مثال زير نحوه درج تصويري را با قيد ابعاد آن شرح ميدهد:

<img src="http://www.google.com/images/logo.gif" width="276" height="110" >

توصيه ميشود که حتما ابعاد تصوير را با کمک شناسه هاي width و height قيد کنيد، اينکار سبب کمک به مرورگر در تسريع شروع نمايش صفحه خواهد شد.(در واقع با قيد ابعاد تصوير، مرورگر قبل از لود تصوير ميداند که چه مقدار از صفحه نمايش بايد به تصوير بايد اختصاص داده شود و قبل از لوذ شدن تمامي تصاوير مرورگر شروع به نمايش قالب و چارچوب کلي صفحه خواهد کرد.)
شناسه Alt يا "alternate text" يا متن جايگزين

اگر مرورگر به هر دليلي نتواند که يک تصوير را نمايش دهد و يا مرورگر از نوع مرورگرهائي باشد که فقط متن را نمايش ميدهند، متن و text ي که با کمک شناسه alt تعيين شده است نمايش داده خواهد شد. همچنين در اغلب مرورگرها با قرارگرفتن ماوس بروي يک تصوير، متن تعيين شده توسط شناسه alt نمايش داده خواهد شد. با کمک alt اطلاعات اضافي مربوط به تصوير قابل نمايش ميباشد.مثال زير نحوه درج تصويري را با قيد متن جايگزين آن شرح ميدهد:

<img src="images/ganjafzar.gif" alt="Iran Developers!" >


وبلاگها و اضافه کردن تصاوير:
اگر وبلاگي داشته و ميخواهيد که تصويري به آن اضافه کنيد دو حالت مختلف ممکن است که پيش آيد:
الف) تصوير روي سايتي ديگر قرار داشته و شما هم ميخواهيد از آن تصوير که در سايتي ديگر قرار دارد استفاده کنيد. در اين حالت از آدرس مستقيم تصوير در شناسه src استفاده کنيد، مانند :
<img src="http://www.google.ca/images/hp0.gif" width=258 height=78 >
در اين مثال تصوير روي سايت google.ca قرار داشته و لزومي به ذخيره آن توسط شما نيست.


ب) تصوير روي هارد کامييوتر شما است و هنوز بروي وب منتقل نشده است. در اين حالت چون اغلب سيستم هاي وبلاگ امکان ذخيره تصاوير را به شما نمي دهند بايد ابتدا تصويرتان را با کمک FTP يا روشهاي ديگر به روي سايتي ديگر منتقل کنيد. شرکتهاي مختلفي فضاي مجاني براي ساخت صفحات وب و ذخيره اطلاعات و تصاوير در اختيار شما قرار ميدهند و در يکي از سؤالهاي اين FAQ فهرست اين شرکتها را ميتوانيد ببينيد. بنابراين ابتدا فضائي در وب تهيه کرده، سپس تصويرتان را Upload کرده (با کمک FTP يا روشهاس ديگر ) و سپس در شناسه src از تگ img آدرس جديد تصوير را قيد کنيد.

چند نکته مهم:
اگر در يک صفحه اچتمل از 10 تصوير استفاده شده باشد، مرورگر بايد 11 فايل را لود کند.( خود صفحه به علاوه 10 تصوير)
استفاده از تصاوير، سرعت لود شدن صفحات را پايين مي آورد.با احتياط از تصاوير استفاده کنيد و به اندازه و حجم تصوير توجه داشته باشيد.
لود تصويري با حجم 50 کيلوبايت براي کسي که از مودمي با سرعت 28kbps استفاده ميکند حداقل 15 ثانيه طول خواهد کشيد.
براي ديدن مشخصات تصاوير در وب کافي است که روي تصوير Right click کرذه و سپس در بخش properities آدرس،ابعاد و ظرفيت تصوير را ببينيد.
براي ذخيره تصاوير در وب کافي است که روي تصوير Right click کرذه و سپس در بخش "Save picture as" آنرا ذخيره کنيد.
مثالهاي بيشتر

تصاوير زمينه
مثالي در مورد نحوه تعيين تصاوير زمينه با کمک شناسه background در تگ body

ترازبندي تصاوير
اين مثال نحوه ترازبندي تصاوير در کنار متون را نشان ميدهد.

تصاوير شناور در متن
آزاد گذاشتن تصوير در سمت چپ يا راست

نمايش تصاوير در ابعاد مختلف
مثالي در مورد استفاده از شناسه هاي width و height و نمايش تصاوير در ابعاد مختلف

نمايش متن جايگزين براي تصاوير
مثالي در مورد استفاده از شناسه alt

استفاده از تصاوير هنگام ايجاد پيوند ها
مثالي در مورد نحوه استفاده از تصاوير هنگام ايجاد پيوند ها

ايجاد image map ها
مثالي در مورد ايجاد image map . در اين مثال هر بخش از نواحي تعريف شده قابل کليک بوده و به پيوندي اختصاصي اشاره ميکند.

تگ هاي تصاوير
Start Tag Purpose کاربرد
<img> Defines an image درج تصوير

<map> Defines an image map تعريف Image map يا ؟؟؟

<area> Defines an area inside an image map تعريف ناحيه اي در داخل Image map



مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها

در اين درس با چگونگي تعيين تصاوير و رنگ پس زمينه (Background) آشنا خواهيد شد. رنگ و يا تصوير پس زمينه فاکتور بسيار مهمي در طراحي صفحات اچتمل بوده و استفاده از رنگ و يا تصوير مناسب نقشي تعيين کننده در خوانا بودن صفحات دارد.
مثالها:


رنگ متن و زمينه متناسب
انتخاب رنگ مناسب متون و پس زمينه به خوانا بودن متن کمک شايان توجهي خواهد کرد.

رنگ متن و زمينه نامتناسب
مثالي از انتخاب نامناسب رنگ متن و پس زمينه

مثالهاي بيشتر
رنگ و تصوير زمينه در صفحات اچتمل:


تگ <body> داراي دو شناسه مهم براي تعيين رنگ و تصوير پس زمينه ميباشد. پس زمينه صفحات اچتمل رنگ و يا يک تصوير ميتواند باشد.
شناسه bgcolor براي رنگ پس زمينه (background color)

شناسه bgcolor رنگ پس زمينه را تعيين ميکند. مقدار رنگ پس زمينه ميتواند نام رنگ (مثل red يا blue ) ، مقدار آن بر اساس استاندارد RGB و يا حتي مقدار هگزادسيمال (Hexadecimal) باشد.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

در تمامي مثالهاي بالا با کمک شناسه bgcolor رنگ زمينه صفحه "سياه" تعيين ميشود.
شناسه Background براي تصوير پس زمينه:

براي تعيين تصويري که به عنوان پس زمينه صفحه نمايش داده ميشود از شناسه background استفاده ميشود.مقدار اين شناسه URL يا آدر س تصوير (image) ميباشد.اگر ابعاد تصوير کوچکتر از ابعاد صفحه مرورگر باشد، تصوير زمينه تکثير خواهد شد تا حدي که تمام صفحه نمايش از تصوير زمينه پوشانده شود.

<body background="bg.gif">
<body background="http://www.khaterat.com/images/bg.gif">

در مثال اول از آدرس دهي نسبي (relative) براي تعيين URL يا آدرس تصوير استفاده شده و در واقع در اين مثال فايل اچتمل و تصوير bg.gif بايد در يک دايرکتوري قرار گيرند. در مقابل مثال دوم از آدرس دهي مطلق (absolute) براي تعيين آدرس تصوير استفاده شده است و همانطور که ميدانيد آدرس تصوير در هر نقطه از فضاي وب ميتواند باشد.

نکات مهم: اگر از تصاوير پس زمينه در صفحات اچتمل استفاده ميکنيد به نکات زير توجه کنيد :
هرتصويري با فرمت gif و يا jpg قابل استفاده به عنوان تصوير زمينه ميباشد.
از تصاوير بزرگتر از ده کيلوبايت ظرفيت به هيچ وجه استفادا نکنيد، در غير اين صورت سرعت load صفحه بشدت پايين خواهد آمد.
از تصاوير زمينه هماهنگ با ديگرتصاوير صفحه استفاده کنيد.
از تصاوير زمينه هماهنگ با متون صفحه استفاده کنيد.
در رزولوشنهاي مختلف به ديدن و آزمايش تصاوير پس زمينه بپردازيد.
پر مصرف ترين رنگهاي زمينه وب سايتها، رنگهاي سفيد، سياه و خاکستري ميباشند.
اغلب سايتهاي وب از تصاوير پس زمينه استفاده نمي کنند! مثلا همين سايت!!!
نکته مهم در سازگاري با نسخه هاي جديد اچتمل و XHTML

شناسه هاي bgcolor و background در تگ <body> در نسخه 4 اچتمل و XHTML پشتيباني نميشوند و در واقع از رده خارج محسوب ميشوند. در عوض کنسرسيوم W3C استفاده از Style Sheet ها را توصيه ميکند و در واقع در نسخه 4 اچتمل و استاندارد جديد XHTML تمامي اطلاعات مربوط به نمايش يا presentation و layout بايد در style sheet ها قرار گيرند.
مثالهاي بيشتر

استفاده مناسب از تصوير زمينه 1
در اين مثال بدليل استفاده از تصوير مناسب براي زمينه، نوشته هاي صفحه کاملا خوانا هستند.

استفاده مناسب از تصوير زمينه 2
در اين مثال در اثر استفاده از تصوير مناسب براي زمينه، نوشته هاي صفحه کاملا خوانا هستند.

استفاده نامناسب از تصوير زمينه
در اين مثال نوشته هاي صفحه خوانا نيستند.

استفاده از تصوير زمينه با آدرس مطلق
در اين مثال آدرس تصوير زمينه بصورت مطلق و کامل آورده شده است.

تعيين رنگ زمينه با Style Sheet ها
در اين مثال چگونگي استفاده از Style Sheet ها براي تعيين رنگ زمينه آورده شده است.

با وجوديکه هنوز بعضي از اچتمل کاران از تگ <font> براي تعيين نام و نوع قلم، رنگ و اندازه متون استفاده ميکنند ولي در استاندارد جديد اچتمل (نسخه 4) و همچنين XHTML از تگ <font> پشتيباني نميشود و استفاده از Style Sheet ها به عنوان جايگزين معرفي شده است.
تگ <font>

در نسخه هاي 3.2 و قبلي تر زبان اچتمل از تگ <font> براي تعيين نام قلم، رنگ و اندازه متون استفاده ميشود. در اين تگ شناسه face نام قلم ، شناسه size انداره قلم و شناسه color معرف رنگ متن خواهد بود. مثالهاي زير کاربرد تگ <font> خدابيامرز را نشان ميدهند:
کد اچتمل نمايش کد روبرو توسط مرورگر

<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>

This is a paragraph.


<p dir="rtl">
<font size="1" face="Times" color="#FF9900">
متني با قلم Times و اندازه 1 و رنگ FF9900
</font>
</p>

متني با قلم Times و اندازه 1 و رنگ FF9900


<p dir="rtl">
<font size="2" face="Tahoma" color="red">
اين متني با قلم Tahoma و اندازه 2 و رنگ قرمز
</font>
</p>

متني با قلم Tahoma و اندازه 2 و رنگ قرمز

شناسه هاي تگ <font>
Attribute Example کاربرد
size="number" size="2" تعيين اندازه قلم

size="+number" size="+1" افزايش اندازه قلم

size="-number" size="-1" کاهش اندازه قلم

face="face-name" face="Times" تعيين نام قلم

color="color-value" color="#eeff00" تعيين رنگ قلم

color="color-name" color="red" تعيين رنگ قلم



*** بيان مختصر عملکرد تگ <font> در اين دروس فقط جهت اطلاع بوده و استفاده از آنها در طراحي صفحات اچتمل توصيه نميشود.
ديگر از تگ <font> استفاده نکنيد!

تگ <font> از رده خارج محسوب ميشود و کنسرسيوم جهاني تعيين استانداردهاي وب (World Wide Web Consortium, W3C) اين تگ را از مجموعه تگهاي استاندارد اچتمل کنار گذاشته است و اکيدا توصيه ميشود که از Style Sheet ها براي تعريف هر گونه خواص نمايشي و آرايشي (layout & Presentation) المانها در اچتمل استفاده شود.
روش صحيح تعيين نام قلم، اندازه و رنگ متون با کمک Style Sheet ها:

هر چند که مبحث و کلاسهاي درس Style Sheet ها در "مدرسه وب" در دست تهيه بوده و اميدواريم که بزودي ارائه شوند ولي تا قبل از آن استفاده از شناسه اي به نام style در بسياري از المانها کار گشا خواهد بود. مثالهاي ساده زير نحوه تعيين نام قلم، اندازه و رنگ متون را با کمک شناسه style به نمايش خواهند گذاشت:

تعيين نام قلم
مثالي در مورد تعيين نام قلم در يک استيل درجا (inline)

تعيين اندازه قلم
مثالي در مورد تعيين اندازه قلم در يک استيل درجا (inline)

تعيين رنگ قلم
مثالي در مورد تعيين رنگ قلم در يک استيل درجا (inline)

تعيين نام، اندازه و رنگ قلم
مثالي در مورد تعيين نام، اندازه و رنگ قلم در يک استيل درجا (inline)

مثال کاربردي در مورد Style Sheet ها
مثالي در مورد نحوه تعريف استيلهاي مختلف نمايش متون در جداول

تگ <span>
تگ <span> سبب تعريف محدوده و گستره اي مشخص ميشود. تمامي المان هائي که درون تگهاي <span> و <span/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصي از قبيل استيل (Style) و يا سمت و جهت نمايش متون(dir).
بر خلاف تگ هاي <p> و <div> مرورگرها هيچ سطر جديدي به اول يا آخر المان <span> اضافه نمي کنند.
مثال:

کد اچتمل نمايش کد روبرو توسط مرورگر
<p>Some text <span style="color:#0000AF;">another text</span> again text...</p>

Some text another text again text...



id, class, title, style, dir, lang شناسه هاي استاندارد المان span


مثالهائي از نحوه استفاده از المان span و Style sheet ها:
روش قديمي روش صحيح
<font color="#FF00FF">Hello!</font> <span style="color:#FF00FF">Hello!</span>

<font color="rgb(255,0,255)">Hello!</font> <span style="color:rgb(255,0,255)">Hello!</span>

<font style="color:Fuchsia">Hello!</font> <span style="color:Fuchsia">Hello!</span>

<font color="#FF00FF" size="3">Hello!</font> <span style="color:#FF00FF;font-size:100%">Hello!</span>


تگ <div>
تگ <div> سبب تعريف محدوده و گستره اي مشخص ميشود. تمامي المان هائي که درون تگهاي <div> و <div/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصي از قبيل استيل (Style) و يا سمت و جهت نمايش متون(dir).
بر خلاف تگ <span> مرورگرها يک سطر جديد به اول و آخر المان <div> اضافه مي کنند.
مثال:

کد اچتمل نمايش کد روبرو توسط مرورگر
<p>Some text <div style="color:#0000AF;">another text</div> again text...</p>

Some text
another text
again text...



id, class, title, style, dir, lang شناسه هاي استاندارد المان div


تعيين جهت نمايش متون
مثالي در مورد استفاده از تگ div و اعمال "جهت نمايش متون" به بخشي از صفحه اچتمل

Start Tag Purpose کاربرد
<div> Defines a division/section in a document تعريف بخش و ناحيه اي از صفحه اچتمل

<span> Defines a section in a document تعريف بخش و ناحيه اي از صفحه اچتمل


مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها

در نسخه جديد(4/0) اچتمل امکان جداسازي کامل فرمت دهي از ساختار صفحات اچتمل فراهم شده است. در اين نسخه توصيه ميشود که تمامي اطلاعات مربوط به نمايش و ترازبندي به فايلهائي مجزا از صفحه اچتمل منتقل شوند. بخشي از صقحات اچتمل که مربوط به نمايش، ترازبندي و فرمت دهي است، استايل شيت يا "Style Sheet" ناميد شده و معمولا به صورت فايلي مجزا درون بخش <head> صفحات اچتمل معرفي ميگردند. در اين درس به صورت بسيار خلاصه با روشهاي مختلف استفاده از استايل شيتها در صفحات اچتمل آشنا خواهيد شد.
مثالها


استيلها در اچتمل
در اين مثال نحوه تعريف استايل شيتها درون بخش <head> صفحات اچتمل شرح داده شده است. (Internal Style Sheet)

پيوندي بدون خط افقي زيري
در اين مثال نحوه ايجاد پيوندي بدون "خط افقي زيري" شرح داده شده است. (Inline Styles)

اتصال به فايلهاي استايل شيت خارجي
در اين مثال نحوه استفاده از تگ <link> جهت اتصال به فايلهاي استايل شيت خارجي شرح داده خواهد شد. (External Style Sheet)
چگونگي استفاده از استايل شيتها:

مرورگرها از روي استيلهاي تعريف شده توسط استايل شيتها به فرمت دهي و نمايش اطلاعات درون صفحه اچتمل ميپردازند. تعريف و استفاده از استايل ها در صفحات اچتمل به سه روش مختلف ممکن ميباشد:
1)استايل شيتهاي خارجي (external style sheet) :

در اين روش تمامي استيلها و تعاريف نمايشي درون فايلي جداگانه قرار گرفته و بسيار مناسب حالتهائي است که قرار است که استايلي به بيش از يک صفحه اچتمل اعمال شود. مزيت اين روش سهولت در تغيير ظاهر صفحات يک وب سايت ميباشد و براي يک تغيير کلي در سايت کافي است که فايل استايل شيت کل سايت که معمولا يک فايل واحد است تغيير داده شود. (بايد توجه داشت که در اين حالت تمامي صفحات سايت بايد به يک فايل استايل شيت واحد لينک شده باشند.) استايل شيتهاي خارجي توسط تگ <link> که درون بخش head صفحات اچتمل قرار ميگيرد، معرفي ميشوند.
در مثال زير با کمک شناسه href از تگ link نام و در حالت کلي url فايل در برگيرنده استايلهاي تعريف شده تعيين ميگردد:



<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


2)استايل شيتهاي داخلي (Internal Style Sheet) :

کاربرد اين روش در حالتهائي است که صفحه اچتمل نيازمند تعريف استايلي منحصر به فرد و مجزا بوده و استايل طراحي شده فقط بدرد آن صفحه خواهد خورد. در اين حالت بايد کدهاي حاوي تعريف استايل درون تگ هاي <style> و <style/> قرار گرفته و معمولا نتيجه درون بخش head صفحه اچتمل گذاشته ميشود.مثال:



<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>


3)استايل شيتهاي درجا (Inline Styles) :
کاربرد اين روش در مواردي است که بايد براي يک المان (يا گروهي) خاص استايلي اعمال شود. در اين حالت بايد از شناسه اي به نام style که تقريبا در تمامي تگها قابل اعمال است استفاده شود. مثال:



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


تگ هاي استايل
Start Tag Purpose کاربرد
<style> Defines a style in a document تعريف استيلها درون يک سند

<link> Defines the relationship between two linked documents تعيين و تعريف فايل استايل شيت خارجي

<font> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.

<basefont> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.

<center> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.


مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها

تغييرات در نسخه جديد اچتمل (4/0) :
هدف اوليه از طراحي زبان اچتمل ايجاد زباني براي تعريف اطلاعات محض بدون در برداشتن جزئيات مربوط به فرمت و نمايش بود ولي با ايجاد نسخه 3/2 زبان اچتمل و اضافه شدن تگهاي فرمت دهي مانند <font> و يا شناسه هائي مانند color و Align محتوا و نمايش در صفحات اچتمل ادغام گرديده و همين امر سبب بروز مشکلات عديده اي براي طراحان و برنامه نويسان وب گرديد. براي رفع اين مشکل در نسخه 4/0 اچتمل توصيه بر جداسازي کامل اين دو گروه از اطلاعات بوده و در نسخه هاي آينده اچتمل اين جداسازي اجباري خواهد گرديد و توصيه مدرسه وب نيز استفاده از استايل شيتها براي هر نوع تعريف فرمت و ترازبندي ميباشد. براي مثال در کد اچتمل زير که بر اساس نسخه 3/2 اچتمل ميباشد، ساختار و محتوا (تگي از نوع پاراگراف با محتواي "This is a paragraph") با اطلاعات نمايش يعني رنگ و ترازبندي (رنک قرمز متن و ترازبندي در وسط صفحه) همزمان و در کنار هم آورده شده اند و اين ادغام امکان تغيير و توسعه کد را بسيار محدود خواهد کرد:

<p align="center"><font color="red">This is a paragraph</font></p>


کد معادل مثال فوق با استفاده از استايل شيتها در اين مثال شرح داده شده است.(هر چند که اين مثال از تمامي امکانات استايل شيتها و ايجاد فايلي کاملا مستقل براي تعريف استايل استفاده نکرده است.)

NAME W3C HTML NS MSIE DESCRIPTION
A HTML40 NS3+ MSIE3+ anchor

ABBR HTML40 abbreviated form (e.g., WWW, HTTP, etc.)

ACRONYM HTML40

ADDRESS HTML40 NS3+ MSIE3+ information on author

APPLET HTML40 NS3+ MSIE3+ Java applet

AREA HTML40 NS3+ MSIE3+ client-side image map area

B HTML40 NS3+ MSIE3+ bold text style

BASE HTML40 NS3+ MSIE3+ document base URI

BASEFONT HTML40 NS3+ MSIE3+ base font for the page

BDO HTML40 MSIE5+ I18N BiDi over-ride

BGSOUND MSIE3+ background sound

BIG HTML40 NS3+ MSIE3+ enlarge text style

BLINK NS3+ blinking text

BLOCKQUOTE HTML40 NS3+ MSIE3+ long quotation

BODY HTML40 NS3+ MSIE3+ document body

BR HTML40 NS3+ MSIE3+ forced line break

BUTTON HTML40 MSIE4+ push button

CAPTION HTML40 NS3+ MSIE3+ table caption

CENTER HTML40 NS3+ MSIE4+ shorthand for DIV align=center

CITE HTML40 NS3+ MSIE3+ citation font format

CODE HTML40 NS3+ MSIE3+ computer code fragment

COL HTML40 MSIE3+ table column

COLGROUP HTML40 MSIE3+ table column group

COMMENT MSIE3+ comment ignored by the browser

DD HTML40 NS3+ MSIE3+ definition description

DEL HTML40 MSIE4+ deleted text

DFN HTML40 MSIE3+ instance definition

DIR HTML40 NS3+ MSIE3+ directory list

DIV HTML40 NS3+ MSIE3+ generic language/style container

DL HTML40 NS3+ MSIE3+ definition list

DT HTML40 NS3+ MSIE3+ definition term

EM HTML40 NS3+ MSIE3+ emphasis

EMBED NS3+ MSIE3+ embeds external object in HTML

FIELDSET HTML40 MSIE4+ form control group

FONT HTML40 NS3+ MSIE3+ local change to font

FORM HTML40 NS3+ MSIE3+ interactive form

FRAME HTML40 NS3+ MSIE3+ subwindow

FRAMESET HTML40 NS3+ MSIE3+ window subdivision

H1 HTML40 NS3+ MSIE3+ heading

H2 HTML40 NS3+ MSIE3+ heading

H3 HTML40 NS3+ MSIE3+ heading

H4 HTML40 NS3+ MSIE3+ heading

H5 HTML40 NS3+ MSIE3+ heading

H6 HTML40 NS3+ MSIE3+ heading

HEAD HTML40 NS3+ MSIE3+ document head

HR HTML40 NS3+ MSIE3+ horizontal rule

HTML HTML40 NS3+ MSIE3+ document root element

I HTML40 NS3+ MSIE3+ italic text style

IFRAME HTML40 MSIE3+ inline subwindow

ILAYER NS4+ positioning content

IMG HTML40 NS3+ MSIE3+ Embedded image

INPUT HTML40 NS3+ MSIE3+ form control/field

INS HTML40 MSIE4+ inserted text

ISINDEX HTML40 NS3+ MSIE4+ single line prompt

KBD HTML40 NS3+ MSIE3+ text to be entered by the user

KEYGEN NS4+ for use in web-based certificate management systems

LABEL HTML40 MSIE4+ form field label text

LAYER NS4+ positioning content

LEGEND HTML40 MSIE4+ fieldset legend

LI HTML40 NS3+ MSIE3+ list item

LINK HTML40 NS4+ MSIE3+ a media-independent link

MAP HTML40 NS3+ MSIE3+ client-side image map

MARQUEE MSIE3+ scrolling text field

MENU HTML40 NS3+ MSIE3+ menu list

META HTML40 NS3+ MSIE3+ generic metainformation

MULTICOL NS3+ multiple column formatting

NOBR NS3+ MSIE3+ ensures that a line of text does not wrap to the next line

NOEMBED NS3+ alternative text for embedded objects

NOFRAMES HTML40 NS3+ MSIE3+ alternate content container for non frame-based rendering

NOLAYER NS3+ positioning content

NOSCRIPT HTML40 NS3+ MSIE3+ alternate content container for non script-based rendering

OBJECT HTML40 NS4+ MSIE3+ generic embedded object

OL HTML40 NS3+ MSIE3+ ordered list

OPTGROUP HTML40 option group

OPTION HTML40 NS3+ MSIE3+ selectable choice

P HTML40 NS3+ MSIE3+ paragraph

PARAM HTML40 NS3+ MSIE3+ named property value

PLAINTEXT NS3+ MSIE3+ text format

PRE HTML40 NS3+ MSIE3+ preformatted text

Q HTML40 MSIE4+ sets apart a quotation in text

S HTML40 NS2+ MSIE3+ strike-through text style

SAMP HTML40 MSIE3+ sample program output, scripts, etc.

SCRIPT HTML40 NS3+ MSIE3+ script statements

SELECT HTML40 NS3+ MSIE3+ option selector

SERVER NS3+ specifies server-side JavaScript statements

SMALL HTML40 NS3+ MSIE3+ small text style

SPACER NS3+ inserts a space in a document

SPAN HTML40 NS4+ MSIE3+ generic language/style container

STRIKE HTML40 NS3+ MSIE3+ strike-through text

STRONG HTML40 NS3+ MSIE3+ strong emphasis

STYLE HTML40 NS4+ MSIE3+ style info

SUB HTML40 NS3+ MSIE3+ subscript

SUP HTML40 NS3+ MSIE3+ superscript

TABLE HTML40 NS3+ MSIE3+ table

TBODY HTML40 MSIE4+ table body

TD HTML40 NS3+ MSIE3+ table data cell

TEXTAREA HTML40 NS3+ MSIE3+ multi-line text field

TFOOT HTML40 MSIE4+ table footer

TH HTML40 NS3+ MSIE3+ table header cell

THEAD HTML40 MSIE4+ table header

TITLE HTML40 NS3+ MSIE3+ document title

TR HTML40 NS3+ MSIE3+ table row

TT HTML40 NS3+ MSIE3+ teletype or monospaced text style

U HTML40 NS3+ MSIE3+ underlined text style

UL HTML40 NS3+ MSIE3+ unordered list

VAR HTML40 NS3+ MSIE3+ instance of a variable or program argument

در زبان اچتمل رنگها بر اساس ترکيب سه منبع نوري قرمز(Red)، سبز(Green) و آبي(Blue) تعريف ميشوند و هر منبع نوري شدتي بين 0 تا 255 را ميتواند داشته باشد. در اين استاندارد نور سفيد رنگي است حاصل از تداخل سه منبع نوري با شدت کامل يعني 255 و رنگ سياه حاصل تداخل سه نور با شدت 0 خواهد بود.(در واقع هر نقطه رنگي يا پيکسل بر روي صفحه مانيتور حاصل برخورد سه اشعه نوري قرمز، سبز و آبي ساخته شده توسط لامپ تصوير ميباشد.)

توجه داشته باشيد که مطابق تعريف ذکر شده امکان استفاده از 256 x 256 x 256 يا حدود 16 ميليون (16,777,216) رنگ مختلف وجود داشته و در شناسه هاي مختلف به يکي از سه روش زير قادر به تعيين رنگ متن يا ناحيه اي خواهيد بود:
استفاده از مقادير شدت نور در مبناي 16 با فرمت #RRGGBB که RR، GG, BB مقادير مبناي شانزده نورهاي قرمز، سبز و آبي ميباشند.
استفاده از مقادير شدت نور در مبناي 10 با فرمت rgb(RRR,GGG,BBB) که RRR، GGG, BBB مقادير مبناي ده نورهاي قرمز، سبز و آبي ميباشند.
استفاده از نامهاي استاندارد رنگها مانند red ، green و ... مطابق جدول انتهائي اين صفحه
جدول زير حاوي جندين مثال و رنگ ترکيبي در مبناي ده و شانزده ميباشد:

Color مبناي 16 (Color HEX) مبناي 10 (Color RGB) نام رنگ
#000000 rgb(0,0,0) Black

#FF0000 rgb(255,0,0) Red

#00FF00 rgb(0,255,0) Lime

#0000FF rgb(0,0,255) Blue

#FFFF00 rgb(255,255,0) Yellow

#00FFFF rgb(0,255,255) Cyan

#FF00FF rgb(255,0,255) Fuchsia

#FFFFFF rgb(255,255,255) White

#C0C0C0 rgb(192,192,192) Silver



مثالهائي از نحوه استفاده از رنگها در اچتمل:
<p style="color:#FF00FF">Hello!</p> استفاده از مقدار در مبناي 16

<p style="color:rgb(255,0,255)">Hello!</p> استفاده از مقدار در مبناي 10

<p style="color:Fuchsia">Hello!</p> استفاده از نام رنگ

body{ color: #444400; } تعيين رنگ نوشته المان body در Style sheet ها

body{ background-color:#FFFFFF; } تعيين رنگ زمينه صفحه در Style sheet ها

HR { color : #EEEECC;} تعيين رنگ خطوط افقي در Style sheet ها

a:link {color:#c00B09;} تعيين رنگ پيوندها در Style sheet ها

p {color:Yellow;} تعيين رنگ متون پاراگرافها در Style sheet ها



جدول رنگهاي پايه اچتمل بر اساس مقادير هگز
#EEEEEE #DDDDDD #CCCCCC #BBBBBB #AAAAAA #999999
#888888 #777777 #666666 #555555 #444444 #333333
#000000 #000033 #000066 #000099 #0000CC #0000FF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#CC6600 #CC6633 #CC6666 #CC3399 #CC66CC #CC66FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF



جدول رنگهاي نامگذاري شده و مقادير معادل هگز آن به ترتيب حروف الفباء
Aliceblue
#F0F8FF Antiquewhite
#FAEBD7 Aqua
#00FFFF
Aquamarine
#7FFFD4 Azure
#F0FFFF Beige
#F5F5DC
Bisque
#FFE4C4 Black
#000000 Blanchedalmond
#FFEBCD
Blue
#0000FF Blueviolet
#8A2BE2 Brown
#A52A2A
Burlywood
#DEB887 Cadetblue
#5F9EA0 Chartreuse
#7FFF00
Chocolate
#D2691E Coral
#FF7F50 Cornflowerblue
#6495ED
Cornsilk
#FFF8DC Crimson
#DC143C Cyan
#00FFFF
Darkblue
#00008B Darkcyan
#008B8B Darkgoldenrod
#B8860B
Darkgray
#A9A9A9 Darkgreen
#006400 Darkkhaki
#BDB76B
Darkmagenta
#8B008B Darkolivegreen
#556B2F Darkorange
#FF8C00
Darkorchid
#9932CC Darkred
#8B0000 Darksalmon
#E9967A
Darkseagreen
#8FBC8F Darkslateblue
#483D8B Darkslategray
#2F4F4F
Darkturquoise
#00CED1 Darkviolet
#9400D3 Deeppink
#FF1493
Deepskyblue
#00BFFF Dimgray
#696969 Dodgerblue
#1E90FF
Firebrick
#B22222 Floralwhite
#FFFAF0 Forestgreen
#228B22
Fuchsia
#FF00FF Gainsboro
#DCDCDC Ghostwhite
#F8F8FF
Gold
#FFD700 Goldenrod
#DAA520 Gray
#808080
Green
#008000 Greenyellow
#ADFF2F Honeydew
#F0FFF0
Hotpink
#FF69B4 Indianred
#CD5C5C Indigo
#4B0082
Ivory
#FFFFF0 Khaki
#F0E68C Lavender
#E6E6FA
Lavenderblush
#FFF0F5 Lawngreen
#7CFC00 Lemonchiffon
#FFFACD
Lightblue
#ADD8E6 Lightcoral
#F08080 Lightcyan
#E0FFFF
Lightgoldenrodyellow
#FAFAD2 Lightgreen
#90EE90 Lightgrey
#D3D3D3
Lightpink
#FFB6C1 Lightsalmon
#FFA07A Lightseagreen
#20B2AA
Lightskyblue
#87CEFA Lightslategray
#778899 Lightsteelblue
#B0C4DE
Lightyellow
#FFFFE0 Lime
#00FF00 Limegreen
#32CD32
Linen
#FAF0E6 Magenta
#FF00FF Maroon
#800000
Mediumaquamarine
#66CDAA Mediumblue
#0000CD Mediumorchid
#BA55D3
Mediumpurple
#9370D8 Mediumseagreen
#3CB371 Mediumslateblue
#7B68EE
Mediumspringgreen
#00FA9A Mediumturquoise
#48D1CC Mediumvioletred
#C71585
Midnightblue
#191970 Mintcream
#F5FFFA Mistyrose
#FFE4E1
Moccasin
#FFE4B5 Navajowhite
#FFDEAD Navy
#000080
Oldlace
#FDF5E6 Olive
#808000 Olivedrab
#688E23
Orange
#FFA500 Orangered
#FF4500 Orchid
#DA70D6
Palegoldenrod
#EEE8AA Palegreen
#98FB98 Paleturquoise
#AFEEEE
Palevioletred
#D87093 Papayawhip
#FFEFD5 Peachpuff
#FFDAB9
Peru
#CD853F Pink
#FFC0CB Plum
#DDA0DD
Powderblue
#B0E0E6 Purple
#800080 Red
#FF0000
Rosybrown
#BC8F8F Royalblue
#4169E1 Saddlebrown
#8B4513
Salmon
#FA8072 Sandybrown
#F4A460 Seagreen
#2E8B57
Seashell
#FFF5EE Sienna
#A0522D Silver
#C0C0C0
Skyblue
#87CEEB Slateblue
#6A5ACD Slategray
#708090
Snow
#FFFAFA Springgreen
#00FF7F Steelblue
#4682B4
Tan
#D2B48C Teal
#008080 Thistle
#D8BFD8
Tomato
#FF6347 Turquoise
#40E0D0 Violet
#EE82EE
Wheat
#F5DEB3 White
#FFFFFF Whitesmoke
#F5F5F5
Yellow
#FFFF00 YellowGreen
#9ACD32

تگهاي اصلي (Basic Tags)
<html></html> ايجاد سندي اچتمل
<head></head> ايجاد اطلاعات شناسنامه اي سند مانند عنوان و ...
<body></body> ايجاد بدنه و قسمت قابل مشاهده سند اچتمل

تگهاي ناحيه Header
<title></title> تعيين عنوان سند

شناسه هاي مهم تگ body
<body bgcolor=?> تعيين رنگ زمينه بر اساس نام رنگ يا معادل هگز
<body text=?> تعيين رنگ نوشته بر اساس نام رنگ يا معادل هگز
<body link=?> تعيين رنگ پيوندها بر اساس نام رنگ يا معادل هگز
<body vlink=?> تعيين رنگ پيوندهاي بازديدشده بر اساس نام رنگ
<body alink=?> تعيين رنگ پيوند فعال بر اساس نام رنگ يا معادل هگز

تگهاي متن و نوشته
<pre></pre> نمايش متن هاي از قبل فرمت شده (preformatted)
<hl></hl> ايجاد بزرگترين سر تيتر
<h6></h6> ايجاد کوچکترين سر تيتر
<b></b> ايجاد متن توپر
<i></i> ايجاد متن مورب و ايتاليک
<tt></tt> ايجاد متن از نوع تله تايپي
<cite></cite> ايجاد citation معمولا ايتاليک
<em></em> نمايش تاکيد شده متن (توپر يا مورب)
<strong></strong> نمايش تاکيد شده متن (توپر يا مورب)
<font size=?></font> تعيين اندازه قلم از 1 تا 7
<font color=?></font> تعيين رنگ قلم بر اساس نام رنگ يا مقدار هگز آن

پيوندها
<a href="URL"></a> ايجاد پيوند
<a href="mailto:EMAIL"></a> ايجاد پيوندي از نوع mailto
<a name="NAME"></a> ايجاد پيوندي نامگذاري شده در يک سند
<a href="#NAME"></a> ارجاع به يک پيوند نامگذاري شده

فرمت دهي
<p></p> ايجاد پاراگرافي جديد
<p align=?> ترازبندي پاراگراف در سمت left, right, or center
<br> رفتن سر سطر جديد
<blockquote> </blockquote> عنوان سازي متن
<dl></dl> ايجاد فهرستهاي تعريفي
<dt> ايجاد عنصري از يک فهرست تعريفي
<dd> ايجاد شرح و توصيف يک عنصر فهرست تعريفي
<ol></ol> ايجاد فهرستهاي مرتب
<li></li> ايجاد يک قلم اطلاعاتي از يک فهرست
<ul></ul> ايجاد فهرستي نامرتب
<div align=?> تگي براي فرمت دهي بلوکي بزرگ از کدهاي اچتمل

المانهاي گرافيکي
<img src="name"> ايجاد يک تصوير
<img src="name" align=?> تراز بندي تصوير (left, right, center; bottom, top, middle)
<img src="name" border=?> تعيين ضخامت مرز يک تصوير
<hr> درج خطي افقي
<hr size=?> تعيين ارتفاع خط افقي
<hr width=?> تعيين عرض خط بر اساس مقدار واقعي يا درصدي
<hr noshade> ايجاد خطي افقي بدون سايه

جداول
<table></table> ايجاد جدول
<tr></tr> ايجاد رديف در جداول
<td></td> ايجاد خانه هاي جداول
<th></th> ايجاد عنوان ستونهاي يک جدول

شناسه هاي جداول
<table border=#> تعيين مقدار ضخامت مرزهاي يک جدول
<table cellspacing=#> تعيين فاصله بين خانه هاي جدول
<table cellpadding=#> تعيين فاصله بين محتواي يک خانه و مرزهاي آن
<table width=# or %> تعيين عرض جدول بر اساس پيکسل و يا درصدي
<tr align=?> or <td align=?> تعيين ترازبندي خانه هاي جدول (left, center, right)
<tr valign=?> or <td valign=?> ترازبندي عمودي خانه هاي جدول (top, middle, bottom)
<td colspan=#> تعيين تعداد ستون هائي که بايد يکي شوند.
<td rowspan=#> تعيين تعداد سطر هائي که بايد يکي شوند.
<td nowrap> باعث جلوگيري از شکسته شدن متن در خانه جدول ميشود.

فريمها
<frameset></frameset> تعريف و ايجاد مجموعه اي از فريمها
<frameset rows="value,value"> شناسه اي براي تعريف رديفهاي يک مجموعه فريم بر اساس اندازه واقعي بر حسب پيکسل و يا ابعاد درصدي
<frameset cols="value,value"> شناسه اي براي تعريف ستونها يک مجموعه فريم بر اساس اندازه واقعي بر حسب پيکسل و يا ابعاد درصدي
<frame> تعريف فريمي از مجموعه فريمها
<noframes></noframes> تعيين متني که بايد در صورت عدم پشتيباني مرورگر از فريمها بايد نمايش داده شود.

شناسه هاي فريمها
<frame src="URL"> تعيين سند اچتمل داخل فريم
<frame name="name"> تعيين نام براي يک فريم
<frame marginwidth=#> تعيين عرض حاشيه راست و چپ فريم
<frame marginheight=#> تعريف طول حاشيه بالا و پايين فريم بر اساس پيکسل
<frame scrolling=VALUE> تعيين اينکه فريمي از Scroll bar استفاده کند يا نه. مقادير ممکن: yes، no و auto (حالت پيش فرض)
<frame noresize> سبب جلوگيري از تغيير اندازه يک فريم ميشود.

فرمها
<form></form> ايجاد يک فرم
<select multiple name="NAME" size=?></select> ايجاد يک منوي کرکره اي و تعيين تعداد اقلامي که قبل از scrolling نمايش داده خواهند شد.
<option> تعيين هر يک از اقلام منو کرکره اي
<select name="NAME"></select> ايجاد منوي کرکره اي
<option> تعيين هر يک از اقلام منو کرکره اي
<textarea name="NAME" cols=40 rows=8></textarea> ايجاد الماني براي ورود متن در بيش از يک خط با تعيين تعداد سطر و ستون ناحيه
<input type="checkbox" name="NAME"> ايجاد چک باکسي با تعيين متن و عنوان آن
<input type="radio" name="NAME" value="x"> ايجاد راديو باتن با تعيين متن و عنوان آن
<input type=text name="foo" size=20> ايجاد الماني براي ورود متن با حداکثر يک سطر به همراه تعيين ابعاد بر اساس نويسه
<input type="submit" value="NAME"> ايجاد دکمه اي از نوع ارسال و Submit
<input type="image" border=0 name="NAME" src="name.gif"> ايجاد دکمه اي از نوع ارسال با کمک يک تصوير
<input type="reset"> ايجاد دکمه خلاصي !! يا Reset

Anchor پيوند، لينک، (لنگر كشتي)
Attribute شناسه، نشان، صفت
Browser, user agent مرورگر، شبکه نورد، بروزر
Caption عنوان ، سرلوحه
Character نويسه، کاراکتر، دخشه
Client سرويس گيرنده، مشتري ، ارباب رجوع
DHTML اچتمل ديناميک، FAQ
Division, Div بخش، قسمت، دسته بندي
Download گرفتن اطلاعات از وب سرور
Document سند، متني اچتمل
Edit ويرايش
Element المان، عنصر
Explorer جستجوگر، مكتشف
Extention انشعاب فايل
FAQ بيشترين سؤالات پرسيده شده در مورد يک موضوع
Font قلم، خانواده حروف
Format قالب، فرمت
Frame قاب، چهارچوب
Frameset مجموعه اي از فريمها
FTP استانداردي براي مبادله فايل (File Transfer Protocol)
href آدرس متن مختلط (hyerlink reference)
IP Internet Protocol
JavaScript جاوا اسکريپت، زباني براي اسکريپت نويسي
HTTP استاندارد تبادل ابر متن ها (Hypertext Transfer Protocol)
Hyper text ابر متن، متن مختلط
List فهرست
Link پيوند، لينک
Online آنلاين، سرخط
Padding لايه گذاري، لفافه
Page, Web page صفحه، متن
Publish انتشار، بردن اطلاعات روي وب سرور
Protocol استاندارد ارتباطي، فهرست پروتوکلهاي مهم در اينترنت
Robot نرم افزاري خودکار در وب
Site. Web site پايگاه، سايت
Script اسکريپت، دستخط، متن نمايشنامه
Spacing فاصله گذاري ، فاصله
Span محدوده، گستره، وجب
Target هدف و مقصد
Table جدول، آرايه
Tag تگ، برچسب
TCP/IP نوعي استاندارد ارتباطي (Transmission Control Protocol/Internet Protocol)
Unicode استانداري براي محيط هاي چند زبانه
Upload بردن اطلاعات روي وب سرور، معمولا با کمک نرم افزارهاي FTP انجام ميپذيرد.
URL آدرس اينترنتي، خلاصه شده Uniform Resource Locator
User, Surfer کاربر، وبگرد، بازديدکننده
Weblog وب نويسي، تارنگاري
Webmaster مديريت سايت
Web Server سرويس دهنده وب، نرم افزاري که وظيفه اصليش دادن سرويس به درخواستهاي دريافت شده از وب ميباشد.
Web, WWW وب، تار عنکبوت جهاني، خلاصه شده World Wide Web


سايتهائي مرجع براي يادگيري اچتمل :

1) Welcome to HTML School
2) Getting Started
3) Authoring HTML Basics
4) Getting started with HTML
5) A Beginner's Guide to HTML
6) HTML Tutorial
7) HTML Tag Quick Reference Guide
8) HTML FAQ Knowledge Base
9) HTML 4.01 Specification