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

کار با تصاویر در html

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

زیرا صفحاتی که تنها دارای متن باشند جذابیت خاصی برای کاربر القا نمی کنند.

در این بخش از سری آموزش HTML قصد بررسی تگ مربوط به تصاویر و نحوه ی کار آن را در کنار شما خواهیم داشت.

 

حتما قبل از بررسی نوشته ی تصاویر در HTML مطالب قبلی این دوره ی آموزشی را با هشتگ #دوره_آموزشی_HTML در سایت ما را مطالعه کنید.

 

لوگو قدیمی سایت
لوگو قدیمی سایت

برای قرار دادن تصویر شما به تگ مفرد img نیاز دارید؛

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

برای افزودن تصویر به متحوای صفحاتتان در HTML کافیست کد زیر را اضافه کنید:

خب حالا به بررسی قطعه کد بالا می پردازیم؛ همانطور که در بالا می بینید.

تگ img برای افزودن تصاویر در صفحات html استفاده خواهند شد.

خصیصه اجباری، مهم و در تمامی موارد ثابت تگ img، خصیصه ی src می باشد.

وظیفه نگهداری آدرس تصویر مورد نظر را دارد.

مثال :

نتیجه:

 

 

 

در قطعه کد بالا لوگوی سایت ما به آدرس “https://camelcase.ir/…/logo.png” در خصیصه ی src تگ img جاگرفته است.

در نتیجه این تگ لوگوی سایت ما را به نمایش در می آورد.

 

نکته :

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

یا در فولدری کنار سند html می توان به طور نسبی به خصیصه ی src مقدار داد تا در تغییرات به مشکل برنخورید.

 

تگ img یک تگ انعطاف پذیر است و دارای خصیصه های دیگری می باشد که برای یادگیری آنها می توانید از مرجع معتبر W3School استفاده کنید؛

البته باید به این نکته توجه کنید که در این سری آموزشی ما خاصیت هایی که درجه ی اهمیت بالایی دارند را برای شما به مرحله آموزش خواهیم رساند.

 

برای استفاده از تمامی جلسات از هشتگ #دوره_آموزشی_HTML در سایت ما استفاده کنید.

منتظر جلسه ی بعدی دوره ی آموزشی HTML باشید.

 

نظرات خود را در ارتباط با آموزش “کار با تصاویر در html” برای ما بنویسید.

موفق و پایدار باشید.

با دوستانتان به اشتراک بگذارید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code