100% کامل شده تا
به‌روزرسانی شده در: ۲۲ روز پیش

تصاویر در اچ‌تی‌ام‌ال (HTML Images)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< HTML:Tutorial(تغییرمسیر از عکس در html)
پرش به ناوبری پرش به جستجو


تصاویر می‌توانند طراحی و ظاهر صفحه وب را بهبود دهند.[۱]


Pic trulli.jpg
Img girl.jpg
Img chania.jpg

مثال

<img src="pic_trulli.jpg" alt="Italian Trulli">

مثال

<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="۳۳۳">

</body>
</html>

Responsive demo.svg


مثال

<img src="img_girl.jpg" alt="Girl in a jacket">

مثال

<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="۶۰۰">

</body>
</html>

Responsive demo.svg


مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="۳۴۵">

</body>
</html>

Responsive demo.svg



شیوهٔ نوشتار تصاویر HTML

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

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

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

تگ <img> دارای دو ویژگی مورد نیاز است:

  • src - مسیر ورودی تصویر را مشخص می‌کند
  • alt - یک متن جایگزین برای تصویر مشخص می‌کند
شیوهٔ نوشتار
<img src="url" alt="alternatetext">


ویژگی src (The src Attribute)

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

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="۳۴۵">

</body>
</html>

Responsive demo.svg



ویژگی alt (The alt Attribute)

اگر به دلایلی کاربر نتواند تصویر را ببیند (به دلیل اتصال کُند، خطایی در ویژگی src یا اگر کاربر از یک صفحه خوان[توضیحات ۱] (Screen Reader) استفاده کند)، ویژگی alt یک متن جایگزین برای یک تصویر ارائه می‌دهد.

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="۳۴۵">

</body>
</html>

Responsive demo.svg


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

مثال

<img src="wrongname.gif" alt="Flowers in Chania">

مثال

<!DOCTYPE html>
<html>
<body>

<p>If a browser cannot find the image, it will display the alternate text:</p>

<img src="wrongname.gif" alt="Flowers in Chania">

</body>
</html>

Responsive demo.svg





اندازهٔ تصویر - عرض و ارتفاع (Image Size - Width and Height)

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Image Size</h2>

<p>Here we use the style attribute to specify the width and height of an image:</p>

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

</body>
</html>

Responsive demo.svg


یا می‌توان به جای آن، از ویژگی‌های width و height استفاده کرد:

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Image Size</h2>

<p>Here we specify the width and height of an image with the width and height attributes:</p>

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

</body>
</html>

Responsive demo.svg


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

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


عرض و ارتفاع، یا استایل؟ (Width and Height, or Style?)

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

با این حال، ما استفاده از ویژگی style پیشنهاد می‌کنیم. این ویژگی از تغییر اندازهٔ تصویر توسط برگه‌های استایل ممانعت می‌کند.

مثال

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

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

مثال

img {
  width: 100%;
}

مثال

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

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

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

</body>
</html>

Responsive demo.svg



تصاویر در پوشه‌ای دیگر (Images in Another Folder)

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Images in Another Folder</h2>
<p>It is common to store images in a sub-folder. You must then include the folder name in the src attribute:</p>

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

</body>
</html>

Responsive demo.svg



تصاویر در سرور/وب‌سایت دیگر (Images on Another Server/Website)

برخی از وبسایت‌ها تصاویر خود را در سرورهای تصویر ذخیره می‌کنند.

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

مثال

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Images on Another Server</h2>

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" style="width:104px;height:142px;">

</body>
</html>

Responsive demo.svg


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



تصاویر متحرک (Animated Images)

HTML اجارهٔ تولید GIFهای متحرک را می‌دهد:

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Animated Images</h2>

<p>HTML allows moving images:</p>

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

</body>
</html>

Responsive demo.svg



تصویر بعنوان یک لینک (Image as a Link)

برای استفاده از تصویر به عنوان پیوند، برچسب <img> را داخل برچسب <a> قرار دهید:

مثال

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Image as a Link</h2>

<p>The image is a link. You can click on it.</p>

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

</body>
</html>

Responsive demo.svg



شناور کردن تصویر (Image Floating)

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

از ویژگی 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>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

<p><strong>Float the image to the left:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

</body>
</html>

Responsive demo.svg


نکته: برای یادگیری بیشتر در مورد Float در CSS, آموزش Float ما در CSS را مطالعه کنید.


فرمت‌های رایج تصویر (Common Image Formats)

در اینجا رایج‌ترین انواع فایل‌های تصویری که در همهٔ مرورگرها (Chrome، Edge، Firefox، Safari، Opera) پشتیبانی می‌شوند، آورده شده‌است:

اختصار فرمت فایل افزونهٔ فایل
APNG گرافیک‌های شبکهٔ قابل‌حمل (Portable) متحرک .apng
GIF قالب تبادل گرافیک .gif
ICO نماد مایکروسافت .ico, .cur
JPEG تصاویر گروه تخصصی عکاسی .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG گرافیک شبکه قابل حمل .png
SVG گرافیک وکتور مقیاس پذیر .svg


خلاصهٔ بخش (Chapter Summary)

برای تعریف تصویر از عنصر <img> در HTML استفاده کنید
از ویژگی src در HTML برای تعیین URL تصویر استفاده کنید
در صورت عدم نمایش متن، از ویژگی alt در HTML برای تعریف متن جایگزین برای تصویر استفاده کنید
برای تعیین اندازهٔ تصویر از ویژگی‌های width و height در HTML یا ویژگی‌های width و height در CSS استفاده کنید
از ویژگی float در CSS استفاده کنید تا تصویر به سمت چپ یا راست شناور شود
برای تعیین اندازهٔ تصویر از ویژگی‌های width و height در HTML یا ویژگی‌های width و height در CSS استفاده کنید
توجه: بارگذاری تصاویر ممکن است زمانبر باشد و می‌تواند سرعت وب‌سایت شما را کُند کند. از تصاویر با دقت استفاده کنید.


برچسب‌های تصویر در اچ‌تی‌ام‌ال (HTML Image Tags)




توضیحات

  1. نکته: صفحه خوان یک برنامه نرم‌افزاری است که کد HTML را می‌خواند و به کاربر اجازه می‌دهد تا به محتوا "گوش" دهد. صفحه خوان برای افرادی که دارای بینایی هستند یا در یادگیری ناتوان هستند مفید است.

منابع آموزشی