طراحی وب

تصاویر html

تصاویر html چه ویژگی هایی دارند؟

آموزش html درس پانزدهم

مثال :

<DOCTYPE html!>
<html>
<body><h2>Spectacular Mountain</h2>
<img src=”pic_mountain.jpg” alt=”Mountain View” style=”width:304px;height:228px;”></body/>

<html/>

متن تصاویر HTML

در HTML، تصاویر با تگ <img> تعریف می شوند.

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

ویژگی src نشانی اینترنتی (آدرس وب) تصویر را مشخص می کند:

مثال

<img src="url" alt="some_text" style="width:width;height:height;">

ویژگی alt

اگر کاربر به دلایلی نتواند تصویر را مشاهده کند (به دلیل اتصال کند، خطا در ویژگی src یا اگر کاربر از یک خواننده صفحه استفاده کند).ویژگی alt یک متن جایگزین برای یک تصویر را فراهم می کند.

اگر یک مرورگر نتواند تصویری را پیدا کند، مقدار ویژگی alt را نمایش می دهد:

مثال :

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

ویژگی alt مورد نیاز است. یک صفحه وب بدون آن اعتبار درستی ندارد.

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

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

مقادیر در پیکسل مشخص می شوند (بعد از مقدار از px استفاده می شود):

مثال :

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

شما همچنین می توانید از ویژگی های عرض و ارتفاع استفاده کنید. در اینجا، مقادیر به طور پیش فرض در پیکسل تعریف می شود:

مثال :

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

توجه: همیشه عرض و ارتفاع یک تصویر را مشخص کنید. اگر عرض و ارتفاع مشخص نشده باشند، صفحه هنگام بارگذاری تصویر، چشمک می زند
عرض و ارتفاع یا style ؟هر دو ویژگی عرض، ارتفاع و style در HTML5 معتبر هستند. با این حال، ما پیشنهاد می کنیم از ویژگی style استفاده کنید. این مانع از تغییر اندازه اصلی تصاویر می شود:

مثال :


<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>