تگ <img> در HTML برای اضافه کردن تصاویر به صفحات وب استفاده می‌شود. این تگ بدون تگ بسته‌ای (self-closing tag) است و به طور کلی به صورت زیر استفاده می‌شود:
در اینجا:
- – src: این ویژگی نشان می‌دهد که تصویر باید از کجا بارگذاری شود. این می‌تواند یک مسیر محلی یا یک URL اینترنتی باشد.
– alt: این ویژگی یک متن جایگزین برای تصویر است که نمایش داده می‌شود اگر تصویر بارگذاری نشود یا اگر مرورگر تصویر را نمی‌تواند نمایش دهد. این ویژگی مهم برای دسترسی‌پذیری است.
– width: این ویژگی عرض تصویر را تعیین می‌کند. میتوانید از واحد‌های px (پیکسل) یا٪ (درصد) استفاده کنید.
– height: این ویژگی ارتفاع تصویر را تعیین می‌کند. همانند width، میتوانید از واحد‌های px یا٪ استفاده کنید.
به عنوان مثال، این کد یک تصویر با زبان HTML اضافه می‌کند:
<img src="آدرس_تصویر" alt="متن_جایگزین" width="پهنا" height="ارتفاع">این تصویر با نام “example.jpg” از مسیر فعلی یا مسیر نسبی بارگذاری می‌شود و در صورتی که نتواند بارگذاری شود، متن “تصویر نمونه” به عنوان متن جایگزین نمایش داده می‌شود. ابعاد تصویر نیز به ترتیب 300 پیکسل عرض و 200 پیکسل ارتفاع خواهد بود.
توجه : فایل باید به نام example.jpg در کنار فایل HTML شما وجود داشته باشد تا تصویر نمایش داده شود. همچنین شما میتوانید از لینک تصاویر در اینترنت استفاده کنید.
<img src="example.jpg" alt="تصویر نمونه" width="300" height="200">
توضیح دقیق‌تر طول و عرض (Width/Height)
تنظیم عرض/ارتفاع تصویر یکی از مهمترین مباحث در HTML است که به شما امکان می‌دهد ابعاد تصویر را به دقت مشخص کنید. این کار می‌تواند در بهینه‌سازی نمایش تصاویر و سرعت بارگذاری صفحات وب مفید باشد. در HTML، میتوانید از ویژگی‌های width و height در تگ <img> برای تعیین ابعاد تصویر استفاده کنید.
- ۱. width: این ویژگی مشخص می‌کند عرض تصویر را. میتوانید از واحد‌های px (پیکسل) یا درصد برای مقداردهی به این ویژگی استفاده کنید.
- ۲. height: این ویژگی مشخص می‌کند ارتفاع تصویر را. همانند width، میتوانید از واحد‌های px یا درصد برای تعیین مقدار آن استفاده کنید.
استفاده از این ویژگی‌ها به شما اجازه می‌دهد که ابعاد تصویر را به دقت مشخص کرده و سبک‌تر و کارآمدتر نمایش دهید. از طریق تعیین مستقیم ابعاد تصویر، میتوانید جلوی خطاهای ناشی از تغییر ابعاد تصویر با CSS یا ابزارهای دیگر را بگیرید.
به عنوان مثال، این کد یک تصویر را با عرض 300 پیکسل و ارتفاع 200 پیکسل نمایش می‌دهد:
<img src="example.jpg" alt="تصویر نمونه" width="300" height="200">
استفاده از ابعاد دقیق تصویرها در تگ <img> کمک می‌کند تا مرورگر به درستی صفحه را بارگذاری کند و نمایش دهد، همچنین این امر به بهینه‌سازی بارگذاری صفحه و کنترل بهتر اندازه تصاویر کمک می‌کند.
تنظیم حاشیه تصویر (Set Image Border)
تنظیم حاشیه تصویر یا Set Image Border به شما امکان می‌دهد حاشیه‌ای را به دور تصویر اضافه کنید، که به آن یک حاشیه یا مرز می‌گویند. این مرز می‌تواند باعث تمیزتر و قابل مشخص‌تر شدن تصویر در صفحه شود. در HTML، میتوانید از ویژگی border در تگ <img> برای تعیین حاشیه تصویر استفاده کنید.
ویژگی border مشخص می‌کند ضخامت و نوع مرز تصویر است. میتوانید عددی برای ضخامت مرز و یا نوعی از مرز را به عنوان مقدار این ویژگی مشخص کنید.
مقادیر معتبر برای ویژگی border عبارتند از:
- ۱. عدد: تعیین ضخامت مرز به پیکسل. مثلاً border=”2″ ضخامت مرز را 2 پیکسل می‌کند.
- ۲. مقدار none: حذف مرز تصویر. مثلاً border=”none” مرز تصویر را حذف می‌کند.
- ۳. مقدار thin، medium، یا thick: تعیین ضخامت مرز با استفاده از سطوح متوسطی از ضخامت. این سطوح متوسط مرتباً تعیین شده توسط مرورگر هستند و ممکن است بر اساس مرورگر و سیستم عامل متفاوت باشند.
- به عنوان مثال، این کد یک تصویر را با یک مرز با ضخامت 2 پیکسل نمایش می‌دهد:
<img src="example.jpg" alt="تصویر نمونه" border="2">
توضیح دقیق‌تر طول و عرض (Width/Height)
تنظیم تراز تصویر یا Set Image Alignment به شما اجازه می‌دهد تصویر را در مکان مورد نظر در صفحه قرار دهید. این کار به شما امکان می‌دهد تا تصویر را در چپ، راست، وسط، بالا، پایین یا در کنار متن قرار دهید. در HTML، میتوانید از ویژگی align در تگ <img> برای تعیین تراز تصویر استفاده کنید.
مقادیر معتبر برای ویژگی align عبارتند از:
- ۱. left: تصویر در چپ متن قرار می‌گیرد و متن به سمت راست تصویر چیده می‌شود.
- ۲. right: تصویر در راست متن قرار می‌گیرد و متن به سمت چپ تصویر چیده می‌شود.
- ۳. top: تصویر در بالای متن قرار می‌گیرد و متن زیر تصویر چیده می‌شود.
- ۴. bottom: تصویر در پایین متن قرار می‌گیرد و متن بالای تصویر چیده می‌شود.
- ۵. middle: تصویر در وسط متن قرار می‌گیرد و متن به دو طرف تصویر چیده می‌شود.
به عنوان مثال، این کد یک تصویر را در چپ متن قرار می‌دهد:
<img src="example.jpg" alt="تصویر نمونه" align="left">
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام