آموزش HTML - تصاویر

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

درج تصویر

با استفاده از تگ <img> می توانید هر تصویری را در صفحه وب خود وارد کنید . در زیر نحوه نگارش ساده برای استفاده از این تگ آمده است.

<img src="آدرس عکس" ... />

تگ <img> یک تگ منفرد است، به این معنی که هیچ تگ بسته شدنی ندارد.

مثال

برای امتحان کردن مثال زیر، اجازه دهید فایل اچ تی ام ال test.htm و فایل تصویری test.png خود را در یک دایرکتوری با نام html ایجاد نماییم -

<!DOCTYPE html>
<html dir="rtl" lang="fa">

   <head>
      <title>استفاده از تصویر در صفحه وب</title>
   </head>
	
   <body>
      <p>درج تصویر</p>
      <img src = "/html/images/test.png" alt = "تصویر تستی" />
   </body>
	
</html>

این کد نتیجه زیر را ایجاد می کند -

درج تصویر در html

شما می توانید از فایل تصویری PNG، JPEG ، GIF یا فرمت های جدیدتری مانند webp بر اساس نیاز و راحتی خود ، استفاده کنید، اما مطمئن شوید که نام فایل تصویری صحیح را در ویژگی src مشخص کرده اید. نام تصویر معمولا به حروف کوچک و بزرگ حساس است.

ویژگی alt یک ویژگی اجباری است که در صورتی که تصویر قابل نمایش نباشد، یک متن جایگزین برای یک تصویر مشخص می کند.

مکان تصویر را تنظیم کنید

معمولاً همه تصاویر را در یک فولدر جداگانه نگهداری می کنیم. بنابراین بیایید فایل test.htm را در فهرست اصلی خود نگه داریم و تصاویر را در دایرکتوری زیر شاخه ایجاد کنیم و در آن تصویر test.png خود را انتقال دهیم.

مثال

با فرض اینکه مکان تصویر ما "image/test.png" است، به شکل زیر آدرس تصویر را مشخص می کنیم

<!DOCTYPE html>
<html dir="rtl" lang="fa" >

   <head>
      <title>استفاده از تصویر در صفحه وب</title>
   </head>
	
   <body>
      <p>درج تصویر</p>
      <img src = "/html/images/test.png" alt = "تصویر تستی" />
   </body>
	
</html>

این کد به شکل زیر نمایش داده می شود

تصاویر در html

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

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

مثال

<!DOCTYPE html>
<html dir="rtl" lang="fa">

   <head>
      <title>تنظیم عرض و ارتفاع تصویر</title>
   </head>
	
   <body>
      <p>تنظیم عرض و ارتفاع تصویر</p>
      <img src = "/html/images/test.png" alt = "تصویر تستی" width = "150" height = "100"/>
   </body>
	
</html>

این کد به شکل زیر نمایش داده می شود

تنظیم عرض و ارتفاع در Html

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

به طور پیش فرض، تصویر یک حاشیه در اطراف خود خواهد داشت، می توانید ضخامت حاشیه را بر حسب پیکسل با استفاده از ویژگی border تعیین کنید. ضخامت 0 به معنای عدم وجود حاشیه در اطراف تصویر است.

مثال

<!DOCTYPE html>
<html dir="rtl" lang="fa">

   <head>
      <title>تنظیم حاشیه تصویر</title>
   </head>
	
   <body>
      <p>تنظیم حاشیه تصویر</p>
      <img src = "/html/images/test.png" alt = "تصویر تستی" border = "3"/>
   </body>
	
</html>

این کد نتیجه زیر را ایجاد می کند -

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

تنظیم تراز تصویر

به طور پیش فرض، تصویر در سمت چپ صفحه تراز می شود، در صورتی که برای صفحات فارسی dir را تنظیم کنید بصورت پیشفرض در سمت راست نمایش داده می شود . اما می توانید از ویژگی align برای تنظیم آن در مرکز یا چپ و راست استفاده کنید.

مثال

<!DOCTYPE html>
<html dir="rtl" lang="fa" >

   <head>
      <title>تنظیم تراز تصویر</title>
   </head>
	
   <body>
      <p>تنظیم تراز تصویر</p>
      <img src = "/html/images/test.png" alt = "تصویر تستی" border = "3" align = "left"/>
   </body>
	
</html>

این کد نتیجه زیر را ایجاد می کند -

تنظیم تراز تصویر در html

کامنت گذاری - درس قبلی

درس بعدی - جداول