Scribd
Upload
20 views

HTML Part 5

html part 5

Uploaded by

vijaykharb798
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

HTML Part 5

html part 5

Uploaded by

vijaykharb798
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Images in HTML: A Simple Guide

In the early days of the web, pages were just plain text, which wasn’t very exciting.
Thankfully, we soon got the ability to add images and other types of multimedia to
webpages, making them more interesting. This guide will explain how to add basic
images using HTML and how to annotate them with captions. We'll also briefly talk
about how images in HTML relate to CSS background images and introduce other
web-based graphics.

Prerequisites:

 Basic HTML knowledge


 Understanding of file management
 Basic software installed

Goal:

Learn how to insert images into HTML, add captions, and understand the relationship
between HTML images and CSS background images.

How to Add an Image to a Webpage

To insert a simple image into a webpage, use the <img> element. This is a void
element, meaning it doesn’t have an end tag or child elements. Two key attributes are
needed for it to work:

1. src: The URL of the image file.


2. alt: Text describing the image for situations where it cannot be displayed.

For example, if your image is named dinosaur.jpg and is in the same folder as your
HTML page, you can add it like this:

html
Copy code
<img src="dinosaur.jpg" alt="Dinosaur" />

If the image is inside a subfolder called images, you would write:

html
Copy code
<img src="images/dinosaur.jpg" alt="Dinosaur" />

If your image is hosted on a website, you can use an absolute URL:

html
Copy code
<img src="https://example.com/images/dinosaur.jpg" alt="Dinosaur" />
Tip: Use descriptive filenames like dinosaur.jpg instead of generic names like
img123.png, as it helps with SEO (Search Engine Optimization).

Avoid Hotlinking

Hotlinking is when you link to an image on someone else’s website without their
permission. It’s considered unethical because it uses their bandwidth. Always host
your own images on your own server or get permission before using images from
other websites.

Alt Text: Why It's Important

The alt attribute provides a description of the image, useful when:

 The image cannot be displayed (for example, if there’s an error or slow connection).
 A visually impaired user is using a screen reader.
 The image is disabled to save data or reduce distractions (common on mobile devices).

For instance:

html
Copy code
<img src="images/dinosaur.jpg" alt="A large dinosaur skeleton with sharp teeth" />

If the image cannot be shown, the browser will display the alt text instead.

Note: Write alt text that describes the image’s purpose. If the image is purely
decorative, use alt="" so screen readers can skip it.

Width and Height Attributes

You can set the width and height of an image using the width and height attributes. For
example:

html
Copy code
<img src="dinosaur.jpg" alt="A large dinosaur skeleton" width="400" height="341" />

By setting these attributes, the browser knows how much space to allocate for the
image while loading, even if the image itself hasn’t been downloaded yet.

Example: Image with Text


Here’s an example with an image and some text below it:

html
Copy code
<h1>Images in HTML</h1>
<img src="dinosaur.jpg" alt="A dinosaur skeleton" title="T-Rex at the Museum" />
<blockquote>
<p>
Imagine walking through a world of mystery, where ancient creatures once roamed
the earth. Now, only their skeletons remain, telling stories of a time long gone.
</p>
<footer>- A reflection on ancient life</footer></blockquote>

You might also like