Adding Images to a Webpage

Yaser Rahmati | یاسر رحمتی

To add images to a webpage in HTML, you use the <img> tag. This tag is self-closing and doesn't require an ending tag. The most important attributes for the <img> tag are:

  • src: Specifies the path to the image.

  • alt: Provides alternative text for the image if it cannot be displayed.

  • width and height: Define the dimensions of the image (optional).

Here’s how to add images to your webpage:

Basic Structure

<img src="path-to-image.jpg" alt="Description of image">

Example 1: Adding a Local Image

If the image is saved in the same folder as your HTML file:

<img src="myImage.jpg" alt="A description of the image">

Example 2: Adding an Image from a URL

You can also load an image directly from the internet by providing its URL:

<img src="https://example.com/image.jpg" alt="A description of the image">

Example 3: Specifying Image Size

You can set the image’s width and height (in pixels) like this:

<img src="myImage.jpg" alt="A description of the image" width="300" height="200">

Example 4: Responsive Images

To make an image responsive (automatically scale with screen size), you can use CSS or the style attribute in HTML:

<img src="myImage.jpg" alt="A description of the image" style="max-width: 100%; height: auto;">

This will ensure the image adjusts according to the size of the viewport (e.g., mobile screens).

Example 5: Image with a Link

To make the image clickable (linking to another webpage), wrap it inside an anchor <a> tag:

<a href="https://example.com">
  <img src="myImage.jpg" alt="A description of the image" width="300" height="200">
</a>

Putting it All Together

Here's a full example:

<!DOCTYPE html>
<html>
<head>
    <title>Adding Images to a Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    
    <!-- Local Image -->
    <img src="myImage.jpg" alt="A beautiful view of nature" width="500" height="300">

    <!-- Online Image -->
    <img src="https://example.com/image.jpg" alt="An example image" style="max-width: 100%; height: auto;">

    <!-- Clickable Image -->
    <a href="https://example.com">
        <img src="myImage.jpg" alt="Click to visit Example.com" width="300" height="200">
    </a>
</body>
</html>

Keywords

HTML, Hypertext Markup Language, Tags, Elements, Attributes, Head, Body, Paragraph, Heading, Title, Meta, Link, Image, Anchor, Hyperlink, List, Table, Form, Input, Button, CSS, Class, ID, Inline, Block, Div, Span, Script, Styles, Font, Color, Background, Margin, Padding, Border, Doctype, HTML5, Video, Audio, Canvas, SVG

External Links

🌐 Personal Website 📄 Resume 🎥 Video Archive 💼 Finance Blog 🔐 Network & Security Notebook 🎬 Aparat Channel

PreviousWorking with LinksNextEmbedding Videos and Audio

Last updated