برچسب های HTML در اين درس با تگ 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 ي برابر http://www.google.com/images/logo.gif است.در اين 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
تبلیغات ویزه
بخش اول 
