Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) – img element with attributes: src attribute : Specifies the location of the image file width and height attributes: Pixels (“picture elements”) alt attribute : the text will be displayed if the browser could not display the image.

HTML The Tag and the Src Attribute Syntax for defining an image:

Insert an image from another folder or another server

Align an image within the text

Use an image as a link.

Creating and Using Image Maps (1) Designate certain areas of an image (called hotspots) as links – Element map Attribute id identifies the image map – Element img Attribute usemap refers the map by id. – Example:..

Creating and Using Image Maps (2) Element area defines hotspot – Attribute shape and coords Specify the hotspot’s shape and coordinates Rectangular ( shape = “rect” ) Polygon ( shape = “poly” ) Circle ( shape = “circle” ) – Attribute href Specifies the link’s target. – Attribute alt Provides alternative text for the link.

To create an image map, with clickable regions. Each of the regions is a hyperlink

add style information into the section

External Style Sheet use the tag to link to an external style sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the section:

Internal Style Sheet An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the section of an HTML page, by using the tag, like this: body {background-color:yellow} p {color:blue}

Inline Styles An inline style can be used if a unique style is to be applied to one single occurrence of an element. To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph: This is a paragraph.