تصاویر در HTML

تصاویر مناسب و زیبا می توانند طراحی و ظاهر یک صفحه وب را بهبود بخشند.

از تگ <img> در HTML برای جاسازی یک تصویر در یک صفحه وب استفاده می شود.

از لحاظ فنی تصاویر در یک صفحه وب درج نمی شوند بلکه این تصاویر به صفحات وب مرتبط هستند. تگ <img> یک فضای نگه داشتن برای تصاویر مرجع ایجاد می کند.

تگ <img> خالی است و فقط شامل ویژگی ها است، یعنی برچسب بسته شدن ندارد.

<img src="url" alt="alternatetext">

ویژگی src

ویژگی src مسیر URL به تصویر را مشخص می کند.

توجه: وقتی که یک صفحه وب بارگذاری می شود، این مرورگر است که در آن لحظه تصویر را از سرور وب دریافت می کند و آن را در صفحه قرار می دهد. پس مطمئن شوید که تصویر دقیقا در همان نقطه صفحه وب باقی بماند، وگرنه بازدید کننده سایت شما یک آیکون لینک شکسته دریافت می کنند.

<img src="https://maxdev.ir/admin/uploads/maxdev logo.JPG" alt="لوگو سایت ما">
امتحان کنید

 

ویژگی alt

ویژگی alt متن جایگزین مورد نیاز یک تصویر را فراهم می کند. اگر کاربر به هر دلیلی نتواند عکس را مشاهده کند، متن جایگزین نمایش داده می شود.

<img src="https://maxdev.ir/admin/uploads/maxdev logo.JPG" alt="لوگو سایت ما">
امتحان کنید

 

اندازه تصویر - عرض و ارتفاع

شما می توانید از ویژگی style برای تعیین کردن عرض و ارتفاع یک تصویر استفاده کنید.

<img src="https://maxdev.ir/admin/uploads/maxdev logo.JPG" alt="لوگو سایت ما" style="width:115px;height:62px;">
امتحان کنید

 

همچنین شما می توانید از ویژگی width و height هم استفاده کنید.

<img src="https://maxdev.ir/admin/uploads/maxdev logo.JPG" alt="Our Site Logo" width="115" height="62">
امتحان کنید

 

توجه کنید ویژگی width و height همیشه عرض و ارتفاع را در پیکسل تعریف می کنند.

همچنین همیشه عرض و ارتفاع یک تصویر را مشخص کنید. اگر این موضوع مشخص نباشد، صفحه وب ممکن است در حین باز کردن تصویر سوسو بزند.

 

عرض و ارتفاع؛ یا سبک؟

ویژگی های width، height و style همگی در HTML معتبر هستند.

با این وجود پیشنهاد ما این است که با استفاده از ویژگی style، از تغییر اندازه تصاویر در ورق  ها جلوگیری کنید.

<!DOCTYPE html>
<html>
<head>
<style>
/* This style sets the width of all images to 100%: */
img {
  width: 100%;
}
</style>
</head>
<body>

<h2>ویژگی عرض / ارتفاع یا سبک؟</h2>

<p>در تصویر اول از ویژگی عرض استفاده می شود (روی 115 پیکسل تنظیم شده است) ، اما استایل موجود در بخش head بر آن غلبه می کند و عرض را 100٪ تنظیم می کند.</p>

<img src="https://maxdev.ir/admin/uploads/maxdev logo.JPG" alt="لوگو ما" width="115" height="62">

<p>در تصویر دوم از ویژگی style استفاده می شود تا عرض را بر روی 115 پیکسل تنظیم کند ، این با توجه به سبک موجود در قسمت head سرشار نخواهد شد:</p>

<img src="https://maxdev.ir/admin/uploads/maxdev logo.JPG" alt="لوگو ما" style="width:128px;height:62px;">

</body>
</html>
امتحان کنید

 

تصاویر در پوشه دیگری

اگر تصاویر خود را در یک پوشه فرعی داشته باشید، باید نام پوشه را در ویژگی src قرار دهید.

<!DOCTYPE html>
<html>
<body>

<h2>عکس در پوشه دیگر</h2>
<p>ذخیره کردن تصاویر در یک زیر پوشه معمول است. سپس باید نام پوشه را در ویژگی src وارد کنید:</p>

<img src="/images/maxdev logo.JPG" alt="لوگو ما" style="width:115px;height:62px;">

</body>
</html>
امتحان کنید

 

تصاویر در یک سرور دیگر

برخی از وب سایت ها تصاویر خود را بر روی سرور دیگری ذخیره می کنند. در واقع شما می توانید به تصاویر از هر آدرس وب در جهان دسترسی داشته باشید.

<img src="https://maxdev.ir/admin/uploads/Sample GIF.gif" alt="maxdev.com">
امتحان کنید

 

تصاویر متحرک

در HTML شما اجازه استفاده از تصاویر متحرک GIF را دارید.

<img src="https://maxdev.ir/admin/uploads/Sample GIF.gif" alt="Sample GIF">
امتحان کنید

 

تصاویر به عنوان یک لینک

برای استفاده از یک  تصویر به عنوان یک لینک، تگ <img> را داخل تگ <a> قرار دهید.

<a href="/">

  <img src="https://maxdev.ir/admin/uploads/maxdev logo.JPG" alt="HTML tutorial">

</a>
امتحان کنید

 

تصویر شناور

از ویژگی float در CSS استفاده کنید تا اجازه دهید تصویر به سمت راست یا چپ یک متن شناور باشد.

<!DOCTYPE html>
<html>
<body>

<h2>عکس شناور</h2>
<p><strong>عکس در راست قرار می گیرد</strong></p>

<p>
<img src="https://maxdev.ir/admin/uploads/Sample GIF.gif" alt="لوگو سایت" style="float:right">
یک متن
</p>

<p><strong>عکس در چپ قرار می گیرد</strong></p>
<p>
<img src="https://maxdev.ir/admin/uploads/Sample GIF.gif" alt="لوگو سایت" style="float:left">
یک متن
</p>

</body>
</html>
امتحان کنید