تصاویر در HTML
تصاویر در HTML
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به بررسی تصاویر در HTML خواهیم پرداخت.
تصاویر برای زیبا سازی و همچنین به تصویر کشیدن بسیاری از مفاهیم پیچیده به روش ساده در صفحه وب شما بسیار مهم هستند. این آموزش مراحل ساده ای را برای استفاده از تصاویر در صفحات وب به شما ارائه می دهد.
درج تصویر
با استفاده از تگ <img> می توانید هر تصویری را در صفحه وب خود وارد کنید. در زیر نحو ساده استفاده از این تگ آمده است.
1 |
<img src = "Image URL" ... attributes-list/> |
تگ <img> یک تگ خالی است، به این معنی که ، می تواند فقط لیستی از ویژگی ها باشد و هیچ تگ بسته ای ندارد.
مثال
برای امتحان مثال زیر، بیایید فایل HTML test.htm و image file test.png را در همان دایرکتوری نگه داریم –
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>Using Image in Webpage</title> </head> <body> <p>Simple Image Insert</p> <img src = "/html/images/test.png" alt = "Test Image" /> </body> </html> |
خروجی
1 2 3 |
Simple Image Insert Test Image |
شما می توانید بر اساس راحتی خود از فایل تصویری PNG ، JPEG یا GIF استفاده کنید اما مطمئن شوید که نام صحیح فایل تصویر را در ویژگی src مشخص کرده اید. نام تصویر همیشه به حروف کوچک بزرگ حساس است.
ویژگی alt یک ویژگی اجباری است که در صورت عدم امکان نمایش تصویر، متنی جایگزین برای یک تصویر مشخص می کند.
تنظیم مکان تصاویر در HTML
معمولاً همه تصاویر را در یک دایرکتوری جداگانه نگهداری می کنیم. بنابراین بیایید فایل HTML test.htm را در فهرست اصلی خود نگه داریم و تصاویر زیر شاخه را در داخل فهرست اصلی ایجاد کنیم که در آن تصویر test.png را در آن نگه داریم.
مثال
با فرض اینکه مکان تصویر ما “image / test.png” است، مثال زیر را امتحان کنید –
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Live Demo <!DOCTYPE html> <html> <head> <title>Using Image in Webpage</title> </head> <body> <p>Simple Image Insert</p> <img src = "/html/images/test.png" alt = "Test Image" /> </body> </html> |
خروجی
1 2 3 |
Simple Image Insert Test Image |
تنظیم عرض / ارتفاع تصویر
می توانید عرض و ارتفاع تصویر را بر اساس نیاز خود با استفاده از ویژگی های عرض و ارتفاع تنظیم کنید. شما می توانید عرض و ارتفاع تصویر را از نظر پیکسل یا درصد اندازه واقعی آن تعیین کنید.
مثال
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>Set Image Width and Height</title> </head> <body> <p>Setting image width and height</p> <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/> </body> </html> |
خروجی
1 2 3 |
Setting image width and height Test Image |
تنظیم حاشیه تصویر
به طور پیش فرض، یک تصویر حاشیه ای در اطراف خود دارد ، شما می توانید ضخامت حاشیه را از نظر پیکسل با استفاده از ویژگی حاشیه مشخص کنید. ضخامت 0 معنی، عدم وجود حاشیه در اطراف تصویر است.
مثال
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>Set Image Border</title> </head> <body> <p>Setting image Border</p> <img src = "/html/images/test.png" alt = "Test Image" border = "3"/> </body> </html> |
خروجی
1 2 3 |
Setting image Border Test Image |
تنظیم تراز بندی تصویر
به طور پیش فرض، تصویر در سمت چپ صفحه تراز می شود، اما می توانید از ویژگی align برای تنظیم آن در مرکز یا راست استفاده کنید.
مثال
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>Set Image Alignment</title> </head> <body> <p>Setting image Alignment</p> <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/> </body> </html> |
خروجی
1 2 |
Setting image Alignment Test Image |
دیدگاه شما