EZ

EZNotes

🖼️ Practical 70: HTML code for using height, width and alt attributes for image tag

Learn how to use the height, width, and alt attributes with the <img> tag to control image display and accessibility.

🎯 Aim

To create an HTML webpage that demonstrates the use of height, width, and alt attributes with the <img> tag.

🛠️ What You Need

  • Notepad++ or any text editor
  • A web browser to view the result
  • An image file (or use online images)

📖 Introduction

The <img> tag uses three important attributes to control how images are displayed:

  • width — Specifies the width of the image in pixels (or percentage).
  • height — Specifies the height of the image in pixels (or percentage).
  • alt — Provides alternative text if the image cannot be displayed; essential for accessibility.
💡 Tip: Using width and height helps the browser reserve space for the image before it loads, preventing layout shifts. The alt attribute is required for accessibility and SEO.

📊 Preview of the Output

🖼️ Image Attributes: height, width, alt

📐 Different Image Sizes
80x80

width="80" height="80"

150x80

width="150" height="80"

200x100

width="200" height="100"

80x120

width="80" height="120"

150x150

width="150" height="150"

📝 Using the alt Attribute
✅ Good alt text: <img src="sunset.jpg" alt="A beautiful sunset over the mountains with orange and purple sky">
✓ Describes the image content clearly
❌ Poor alt text: <img src="sunset.jpg" alt="image">
✗ Too vague, doesn't describe the image
❌ Missing alt text: <img src="sunset.jpg">
✗ No alt attribute - poor accessibility
📊 Width and Height Behavior

width="120" height="80"
✓ Correct ratio

width="120" height="120"
⚠️ Stretched (distorted)

📝 Step‑by‑Step: Creating the HTML Page

Step 1: Open Notepad++ and Write the Code

  1. Launch Notepad++.
  2. Set the language to HTML (Language → H → HTML).
  3. Write the following simplified HTML code:
<!-- Practical 70: Using height, width, and alt attributes for image tag --> <html> <head> <title>Image Attributes Demo</title> </head> <body> <h1>🖼️ Image Attributes: height, width, alt</h1> <!-- Image with width and height attributes --> <h2>Image with width and height</h2> <img src="sample.jpg" alt="A sample image showing a beautiful landscape" width="300" height="200"> <!-- Image with different sizes --> <h2>Different Image Sizes</h2> <div style="display: flex; gap: 15px; flex-wrap: wrap;"> <img src="photo.jpg" alt="Small image" width="80" height="80"> <img src="photo.jpg" alt="Medium image" width="150" height="100"> <img src="photo.jpg" alt="Large image" width="250" height="150"> </div> <!-- Image with alt text for accessibility --> <h2>Importance of alt attribute</h2> <p>When an image fails to load, the alt text is displayed instead:</p> <img src="nonexistent.jpg" alt="This image could not be loaded - shows the alt text" width="300" height="100"> <!-- Image with CSS styling and attributes --> <h2>Image with CSS styling</h2> <img src="sample.jpg" alt="Styled image with border and shadow" width="250" height="150" style="border: 3px solid #3498db; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);"> <!-- Using percentage for width --> <h2>Using Percentage Width</h2> <img src="sample.jpg" alt="Responsive image with 50% width" style="width: 50%; height: auto;"> </body> </html>

Step 2: Save the File

  1. Go to File → Save As… (or press Ctrl+Shift+S).
  2. Choose a location (e.g., Desktop).
  3. Name the file: "image_attributes.html" or "practical70.html".
  4. In "Save as type", select All types (*.*).
  5. Click Save.

Step 3: Open in Browser

  1. Navigate to the folder where you saved the file.
  2. Double‑click the image_attributes.html file.
  3. It will open in your default web browser.
  4. You will see images displayed with different sizes and alt text demonstrations.

📊 Image Attributes Summary

Attribute Purpose Example Best Practice
width Sets image width in pixels or percentage width="300" or style="width: 50%;" Use with height: auto; to maintain aspect ratio
height Sets image height in pixels or percentage height="200" or style="height: auto;" Let the browser calculate height automatically
alt Provides alternative text for accessibility alt="A red apple on a wooden table" Be descriptive; explain what the image shows

📊 Width and Height Combinations

Width Height Result Recommendation
Set Set Image resized exactly (may stretch) Use only if you know the exact aspect ratio
Set auto Image scales proportionally ✅ Recommended — preserves aspect ratio
Set as percentage auto Responsive image ✅ Best for responsive design
Not set Not set Image displays at original size ⚠️ May cause layout shifts

📊 Alt Text Best Practices

Good Alt Text Poor Alt Text Why
"A golden retriever puppy playing in a grassy park" "dog" Too vague; doesn't describe the scene
"The Eiffel Tower illuminated at night with a full moon" "tower" Doesn't provide enough context
"A fresh chocolate chip cookie on a cooling rack" "cookie" Missing important details
"Bar chart showing company growth from 2019 to 2025" "chart" Should describe the data being shown

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Missing alt attribute Poor accessibility and SEO Always include descriptive alt text
Using width and height that don't match aspect ratio Image becomes stretched or squashed Use height: auto; or correct ratio
Using alt="image" or alt="photo" Not descriptive enough Describe what the image actually shows
Setting both width and height as percentages May cause unpredictable sizing Use width as percentage, height as auto
Leaving alt empty for decorative images Should use alt="" for decorative images Use alt="" to hide from screen readers

📊 Observations

  • width and height attributes control the display size of images.
  • Using height: auto; with width preserves the aspect ratio.
  • alt attribute is essential for accessibility and SEO.
  • Descriptive alt text helps visually impaired users understand the content.
  • Images with incorrect width/height ratio appear distorted.
  • Using percentage widths makes images responsive.

✅ Result

You have successfully:

  • Used the height, width, and alt attributes with the <img> tag.
  • Understood the importance of maintaining aspect ratio.
  • Learned best practices for writing effective alt text.
  • Created a webpage demonstrating different image sizes.
  • Viewed the results in a browser.
📌 Important: Always include the alt attribute with descriptive text. Use height: auto; to maintain aspect ratio when setting width. This ensures your images look good and your content is accessible to everyone.
💡 Next Steps: Try creating a responsive image gallery using percentage widths. Experiment with CSS object-fit property to control how images fill their containers. Practice writing descriptive alt text for different types of images!

🎯 مقصد

ایک HTML ویب صفحہ بنانا جو height، width، اور alt صفات کو <img> ٹیگ کے ساتھ استعمال کرنے کا طریقہ ظاہر کرتا ہے۔

🛠️ آپ کو کیا چاہیے

  • Notepad++ یا کوئی بھی ٹیکسٹ ایڈیٹر
  • نتیجہ دیکھنے کے لیے ایک ویب براؤزر
  • ایک تصویری فائل (یا آن لائن تصاویر)

📖 تعارف

<img> ٹیگ تین اہم صفات استعمال کرتا ہے جو تصاویر کی نمائش کو کنٹرول کرتی ہیں:

  • width — تصویر کی چوڑائی پکسلز (یا فیصد) میں مخصوص کرتا ہے۔
  • height — تصویر کی اونچائی پکسلز (یا فیصد) میں مخصوص کرتا ہے۔
  • alt — اگر تصویر ظاہر نہ ہو سکے تو متبادل متن فراہم کرتا ہے؛ رسائی کے لیے ضروری ہے۔
💡 مشورہ: width اور height کا استعمال براؤزر کو تصویر لوڈ ہونے سے پہلے جگہ محفوظ کرنے میں مدد کرتا ہے، جس سے لے آؤٹ میں تبدیلی نہیں آتی۔ alt صفت رسائی اور SEO کے لیے ضروری ہے۔

📊 آؤٹ پٹ کا پیش منظر

🖼️ تصویری صفات: height، width، alt

📐 مختلف تصویری سائز
80x80

width="80" height="80"

150x80

width="150" height="80"

200x100

width="200" height="100"

80x120

width="80" height="120"

150x150

width="150" height="150"

📝 alt صفت کا استعمال
✅ اچھا alt متن: <img src="sunset.jpg" alt="پہاڑوں پر نارنجی اور جامنی آسمان کے ساتھ ایک خوبصورت غروب آفتاب">
✓ تصویر کے مواد کو واضح طور پر بیان کرتا ہے
❌ ناقص alt متن: <img src="sunset.jpg" alt="تصویر">
✗ بہت مبہم، تصویر کی وضاحت نہیں کرتا
❌ alt متن غائب: <img src="sunset.jpg">
✗ کوئی alt صفت نہیں - ناقص رسائی
📊 چوڑائی اور اونچائی کا رویہ

width="120" height="80"
✓ صحیح تناسب

width="120" height="120"
⚠️ بگڑی ہوئی (مسخ شدہ)

📝 مرحلہ وار: HTML صفحہ بنانا

پہلا قدم: Notepad++ کھولیں اور کوڈ لکھیں

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 70: Using height, width, and alt attributes for image tag --> <html> <head> <title>Image Attributes Demo</title> </head> <body> <h1>🖼️ تصویری صفات: height، width، alt</h1> <!-- width اور height صفات کے ساتھ تصویر --> <h2>width اور height کے ساتھ تصویر</h2> <img src="sample.jpg" alt="ایک خوبصورت منظر دکھاتی ہوئی نمونہ تصویر" width="300" height="200"> <!-- مختلف سائز کی تصاویر --> <h2>مختلف تصویری سائز</h2> <div style="display: flex; gap: 15px; flex-wrap: wrap;"> <img src="photo.jpg" alt="چھوٹی تصویر" width="80" height="80"> <img src="photo.jpg" alt="درمیانی تصویر" width="150" height="100"> <img src="photo.jpg" alt="بڑی تصویر" width="250" height="150"> </div> <!-- رسائی کے لیے alt متن کے ساتھ تصویر --> <h2>alt صفت کی اہمیت</h2> <p>جب تصویر لوڈ نہ ہو تو alt متن ظاہر ہوتا ہے:</p> <img src="nonexistent.jpg" alt="یہ تصویر لوڈ نہیں ہو سکی - alt متن ظاہر کرتا ہے" width="300" height="100"> <!-- CSS اسٹائل کے ساتھ تصویر --> <h2>CSS اسٹائل کے ساتھ تصویر</h2> <img src="sample.jpg" alt="بارڈر اور شیڈو کے ساتھ اسٹائل شدہ تصویر" width="250" height="150" style="border: 3px solid #3498db; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);"> <!-- فیصد میں چوڑائی کا استعمال --> <h2>فیصد میں چوڑائی کا استعمال</h2> <img src="sample.jpg" alt="50% چوڑائی کے ساتھ ذمہ دار تصویر" style="width: 50%; height: auto;"> </body> </html>

دوسرا قدم: فائل محفوظ کریں

  1. File → Save As… (یا Ctrl+Shift+S) پر جائیں۔
  2. ایک مقام منتخب کریں (مثلاً Desktop)۔
  3. فائل کا نام رکھیں: "image_attributes.html" یا "practical70.html"۔
  4. "Save as type" میں All types (*.*) منتخب کریں۔
  5. Save پر کلک کریں۔

تیسرا قدم: براؤزر میں کھولیں

  1. اس فولڈر میں جائیں جہاں آپ نے فائل محفوظ کی تھی۔
  2. image_attributes.html فائل پر ڈبل‑کلک کریں۔
  3. یہ آپ کے ڈیفالٹ براؤزر میں کھل جائے گی۔
  4. آپ کو مختلف سائز اور alt متن کی مثالیں کے ساتھ تصاویر نظر آئیں گی۔

📊 تصویری صفات کا خلاصہ

صفت مقصد مثال بہترین عمل
width پکسلز یا فیصد میں تصویر کی چوڑائی سیٹ کرتا ہے width="300" یا style="width: 50%;" تناسب برقرار رکھنے کے لیے height: auto; کے ساتھ استعمال کریں
height پکسلز یا فیصد میں تصویر کی اونچائی سیٹ کرتا ہے height="200" یا style="height: auto;" براؤزر کو خود بخود اونچائی کا حساب لگانے دیں
alt رسائی کے لیے متبادل متن فراہم کرتا ہے alt="لکڑی کی میز پر ایک سرخ سیب" وضاحتی بنیں؛ بتائیں کہ تصویر کیا دکھاتی ہے

📊 چوڑائی اور اونچائی کے مجموعے

چوڑائی اونچائی نتیجہ توصیف
مقرر مقرر تصویر بالکل سائز تبدیل ہوتی ہے (بگڑ سکتی ہے) صرف اس صورت میں استعمال کریں جب آپ کو صحیح تناسب معلوم ہو
مقرر auto تصویر متناسب طور پر پیمانہ کرتی ہے ✅ تجویز کردہ — تناسب محفوظ رکھتی ہے
فیصد کے طور پر مقرر auto ذمہ دار تصویر ✅ ذمہ دار ڈیزائن کے لیے بہترین
مقرر نہیں مقرر نہیں تصویر اصل سائز میں ظاہر ہوتی ہے ⚠️ لے آؤٹ میں تبدیلی کا سبب بن سکتی ہے

📊 Alt متن کے بہترین طریقے

اچھا Alt متن ناقص Alt متن کیوں
"گھاس کے پارک میں ایک سنہری ریٹریور کتے کا بچہ کھیل رہا ہے" "کتا" بہت مبہم؛ منظر کی وضاحت نہیں کرتا
"پورے چاند کے ساتھ رات میں روشن آئیفل ٹاور" "ٹاور" کافی سیاق و سباق فراہم نہیں کرتا
"کولنگ ریک پر ایک تازہ چاکلیٹ چپ کوکی" "کوکی" اہم تفصیلات غائب ہیں
"2019 سے 2025 تک کمپنی کی نمو دکھانے والا بار چارٹ" "چارٹ" دکھائے گئے ڈیٹا کی وضاحت کرنی چاہیے

📊 عام غلطیاں جن سے بچنا ہے

غلطی یہ کیوں غلط ہے صحیح طریقہ
alt صفت غائب ناقص رسائی اور SEO ہمیشہ وضاحتی alt متن شامل کریں
چوڑائی اور اونچائی کا استعمال جو تناسب سے میل نہیں کھاتا تصویر بگڑ جاتی ہے یا دب جاتی ہے height: auto; یا صحیح تناسب استعمال کریں
alt="image" یا alt="photo" کا استعمال کافی وضاحتی نہیں بیان کریں کہ تصویر اصل میں کیا دکھاتی ہے
چوڑائی اور اونچائی دونوں کو فیصد میں سیٹ کرنا پیش گوئی کے قابل سائز کا سبب بن سکتا ہے چوڑائی کو فیصد کے طور پر، اونچائی کو auto کے طور پر استعمال کریں
آرائشی تصاویر کے لیے alt خالی چھوڑنا آرائشی تصاویر کے لیے alt="" استعمال کرنا چاہیے اسکرین ریڈرز سے چھپانے کے لیے alt="" استعمال کریں

📊 مشاہدات

  • width اور height صفات تصاویر کی نمائش کے سائز کو کنٹرول کرتی ہیں۔
  • height: auto; کے ساتھ width کا استعمال تناسب کو محفوظ رکھتا ہے۔
  • alt صفت رسائی اور SEO کے لیے ضروری ہے۔
  • وضاحتی alt متن بصارت سے محروم صارفین کو مواد کو سمجھنے میں مدد کرتا ہے۔
  • غلط چوڑائی/اونچائی والی تصاویر بگڑی ہوئی نظر آتی ہیں۔
  • فیصد میں چوڑائی کا استعمال تصاویر کو ذمہ دار بناتا ہے۔

✅ نتیجہ

آپ نے کامیابی سے:

  • height، width، اور alt صفات کو <img> ٹیگ کے ساتھ استعمال کیا۔
  • تناسب کو برقرار رکھنے کی اہمیت کو سمجھا۔
  • مؤثر alt متن لکھنے کے بہترین طریقے سیکھے۔
  • مختلف تصویری سائز ظاہر کرنے والا ایک ویب صفحہ بنایا۔
  • نتائج کو براؤزر میں دیکھا۔
📌 اہم: ہمیشہ alt صفت کو وضاحتی متن کے ساتھ شامل کریں۔ width سیٹ کرتے وقت تناسب برقرار رکھنے کے لیے height: auto; استعمال کریں۔ اس سے یقینی ہوتا ہے کہ آپ کی تصاویر اچھی لگتی ہیں اور آپ کا مواد سب کے لیے قابل رسائی ہے۔
💡 اگلے اقدامات: فیصد کی چوڑائی کا استعمال کرتے ہوئے ایک ذمہ دار تصویری گیلری بنانے کی کوشش کریں۔ تصاویر کو ان کے کنٹینرز میں کیسے بھرنا ہے یہ کنٹرول کرنے کے لیے CSS object-fit پراپرٹی کے ساتھ تجربہ کریں۔ مختلف قسم کی تصاویر کے لیے وضاحتی alt متن لکھنے کی مشق کریں!
⬅ Back to Practical Notebooks