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

در اين درس با ويژگيهاي فايلهاي HTML يا اچتمل و نحوه ايجاد يک فايل ساده و نمايش آن در صفحه مرورگرتان آشنا خواهيد شد.
يک فايل HTML چيست؟
HTML را "اچ تي ام ال" و يا اچتمل بخوانيد.
HTML برگرفته از حروف اول Hyper Text Markup Language
ميباشد.
يک فايل HTML فايلي از نوع text ميباشد که متشکل از markup tag ها ميباشد.
مرورگر يا Browser از روي markup tag ها مي فهمد که چگونه بايد صفحه را نمايش بدهد.
يک فايل HTML بايد داراي انشعاب htm و يا html باشد.
يک فايل HTML فايلي از نوع text ميباشد که با هر اديتور ساده اي قابل ايجاد است.
وظيفه اصلي تگ هاي اچتمل ( markup tags ) بيان چگونگي نمايش اطلاعات ميباشد.
ميخواهيد که يک فايل اچتمل بسازيد؟

اگر از ويندوز مايکروسافت استفاده ميکنيد، Notepad را باز کرده (Mac کارها از SimplaeText استفاده کنند. ) و متن زير را در آن تايپ کنيد:

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first html page. <b>This text is bold</b>
</body>
</html>

سپس فايل را با نام مثلا test.html در درايو c:\ ذخيره کنيد.

براي ديدن فايل اچتمل بالا در مرورگر يا Brower تان ( معمولا اينترنت اکسپلورر و يا نتسکيپ نويگيتور ) کافي است که از روي منوي File/Open file فايل بالا را از روي محل ذخيره شده بخوانيد. ( به آدرس فايل در قسمت Address توجه کنيد، مثلا c:\test.html)
يکي از مهمترين وظايف مرورگرها نمايش صفحات اچتمل ميباشد، چه اين صفحات روي کامپيوتر شما ذخيره شده باشند و يا اينکه از اينترنت خوانده شوند. با کليک روي اين لينک فايلي شبيه فايل ذخيره شده توسط شما از روي وب سرور توسط مرورگرتان خوانده شده و سپس نمايش داده خواهد شد!!! ( به آدرس فايل در قسمت Address توجه کنيد، مثلا h++p://www.khaterat.com/html/dars/test.html )
توضيح مثال بالا

اولين تگ مثال بالا تگ <html> ميباشد. از روي اين تگ، مرورگر نوع متن يعني اچتمل بودنش را يافته و از روي <html/> انتهاي متن اچتمل را ميبابد.

متن بين تگ <head> و تگ <head/> اطلاعات شناسنامه اي يا "Header information" متن اچتمل بوده و نمايش داده نخواهند شد. در اين مثال با کمک تگهاي <title> و <title/> تيتر و يا Title صفحه که در اين مثال عبارت "Title of page" ميباشد در بالاي مرورگر نمايش داده خواهد شد.

متن بين تگ <body> و انتهاي آن يعني تگ <body/> تنها اطلاعاتي است که توسط مرورگرنمايش داده خواهند شد.

متن بين تگ <b> و انتهاي آن يعني تگ <b/> بصورت Bold و يا توپر نمايش داده خواهند شد.
انشعاب فايل htm يا html ؟

اغلب مرورگرها هر دو نوع انشعاب را به خوبي ميشناسند ولي ترجيحا به هنگام ذخيره فايلهاي اچتمل از html استفاده کنيد.( استفاده از انشعابهاي سه حرفي مانند htm مربوط به قديم و سيستم عاملهائي چون DOS بودند.)
نکته اي در مورد اديتورهاي اچتمل ( HTML Editors )

با وجوديکه با استفاده از اديتورهاي اختصاصي اچتمل مانند FrontPage و يا Claris Home Page امکان نوشتن و طراحي صفحات اچتمل بصورت WYSIWYG يا "What You See Is What You Get" وجود دارد اما توصيه ميشود که از اديتورهاي معمولي متن براي تهيه صفحات خود استفاده کرده، عملکرد تگها را شناخته و هيچگاه بدون اينکه بدانيد کاربرد يک تگ چيست آنرا بکار نبريد.
بيشترين سوالات پرسيده شده ( FAQ ) :

فايلم را درست کردم ولي هنوز نميتوانم آنرا در صفحه مرورگرم ببينم، مشکل کجاست؟
مطمئن شويد که فايل را با انشعاب درست (htm يا html ) ذخيره کرده ايد. در ضمن مطمئن شويد که همان فايل را Open کرده ايد.( نام و مسير فايل را در قسمت Address مرورگرتان چک کنيد.)

هر بار پس از تغيير و اديت مثالها نسخه اوليه را در صفحه مرورگرم ميبينم و تغييرات داده شده مشاهده نميشود، مشکل کجاست؟
به خاطر بالا بردن سرعت، هميشه مرورگرها از نسخه هاي موجود در Cache يا حافظه موقت خود براي خواندن صفحات استفاده ميکنند.براي وادار کردن مرورگر به خواندن اصل صفحه کافي است که در مرورگرتان Refresh/Reload کنيد. در اينترنت اکسپلورر کليد F5 يا View/Refresh و در نت اسکيپ Ctrl+R يا View/Reload اينکار را انجام خواهند داد.

آيا ميتوانم از هر دو مرورگر Internet Explorer و Netscape Navigator استفاده کنم؟
بله، فقط اگر از استاندارد يونيکد براي فارسي نويسي استفاده ميکنيد، براي ديدن درست صفحات فارسي بايد از نسخه 5 Internet Explorer و به بالا و در مورد Netscape Navigator از نسخه 6.2 و به بالا استفاده کنيد.

کجا ميتوانم آخرين نسخه از مرورگرهاي Internet Explorer و Netscape Navigator را داونلود کنم؟
Internet Explorer اينجاست و Netscape Navigator اينجا. اين درس شما را با نحوه نمايش انواع فهرستها شامل فهرستهاي مرتب(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 تعريف معني و شرح اصطلاح در فهرستهاي تعريفي از طريق استفاده از عنصر <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="qex" value="male"> Male
<br>
<input type="radio" name="qex" value="female"> Female
</form>
Male
Female


<form dir="rtl">
<input type="radio" name="qex" value="male"> مرد
<br>
<input type="radio" name="qex" 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
در اين درس با تگ 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

در اين درس با چگونگي تعيين تصاوير و رنگ پس زمينه (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 ها براي تعيين رنگ زمينه آورده شده است.