تصاویر در HTML

4 سال پیش
امتیاز دهید post

تصاویر در HTML

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به بررسی تصاویر در HTML خواهیم پرداخت.

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

درج تصویر

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

 

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

 

مثال

برای امتحان مثال زیر، بیایید فایل HTML test.htm و image file test.png را در همان دایرکتوری نگه داریم –

 

خروجی 

 

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

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

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

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

مثال

با فرض اینکه مکان تصویر ما “image / test.png” است، مثال زیر را امتحان کنید –

 

خروجی

 

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

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

مثال

 

خروجی

 

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

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

مثال

 

خروجی

 

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

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

 

مثال

 

خروجی

 

منبع.

لیست جلسات قبل آموزش برنامه نویسی HTML

  1. معرفی HTML
  2. نگاهی کلی به HTML
  3. آموزش تگ های پایه در HTML
  4. آموزش عناصر در HTML
  5. مفهوم ویژگی ها در HTML
  6. آموزش قالب بندی در HTML
  7. آموزش تگ های عبارت در HTML
  8. آموزش متا تگ ها در HTML 
  9. آموزش کامنت ها در HTML
امتیاز دهید post
0
برچسب ها :
نویسنده مطلب saber

دیدگاه شما

بدون دیدگاه