HTML BOOT CAMP

Chapter 5Rules and

ImagesKirkwood Continuing Education

© Copyright 2015, Fred McClurg All Rights Reserved

2

The <hr> Tag

Description: Inserts a horizontal rule.

HTML Syntax:<hr>

XHTML Syntax:<hr />

Chapter 05 > Hr Tag

3

The <hr> Tag

Syntax:<hr attribute="value">

Attribute Valuealign left, right, centersize Rule thickness (e.g.

5px)width Rule length (e.g. 25%)noshade 2D non-shaded rule

4

Image Formats

Only a few image formats are supported on the web:

GIF (Graphics Interchange Format) JPEG (Joint Photographic Experts

Group) PNG (Portable Network Graphics) SVG (Scalable Vector Graphics)

5

GIF Format Advantages

Graphics Interchange Format (GIF)

Advantages:1. Compatible with most browsers2. Compression is “lossless”3. Supports interlacing4. Supports transparency (GIF89a)5. Supports animation (GIF89a)

6

GIF Format Disadvantages

Graphics Interchange Format (GIF)

Disadvantages:1. Supports maximum of 256 colors (8-

bit)2. Uses patented compression

technology

7

PNG Format Advantages

Portable Network Graphics (PNG)

History: In 1993 Unisys decided to enforce patent on compression technology and collect royalties. Working group lead by Thomas Boutell developed PNG as an open alternative.

8

JPEG Format Advantages

Joint Expert Group (JPEG)

Advantages:1. Non-proprietary format2. 16 million colors (24-bit)3. Compression can be specified

Recommended use:Photographs

9

JPEG Format Disadvantages

Joint Expert Group (JPEG)

Disadvantages:1. Does not support transparency2. Compression is “lossy”3. Does not support animation

10

PNG Format Advantages

Portable Network Graphics (PNG)

Advantages:1. Non-proprietary format2. 16 million colors (24-bit)3. Compression is “lossless”4. Supports 2D interlacing5. Supports transparency

11

PNG Format Disadvantages

Portable Network Graphics (PNG)

Disadvantages:1. Does not support animation

12

The <img> Tag

Description:Displays an image

HTML Syntax:<img src="image.png">

XHTML Syntax:<img src="image.png" /><img src="image.png"></img>

Chapter 05 > Img Tag

13

<img> Tag Attributes

Common Attributes:

Attributes Descriptionalt Used when images are disabled

or unavailable. Also used by screen reader (accessibility)

title Displayed as popup text upon hover

align Controls how image is positioned in relation to text (left, right, center) (not HTML5)

14

<img> Tag Attributes

Common Attributes:

Attributes Descriptionborder Renders margin around imagewidth Sets the image widthheight Sets the image heightalign Controls how the image is

positioned in relation to text (left, right, center) (not HTML5)

src URL of image

15

Improving Image Display

The images on your page will often be the single most network-bandwidth hog. There are several things you can do to speed up the display of images.

1. Reuse images (especially icons)2. Divide large documents into smaller

pages3. Link large a image via a thumbnail4. Specify the image height and width

16

The <svg> Tag

Your first SVG image:<svg height="200" width="200"> <circle cx="100" cy="100" r="80" stroke="black" stroke-width="4" fill="red" /> You should see a red circle. No SVG support in browser.</svg>

Chapter 05 > Svg Tag

17

SVG AdvantagesSVG format has some advantages over traditional raster formats:

1. Scalable: Can be scaled to any resolution without degradation of quality because it is a vector format.

2. Smaller: Smaller file size mean faster download time.

3. Scripting: The capability for dynamic and animated images exist.

4. Interactive: Images can be “clickable”.5. Text Format: SVG language is written in

plain text.

18

More SVG AdvantagesOther SVG format advantages include:

6. Styling: SVG files can be changed with CSS (e.g. font, color, etc.)

7. Selectable Text: Text in image can be selected, copied, and pasted.

8. Searchable Text: Text content can be searched and displayed in multiple languages.

9. Accessible: Screen reader can process text for disabled or sight impaired users.

10.Open Standard: SVG standard is an open format being developed by multiple industries in the consortium.

19

<body> “bgcolor” Attributes

Description: Sets the background color of the document (not HTML5).

Example:<body bgcolor="lemonchiffon" text="blue"> ...</body>

Chapter 05 > bgcolor Attribute

20

<body> “background” Attributes

Description: Specifies a background image (not HTML5).

Example:<body background="images/brick.png"> ...</body> Chapter 05 > background Attribute

Chapter 05 > background Horiz Ramp

Chapter 05 > background Vert Ramp

21

<body> “link” Attributes

Description: The link attributes control the colors of links (not HTML5).

o link: a link not yet visitedo vlink: a link already visitedo alink: an active link (e.g. link selected by

user when mouse is pressed

Example:<body link="red" vlink="magenta" alink="green">