HTML Images

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

از برچسب HTML برای جاسازی تصویر در یک صفحه وب استفاده می شود.
تصاویر از نظر فنی در یک صفحه وب درج نمی شوند. تصاویر به صفحات وب پیوند داده می شوند. برچسب یک فضای نگهداری برای تصویر ارجاع شده ایجاد می کند.
برچسب خالی است ، فقط حاوی ویژگی است و برچسب بسته ندارد.
برچسب دو ویژگی لازم را دارد:
• src – مسیر تصویر را مشخص می کند
• alt – متن دیگری را برای تصویر مشخص می کند

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

ویژگی src مورد نیاز مسیر (URL) به تصویر را مشخص می کند.
توجه: هنگام بارگیری یک صفحه وب ؛ در آن لحظه ، مرورگر است که تصویر را از یک وب سرور می گیرد و آن را به صفحه وارد می کند. بنابراین ، اطمینان حاصل کنید که تصویر در رابطه با صفحه وب در همان نقطه باقی مانده است ، در غیر این صورت بازدید کنندگان شما نماد لینک شکسته را دریافت می کنند. اگر مرورگر نتواند تصویر را پیدا کند ، نماد لینک شکسته و متن alt نشان داده می شود. اگر alt به دلایلی کاربر نتواند آن را مشاهده کند (به دلیل کند بودن اتصال ، خطا در ویژگی src یا اگر کاربر از صفحه خواننده استفاده می کند) ، ویژگی alt مورد نیاز یک متن جایگزین را ارائه می دهد.
مثال

<img src="img_chania.jpg" alt="Flowers in Chania">

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

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

گر تصاویر خود را در یک زیر پوشه دارید ، باید نام پوشه را در ویژگی src وارد کنید:

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

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

مثال:

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>