تصویرهای HTML
تصاویر میتوانند طراحی و ظاهر یک صفحه وب را بهبود ببخشند .
نحو تصاویر HTML
تگ HTML <img> برای جاسازی یک تصویر در یک صفحه وب استفاده میشود .
تصاویر از نظر فنی در یک صفحه وب جا داده نمیشوند ؛ تصاویر به صفحات وب لینک میشوند . تگ <img> یک فضای نگه دارنده برای تصویر ارجاع داده شده میسازد .
تگ <img> خالی است که شامل فقط صفت هاست ، و یک تگ پایان ندارد .
تگ <img> دو صفت مورد نیاز دارد :
- src - مسیر به تصویر را مشخص میکند
- alt - یک متن جایگزین برای تصویر مشخص میکند
نحو
صفت src
صفت مورد نیاز src مسیر رسیدن به تصویر (URL) را مشخص میکند .
نکته: هنگامیکه یک صفحه وب بارگیری میشود ؛ در آن لحظه مرورگر است که تصویر را از یک وب سرور میگیرد و آنرا در داخل صفحه درج میکند . بنابراین ، مطمئن شوید که تصویر واقعا در همان نقطه در رابطه با صفحه وب باقی مانده باشد ، در غیر این صورت بازدید کننده های شما یک ایکون لینک شکسته دریافت خواهند کرد . اگر مرورگر نتواند تصویر را پیدا کند ، ایکون لینک شکسته و متن alt نمایش داده میشود .
مثال:
صفت alt
اگر کاربر به دلایلی نتواند تصویر را ببیند ، صفت alt یک متن جایگزین برای یک تصویر فراهم میکند (بخاطر اتصال کند ، یک خطا در صفت src ، یا اگر کاربر از یک خواننده صفحه (screen reader) استفاده میکند) .
مقدار صفت alt باید تصویر را توصیف کند :
اگر یک مرورگر نتواند یک تصویر را پیدا کند ، مقدار صفت alt را بجای تصویر نمایش خواهد داد :
نکته: یک صفحه خوان (screen reader) یک برنامه نرم افزاری است که کد HTML را میخواند ، و به کاربر اجازه میدهد تا به محتوا "گوش کند" . صفحه خوان ها برای افرادی که از لحاظ دیداری مشکل دارند مفید است .
اندازه تصویر - پهنا و بلندا
شما میتوانید از صفت style برای مشخص کردن پهنا (width) و بلندا (height) یک تصویر استفاده کنید .
مثال:
از سوی دیگر ، شما میتواند از صفت های width و height نیز برای مشخص کردن پهنا و بلندای تصویر استفاده کنید :
مثال:
صفت های width و height همیشه پهنا و بلندای تصویر را در پیکسل (pixels) مشخص میکنند .
نکته: همیشه پهنا و بلندای یک تصویر را مشخص کنید . اگر پهنا و بلندا مشخص نشده باشند ، ممکن است صفحه وب هنگام بارگیری تصویر لرزش داشته باشد .
width و height ، یا style ؟
صفت های width ، height و style هر سه در HTML معتبر هستند .
با این وجود ، ما استفاده از صفت style را پیشنهاد میکنیم . این کار سبک نامه ها را از تغییر اندازه تصویر باز میدارد :
مثال:
<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>
تصاویر در پوشه ای دیگر
اگر شما تصاویرتان را در داخل یک زیر پوشه داشته باشید ، شما باید نام پوشه را در صفت src بگنجانید :
تصاویر در سرور/وبسایت دیگر
برخی وب سایت ها به یک تصویر خارجی در سرور/وبسایت دیگری اشاره میکنند .
برای اشاره به یک تصویر در سرور/وبسایت دیگری ، شما باید یک URL مطلق (کامل) در صفت src مشخص کنید :
مثال:
نکاتی درباره تصاویر خارجی: تصاویر خارجی ممکن است تحت حق چاپ (copyright) باشند . اگر شما اجازه استفاده آنرا نگیرید ، ممکن است قوانین کپی رایت را نقض کنید . افزون بر آن ، شما نمیتوانید تصاویر خارجی را کنترل کنید ؛ آن تصویر میتواند بطور ناگهانی حذف شود یا تغییر کند .
تصاویر متحرک
HTML امکان استفاده از GIF های متحرک را میدهد :
تصویر بعنوان یک لینک
برای استفاده یک تصویر بصورت یک لینک ، تگ <img> را در داخل تگ <a> قرار دهید :
مثال:
<img src="smiley.gif" alt=""HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
شناوری تصویر
از ویژگی CSS float برای شناوری تصویر در سمت راست یا چپ یک متن استفاده کنید :
مثال:
تصویر در سمت راست متن شناور خواهد شد.<p>
<p>< img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
تصویر در سمت چپ متن شناور خواهد شد.<p>
فرمت های رایج تصویر
در اینجا رایج ترین انواع فایل تصویر آورده شده است ، که در همه مرورگرها (کروم ، فایرفاکس ، اپرا و ...) پشتیبانی میشوند :
| اختصار | فرمت فایل | افزونه فایل |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
چکیده فصل
- از عنصر <img> برای مشخص کردن یک تصویر اسفاده کنید
- از صفت src برای مشخص کردن URL تصویر استفاده کنید
- از صفت alt برای مشخص کردن یک متن جایگزین برای یک تصویر ، اگر تصویر نتواند نمایش داده شود ، استفاده کنید
- از صفات width و height یا ویژگی های CSS width و height برای مشخص کردن اندازه تصویر استفاده کنید
- از ویژگی float برای شناور کردن تصویر در سمت راست یا چپ استفاده کنید