تصاویر
تصویرها میتوانند طراحی و ظاهر صفحه وب را بهبود دهند.[۱]
مثال
<img src="pic_trulli.jpg" alt="Italian Trulli">
مثال
<img src="img_girl.jpg" alt="Girl in a jacket">
مثال
<img src="img_chania.jpg" alt="Flowers in Chania">
محتویات
- ۱ مثال
- ۲ مثال
- ۳ مثال
- ۴ شیوه نوشتار (به انگلیسی: Syntax) تصاویر HTML
- ۵ ویژگی alt
- ۶ اندازه تصویر - عرض و ارتفاع
- ۷ عرض و ارتفاع، یا استایل؟
- ۸ تصاویر در پوشه ای دیگر
- ۹ تصاویر در سروری دیگر
- ۱۰ تصاویر متحرک
- ۱۱ تصویر بعنوان یک لینک
- ۱۲ شناور کردن (به انگلیسی: Floating) تصویر
- ۱۳ صفحه خوان های HTML
- ۱۴ خلاصه بخش
- ۱۵ تمرین های HTML
- ۱۶ تگ های تصویر HTML
- ۱۷ منابع آموزشی
شیوه نوشتار (به انگلیسی: Syntax) تصاویر HTML
در HTML، تصاویر با تگ <img>
تعریف میشوند.
تگ <img>
خالی است، فقط شامل ویژگی هاست و تگ پایانی ندارد.
ویژگی src
آدرس وب (به انگلیسی: URL)، تصویر را مشخص میکند:
<img src="url">
ویژگی alt
اگر به دلایلی کاربر نتواند تصویر را ببیند (به دلیل اتصال کُند، خطایی در ویژگی src یا اگر کاربر از یک صفحه خوان (به انگلیسی: Screen Reader) استفاده کند)، ویژگی alt
یک متن جایگزین برای آن فراهم میکند.
مقدار ویژگی alt
باید تصویر را توصیف کند:
مثال
<img src="img_chania.jpg" alt="Flowers in Chania">
اگر مرورگری نتواند تصویر را بیابد، مقدار ویژگی alt
را نمایش میدهد:
مثال
<img src="wrongname.gif" alt="Flowers in Chania">
alt
مورد نیاز است. یک صفحه وب بدون آن به درستی تأیید اعتبار نمیشود.اندازه تصویر - عرض و ارتفاع
میتوان از ویژگی style
برای تعیین عرض و ارتفاع یک تصویر استفاده کرد.
مثال
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
یا میتوان به جای آن، از ویژگیهای width
و height
استفاده کرد:
مثال
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
ویژگیهای width
و height
همیشه عرض و ارتفاع تصویر را به پیکسل مشخص میکنند.
عرض و ارتفاع، یا استایل؟
ویژگیهای width
, height
و style
در HTML معتبر هستند.
با این حال، ما استفاده از ویژگی style
پیشنهاد میکنیم. این ویژگی از تغییر اندازه تصویر توسط برگههای استایل ممانعت میکند.
مثال
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 img {
6 width: 100%;
7 }
8 </style>
9 </head>
10 <body>
11
12 <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
13 <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
14
15 </body>
16 </html>
تصاویر در پوشه ای دیگر
اگر مشخص نباشد، مرورگر انتظار دارد تصویر را در همان پوشه مشابه صفحه وب پیدا کند.
با این حال، ذخیره تصاویر در یک پوشه رایج است. سپس شما باید نام فولدر را در ویژگی src
اضافه کنید:
مثال
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
تصاویر در سروری دیگر
برخی از وبسایتها تصاویر خود را در سرورهای تصویر ذخیره میکنند.
درواقع، میتوانید به تصاویری در هر آدرس وب در دنیا دسترسی داشته باشید:
مثال
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
میتوانید در مورد مسیرهای فایل در بخش مسیرهای فایل HTML بیشتر مطالعه کنید.
تصاویر متحرک
HTML امکان تولید GIFهای متحرک را فراهم میکند:
مثال
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
تصویر بعنوان یک لینک
برای استفاده از تصویر بعنوان لینک، تگ <img>
را داخل <a>
قرار دهید:
مثال
1 <a href="default.asp">
2 <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
3 </a>
border:0;
در IE9 (و قدیمیتر) اضافه میشود تا از قراردادن کادر در اطراف تصویر جلوگیری کند (زمانیکه تصویر، یک لینک است).شناور کردن (به انگلیسی: Floating) تصویر
از خصوصیت float
در CSS برای قرار دادن تصویر در راست یا چپ یک متن استفاده کنید:
مثال
1 <p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
2 The image will float to the right of the text.</p>
3
4 <p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
5 The image will float to the left of the text.</p>
صفحه خوان های HTML
صفحه خوان یک برنامه نرم افزاری است که کدهای HTML را میخواند، متنها را تبدیل میکند و به کاربر این امکان را میدهد که به محتوا «گوش کند». صفحه خوانها برای افرادی که مشکل بینایی یا یادگیری دارند مفید است.
خلاصه بخش
- از عنصر
<img>
در HTML برای تعریف یک تصویر استفاده میشود
- از ویژگی
src
برای تعیین URL تصویر استفاده میشود
- از ویژگی
alt
در HTML برای تعیین متن جایگزین تصویر در صورتیکه قابل نمایش نباشد استفاده میشود
- از ویژگیهای
width
وheight
در HTML برای تعریف سایز تصویر استفاده میشود
- از خصوصیتهای
height
وwidth
در CSS برای تعیین سایز تصویر (بطور جایگزین) استفاده میشود
- از خصوصیت float CSS برای
float
کردن تصویر استفاده میشود
بارگذاری تصاویر ممکن است زمانبر باشد. تصاویر بزرگ ممکن است صفحه شما را کُند کند. از تصاویر با دقت استفاده کنید.
تمرین های HTML
تگ های تصویر HTML
تگ | تعریف |
---|---|
<img> | یک تصویر را تعریف میکند |
<map> | نقشه تصویر (به انگلیسی: image-map) را مشخص میکند |
<area> | یک متن قابل کلیک کردن در image-map را مشخص میکند |
<picture> | یک ظرف برای منابع چند تصویر مشخص میکند |
منابع آموزشی