نحوه نمایش تصویر در کدهای html

درنوشته ها و مطالب در وب به زیبایی صفحه ما خواهد افزود , چرا که ایجاد و نمایش تصاویر در یک سند

محتوای ادغام شده از متن ها و تصاویر گویا تر میباشد.

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

همانطور که در آموزش عناصر گفته بودیم تگ <img>یک عنصر خالی یا تهی است و فقط دارای ویژگی ها میباشد.

نحو برچسب <img> را به این شکل بنویسید : <img src = “Image Address” alt = “Alternate Text”> در ادامه با توضیحاتی و مثال هایی بررسی میکنیم ….

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

<img src="/examples/images/html-images.png" alt="html-images">
<img src="/examples/images/html-images.png" alt="html-images">
<img src="/examples/images/html-images.png" alt="html-images">

هر تصویر باید حداقل دارای دو ویژگی باشد: ویژگی src و یک ویژگی alt.

ویژگی src به مرورگر می گوید که چگونه تصویر را پیدا کند. .

مقدار آن URL و آدرسی هست که تصویر در آن ادرس وجود دارد. و دوم ویژگی alt است.

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

تنظیم عرض و ارتفاع یک تصویر

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

در ضمن باید بدانید بطور پیشفرض این مقدارها در مقیاس پیکسل ( px ) محاسبه میشود.برای بررسی بیشتر به مثال زیر توجه کنید:

<img src="/examples/images/html-images.png" alt="html-images"width="300" height="300">
<img src="/examples/images/html-images.png" alt="html-images"width="200" height="100">
<img src="/examples/images/html-images.png" alt="html-images"width="100" height="60">

همچنین ما میتوانیم برای عملکرد بهتر و منطقی تر مرورگر از ویژگی style برای مشخص کردن عرض و ارتفاع تصاویر استفاده کنیم.

این سبک مانع از تغییر به صورت تصادفی می شود ، زیرا سبک درون خطی بالاترین اولویت را دارد برای روشن شدن بیشتر به مثال دقت کنید:

ویژگی استایل style

<img src="/examples/images/html-images.png" alt="html-images"style="width: 300px; height: 150px;">
<img src="/examples/images/html-images.png" alt="html-images"style="width: 200px; height: 100px;">
<img src="/examples/images/html-images.png" alt="html-images"style="width: 100px; height: 50px;">

استفاده از عنصر تصویر HTML5

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

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

برای رفع این مشکلات HTML5 برچسب <picture> را معرفی کرده است که به شما امکان می دهد , چندین نسخه از یک تصویر را برای  قرار دادن انواع مختلف دستگاه تعریف کنید.

برای بررسی بهتر در مثال زیر با ما باشید

<picture>
    <source media="(min-width: 1000px)" srcset="/examples/images/html-image.jpg">
    <source media="(max-width: 500px)" srcset="/examples/images/html-image.jpg">
    <img src="/examples/images/html-image.jpg" alt="to logo">
</picture>

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

لینک دار کردن قسمت های دلخواه در تصاویر و عکس ها

بعنوان مثال در تصویر یک نقشه کشوری اگر خواسته باشیم در باره چند شهر توضیحات یا مشخصاتی را بیان کنیم.

با این روش قسمتهای لازم را روی تصویر تعریف میکنیم , که دقیقاً مانند یک لینک عمل می کند.

ایده اصلی ایجاد این تصویر,  فراهم کردن راهی آسان برای پیوند بخشهای مختلف تصویر است.
حالا برای درک چگونگی عملکرد آن بررسی کنیم:

<img src="./examples/images/novin.png" usemap="#novin" alt="novin">
   <map name="novin">
    <area shape="circle" coords="137,231,71" href="./examples/html/novin.html" alt="novinwebhost.com">
    <area shape="poly" coords="363,146,273,302,452,300" href="./examples/html/novin1.html" alt="novinwebhost.com">
    <area shape="rect" coords="520,160,641,302" href="./examples/html/novin2.html" alt="novinwebhost.com">
</map>

نتیجه :

تا اینجا آموزش قرار دادن انواع تصاویر با سبک های مختلف در سند و صفحه html یاد گرفتیم و امیدواریم توانسته باشیم نیاز و یاد گیری شما عزیزان رو در استفاده های گوناگون درج , ایجاد و قرار دادن تصاویر در html را برآورده کرده باشیم برای پاسخگویی سولات منتظریم تا آموزشی دیگر بدرود .