کار با تصاویر در HTML | آموزش تگ img

دسته‌ها: آموزش رایگان HTML و CSS، دوره‌های رایگان

چهارشنبه 10 اردیبهشت 1399

یکی از مهم‌ترین اجزاء صفحات وب تصاویر هستند. تصاویر می‌توانند طرح و ظاهر وبسایت شما را جذاب‌تر کنند. در زبان HTML می‌توان با استفاده از تگ img تصاویر مختلف را به صفحات اضافه کرد.

برای تست کردن مثال‌های این جلسه و تمرین با تگ <img> می‌توانید قبل از خواندن این مطلب یک تصویر را در کنار فایل html خود قرار دهید تا بتوانید براحتی از آن در صفحه وب خود استفاده کنید.

Syntax نمایش تصاویر در HTML

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

تگ img یک تگ تهی است. یعنی تگ بسته ندارد. همچنین این تگ یک صفت به نام src دارد که وظیفه آن دریافت آدرس (Source) تصویر است.

<img src="url">

1	<img src="url">

برای مثال اگر شما یک تصویر با نام test.jpg را در کنار فایل html خود قرار دهید، برای نمایش این تصویر می‌توانید کد زیر را بنویسید:

<img src="test.jpg">

1	<img src="test.jpg">

صفت alt در تگ img

با استفاده از صفت alt می‌توانید یک متن که تصویر را توضیح دهد برای تصویر بنویسید. این متن در مواقعی که کاربر به هر دلیلی نتواند تصویر را مشاهده کند (کند بودن اینترنت، غلط بودن آدرس تصویر و…) برای کاربر نمایش داده می‌شود.

<img src="logo.png" alt="Adminesite Logo">

1	<img src="logo.png" alt="Adminesite Logo">

نکته: نوشتن صفت alt برای تمام تصاویر اجباری است. اگر این صفت را برای تصویری تنظیم نکنید، صفحه وب شما در اعتبارسنجی‌ها رتبه خوبی نمی‌گیرد.

ابعاد تصویر – تنظیم عرض و ارتفاع

برای تنظیم ابعاد (عرض و ارتفاع) تصویر می‌توانید از صفت‌ width (عرض) و صفت height (ارتفاع) استفاده کنید.

<img src="test.jpg" alt="test image" width="500" height="600">

1	<img src="test.jpg" alt="test image" width="500" height="600">

نکته: صفت‌های width و height تنها مقادیر عددی به خود می‌گیرند. همچنین واحد این اعداد پیکسل (pixel) است. در مثال فوق خروجی تصویر در ابعاد 500*600 پیکسل نمایش داده می‌شود.

آدرس دهی به تصاویر درون یک پوشه

برای نظم بیشتر، می‌توان در کنار فایل html خود یک پوشه به نام images ایجاد کرده و تمام عکس‌های مورد استفاده در پروژه‌‌مان را درون این پوشه قرار دهیم. برای آدرس دهی به عکس‌های درون این پوشه می‌توان به صورت زیر عمل کرد:

<img src="images/test.jpg" alt="test image">

1	<img src="images/test.jpg" alt="test image">

در واقع با کاراکتر / می‌توان درون یک پوشه رفت و به محتویات آن دسترسی داشت.

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

آدرس دهی به تصاویر درون سرور‌های دیگر

اگر می‌خواهید تصاویر درون وبسایت‌های دیگر را نمایش دهید. باید در صفت src آدرس تصویر را بصورت کامل وارد کنید. به مثال زیر دقت کنید:

<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo">

1	<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo">

در مثال بالا ما از آدرس تصویر لوگو شرکت گوگل استفاده کردیم.