تصاویر

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از تصاویر در html)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳ویرایشگرها
۴پایه
۵عنصرها
۶ویژگی‌ها
۷عنوان‌ها
۸پاراگراف‌ها
۹استایل‌ها
۱۰قالب‌بندی
۱۱نقل‌قول‌ها
۱۲توضیحات
۱۳رنگ‌ها
۱۴CSS
۱۵لینک‌ها
۱۶تصاویر
۱۷جداول
۱۸لیست‌ها
۱۹بلوک‌ها
۲۰کلاس‌ها
۲۱شناسه
۲۲Iframeها
۲۳جاوا اسکریپت
۲۴مسیرهای فایل
۲۵سرصفحه
۲۶چیدمان‌ها
۲۷واکنش‌گرا
۲۸کد کامپیوتری
۲۹معنایی‌ها
۳۰راهنمای استایل
۳۱موجودیت‌ها
۳۲نماد‌ها
۳۳ایموجی‌ها
۳۴مجموعه کاراکترها
۳۵رمزگذاری URL
۳۶HTML و XHTML
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML

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

مثال

<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

در 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>


مشاهدهٔ نتیجه

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

صفحه خوان های 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> یک ظرف برای منابع چند تصویر مشخص می‌کند
برای دستیابی به لینک کامل همهٔ تگ‌های HTML، از مرجع تگ HTML ما بازدید کنید.


منابع آموزشی