نمایش عکس درکدهای html - نوین وب هاست
ارسال تیکت

ورود به حساب کاربری

نمایش عکس درکدهای html

مطالعه این مقاله : 4 دقیقه

نحوه نمایش تصویر در کدهای 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 را برآورده کرده باشیم برای پاسخگویی سولات منتظریم تا آموزشی دیگر بدرود .


اشتراک بزاری دمت گرم!




درباره نويسنده : رضا جهاندیده

آشنا به زبان های php , css وتوسعه وردپرس 10 سال در زمینه پشتیبانی و خدمات هاستینگ در نوین وب هاست مشغول بکار و لذت میبرم و حالم خیلی خوبه و در پناه حق تغییر مسیر نخواهم داد


0 نظرات

دیدگاهتان را بنویسید