HTML Practice Exercise #4

In this and subsequent lessons you will be expanding your knowledge of HTML codes through a series of HTML practice
exercises. These exercises, used in conjunction with the assignments, will culminate in a complete web site.

In this exercise, you will learn how to add a horizontal rule (line), add to your CSS knowledge, describe the different types
of images found on the web, and add images to a web page.

The Horizontal Rule Element – configures a horizontal line on a web page. Self-closing tag.

Example: <hr />

The CSS border Property

· Configures a border on the top, right, bottom, and left sides of an element.
· Consists of

o border-width

o border-style

o border-color

· Example
h2 { border: 2px solid #ff0000 }

CSS Borders: Block / Inline Elements

· Block element

o default width of element content extends to browser margin (or specified width)

· Inline element
o Border closely outlines the element content
· Example
h2 { border: 2px solid #ff0000; }
a { border: 2px solid #ff0000; }

Browser Display Can Vary

Configuring Specific Sides of a Border

· Use CSS to configure a line on one or more sides of an element.

o border-bottom

o border-left

o border-right

o border-top

· Example

h2 { border-bottom: 2px solid #ff0000 }

The CSS padding Property

· Configures empty space between the content of the HTML element and the border.
· Set to 0px by default.
Example
h2 { border: 2px solid #ff0000;
padding: 5px; }

No padding configured:

Configuring Padding on Specific Sides of an Element

 · Use CSS to configure padding on one or more sides of an element.

o padding-bottom

o padding-left

o padding-right

o padding-top

· Example
h2 { border: 2px solid #ff0000;
background-color: #cccccc;
padding-left: 5px;
padding-bottom: 10px;
padding-top: 10px;}

CSS padding Property Shorthand: two values

· Two numeric values or percentages

o first value configures top and bottom padding

o the second value configures left and right padding

· Example
h2 { border: 2px solid #ff0000;
background-color: #cccccc;
padding: 20px 10px;
}

CSS padding Property Shorthand: four values

· Four numeric values or percentages

o Configure top, right, bottom, and left padding

· Example

h2 { border: 2px solid #ff0000;

width: 250px;
background-color: #cccccc;
padding: 30px 10px 5px 20px;
}

Types of Graphics

GIF
· Graphics Interchange Format
· Best used for line art and logos
· Maximum of 256 colors
· One color can be configured as transparent
· Can be animated
· Uses lossless compression
· Can be interlaced

JPEG
· Joint Photographic Experts Group
· Best used for photographs
· Up to 16.7 million colors
· Use lossy compression
· Cannot be animated
· Cannot be made transparent
· Progressive JPEG – similar to interlaced display
PNG
· Portable Network Graphic
· Support millions of colors
· Support multiple levels of transparency
(but browsers do not -- so limit to one transparent color for Web display)
· Support interlacing
· Use lossless compression
· Combines the best of GIF & JPEG
· Browser support is growing

Adding Images – The Image element

The <img /> tag

The <img /> tag is used for placing images onto your Web pages. Unlike most other HTML tags, it should not be opened
and closed (meaning that you should never have a </img> on one of your pages. There are a number of attributes to the
<img /> tag, some of which are required, and some that are not).

Attributes:
· src Attribute

o File name of the graphic

· alt Attribute

o Configures alternate text content (description)

· height Attribute

o Height of the graphic in pixels

· width Attribute
o Width of the graphic in pixels

Required attributes:

src - This attribute defines what file is used for the image to be placed into your Web page. Please note: The entire Web
project for this course must be located within your own directory on the Web server. (During Week 3 an Announcement
concerning this directory will be posted.) If you see an image elsewhere that you like, and want to use on your page,
copy it to your Web directory for the course, and use it from there. Anyone loading off-site images on their project will
lose from 2 to 8 marks from their final project mark.

Example:

<img src="penguin1.gif" />

alt - This defines the "Alternate" text which the reader of your page will see if they are either using a text based web
browser, or if the image you have selected does not load for some reason (i.e., The reader has turned image loading off).
The purpose of alternate text is to provide the reader with as close to the same content without the image as they would
have received with it. If you are using an image of some text on your page, the alternate text for that image must contain
the text that was in the image.

height and width - There are two uses for these tags, either warning the browser about the exact size of an image
before loading (which allows the page to format properly around and past it while the image is still trying to load), or for
changing the size of an image without altering the original file. Either way, you must be careful to keep the sizes
proportional, or your image will look strange. The sizes for both height and width are specified in pixels, or how many
dots high and wide the image is.

Examples:

As images:

<img src="penguin1.jpg" alt="[picture of a penguin]” width="20" height="20" />

<img src="title.gif" alt="60-205, Intro to the Internet" width ="100" height="50" />

Image Links
· To create an image link use an anchor element to contain an image element
· Browsers automatically add a border to image links.
· Configure CSS to eliminate the border
img {border:0 }
Example of Image links:

<a href="http://www.uwindsor.ca"> <img src="image.gif" alt="UofW" width="50" height="50" /> </a>

<a href="nextpage.html"> <img src="next.jpg" alt="Next Page" width="20" height="20" /> </a>

Background Image using CSS

CSS background-image Property

· Configures a background-image
· By default, background images tile (repeat)
· Example

body { background-image: url(background1.gif); }

CSS background-repeat Property

Using background-repeat

trilliumbullet.gif

h2 { background-color: #d5edb3;
color: #5c743d;
font-family: Georgia, "Times New Roman", serif;
padding-left: 30px;
background-image: url(trilliumbullet.gif);
background-repeat: no-repeat;
}

Next Step

If you can meet the objectives stated at the beginning of Lesson 4, you are ready to proceed to the next lesson. Keep in
mind the weekly schedule recommended in the course syllabus.

Assignment

Assignment #3 is due this week.

Please visit the Assignments portion of the course for details on Assignment #4.