آموزش HTML صفحه اصلی اینستاگرام ما
تصاویر HTML

تصویرهای HTML


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


کپی شده از سایت W3Schools.com

مثال:

<img src="pic_trulli.jpg" alt="Trulli">
امتحان کن »

مثال:

<img src="img_girl.jpg" alt="دختر در یک ژاکت">
امتحان کن »

مثال:

<img src="img_chania.jpg" alt="گل ها در Chania">
امتحان کن »

نحو تصاویر HTML

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

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

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

تگ <img> دو صفت مورد نیاز دارد :

نحو

<img src="url" alt="متن جایگزین">

صفت src

صفت مورد نیاز src مسیر رسیدن به تصویر (URL) را مشخص میکند .

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

مثال:

<img src="img_chania.jpg" alt="گل ها در Chania">

صفت alt

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

مقدار صفت alt باید تصویر را توصیف کند :

مثال:

<img src="img_chania.jpg" alt="گل ها در Chania">
امتحان کن »

اگر یک مرورگر نتواند یک تصویر را پیدا کند ، مقدار صفت alt را بجای تصویر نمایش خواهد داد :

مثال:

<img src="wrongname.gif" alt="گل ها در Chania">
امتحان کن »

نکته: یک صفحه خوان (screen reader) یک برنامه نرم افزاری است که کد HTML را میخواند ، و به کاربر اجازه میدهد تا به محتوا "گوش کند" . صفحه خوان ها برای افرادی که از لحاظ دیداری مشکل دارند مفید است .


اندازه تصویر - پهنا و بلندا

شما میتوانید از صفت style برای مشخص کردن پهنا (width) و بلندا (height) یک تصویر استفاده کنید .

مثال:

<img src="https://www.w3schools.com/html/img_girl.jpg" alt="دختر در یک ژاکت" style="width:500px;height:600px;">
امتحان کن »

از سوی دیگر ، شما میتواند از صفت های width و height نیز برای مشخص کردن پهنا و بلندای تصویر استفاده کنید :

مثال:

<img src="https://www.w3schools.com/html/img_girl.jpg" alt="دختر در یک ژاکت" width="500" height="600">
امتحان کن »

صفت های width و height همیشه پهنا و بلندای تصویر را در پیکسل (pixels) مشخص میکنند .

نکته: همیشه پهنا و بلندای یک تصویر را مشخص کنید . اگر پهنا و بلندا مشخص نشده باشند ، ممکن است صفحه وب هنگام بارگیری تصویر لرزش داشته باشد .


width و height ، یا style ؟

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

با این وجود ، ما استفاده از صفت 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>

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

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

مثال:

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
امتحان کن »

تصاویر در سرور/وبسایت دیگر

برخی وب سایت ها به یک تصویر خارجی در سرور/وبسایت دیگری اشاره میکنند .

برای اشاره به یک تصویر در سرور/وبسایت دیگری ، شما باید یک URL مطلق (کامل) در صفت src مشخص کنید :

مثال:

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
امتحان کن »

نکاتی درباره تصاویر خارجی: تصاویر خارجی ممکن است تحت حق چاپ (copyright) باشند . اگر شما اجازه استفاده آنرا نگیرید ، ممکن است قوانین کپی رایت را نقض کنید . افزون بر آن ، شما نمیتوانید تصاویر خارجی را کنترل کنید ؛ آن تصویر میتواند بطور ناگهانی حذف شود یا تغییر کند .


تصاویر متحرک

HTML امکان استفاده از GIF های متحرک را میدهد :

مثال:

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

امتحان کن »

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

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

مثال:

<a href="default.asp">
  <img src="smiley.gif" alt=""HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
امتحان کن »

شناوری تصویر

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

مثال:

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
تصویر در سمت راست متن شناور خواهد شد.<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

چکیده فصل




پسین پیشین