Skip to main content

Python print() Function

When you start learning Python, one of the first things you need to learn is how to display information on the screen. For example, you might want to display: A welcome message. Your name and age. The result of a mathematical calculation. Student marks and results. Information generated by a Python program. Python provides a built-in function called print() for displaying information. The print() function is one of the simplest and most frequently used functions in Python. It helps programmers display information while testing programs, solving problems, and developing applications. In this article, we will learn how to use print() with practical examples and their outputs. 1. What Is the print() Function in Python? The print() function is a built-in Python function that displays information in the output area, usually the terminal or console. Let's look at a simple example. print("Hello, World!") Output: Hello, World! In this example, Python displays the text Hello,...
Post a Comment

HTML Images – Displaying Pictures in Webpages

Images make websites attractive, interactive, and visually appealing. Almost every modern website uses images for:

  • Logos

  • Banners

  • Products

  • Icons

  • Advertisements

  • Galleries

  • Backgrounds

HTML provides the <img> tag to display images on webpages.

In this article, we will learn:

  • HTML image tag

  • Image attributes

  • Image paths

  • Image sizes

  • Alternative text

  • Image links

  • Background images

  • Image mapping

  • Responsive images

  • Practical examples

What is an HTML Image?

An HTML image is a picture displayed on a webpage using the <img> tag.

The <img> tag is an empty tag, meaning it does not require a closing tag.

Syntax of HTML Image

<img src="image.jpg" alt="Sample Image">

Important Attributes of <img>

AttributePurpose
srcSpecifies image path
altAlternative text
widthImage width
heightImage height
titleTooltip text

1. The src Attribute

The src attribute specifies the image location.

Example:

<img src="flower.jpg">

Browser loads and displays the image file.

2. The alt Attribute

The alt attribute displays text if the image cannot load.

Example:

<img src="flower.jpg" alt="Beautiful Flower">

Why alt is Important

  • Improves accessibility

  • Helps visually impaired users

  • Useful when image fails to load

  • Improves SEO

Search engines like Google analyze alt text for image understanding.

3. Width and Height

These attributes control image size.

Example:

<img src="flower.jpg" width="300" height="200">

Complete Example Program

<!DOCTYPE html>
<html>

<head>
    <title>HTML Images</title>
</head>

<body>

    <h1>My Image</h1>

    <img src="nature.jpg"
         alt="Nature Image"
         width="400"
         height="250">

</body>

</html>

Image File Formats Supported by HTML

FormatExtension
JPEG.jpg, .jpeg
PNG.png
GIF.gif
SVG.svg
WebP.webp

JPEG Images

Best for:

  • Photographs

  • Large colorful images

Example:

photo.jpg

PNG Images

Best for:

  • Transparent backgrounds

  • Logos

  • Icons

Example:

logo.png

GIF Images

Best for:

  • Simple animations

Example:

animation.gif

SVG Images

Best for:

  • Scalable vector graphics

  • Logos

  • Icons

Example:

icon.svg

Image Paths in HTML

There are two main types of image paths.

Path TypeDescription
Relative PathLocal file location
Absolute PathFull internet URL

Relative Path Example

<img src="images/photo.jpg">

Image is stored inside the website folder.

Absolute Path Example

<img src="https://example.com/photo.jpg">

Image loads from the internet.

Folder Structure Example

Project Folder
│
├── index.html
└── images
      └── flower.jpg

HTML code:

<img src="images/flower.jpg">

Image Title Attribute

The title attribute shows tooltip text.

Example:

<img src="flower.jpg"
     title="Beautiful Flower">

Tooltip appears when mouse hovers over image.

Image as a Link

Images can work as clickable links.

Example:

<a href="https://www.youtube.com">
    <img src="youtube.png" width="200">
</a>

This creates a clickable image linking to YouTube.

Animated GIF Example

<img src="funny.gif" width="300">

GIF images automatically animate.

HTML Figure and Figcaption

HTML5 introduced semantic image tags.

TagPurpose
<figure>Image container
<figcaption>Image caption

Example

<figure>

    <img src="mountain.jpg" width="400">

    <figcaption>
        Beautiful Mountain View
    </figcaption>

</figure>

Advantages of Figure Tag

  • Better structure

  • Improved accessibility

  • Professional webpage design

Background Images in HTML

Images can be used as webpage backgrounds.

Example:

<body background="background.jpg">

However, modern websites usually use CSS for background images.

Responsive Images

Responsive images automatically adjust according to screen size.

Example:

<img src="nature.jpg"
     width="100%">

The image adjusts according to browser width.

Importance of Responsive Images

Necessary for:

  • Mobile phones

  • Tablets

  • Laptops

  • Smart TVs

Companies like Amazon and Netflix use responsive images extensively.

Lazy Loading Images

Lazy loading improves website speed.

Example:

<img src="photo.jpg" loading="lazy">

Images load only when needed.

Benefits of Lazy Loading

  • Faster webpage loading

  • Reduced internet usage

  • Better performance

HTML Image Map

Image maps create clickable areas inside images.

Example

<img src="computer.jpg"
     usemap="#workmap">

<map name="workmap">

    <area shape="rect"
          coords="34,44,270,350"
          href="computer.html">

</map>

Common Shapes in Image Maps

ShapeDescription
rectRectangle
circleCircle
polyPolygon

Complete Practical Program

<!DOCTYPE html>
<html>

<head>
    <title>HTML Images</title>
</head>

<body>

    <h1>Welcome to My Gallery</h1>

    <figure>

        <img src="nature.jpg"
             alt="Nature"
             width="400"
             title="Nature View">

        <figcaption>
            Beautiful Nature
        </figcaption>

    </figure>

    <br>

    <a href="https://www.google.com">

        <img src="google.png"
             width="200">

    </a>

</body>

</html>

Common Mistakes Beginners Make

1. Wrong File Path

Wrong:

<img src="flower.jp">

Correct:

<img src="flower.jpg">

2. Forgetting alt Attribute

Wrong:

<img src="photo.jpg">

Better:

<img src="photo.jpg" alt="Student Photo">

3. Using Very Large Images

Large images slow websites.

Always optimize image size.

4. Distorted Images

Wrong size combinations distort images.

Bad example:

<img src="photo.jpg"
     width="500"
     height="50">

Image Optimization Tips

  • Compress large images

  • Use modern formats like WebP

  • Use proper dimensions

  • Use lazy loading

  • Use responsive design

Advantages of HTML Images

  • Makes websites attractive

  • Improves user engagement

  • Enhances visual communication

  • Helps branding

  • Improves understanding

Real-Life Uses of Images

Images are used in:

  • Social media

  • E-commerce websites

  • Educational platforms

  • News websites

  • Blogs

  • Online advertisements

Platforms like Instagram, Pinterest, and Facebook rely heavily on images.

Conclusion

HTML images are essential for modern webpage design. They improve appearance, communication, and user experience.

Comments

Post a Comment

Popular posts from this blog

Understanding Comments in Java: A Beginner’s Guide

When learning Java programming, one of the first concepts you’ll come across is comments . Comments may not affect how a program runs, but they play a crucial role in making code more understandable, readable, and maintainable. Let’s dive deeper into what comments are, why they’re important, and the different types of comments in Java. What are Comments in Java? A comment in Java is a piece of text written within a program that is ignored by the compiler . In other words, comments are notes for humans, not instructions for machines. They help developers explain the purpose of code, describe logic, or temporarily disable certain lines of code without deleting them. Why are Comments Important? 📌 Readability – Comments make code easier to understand for you and others. 📌 Maintenance – When you revisit your code after months, comments remind you what you were doing. 📌 Collaboration – In team projects, comments explain code to fellow developers. 📌 Debugging – You c...
Post a Comment
Read more

Java Program to Check Voting Eligibility

In this program, we’ll take the user’s age as input and check whether the person is eligible to vote or not. In India, the minimum age required to vote is 18 years . 💻 Program Code // Java Program to Check Voting Eligibility import java.util.Scanner; public class VotingEligibility { public static void main(String[] args) { // Create Scanner object to take input from user Scanner sc = new Scanner(System.in); // Ask user to enter age System.out.print("Enter your age: "); int age = sc.nextInt(); // Check eligibility if (age >= 18) { System.out.println("You are eligible to vote."); } else { System.out.println("You are not eligible to vote yet."); System.out.println("You can vote after " + (18 - age) + " year(s)."); } sc.close(); // Close the scanner } } 🧠 Explanation import java.util.Scanner; → Imp...
Post a Comment
Read more

Java Program to Calculate Total Marks and Average of Five Subjects

💡 Program Explanation In this program: The user will input marks of five subjects . The program will calculate the total marks and average . It will then display both results clearly. 🧑‍💻 Java Code: // Java Program to Calculate Total Marks and Average of Five Subjects import java.util.Scanner; // Importing Scanner class for user input public class TotalAndAverage { public static void main(String[] args) { // Creating Scanner object to take input from user Scanner sc = new Scanner(System.in); // Declaring variables for five subjects double subject1, subject2, subject3, subject4, subject5; // Taking marks input for each subject System.out.print("Enter marks of Subject 1: "); subject1 = sc.nextDouble(); System.out.print("Enter marks of Subject 2: "); subject2 = sc.nextDouble(); System.out.print("Enter marks of Subject 3: "); subject3 = sc.nextDo...
Post a Comment
Read more