قرار دادن عکس در صفحه وب

در این بخش از آموزش html به بحث قرار دادن عکس در صفحه وب می پردازیم.

برای قرار دادن عکس در صفحه وب (صفحات html) از تگ img استفاده می شود. تگ img دارای تگ بسته نیست.

در تمام سایت ها از تصویر در صفحات html استفاده می شود. سعی کنید عکس ها دارای حجم کمی باشند تا سرعت لود سایت پایین نیاید. اگر تصاویر با حجم بالا در سایت یا صفحات وب قرار دهید باعث دیر لود شدن سایت می شود و کاربر را ناراحت می کند.

تگ img دارای چند ویژگی می باشد:

ویژگی src :

ویژگی src که آدرس تصویر در آن قرار می گیرد. اگر تصویر نمایش داده نشد احتمالا آدرس تصویر را درست وارد نکرده اید.

ویژگی alt :

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

ویژگی width :

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

ویژگی height :

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

در هنگام قرار دادن عکس در صفحه وب بایستی به نام و آدرس فایل توجه کنیم. چنانچه آدرس یا نام فایل اشتباه باشد عکس یا تصویر نمایش داده نمی شود و اگر در alt مطلبی نوشته باشید آن مطلب چاپ می شود.

دادن استایل به عکس یا تصویر :

با استفاده از style می توانیم سی اس اس یا استایل به عکس یا تصویر داد و تصویر یا عکس را جذاب تر کنیم.

مثال 1:

در مثال زیر به تصویر زیر ، یک استایل داده ایم . با دستور border-radius می توانیم گوشه های تصویر یا عکس را گرد کنیم.خروجی را در تصویر زیر می بینیم.

<html>
<head>
<title>شیرازلرن</title>
<style>
img{ border-radius: 50%; } </style>
</head>
<body>
<img src="sh.png" alt="شیرازلرن">
</body>
</html>

خروجی را در تصویر زریر می بینید.

قرار دادن عکس در صفحه وب

مثال 2 :

در مثال 2 دور تصویر یک کادر می اندازیم. با دستور border می توانیم کادری دور تصویر بیندازیم.خروجی را در تصویر زیر می بینیم.

<html>
<head>
<meta charset="utf8">
<title>شیرازلرن</title>
<style>
img{ border: 6px solid blue; } </style>
</head>
<body>
<h1>sh711.com</h1>
</body>
</html>

خروجی را در تصویر زریر می بینید.

قرار دادن عکس در صفحه وب

قرار دادن تصویر در پس زمینه :

برای قرار دادن تصویر در پس زمینه از دستور background استفاده می شود. برای اینکه بتوانیم عکس یا تصویر را  در پس زمینه قرار دهیم از دستورbackground  استفاده می کنیم . در مثال زیر به تگ body این ویژگی را اعمال می کنیم.

<html>
<head>
<meta charset="utf8">
<title>شیرازلرن</title>
<style>
body{ background: url("sh.png"); } </style>
</head>
<body>
<h1>sh711.com</h1>
</body>
</html>

خروجی را در تصویر زریر می بینید.

قرار دادن عکس در صفحه وب

لینک دادن به تصویر :

برای لینک دادن به تصویر می توانیم از تگ a استفاده کنیم. برای این کار بایستی از تگ a استفاده کنیم و در قسمت href  آدرس سایت یا صفحه خاصی را بدهید. سپس تگ img را وسط تگ a قرار دهیم. در این صورت کاربر با کلیک روی عکس یا تصویر به صفحه مورد نظر هدایت خواهد شد. به مثال زیر توجه کنید.

<html>
<head>
<meta charset="utf8">
<title>شیرازلرن</title>
<style>
img{ border: 6px solid blue; } </style>
</head>
<body>
<a href="https://sh711.com"><img src="sh.png" alt="شیرازلرن"></a>
</body>
</html>

نویسنده : هدایت عباسی

ثبت نظر