تصاویر html

---

مثال ها

Norwegian Mountain Trip

حالا خودتان امتحان کنید!

---

حالا خودتان امتحان کنید - مثال ها

چگونگی اضافه کردن تصاویر به سند HTML

این مثال چگونگی نمایش تصویر را نشان می دهد.

چگونگی اضافه کردن تصاویر از محلی دیگر

در صورتیکه تصویر مورد نظر در محلی دیگر باشد  ، می توانید برای نمایش آن، از این

مثال کمک بگیرید.

(مثالهای بیشتر، در انتهای این صفحه آمده است)

---

تگ <img> و صفت  src

در HTML تصاویر با تگ <img> معرفی می شوند ، تگ <img> خالی است بدین معنا که فقط

شامل صفت ها است و تگ پایانی ندارد ، برای نمایش یک تصویر در یک صفحه ، شما احتیاج دارید

که از صفت Src استفاده کنید ، Src مخفف source (منبع) است

محتوا ( ارزش ) صفت src آدرس تصویری است که شما می خواهید در صفحتان نمایش دهید

نحوه معرفی یک تصویر

<" img src="url" alt="some_text/>

url به محلی اشاره می کند که تصویر در آنجا قرار دارد . تصویری که "boat.gif" نامیده شده در

دایرکتوری "images" در "www.w3cschools.ir" دارای این url است:

http://www.w3cschools.ir/images/boat.gif

مرورگر تصویر را جایی قرار می دهد که تگ تصویر پرونده در آنجا قرار گرفته است ، اگر شما تگ

تصویر را بین دو پاراگراف قرار دهید ، مرورگر ابتدا پاراگراف اول ، سپس تصویر و سپس پاراگراف

دوم را نشان می دهد.

---

صفت Alt

صفت Alt برای معرفی متن جایگزین به جای یک تصویر استفاده می شود ، محتوای(value) صفت

Alt یک متن توصیفی است:

<"img src="boat.gif" alt="Big Boat>

در واقع صفت alt اطلاعات دیگری را برای تصویر شامل می شود در صورتی که کاربر به دلایلی

نتواند تصویر را مشاهده کند

( به دلیل کندی اتصال ، خطا در صفت src ، یا در صورتی که کاربر از یک صفحه خوان استفاده کند)

توضیح تکمیلی : اگر مرورگر نتواند تصویری را بارگیری نماید ، صفت alt به خواننده می گوید که

تصویر را در صفحه از دست داده است ، سپس مرورگر متن جایگزین را بجای تصویر نشان خواهد

داد

---

مشخص کردن عرض و ارتفاع یک تصویر

صفت های height و width برای مشخص کردن ارتفاع و عرض یک تصویر مورد استفاده

قرار می گیرند به طور پیش فرض مقدار صفت به صورت پیکسل مشخص می شود

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

 
نکته : این یک تمرین خوب برای مشخص کردن هر دو صفت width و height یک تصویر

است اگر این صفت ها مشخص شوند هنگام بارگذاری صفحه ، فضای لازم برای تصویر

رزرو شده است ، هنگامی که تصویر بارگذاری می شود طرح بندی صفحه در طول

بارگذاری تغییر می کند

---

نکات پایه ای - اطلاعات مفید

نکته: اگر یک فایل HTML حاوی 10 تصویر باشد ، برای نمایش کامل صفحه به 11 فایل احتیاج

است. بارگیری تصاویر وقت گیر است ، بنابراین بهترین توصیه من این است که از تصاویر به دقت

استفاده کنید

نکته: هنگامی که صفحه وب بارگیری می شود ، این مرورگر است که در آن لحظه تصاویر را از وب

سرور می گیرد و آن را در صفحه اضافه می کند بنابراین مطمئن شوید که تصاویر دقیقا در همان

نقطه در ارتباط با صفحه وب باقی بمانند در غیر این صورت بازدید کنندگان شما آیکون لینک شکسته

را مشاهده می کنند

آیکون لینک شکسته نمایش خواهد داده شد در صورتی که مرورگر ، تصویر را نتواند پیدا کند

---

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

چگونگی چینش یک تصویر در داخل یک متن

به کمک این مثال می توان محل نمایش عکس، نسبت به متنی که عکس درون آن قرار

دارد ، را تعیین کرد

تعیین محل نمایش یک تصویر در پاراگراف

می خواهید تصویری را درون یک پاراگراف نمایش دهید برای تعیین محل آن نسبت به

متن پاراگراف ، به این مثال توجه کنید

تصویر به عنوان پیوند

به کمک این مثال می توان محل نمایش تصویر ، نسبت به متنی که تصویر درون آن قرار

دارد ، را تعیین کرد

ایجاد یک نقشه تصویری

چگونگی ایجاد یک نقشه تصویری با قابلیت کلیک بر ناحیه ها ، هر ناحیه یک لینک است

برچسب های تصویر

برچسب	توضیحات
<img>	یک تصویر را معرفی می کند
<map>	یک نقشه تصویری را معرفی می کند
<area>	داخل یک نقشه تصویری یک ناحیه قابل کلیک را تعریف می کند