قرار دادن تصویر در HTML

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

استفاده از تگ های تصویر

برای تعریف یک تصویر HTML ، باید از تگ <img> استفاده کنید:

<img src="image.png" alt="Space Doggo" width="50" height="50">

همچنین می توانید از تگ تصویر HTML برای تصاویر متحرک با پسوند .gif استفاده کنید:

<img src="GIF_Dog.gif" alt="HTML gif Image" style="width: 90px; height: 90px;">

توجه: تگ تصویر HTML فقط دارای ویژگی است و هیچ محتوای واقعی ندارد. این بدان معنی است که آن یک عنصر خالی را تعریف می کند و نیازی به تگ بسته نیست.

تصاویر HTML تعاملی

اگر تگ تصویر HTML خود را درون یک جفت  anchor tags قرار دهید ، یک تصویر می تواند به عنوان یک پیوند عمل کند:

<a href="your_link.html">
  <img src="doggo.html" alt="HTML Image link" style="width: 75px; height: 75px; border: 0;">
</a>

توجه: توجه داشته باشید که در این حالت ، شما باید دو آدرس URL را وارد کنید، منبع تصویر و URL جدید برای هدایت کاربر .

نقشه های تصویر در HTML

یک تصویر همچنین می تواند شامل چندین منطقه قابل کلیک با پیوندهای مختلف باشد. به این نقشه تصویر HTML گفته می شود. برای تعریف یکی ، باید از تگ <map> استفاده کنید:

<img src="https://cdn.bitdegree.org/learn/space%20gif.gif?raw=true" width="500" height="600" alt="Creatures" usemap="#creaturemap">

<map name="creaturemap">
  <area shape="rect" coords="34, 44, 270, 350" alt="Doggo" href="https://www.bitdegree.org">
  <area shape="rect" coords="290, 172, 333, 250" alt="Gaming" href="http://www.bitdegree.org">
  <area shape="circle" coords="337, 300, 44" alt="Level up" href="http://www.bitdegree.org">
</map>

یک نقشه تصویری HTML مناطق قابل کلیک روی یک تصویر خاص HTML را ایجاد می کند. برای اتصال نقشه تصویر به یک تصویر دقیق ، ابتدا باید نامی برای نقشه مشخص کنید و سپس آن را به عنوان مقداری برای ویژگی usemap در تگ تصویر HTML قرار دهید.

برای تعریف مناطق قابل کلیک در نقشه تصویری ، باید از عناصر <area> به عنوان فرزند عنصر <map> استفاده کنید:

<img src="image.png" alt="Image Map" usemap="#doggo" style="width: 145px; height: 126px;">

<map name="doggo">
  <area shape="rect" coords="0, 0, 82, 126" alt="doggo" href="doggo.html">
  <area shape="circle" coords="95, 80, 30" alt="sorry" href="sign.html">
</map>

ابعاد و محل قرار دادن تصویر در HTML

برای تغییر عرض و ارتفاع تصویر HTML خود ، به برخی از سبک های اساسی CSS نیاز دارید. از مشخصه سبک استفاده کنید و خصوصیات عرض و ارتفاع را در پیکسل تعریف کنید:

<img src="image.png" alt="HTML Image Attribute" style="width: 180px; height: 180px;">

HTML5 صفات عرض و ارتفاع جداگانه را معرفی کرد. این بدان معنی است که شما می توانید ابعاد را بدون استفاده از ویژگی style اصلاح کنید. با این حال ، ما توصیه می کنیم که به آن پایبند باشید ، زیرا استفاده از یک ظاهر طراحی داخلی شما را از سایر سبک های تأثیرگذار بر تصویر شما در HTML نجات می دهد:

<img src="Style.jpg" alt="HTML5 Image style" style="width: 128px; height: 128px;">
<img src="WidthHeight.jpg" alt="HTML5 Image example" width="128" height="128">

با استفاده از ویژگی style می توانید تنظیم کنید که تصویر شناور در راست یا چپ باشد. این بدان معنی است که به یک طرف می چسبد و در آنجا می ماند:

<img src="https://cdn.bitdegree.org/learn/1_HfpnwKiXB3zh-l2jwpoR8A.png?raw=true" alt="Image float right" style="float: right; width: 63px; height: 63px;">
 Image float set: right

 <img src="https://cdn.bitdegree.org/learn/1_HfpnwKiXB3zh-l2jwpoR8A.png?raw=true" alt="Image float left" style="float: left; width: 63px; height: 63px;">
 Image float set: left

ویژگی های بیشتر استفاده شده

alt

ویژگی alt یک متن جایگزین را تنظیم می کند تا در صورت عدم نمایش تصویر نشان داده شود. می توانید تصویر HTML را نامگذاری یا توصیف کنید تا به کاربر ایده ای از شکل تصویر را ارائه دهد:

<img src="image.png" alt="Bread Dog" style="width: 150px; height: 150px;">

src

ویژگی src منبعی را که از آن عکس گرفته شده تعریف می کند. تصاویر HTML را می توان در هر پوشه وب سایت شما قرار داد. برای نمایش تصویر شما ، باید تگ <img> دارای ویژگی src با مسیر صحیح به یک پوشه خاص باشد:

<img src="image.png" alt="Space Doggo" width="50" height="50">

همچنین می توان از طریق آدرس URL مستقیم به بیشتر پرونده های تصویری HTML دسترسی پیدا کرد. برای بارگذاری تصاویر از سرورهای دیگر ، باید آدرس URL را در ویژگی src قرار دهید:

<img src="https://cdn.bitdegree.org/learn/pom-laptop.png" alt="HTML5 Images tag" style="width: 141px; height: 141px;">

نقشه سایت

با استفاده از نقشه usem ، می توانید تصویر خود را با یک عنصر <map> تعریف نقشه تصویر متصل کنید:

<img src="image.png" alt="Image Map" usemap="#doggo" style="width: 145px; height: 126px;">

<map name="doggo">
  <area shape="rect" coords="0, 0, 82, 126" alt="doggo" href="doggo.html">
  <area shape="circle" coords="95, 80, 30" alt="sorry" href="sign.html">
</map>

height

ویژگی height ارتفاع تصویر شما را در HTML تنظیم می کند:

<img src="image.png" alt="Doggo" height="60">

width

ویژگی width عرض تصویر شما را در HTML تعریف می کند:

<img src="image.png" alt="Doggo" width="205" >

style

ویژگی style اجازه می دهد تا یک ظاهر طراحی داخلی را برای تصاویر در HTML اعمال کنید:

<img src="image.png" alt="Image style attribute" style="height: 105px; width: 105px; border: solid black;">

نکات مهم قرار دادن تصویر در HTML

• هنگام اصلاح ابعاد تصویر ، به یاد داشته باشید که نماد px باید برای ویژگی style درج شود ، اما از نظر height و width قابل حذف است.
• نام تصاویر HTML خود را هوشمندانه انتخاب کنید. موتورهای جستجو آن ها را مورد توجه قرار می دهند ، بنابراین نام واضح تری می تواند به بهبود قابلیت کشف وب سایت شما کمک کند.

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.