HTMLاستفاده از تصاویر در
تصاویر جلوه زیبایی به صفحات وب میدهند از این رو استفاده از تصویر بسیار کاربرد دارد.
برای قرار دادن عکس در صفحه html باید از تگ <img> استفاده کرد. توجه کنید که تگ پایانی ندارد ولی میتوان درون آن از یکسری attribute برای سفارشی سازی تصاویر استفاده کرد.
مثال:
<“img src=”myimage.jpg” alt=”alternative text” width=”500″ height=”600>
<“;img src=”myimage.jpg” alt=”alternative text” style=”width:500px;height:600px>
در تصاویر attributes استفاده از
- برای دادن نشانی عکس از src استفاده میشود توجه کنید این نشانی میتواند شامل آدرس URL و یا آدرس پوشه ای در سیستم شما باشد.
مثالی برای استفاده از URL:
<“img src=”https://www.example.com/images/myimage.jpg” alt=”myimage>
مثالی برای استفاده از آدرس دخیره عکس در سیستم شخصی:
<“;img src=”/images/html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px>
- با توجه به اینکه استفاده از تصاویر متحرک میتواند منجر به زیبایی هرچه بیشتر ظاهر سایت شود از این رو استفاده از تصاویری با فرمت gif. امکان قرار دادن تصاویر متحرک در سایت را فراهم میکند.
- از آنجایی که ممکن است به هر دلیلی عکس های بارگزاری شده لود نشوند استفاده از alt باعث میشود درصورتیکه تصویر لود نشد بجای تصویر متن وارد شده نمایش داده شود.
- میتوان با استفاده از height و width طول عرض عکسها را به مقدار دلخواه تغییر داد.
- میتوان از float جهت تعیین محل قرارگیری تصویر در سمت چپ یا سمت راست استفاده کرد.
مثال:
<img src=”smiley.gif” alt=”Smiley face” style=”float:right;width:42px;height:42px;”>
<img src=”smiley.gif” alt=”Smiley face” style=”float:left;width:42px;height:42px;”>
استفاده از عکس به عنوان لینک
از آنجایی که وجود عکس در ظاهر سایت تاثیر زیادی دارد به منظور افزایش جذابیت سایت میتوانید برای ساخت لینک از تصاویر مرتبط استفاده کنید. در مثال زیر نحوه ایجاد لینک با استفاده از تصاویر نمایش داده شده است.
<“a href=”meta-learning.ir>
<“;img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px>
</a>