آموزش تگ img در HTML
آموزش تگ img در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ img در HTML به صورت کامل آشنا بشید.
تگ img در HTML
تگ img یکی از واضح ترین تگ های html محسوب میشود و کاملا از نام آن مشخص است که چه کارایی دارد. ما در صورت استفاده از این تگ میتوانیم تصاویر یا عکس های خود را در یک صفحه وب سایتمان قرار دهیم.
تگ img دارای دو صفت کاربردی است. اگر این دو صفت موجود نباشند نمیتوانیم عکس مورد نظر خود را فراخوانی کنیم. صفت های ذکر شده src و alt هستند:
- صفت Src : از این صفت برای مشخص کردن آدرس URL فایل عکس استفاده میکنیم.
- صفت Alt : از این صفت هم برای مشخص کردن یک سری توضیحات کوتاه در مورد تصویر مورد نظر.
مثال از تگ img در HTML
در ادامه دوره آموزشی html css پروژه محور به چند تا از مثال های این تگ میپردازیم تا بتوانیم بیشتر با این تگ آشنا شوید.
اولین مثال : درج عکس در صفحه ی وبسایت با استفاده از تگ img بدون استفاده از کد css یا استایل
<body>
<img src="images/wppush-logo.png">
</body>
مثال دوم : نحوه استفاده از صفت alt در تگ img
<body>
<img src="images/wppush-logo.png" alt="لوگوی سایت وردپرس پوش">
</body>
مورد سوم : تنظیم اندازه عرض و ارتفاع عکس یا همان width , height
<body>
<img src="images/wppush-logo.png" width="300px" height="100px">
</body>
مثال چهارم : عکس دارای لینک یعنی داشتن قابلیت کلیک روی عکس با استفاده از تگ a
<body>
<a href="https://free-learn.ir">
<img src="images/wppush-logo.png">
</a>
</body>
آخرین مثال: نحوه ایجاد نقشه تصویری در HTML
<body>
<img src="images/wppush-logo.png" usemap="#map">
<map name="map">
<area shape="rect" coords="231, 31, 287, 195" href="https://wppush.ir/" alt="وردپرش پوش" title="وردپرس پوش">
</map>
</body>
راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید
پشتیبانی مرورگرها از تگ img
در جدول زیر میتوانید مرورگرهای اینترنتی که از تگ img در HTML پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…
جدول صفات تگ img در HTML
جدول زیر به شما کمک میکند تا صفات تگ img را به همراه مقادیری را که میتوانیم در این تگ استفاده کنیم را مشاهده نماییدم.
پشتیبانی تگ img از صفات و رویدادهای عمومی
تگ img قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.
نکات و توضیحات
- صفت های alt و src در تگ
imgبسیار مهم و ضروری هستند و حتما باید از آنها استفاده کنید. - تگ img جز تگ هایی است که به اصطلاح تنهاست یعنی مثلا عین تگ <p> <p/> تگ پایانی ندارد که با اسلش / آن را بست.
دستورات پیش فرض CSS
اغلب مرورگرها تگ img را با کد های CSS به شکل زیر نمایش میدهند. شما هم میتوانید بدون ایجاد هیچ تغییری از این کد ها استفاده کنید.
img {
display: inline-block;
}
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید