Adding Images to a Webpage
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.widthandheight: 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
Last updated