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