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

  • منتشر شده در تاریخ

آموزش HTML - مقدمه

در جلسه قبلی آموزش HTML با استایل ها آشنا شدیم. در این بخش قصد داریم نحوه قرار دادن تصاویر در HTML را یاد بگیرید

تصاویر (images) باعث بهبود ظاهر و توضیح دادن بیشتر مفاهیم در صفحه وب می شود.

تگ های تصاویر در HTML

  • <img> – تعریف یک عکس
  • <map> – تعریف تصویر نقشه
  • <area> – مشخص کردن یک منطقه قابل کلیک در یک تصویر نقشه

قرار دادن عکس در HTML

وب تنها در مورد متن نیست, بلکه شامل مالتی مدیا است که قابلیت های آن شامل اضافه کردن تصویر, صوت, ویدیو و دیگر المان های چندرسانه ای در وب است.

تگ <img> برای قرار دادن تصاویر در HTML استفاده می شود. این یک المان خالی (بدون تگ پایان) است و فقط خصوصیات را دریافت می کند.

سینتکس تگ img در HTML بصورت زیر است

مثال زیر سه تصویر را در صفحه وب قرار می دهد:

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

نکته: همانند <br> , تگ <img> نیز یک المان خالی است و هیچ تگ بسته ای ندارد. در XHTML این جور تگ ها را با /> می بستیم ولی در HTML5 این کار نیاز نیست.

خصوصیت Src تصاویر در HTML

هر تصور یک خصوصیت src (مخفف منبع source) داراد. این ویژگی به مرورگر می فهماند که از کجا تصویر دلخواه ما را نمایش دهد.

آدرس URL تصویر داده شده به عنوان مقدار ویژگی src اشاره به مکان عکس ذخیره شده دارد.

برای مثال, یک تصویر به نام sky.jpg در فولدر images موجود در آدرس “netparadis.com” ذخیره شده است.

قبلا در مورد آدرس های نسبی و مطلق در بخش لینک ها در HTML صحبت کردیم.

خصوصیت Alt تصاویر در HTML

ویژگی alt یک متن توضیح جایگزین (alternative) برای تصویر است برای زمانی که تصویر قابل لود نباشد.

مقدار خصوصیت alt یک متن تعریفی از تصویر است.

این خصوصیت را حتما برای تصاویر خود لحاظ کنید چرا که باعث افزایش رتبه سئو سایت شما و پیدا شدن راحتر تصاویر از جستجوی عکس گوگل می شود.

نکته: خصوصیت alt اطلاعات جایگزین را برای تصویر به این علت ارایه می دهد که اگر به هر دلیلی مثل کندی اینترنت, حذف شدن تصویر از سرور, مشکل در آدرس دهی, ارور در src و یا کاربر از صفحه خوان استفاده کرد و…. تصویر قابل نمایش نبود.

ست کردن عرض و ارتفاع تصاویر در HTML

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

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

نکته: تمرین خوبی است که از هر دو مشخصه width و height برای تصاویر استفاده کنیم. در غیاب استفاده از این خصوصیات ممکن است تصویر در اندازه اصلی که مناسب صفحه شما نیست لود شود و باعث به هم ریختگی ساختار وبسایت شود.

در حال حاضر می توانید از این دو خصوصیت استفاده کنید ولی زمانی که بحث CSS می آید توصیه می شود به هیچ وجه از این دو خصوصیت بهره نبرید و فقط از ویژگی های CSS برای تغییر در اندازه تصاویر ایجاد کنید.

امیدوارم در این بخش آموزش HTML , از قرار دادن تصاویر در HTML نهایت استفاده را برده باشید.

در بخش بعدی در مورد نحوه ایجاد جداول (tables) در صفحه وب را یاد می گیریم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۱)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. Nannie ۱۶ مرداد ۱۳۹۹

    بسیار مطلب زیبایی بود

    پاسخ
دوره های آموزشی

می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

50% تخفیف ویژه
فقط 144 هزار تومان

برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
می خواهم طراحی سایت را یاد بگیرم
close-link