ما در شبکه های اجتماعی :

درج و گذاشتن تصاویر در سند html

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


مثال های کاربردی

کد را امتحان کنید

<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 برای مشخص کردن عرض و ارتفاع تصاویر استفاده کنیم.این سبک مانع از تغییر به صورت تصادفی می شود ، زیرا سبک درون خطی بالاترین اولویت را دارد برای روشن شدن بیشتر به مثال دقت کنید


مثال های کاربردی

کد را امتحان کنید

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


قبلی

بعدی

بروز رسانی ۱۵ آبان ۱۳۹۸ | by رضا جهاندیده | بدون ديدگاه | برچسب‌ها, , |
درباره نويسنده : رضا جهاندیده
رشته تحصيلی : کامپيوتر و گرافيک ,آشنا به زبان های php و css سرگروه تيم توسعه و طراحی نوين وب هاست در حدود 5 سال به ياری خداوند در زمينه هاي فوق مشغوليم به اميدحق توانسته ايم با مشاوره و راهنمايي کاملا رايگان در خدمت همه شما باشيم سربلند باشيد
ثبت دیدگاه




ثبت نام
  • logo-samandehi
  • novinwebhostnovinwebhost
  • novinwebhostnovinwebhost
  • novinwebhostlogo-samandehi
  • novinwebhost