The document discusses how to add images to web pages using the <img> tag and its attributes like src, alt, width, and height. It explains that images must be in common formats like JPEG, PNG or GIF to display properly. The src attribute specifies the image URL, alt provides alternative text for accessibility, and width and height define the image dimensions in pixels. Resizing images with these attributes can result in blurry images, so it's better to resize images correctly before embedding them on pages.

1. nisa1207@gmail.com
prog_nisa@quest.edu.pk

2. Adding
Images
Adding images to a web page
Using the src, alt, width, and
height attributes
2

3. A web page with all text and no pictures isn’t much fun. The Web’s explosion
into mass popularity was due in part to the fact that there were images on
the page. Before images, the Internet was a text-only.
Images appear on web pages in two ways:
embedded in the
inline content
• Using <img>
Background
images
• Using CSS
3

4. First it’s important to know that you can’t put just any
image on a web page. In order to be displayed inline,
images must be in the GIF, JPEG, or PNG file format.
In addition to being in an appropriate format, image files
need to be named with the proper suffixes—.gif, .jpg (or
.jpeg), and .png, respectively—in order to be recognized
by the browser.
4

5. <img> Adds an inline image
The img element tells the browser, “Place an image here.” You’ve
already gotten a preview of it used to place banner graphics. You
can also place an image element right in the flow of the text at
the point where you want the image to appear, as in the following
example. Images stay in the flow of text and do not cause any line
breaks.
5

6. <p>I had been wanting to go to Tuscany
<img src="tuscany.jpg" alt="">
for a long time, and I was not disappointed.
</p>
6

7. src="URL” Source (location) of the image
The value of the src attribute is the URL of the image file. In most
cases, the images you use on your pages will reside on your server,
so you will use relative URLs to point to them.
In short, if the image is in the same directory as the HTML
document, you can just refer to the image by name in the src
attribute:
<img src="icon.gif" alt=“icon image">
<img src="/images/arrow.gif" alt="">
<img src="http://www.example.com/images/smile.gif" alt="">
7

8. alt="text“ Alternative text
Every img element must also contain an alt attribute that is used to provide
a brief description of the image for those who are not able to see it, such as
users with screen readers, braille, or even small mobile devices. Alternate
text (also referred to as alt text) should serve as a substitute for the image
content—serving the same purpose and presenting the same information.
<p>If you're <img src="happyface.gif" alt="happy"> and you know it clap
your hands.</p>
A screen reader might indicate the image by reading its alt value this way:
“If you’re image happy and you knowit clap your hands.”
8

9. If the image simply fails to load, the browser may
display the alternative text to give the user an
idea of what is missing. The handling of
alternative text is inconsistent among modern
browsers, however, as shown in Figure:
9

10. 10

11. width="number“ : Image width in pixels
height="number“ : Image height in pixels
The width and height attributes indicate the dimensions of the
image in number of pixels.
11

12. Be sure that the pixel dimensions
you specify are the actual
dimensions of the image. If the
pixel values differ from the actual
dimensions of your image, the
browser resizes the image to
match the specified values.
12

13. you should avoid doing so. Even though the image may appear
small on the page, the large image with its corresponding large file
size still needs to download. It is better to resize the image in an
image-editing program and then place it at actual size on the page.
Not only that, but resizing with attributes usually results in a
blurry and deformed image. In fact, if your images ever look fuzzy
when viewed in a browser, the first thing to check is that the width
and height values match the dimensions of the image exactly.
13

14. 14
S.No Attribute Purpose
1 Border Define the border around the image
2 Src Defines the path of image
3 Width Defines the width of image
4 Height Defines the height of image
5 Title Defines the tool tip
6 Alt Specifies extra information about an element
7 hspace Specifies the whitespace on left and right side of an image
8 Vspace specifies the whitespace on top and bottom of an image
9 Align To align image. Possible valuesTop, bottom, middle,left and right

15. 15