آموزش تصاویر در HTML

Ratings
(0)

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

مثال شماره 1

<img src="/other/pic_trulli.jpg" alt="Trulli" width="500" height="333">
امتحان کنید

مثال شماره 2

<img src="/other/img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
امتحان کنید

مثال شماره 3

<img src="/other/img_chania.jpg" alt="Flowers in Chania" width="460" height="345">
امتحان کنید

 

قواعد نوشتاری تصاویر در HTML

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

تگ <img> خالی است و تنها حاوی چند خصوصیت است و تگ بسته ای ندارد. تگ <img> دو خصوصیت ضروری دارد:

  1. خصوصیت src : مسیر تصویر را مشخص می کند.
  2. خصوصیت alt : متن جایگزین برای تصویر را مشخص می کند.

مثال شماره 4

<img src="/url">

 استفاده از خصوصیت src

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

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

مثال شماره 5

<img src="/img_chania.jpg" alt="Flowers in Chania">
امتحان کنید

 

استفاده از خصوصیت alt

خصوصیت alt ، یک متن جایگزین را برای تصویر مشخص می کند؛ اگر کاربر به هر علتی نتواند تصویر را مشاهده کند، این متن به او نشان داده می شود. مثلاً اگر سرعت اینترنت کاربر پایین باشد یا در خصوصیت src خطایی وجود داشته باشد یا اگر کاربر از یک صفحه خوان(screen reader) استفاده کند، این متن به او نشان داده می شود. مقدار خصوصیت alt باید بیانگر تصویر مورد نظر باشد:

مثال شماره 6

<img src="/img_chania.jpg" alt="Flowers in Chania">
امتحان کنید

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

مثال شماره 7

<img src="/wrongname.gif" alt="Flowers in Chania">
امتحان کنید

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

مشخص کردن عرض و ارتفاع تصویر

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

مثال شماره 8

<img src="/img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
امتحان کنید

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

مثال شماره 9

<img src="/img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
امتحان کنید

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

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

استفاده از width و height یا استفاده از خصوصیت style

استفاده از width و height و استفاده از خصوصیت style ،همه در HTML معتبر هستند. اما ما توصیه می کنیم که از خصوصیت style استفاده کنید. این خصوصیت از تغییر یافتن سایز تصاویر در برگه های استایل جلوگیری می کند. 

مثال شماره 10

<!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>
امتحان کنید

 استفاده از تصاویر در دیگر فولدرها

اگر تصویر مورد نظر شما در داخل یک ساب فولدر قرار داشته باشد، باید نام این فولدر را در داخل خصوصیت src اضافه کنیم:

مثال شماره 11

<img src="/tryit/other/test/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
امتحان کنید

 نکته: در تمام مثال های بالا، به جز مثال شماره 11، علامت اسلش در ابتدای مقدار src اضافی است و اشتباهاً توسط سیستم تولید شده است.

استفاده از تصاویر در دیگر سرورها یا دیگر وبسایت ها

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

مثال شماره 12

<img src="https://sina2.ir/images/other/1.png" alt="hafez shirazi">
امتحان کنید

 نکته: ما نمی توانیم تصاویر اکسترنال را کنترل کنیم. و ممکن است آنها حذف شوند یا تغییر داده شوند.

استفاده از تصاویر متحرک

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

مثال شماره 13

<img src="/other/programming.gif" alt="Computer Man" style="width:48px;height:48px;">
امتحان کنید

استفاده از تصاویر بعنوان لینک

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

مثال شماره 14

 <a href="https://sina2.ir">
  <img src="/other/programming.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
امتحان کنید

شناور کردن تصاویر

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

مثال شماره 15

 <p><img src="/other/programming.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
این تصویر در سمت راست این متن نشان داده می شود</p>

<p><img src="/other/programming.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
این تصویر در سمت چپ این متن نشان داده می شود</p>
امتحان کنید

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

فرمت های متداول تصاویر

در جدول زیر، متداول ترین انواع تصویرها که در تمام مرورگرها پشتیبانی می شوند، نشان داده شده است(در مرورگرهای کروم و Edge و فایرفاکس، سافاری و اپرا):

نام مخفف کلمات تشکیل شده پسوند
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.

 

خلاصه فصل

  1. برای تعریف یک تصویر، از عنصر <img> استفاده کنید.
  2. برای تعریف URL تصویر، از خصوصیت اچ تی ام ال src استفاده کنید.
  3. برای تعریف یک متن جایگزین برای یک تصویر، از خصوصیت alt در HTML استفاده کنید.
  4. از خصوصیت های width و height در HTML یا از ویژگی های سی اس اس width و height برای تعریف سایز یک تصویر استفاده کنید.
  5. با استفاده از ویژگی float، می توانید کاری کنید که تصویر در سمت چپ یا راست شناور شود.

نکته: بارگذاری شدن(لود شدن) تصاویر بزرگ، زمان می برد و می تواند باعث شود سرعت صفحه وب شما کم شود. بنابراین از تصاویر با دقت استفاده کنید.

 

  • بازدید: 546

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال