EZ

EZNotes

🖼️ Practical 69: HTML code for adding image to a webpage

Learn how to add images to a webpage using the <img> tag with attributes like src, alt, width, and height.

🎯 Aim

To create an HTML webpage that demonstrates how to add images using the <img> tag with attributes like src, alt, width, and height.

🛠️ 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 is used to embed images in an HTML webpage. It is a self-closing tag (no closing tag needed). The main attributes are:

  • src — specifies the path to the image file (URL or local path)
  • alt — provides alternative text if the image cannot be displayed
  • width — sets the width of the image in pixels
  • height — sets the height of the image in pixels
💡 Tip: Always use the alt attribute for accessibility. It helps screen readers describe the image to visually impaired users and is also displayed if the image fails to load.

📊 Preview of the Output

🖼️ Adding Images to a Webpage

📸 Sample Images
🌄 Image 1

src: "image1.jpg"

Width: 200px, Height: 120px

🌿 Image 2

src: "image2.png"

Width: 200px, Height: 120px

🌅 Image 3

src: "image3.gif"

Width: 200px, Height: 120px

🌟 Image 4

src: "image4.webp"

Width: 200px, Height: 120px

📝 Using the alt Attribute
✅ Correct: <img src="photo.jpg" alt="A beautiful sunset over the mountains">
❌ Incorrect: <img src="photo.jpg"> (missing alt text)
📐 Image Sizing

80x80 (square)

150x80 (wide)

80x120 (tall)

📝 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 69: Adding Image to a Webpage --> <html> <head> <title>Adding Images Demo</title> </head> <body> <h1>🖼️ Adding Images to a Webpage</h1> <!-- Basic image with src and alt --> <h2>Basic Image</h2> <img src="sample.jpg" alt="A sample image"> <!-- Image with width and height attributes --> <h2>Image with Width and Height</h2> <img src="sample.jpg" alt="Resized image" width="200" height="150"> <!-- Image with CSS styling --> <h2>Image with CSS Style</h2> <img src="sample.jpg" alt="Styled image" style="width: 250px; height: auto; border: 3px solid #3498db; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);"> <!-- Multiple images in a row --> <h2>Multiple Images</h2> <div style="display: flex; gap: 15px; flex-wrap: wrap;"> <img src="photo1.jpg" alt="Photo 1" width="150" height="100"> <img src="photo2.jpg" alt="Photo 2" width="150" height="100"> <img src="photo3.jpg" alt="Photo 3" width="150" height="100"> </div> <!-- Image as a link --> <h2>Image as a Clickable Link</h2> <a href="https://example.com"> <img src="link-image.jpg" alt="Clickable image" width="200" height="120"> </a> </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: "images_demo.html" or "practical69.html".
  4. In "Save as type", select All types (*.*).
  5. Click Save.

Step 3: Add Images

  1. Create a folder and place your image files (e.g., sample.jpg, photo1.jpg, etc.) in the same folder as your HTML file.
  2. Alternatively, use online image URLs in the src attribute.

Step 4: Open in Browser

  1. Navigate to the folder where you saved the file.
  2. Double‑click the images_demo.html file.
  3. It will open in your default web browser.
  4. You will see all the images displayed with different attributes.

📊 <img> Tag Attributes

Attribute Purpose Example
src Specifies the image file path or URL src="image.jpg"
alt Alternative text for accessibility alt="A beautiful sunset"
width Sets image width in pixels width="300"
height Sets image height in pixels height="200"
title Tooltip text on mouse hover title="Click to enlarge"

📊 Image Source Types

Source Type Example Explanation
Local File src="image.jpg" Image in same folder as HTML file
Subfolder src="images/photo.jpg" Image in a subfolder called "images"
Absolute Path src="C:/Users/Pictures/photo.jpg" Full file path (not recommended)
Online URL src="https://example.com/image.jpg" Image hosted on the web

📊 CSS Styling for Images

<!-- CSS styling examples for images --> <!-- Rounded corners --> <img src="image.jpg" style="border-radius: 15px;"> <!-- Circular image --> <img src="image.jpg" style="width: 150px; height: 150px; border-radius: 50%; object-fit: cover;"> <!-- Border and shadow --> <img src="image.jpg" style="border: 3px solid #3498db; box-shadow: 0 4px 8px rgba(0,0,0,0.2);"> <!-- Opacity effect (hover) --> <img src="image.jpg" style="opacity: 0.7; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.7'">

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Forgetting alt attribute Poor accessibility Always add alt text
Wrong file path Image won't display Check file path and extension
Not closing the tag <img> is self-closing Use <img ...> not <img>...</img>
Distorted image Width and height mismatch Use height: auto; or maintain aspect ratio
Using spaces in file names May cause loading issues Use underscores or hyphens (image_file.jpg)

📊 Observations

  • The <img> tag is self-closing and does not need a closing tag.
  • The src attribute is required — without it, the image won't load.
  • The alt attribute is important for accessibility and SEO.
  • You can use CSS to style images with borders, shadows, rounded corners, and more.
  • Images can be used as links by wrapping them in an <a> tag.
  • Proper image sizing prevents distortion and improves page load speed.

✅ Result

You have successfully:

  • Created an HTML webpage that adds images using the <img> tag.
  • Used src, alt, width, and height attributes.
  • Applied CSS styling to images.
  • Learned about different image source types.
  • Viewed the images in a browser.
📌 Important: Always use the alt attribute for accessibility and SEO. Use meaningful, descriptive text that explains what the image shows. This helps users with visual impairments and search engines understand your content.
💡 Next Steps: Try adding images from the web using online URLs. Experiment with different CSS effects like filters, transitions, and animations. Create a gallery with multiple images arranged in a grid using CSS Flexbox or Grid!

🎯 مقصد

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

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

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

📖 تعارف

<img> ٹیگ HTML ویب صفحے میں تصاویر شامل کرنے کے لیے استعمال ہوتا ہے۔ یہ ایک خود بند ہونے والا ٹیگ ہے (اسے بند کرنے والے ٹیگ کی ضرورت نہیں)۔ اس کی اہم صفات یہ ہیں:

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

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

🖼️ ویب صفحے میں تصاویر شامل کرنا

📸 نمونہ تصاویر
🌄 تصویر 1

src: "image1.jpg"

چوڑائی: 200px، اونچائی: 120px

🌿 تصویر 2

src: "image2.png"

چوڑائی: 200px، اونچائی: 120px

🌅 تصویر 3

src: "image3.gif"

چوڑائی: 200px، اونچائی: 120px

🌟 تصویر 4

src: "image4.webp"

چوڑائی: 200px، اونچائی: 120px

📝 alt صفت کا استعمال
✅ درست: <img src="photo.jpg" alt="پہاڑوں پر ایک خوبصورت غروب آفتاب">
❌ غلط: <img src="photo.jpg"> (alt متن موجود نہیں)
📐 تصویر کا سائز

80x80 (مربع)

150x80 (چوڑا)

80x120 (لمبا)

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

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

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 69: Adding Image to a Webpage --> <html> <head> <title>Adding Images Demo</title> </head> <body> <h1>🖼️ ویب صفحے میں تصاویر شامل کرنا</h1> <!-- بنیادی تصویر --> <h2>بنیادی تصویر</h2> <img src="sample.jpg" alt="ایک نمونہ تصویر"> <!-- چوڑائی اور اونچائی کے ساتھ تصویر --> <h2>چوڑائی اور اونچائی کے ساتھ تصویر</h2> <img src="sample.jpg" alt="سائز تبدیل شدہ تصویر" width="200" height="150"> <!-- CSS اسٹائل کے ساتھ تصویر --> <h2>CSS اسٹائل کے ساتھ تصویر</h2> <img src="sample.jpg" alt="اسٹائل شدہ تصویر" style="width: 250px; height: auto; border: 3px solid #3498db; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);"> <!-- ایک قطار میں متعدد تصاویر --> <h2>متعدد تصاویر</h2> <div style="display: flex; gap: 15px; flex-wrap: wrap;"> <img src="photo1.jpg" alt="تصویر 1" width="150" height="100"> <img src="photo2.jpg" alt="تصویر 2" width="150" height="100"> <img src="photo3.jpg" alt="تصویر 3" width="150" height="100"> </div> <!-- لنک کے طور پر تصویر --> <h2>کلک کرنے کے قابل لنک کے طور پر تصویر</h2> <a href="https://example.com"> <img src="link-image.jpg" alt="کلک کرنے کے قابل تصویر" width="200" height="120"> </a> </body> </html>

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

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

تیسرا قدم: تصاویر شامل کریں

  1. ایک فولڈر بنائیں اور اپنی تصویری فائلیں (مثلاً sample.jpg، photo1.jpg وغیرہ) کو اپنی HTML فائل والے فولڈر میں رکھیں۔
  2. متبادل طور پر، src صفت میں آن لائن تصویری URLs استعمال کریں۔

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

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

📊 <img> ٹیگ کی صفات

صفت مقصد مثال
src تصویری فائل کا راستہ یا URL مخصوص کرتا ہے src="image.jpg"
alt رسائی کے لیے متبادل متن alt="ایک خوبصورت غروب آفتاب"
width پکسلز میں تصویر کی چوڑائی سیٹ کرتا ہے width="300"
height پکسلز میں تصویر کی اونچائی سیٹ کرتا ہے height="200"
title ماؤس ہوور پر ٹولٹپ متن title="بڑا کرنے کے لیے کلک کریں"

📊 تصویری ماخذ کی اقسام

ماخذ کی قسم مثال وضاحت
مقامی فائل src="image.jpg" HTML فائل والے فولڈر میں تصویر
ذیلی فولڈر src="images/photo.jpg" "images" نامی ذیلی فولڈر میں تصویر
مکمل پاتھ src="C:/Users/Pictures/photo.jpg" مکمل فائل پاتھ (تجویز نہیں)
آن لائن URL src="https://example.com/image.jpg" ویب پر ہوسٹ کردہ تصویر

📊 تصاویر کے لیے CSS اسٹائلنگ

<!-- تصاویر کے لیے CSS اسٹائلنگ کی مثالیں --> <!-- گول کونے --> <img src="image.jpg" style="border-radius: 15px;"> <!-- گول تصویر --> <img src="image.jpg" style="width: 150px; height: 150px; border-radius: 50%; object-fit: cover;"> <!-- بارڈر اور شیڈو --> <img src="image.jpg" style="border: 3px solid #3498db; box-shadow: 0 4px 8px rgba(0,0,0,0.2);"> <!-- دھندلاپن اثر (ہوور) --> <img src="image.jpg" style="opacity: 0.7; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.7'">

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

غلطی یہ کیوں غلط ہے صحیح طریقہ
alt صفت بھول جانا خراب رسائی ہمیشہ alt متن شامل کریں
غلط فائل پاتھ تصویر ظاہر نہیں ہوگی فائل پاتھ اور ایکسٹینشن چیک کریں
ٹیگ بند نہ کرنا <img> خود بند ہونے والا ہے <img ...> استعمال کریں، <img>...</img> نہیں
بگڑی ہوئی تصویر چوڑائی اور اونچائی کا میل نہ ہونا height: auto; استعمال کریں یا تناسب برقرار رکھیں
فائل ناموں میں اسپیس کا استعمال لوڈنگ کے مسائل کا سبب بن سکتا ہے انڈر سکور یا ہائفن استعمال کریں (image_file.jpg)

📊 مشاہدات

  • <img> ٹیگ خود بند ہونے والا ہے اور اسے بند کرنے والے ٹیگ کی ضرورت نہیں۔
  • src صفت ضروری ہے — اس کے بغیر تصویر لوڈ نہیں ہوگی۔
  • alt صفت رسائی اور SEO کے لیے اہم ہے۔
  • آپ تصاویر کو CSS کے ساتھ بارڈرز، شیڈوز، گول کونوں اور مزید کے ساتھ اسٹائل کر سکتے ہیں۔
  • تصاویر کو لنک کے طور پر استعمال کیا جا سکتا ہے انہیں <a> ٹیگ میں لپیٹ کر۔
  • مناسب تصویر کا سائز بگاڑ کو روکتا ہے اور صفحہ لوڈ کی رفتار کو بہتر بناتا ہے۔

✅ نتیجہ

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

  • <img> ٹیگ کا استعمال کرتے ہوئے تصاویر شامل کرنے والا ایک HTML ویب صفحہ بنایا۔
  • src، alt، width، اور height صفات کا استعمال کیا۔
  • تصاویر پر CSS اسٹائلنگ کا اطلاق کیا۔
  • مختلف تصویری ماخذ کی اقسام کے بارے میں سیکھا۔
  • تصاویر کو براؤزر میں دیکھا۔
📌 اہم: رسائی اور SEO کے لیے ہمیشہ alt صفت استعمال کریں۔ معنی خیز، وضاحتی متن استعمال کریں جو بتاتا ہے کہ تصویر کیا دکھاتی ہے۔ یہ بصارت سے محروم صارفین اور سرچ انجنوں کو آپ کے مواد کو سمجھنے میں مدد کرتا ہے۔
💡 اگلے اقدامات: آن لائن URLs کا استعمال کرتے ہوئے ویب سے تصاویر شامل کرنے کی کوشش کریں۔ مختلف CSS اثرات جیسے فلٹرز، ٹرانزیشنز، اور اینیمیشنز کے ساتھ تجربہ کریں۔ CSS Flexbox یا Grid کا استعمال کرتے ہوئے ایک گیلری بنائیں جس میں گرڈ میں ترتیب دی گئی متعدد تصاویر ہوں!
⬅ Back to Practical Notebooks