HTML Images

WEB [email protected]

[email protected]

2

OUTLINES

Adding images to a web page

Using the src, alt, width, and

height attributes

3

ADDING IMAGESA 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

4

FIRST, A WORD ON IMAGE FORMATSFirst 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.

5

THE IMG ELEMENT<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.

6

THE IMG ELEMENT<p>I had been wanting to go to Tuscany

<img src="tuscany.jpg" alt="">

for a long time, and I was not disappointed.

</p>

7

PROVIDING THE LOCATION WITH SRCsrc="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="">

8

PROVIDING ALTERNATE TEXT WITH ALTalt="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 know it clap your hands.”

9

PROVIDING ALTERNATE TEXT WITH ALTIf 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:

10

PROVIDING ALTERNATE TEXT WITH ALT

11

PROVIDING WIDTH AND HEIGHT DIMENSIONSwidth="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.

12

MATCH VALUES WITH ACTUAL PIXEL SIZEBe 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.

13

MATCH VALUES WITH ACTUAL PIXEL SIZEyou 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.

14

IMG ATTRIBUTESS.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

ELEMENT REVIEW: IMAGES

Education

HTML Images