تصاویر
تصویرها می‌توانند طراحی و ظاهر صفحه وب را بهبود دهند.[۱]
مثال
<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> | یک ظرف برای منابع چند تصویر مشخص می‌کند |
منابع آموزشی