آموزش HTML فصل سوم – نحوه نمایش تصاویر

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

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

همانطور که گفته شد شما میتوانید اندازه این عکس را تغییر دهید.این کار را میتوان با اضافه کردن دو attribute به تگ img انجام داد.

این دو شناسه عبارتند از :

Width برای عرض عکس
Height برای ارتفاع عکس

برای اینکه نحوه عملکرد این دو شناسه رو متوجه شوید به مثال زیر توجه کنید:

طبق معمول یک سند html ایجاد کرده و با استفاده از تگ imgو شناسه src آدرس فایل عکس مورد نظر را تعیین میکنیم.سپس با استفاده از دو شناسه height و width ارتفاع و عرض آنرا مشخص میکنیم.این اندازه را میبایست بر حسب پیکسل وارد کنیم.

  <html>
  <head>
  <title>Learning HTML</title>
  </head>
  <body>
<img src="http://rtl-automatic.ir/uploads/PCTech.jpg" width=”۱۰۰” height=”۷۵”>
   </body>
  </html>

سپس سند را ذخیره کرده و تغییرات را مشاهده میکنیم.

میبینید که عکس با اندازه تعیین شده و در قسمت بالا سمت چپ قرار گرفته است.

پس از تعیین اندازه متن ، میخواهیم بدانیم که چگونه میتوانیم عکس و متن را در کنار یکدیگر داشته باشیم. در حالت معمولی و بدون استفاده از شناسه ای در این مورد، متون قبل و بعد از تصویر تغییر نکرده و همان شکل نمایش داده میشوند.

اما تصویر مانند یک سطر در بین آنها قرار میگیرد.حتی اگر پهنای عکس از یک سطر بیستر باشد، باز هم مانند یک سطر قرار میگیرد.و در کنار آن بیش از یک خط متن نمیتوان نوشت.این موضوع را میتوانید در مثال زیر ببینید.

 <html>
 <head>
 <title>Learning HTML</title>
 </head>
 <body>
This is a test</br>

This is a test</br>

This is a test</br>

This is a test</br>

<img src="http://rtl-automatic.ir/uploads/PCTech.jpg" width=”۲۰۰” height=”۱۵۰”>

This is a test</br>

This is a test</br>

This is a test</br>

This is a test</br>
 </body>
 </html>

همانطور که گفته شد و در این مثال میبینید در کنار عکس فقط یک سطر متن وجود دارد.

اکنون اگر بخواهیم در کنار متن بیش از یک سطر بنویسیم ، میبایست از یک شناسه در تگ img استفاده نماییم.این شناسه Align میباشد که دارای دو مقدار left و right میباشد.با استفاده از این شناسه میتوانید عکس و متن را در کنار یکدیگر استفاده نمایید.به این صورت که سطر ها همراه تصویر قرار خواهند گرفت. به مثال زیر توجه نمایید:

 <html>

<head>

<title>Learning HTML</title>

</head>

<body>

This is a test</br>

This is a test</br>

This is a test</br>

This is a test</br>

<img src="http://rtl-automatic.ir/uploads/PCTech.jpg" width="200" height="150" align="left">

This is a test</br>

This is a test</br>

This is a test</br>

This is a test</br>

</body>

</html>

حال تاثیر این کار را در مرورگر مشاهده مینماییم.

مشاهده میکنید که سطر ها در کنار تصویر قرار میگیرند.