در اين درس با تگ img ، شناسه src و alt ، تگهای Map و Area و چگونگی نمايش تصاوير و همچنين تنظيم محل آنها در سندهای اچتمل آشنا خواهيد شد.
مثالها:
درج تصوير
نحوه اضافه کردن تصوير به صفحات اچتمل با کمک تگ img
درج تصويری واقع در فضای آدرسی ديگر
درج تصويری واقع در دايرکتوريی غير از آدر س صفحه اچتمل و يا تصويری واقع در فضای آدرسی ديگر سايتها
مثالهای بيشتر
تگ img و شناسه src يا source
در زبان اچتمل تصاوير را با کمک تگ <img> تعريف ميکنند. تگ <img> از نوع تگهای خالی است، بدين معنا که فقط دارای يک يا چند شناسه و attribute بوده و دارای تگ انتهائی يا <img/> نيست.
مهمترين شناسه برای درج و تعريف يک تصوير src يا source نام دارد و مقدار اين شناسه آدرس يا URL تصوير ميباشد. تصاويری که مرورگر در يک صفحه وب نمايش ميدهد ميتوانند در همان دايرکتوری صفحه اچتمل، در ديگر دايرکتوريهای همان سايت و يا در فضای بيکران وب قرار داشته باشند.
شکل ساده درج يک تصوير:
شناسه های width و height در تگ img
کاربرد شناسه های width و height تعيين عرض و ارتفاع نمايش تصوير است. اگر از اين شناسه ها استفاده نکنيد، مرورگر ابتدا تصوير را لود کرده و سپس طول و عرض آنرا يافته و در نهايت نمايش ميدهد. با نوشتن مقاديری غير از مقادير واقعی طول و عرض تصوير ميتوانيد به تغيير شکل و ابعاد آن بپردازيد و آنرا مثلا کوچکتر، بزرگتر و يا کشيده تر نمايش دهيد. مثال زير نحوه درج تصويری را با قيد ابعاد آن شرح ميدهد:
مثالها:
درج تصوير
نحوه اضافه کردن تصوير به صفحات اچتمل با کمک تگ img
درج تصويری واقع در فضای آدرسی ديگر
درج تصويری واقع در دايرکتوريی غير از آدر س صفحه اچتمل و يا تصويری واقع در فضای آدرسی ديگر سايتها
مثالهای بيشتر
تگ img و شناسه src يا source
در زبان اچتمل تصاوير را با کمک تگ <img> تعريف ميکنند. تگ <img> از نوع تگهای خالی است، بدين معنا که فقط دارای يک يا چند شناسه و attribute بوده و دارای تگ انتهائی يا <img/> نيست.
مهمترين شناسه برای درج و تعريف يک تصوير src يا source نام دارد و مقدار اين شناسه آدرس يا URL تصوير ميباشد. تصاويری که مرورگر در يک صفحه وب نمايش ميدهد ميتوانند در همان دايرکتوری صفحه اچتمل، در ديگر دايرکتوريهای همان سايت و يا در فضای بيکران وب قرار داشته باشند.
شکل ساده درج يک تصوير:
<img src="url">
مقدار url آدرس اينترنتی تصوير ميباشد و مثلا اگر تصويری که قرار است که در صفحه درج شود در همان دايرکتوری قرار دارد و نامش test.jpg ، کافی است که به جای url فقط نام تصوير يعنی test.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 اطلاعات اضافی مربوط به تصوير قابل نمايش ميباشد.مثال زير نحوه درج تصويری را با قيد متن جايگزين آن شرح ميدهد:
شناسه Alt يا "alternate text" يا متن جايگزين اگر مرورگر به هر دليلی نتواند که يک تصوير را نمايش دهد و يا مرورگر از نوع مرورگرهائی باشد که فقط متن را نمايش ميدهند، متن و text ی که با کمک شناسه alt تعيين شده است نمايش داده خواهد شد. همچنين در اغلب مرورگرها با قرارگرفتن ماوس بروی يک تصوير، متن تعيين شده توسط شناسه alt نمايش داده خواهد شد. با کمک alt اطلاعات اضافی مربوط به تصوير قابل نمايش ميباشد.مثال زير نحوه درج تصويری را با قيد متن جايگزين آن شرح ميدهد:
<img src="images/madresehweb_88_31.jpg" alt="The web school!" >
وبلاگها و اضافه کردن تصاویر:
اگر وبلاگی داشته و میخواهید که تصویری به آن اضافه کنید دو حالت مختلف ممکن است که پیش آید:
الف) تصویر روی سایتی دیگر قرار داشته و شما هم میخواهید از آن تصویر که در سایتی دیگر قرار دارد استفاده کنید. در این حالت از آدرس مستقیم تصویر در شناسه src استفاده کنید، مانند :
<img src="http://www.google.ca/images/hp0.gif" width=258 height=78 >
در این مثال تصویر روی سایت google.ca قرار داشته و لزومی به ذخیره آن توسط شما نیست.
ب) تصویر روی هارد کامییوتر شما است و هنوز بروی وب منتقل نشده است. در این حالت چون بعضی سیستم های وبلاگ امکان ذخیره تصاویر را به شما نمی دهند باید ابتدا تصویرتان را با کمک FTP یا روشهای دیگر به روی سایت یا هر وب سرور دیگری منتقل کنید. شرکتهای مختلفی فضای مجانی برای ساخت صفحات وب و ذخیره اطلاعات و تصاویر در اختیار شما قرار میدهند و در یکی از سؤالهای این FAQ فهرست این شرکتها را میتوانید ببینید. بنابراین ابتدا فضائی در وب تهیه کرده، سپس تصویرتان را Upload کرده (با کمک FTP یا روشهاس دیگر ) و سپس در شناسه src از تگ img آدرس جدید تصویر را قید کنید.
چند نکته مهم:
مثالهای بيشتر تصاوير زمينه
مثالی در مورد نحوه تعيين تصاوير زمينه با کمک شناسه background در تگ body
ترازبندی تصاوير
اين مثال نحوه ترازبندی تصاوير در کنار متون را نشان ميدهد.
تصاوير شناور در متن
آزاد گذاشتن تصوير در سمت چپ يا راست
نمايش تصاوير در ابعاد مختلف
مثالی در مورد استفاده از شناسه های width و height و نمايش تصاوير در ابعاد مختلف
نمايش متن جايگزين برای تصاوير
مثالی در مورد استفاده از شناسه alt
استفاده از تصاوير هنگام ايجاد پيوند ها
مثالی در مورد نحوه استفاده از تصاوير هنگام ايجاد پيوند ها
ايجاد image map ها
مثالی در مورد ايجاد image map . در اين مثال هر بخش از نواحی تعريف شده قابل کليک بوده و به پيوندی اختصاصی اشاره ميکند.
برانامه ای خوب و متن باز برای FTP را میتوانید اینجا داونلود کنید:
Filezilla
اگر وبلاگی داشته و میخواهید که تصویری به آن اضافه کنید دو حالت مختلف ممکن است که پیش آید:
<img src="http://www.google.ca/images/hp0.gif" width=258 height=78 >
در این مثال تصویر روی سایت google.ca قرار داشته و لزومی به ذخیره آن توسط شما نیست.
چند نکته مهم:
- اگر در يک صفحه اچتمل از 10 تصوير استفاده شده باشد، مرورگر بايد 11 فايل را لود کند.( خود صفحه به علاوه 10 تصوير)
- استفاده از تصاوير، سرعت لود شدن صفحات را پايين می آورد.با احتياط از تصاوير استفاده کنيد و به اندازه و حجم تصوير توجه داشته باشيد.
- لود تصويری با حجم 50 کيلوبايت برای کسی که از مودمی با سرعت 28kbps استفاده ميکند حداقل 15 ثانيه طول خواهد کشيد.
- برای ديدن مشخصات تصاوير در وب کافی است که روی تصوير Right click کرذه و سپس در بخش properities آدرس،ابعاد و ظرفيت تصوير را ببينيد.
- برای ذخيره تصاوير در وب کافی است که روی تصوير Right click کرذه و سپس در بخش "Save picture as" آنرا ذخيره کنيد.
مثالهای بيشتر تصاوير زمينه
مثالی در مورد نحوه تعيين تصاوير زمينه با کمک شناسه background در تگ body
ترازبندی تصاوير
اين مثال نحوه ترازبندی تصاوير در کنار متون را نشان ميدهد.
تصاوير شناور در متن
آزاد گذاشتن تصوير در سمت چپ يا راست
نمايش تصاوير در ابعاد مختلف
مثالی در مورد استفاده از شناسه های width و height و نمايش تصاوير در ابعاد مختلف
نمايش متن جايگزين برای تصاوير
مثالی در مورد استفاده از شناسه alt
استفاده از تصاوير هنگام ايجاد پيوند ها
مثالی در مورد نحوه استفاده از تصاوير هنگام ايجاد پيوند ها
ايجاد image map ها
مثالی در مورد ايجاد image map . در اين مثال هر بخش از نواحی تعريف شده قابل کليک بوده و به پيوندی اختصاصی اشاره ميکند.
برانامه ای خوب و متن باز برای FTP را میتوانید اینجا داونلود کنید:
Filezilla
تگ های تصاوير
| Start Tag | Purpose | کاربرد | ||
|---|---|---|---|---|
| <img> | Defines an image | درج تصوير | ||
 | ||||
| <map> | Defines an image map | تعريف Image map يا ؟؟؟ | ||
| ||||
| <area> | Defines an area inside an image map | تعريف ناحيه ای در داخل Image map | ||
| ||||
