- تگ img در html چیست + مثال های متنوع
- HoseinKetabi
- اکتبر 1, 2024
- تعداد نظرات : بدون نظر
html شامل تگ های زیادی میباشد و همه آن ها کاربرد مختص به خود را دارا هستند,تگ img تگی است که میتوانید با استفاده از آن هر عکسی را که دوست دارید درون وب سایت خود قرار دهید.
تعریف شفاهی تگ img در html
اگر بخواهیم به صورت شفاهی تگ img را در html توضیح دهیم باید بگوییم که تگ img در html تگی است که از آن میتوان برای نمایش تصاویر استفاده کرد.
این تگ ویژگی های زیادی برای نمایش تصاویر مانند اندازه آن,میزان شفافیت و غیره را دارا است که از آن میتوان برای تغییر شکل و شمایل عکس استفاده نمود,به صورت کلی تصاویر میتوانند شکل و شمایل وب سایت را بهبود دهند.
ساختار تگ img در html چگونه است
ساختار تگ img در html به صورتی است که شما فقط از یک تگ بدون باز و بسته کردن آن استفاده می کنید.به صورتی که درون آن یک تگ به صورت باز و بسته از ویژگی src برای آدرس دهی تصویر استفاده میکنید.
<html>
<head>
<title>تگ img در html</title>
</head>
<body>
<img src="img.jpg"/>
// نمونه ای از تگ img در html
</body>
</html>
همانطور که مشاهده میفرمایید از ویژگی src برای آدرس دهی تگ img استفاده شده است.ویژگی های دیگری نیز وجود دارد که میتوان برای تصاویر استفاده نمود که به آن ها میپردازیم.
ویژگی های اندازه تصویر در تگ img
در تگ img دو ویژگی وجود دارد با نام های width و height که میتوان برای تعیین اندازه تصاویر از آن ها استفاده نمود,از ویژگی height برای ارتفاع تصویر و از ویژگی width برای عرض تصاویر میتوان استفاده نمود,در پایین چند مثال را برای شما آورده ایم.
<html>
<head>
<title>ویژگی heigh و width در html</title>
</head>
<body>
<img src="pic.img" width="200" height="200"/>
</body>
</html>
در مثال بالا با استفاده از ویژگی های height و width ارتفاع تصویر و عرض تصویر را مشخص کرده ایم.در حالت کلی عرض و ارتفاع تصویر به پیکسل حساب میشود.
ویژگی alt برای تگ img در html
ویژگی alt برای تگ img در html یک ویژگی بسیار کاربردی است که استفاده زیادی درون طراحی وب سایت دارد.شما میتوانید از این ویژگی به منظور متن جایگزین تصویر استفاده کنید که وقتی اگر تصویر شما بارگذاری نشد بتوانید این متن را جای آن نمایش دهید.نمایش داده نشدن عکس دلایل زیادی دارد که به آن میپردازیم,یکی از آن ها سرعت پایین اینترنت یا مشمل در سرور است,کاربرد دیگر این تگ برای seo سایت شما است که میتواند تاثیر مثبتی بر آن داشته باشد,در پایین مثالی از استفاده ویژگی alt را آورده ایم.
<html>
<head>
<title>تگ img در html</title>
</head>
<body>
<img src="pic.jpg" width="300" height="300" alt="تصویر یک خرس"/>
</body>
</html>
در قطعه کد بالا همانطور که مشاهده میشود از تگ alt به عنوان جایگزین متنی تصویر استفاده شده است.
مثال هایی از تگ img در html
در اینجا میخواهیم مثال هایی از تگ img در html را برای شما بیاوریم.بیشتر دقت خود را روی این میگذاریم که با مثال های خود آدرس دهی تصاویر را آموزش دهیم,هرچند برای اینکار یک مقاله جداگانه درون وب سایت قرار میدهیم.
<html>
<head>
<title>تگ img در html</title>
</head>
<body>
<img src="../../main.jpg"/>
// مثالی از انتخاب تصاویر از بیرون فولدر
</body>
</html>
در بالا مثالی از استفاده تگ img و ویژگی src مشاهده میکنید که در این مثال از آدرس دهی بیرونی فولدر استفاده کردیم به این صورت که گفته ایم دو فولدر بیرون بیاید و تصویر را انتخاب کند.
<html>
<head>
<title>تگ img در html</title>
</head>
<body>
<img src="img.jpg" width="400" height="400" alt="متن جایگزین تصویر"/>
</body>
</html>
در مثال بالا از آدرس دهی استفاده کرده ایم که از فولدر جاری تصویر مورد نظر را انتخاب کند.
اصلی ترین کاربرد تگ img در html
واضح‌ترین کاربرد این تگ، نمایش تصاویر در صفحه وب است. شما میتوانید با مشخص کردن آدرس تصویر و متن جایگزین ، تصویر را در هر نقطه‌ای از صفحه قرار دهید. با استفاده از CSS و تگ img، میتوانید یک تصویر را به عنوان پس‌زمینه یک عنصر یا کل صفحه تعیین کنید. با قرار دادن تگ img درون یک لینک، میتوانید یک دکمه تصویری ایجاد کنید که کاربر با کلیک روی آن به صفحه دیگری هدایت میشود.بسیاری از وب‌سایت‌ها از آیکون‌ها برای نمایش اطلاعات به صورت بصری استفاده می‌کنند. تگ img برای اضافه کردن آیکون‌ها به صفحه بسیار مناسب است. با استفاده از ویژگی‌های CSS مانند width و height و همچنین استفاده از واحدهای نسبی مانند درصد، میتوانید تصاویر را به گونه‌ای طراحی کنید که با اندازه صفحه نمایش‌های مختلف سازگار باشند.
- نظرات