آموزش HTML – فصل دهم: تصاویر در HTML

نحوه استفاده از تصاویر در HTML

در اچ تی ام ال تصاویر با تگ <img> تعریف میشوند.

تگ <img> جزو تگ های خالی است. یعنی فقط حاوی خاصیت ها است و تگ پایانی ندارد.

خاصیت src آدرس وب یا همان url تصویر را مشخص میکند.

بدین صورت:

خاصیت alt یک متن دیگر را برای تصویر ارائه میدهد که اگر مرورگر نتواند تصویر را نمایش دهد به دلیل اینترنت کند، مشکل درخاصیت src یا این که کاربر یک صفحه خوان باشد که صفحات را به صورت صوتی گوش دهد به جای تصویر، نوشته alt را می خواند.

مقدار خاصیت alt باید تصویر را توضیح دهد.

مثال:

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

نکته: خاصیت alt الزامیست چون یک صفحه وب بدون آن معتبر نیست.

تعیین اندازه تصویر (عرض و ارتفاع تصویر) در HTML

شما میتوانید از خاصیت style استفاده کنید تا عرض و ارتفاع یک تصویر را مشخص کنید.

مثال:

شما میتوانید خاصیت های عرض و ارتفاع را به  این صورت نیز وارد کنید.

مثال:

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

نکته: همیشه بهتر است عرض و ارتفاع یک تصویر را تنظیم کنید.

اگر عرض و ارتفاع مشخص نشوند در بارگیری تصویر مشکلاتی ایجاد میشود.

عرض و ارتفاع را بر اساس درصد (%) نیز می توانید تعیین کنید.

آیا بهتر است برای تعیین اندازه تصویر از Width و Height استفاده کنیم یا Style؟

هر سه ی این ها در اچ تی ام ال 5 معتبر هستند.

هر چند ما استفاده از خاصیت style را پیشنهاد میکنیم.

این جلوگیری میکند از اینکه برگ های استایل (style sheets) اندازه تصویر را تغییر دهند.

مثال:

بارگذاری تصاویر از پوشه های دیگر وب سایت

اگر مشخص نشود مرورگر سعی میکند که تصویر را در همان پوشه ی صفحه وب پیدا کند.

هر چند عادی است که تصاویر را در یک زیر پوشه ذخیره کرد.

سپس شما باید نام پوشه را در خاصیت src وارد کنید.

مثال:

بارگذاری تصاویر از یک سرور دیگر

برخی سایت ها تصاویر خود را بر روی سرور های تصویر ذخیره میکنند.

در واقع شما میتوانید به یک تصویر از هر آدرس سایتی در دنیا دسترسی پیدا کنید.

مثال:

شما درباره مسیر فایل ها میتوانید به صورت مفصل در فصل مسیر فایل های اچ تی ام ال بخوانید.

تصاویر متحرک در HTML

اچ تی ام ال قابلیت نمایش تصاویر متحرک gif را نیز دارد.

مثال:

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

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

مثال:

نکته: border:0; استفاده میشود تا در هنگام نمایش عکس، حاشیه ای در اطرافش نباشد.

جا به جا کردن تصاویر (Image Floating)

از مولفه float سی اس اس استفاده کنید تا تصویر را به سمت راست یا چپ یک متن حرکت دهد.

مثال:

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

تصویر نقشه ای در اچ تی ام ال (image-map)

تگ <map> یک تصویر نقشه ای  image-map را تعریف میکند.

یک image-map تصویری است با محیط های کلیک شدنی.

مثال:

خاصیت name در تگ <map> با خاصیت usemap که در img است مشترک است و یک رابطه بین تصویر و نقشه به وجود می آورد.

المان <map> حاوی تعدادی تگ <area> است که محیط های کلیک شدنی را در  image-map تعریف می کند.

نحوه قرار دادن تصویر پس زمینه بر رو المان ها در HTML

برای اضافه کردن تصویر پس زمینه به یک المان اچ تی ام ال از مولفه background-image در سی اس اس استفاده کنید.

برای اضافه کردن یک تصویر پس زمینه بر روی یک صفحه وب مولفه background-image را در المان body قرار دهید.

برای اضافه کردن تصویر پس زمینه به یک پاراگراف مولفه background-image را در المان p قرار دهید.

برای آموزش بیشتر درباره تصاویر پس زمینه، صفحه تصاویر پس زمینه در مجموعه آموزش سی اس اس ما را مطالعه کنید.

المان <picture> در HTML 5

اچ تی ام ال 5 المان <picture> را معرفی نمود تا انعطاف پذیری بیشتری در هنگام اضافه کردن منابع تصاویر اراعه دهد.

المان <picture> حاوی تعدادی المان <source> بوده تا بتوان آن را به منبع های مختلف تصویر ارجا داد.

با استفاده از شروط تعین شده برای نمایش source ها، مروگر طبق شرایط تشخیص می دهد کدام تصویر را به نمایش دراورد.

هر المان <source> خاصیت هایی دارد که مناسب ترین تصویر را برای جای گیری توضیح میدهد.

مرورگر اولین المان <source> را با مطابقت مناسب استفاده میکند و بقیه المان های <source> را نادیده می گیرد.

مثال:

در مثال زیر نوعی شرط تعیین شده است که اگر سایز پنجره مرورگر بزرگتر از 650 پیکسل باشد یک تصویر را نشان می دهد و اگر سایز پنجره بزرگتر از 450 پیکسل باشد تصویر دیگری را نشان می دهد. در غیر این صورت تصویر سوم به نمایش در خواهد آمد.

نکته همیشه یک المان <img> را به عنوان آخرین زیر المان در یک المان <picture> قرار دهید.

المان <img> به وسیله مرورگری که المان <picture> را پشتیبانی نمیکند استفاده میشود یا اگر که هیچکدام از تگ های <source> همخوانی نداشت به نمایش در می آید.

در ادامه آموزش گام به گام زبان HTML، مطلب آموزش HTML – فصل یازدهم: لیست ها در HTML را مطالعه کنید.