Intermediate HTML: Class Outline

Workshop Schedule

I. Overview: What are we going to do today?

Retrieve Web page from server

II. Applying Attributes and Values to Tags

A. Attributes (See HTML Guide No. IIa) Attributes are modifications to simple HTML tags that define what the tag does. Many tags have default attributes -- attributes that are in force when no attribute is explicitly written in the tag.
1. Changing the appearance of horizontal rules

The horizontal rule tag, <hr /> , actually has several default attributes which, if explicitly spelled out, would look like this:
<hr size="1" align="center" width="100%" />

hr -- tag
size, align, width -- attributes
1, center, 100% -- attribute values (must be in quotes)

...and the horizontal rule would appear on a web page this way:

Changing the value of an attribute in the horizontal rule tag changes the appearance of the horizontal rule.

For example, changing the value of the width attribute from 100% to 25% changes the length.
<hr width="25%" />

Note: You can pick and choose which default attributes you want to modify.
<hr size="10" />

<hr size="5" width="50%" />

<hr width="50%" align="right" />

<hr size="20" width="50%" align="left" />

<hr noshade="noshade" size="10"/>

 

2. Changing the appearance of text

This text is in the default font size.


<font size="-2">The -2 relative font size looks like this.</font>

The -2 relative font size looks like this.


<font size="+2">The +2 relative font size looks like this.</font>

The +2 relative font size looks like this.

 

3. Manipulating images

a. Image sizing: <img src="olin.jpg" />


To find the attributes and values for your images, right click on the image and choose "Properties."


 <img src="olin.jpg" width="160" height="103" />


<img src="olin.jpg" width="480" height="309" />


b. Aligning images: <img src="olin.jpg" align="right" />



 

 



<center><img src="olin.jpg" /></center>


c. Aligning text next to images and Adding alternate text:

<img src="olin.jpg" align="center" />

Olin & Uris Libraries


<img src="back.jpg" alt="Back" />

Back


d. Using images as links & eliminating link borders:<a href="http://www.library.cornell.edu">
<img src="back.jpg" border="0" alt="Back" / >
</a>

Back              Back

 

First Hands On Session



III. Color and Backgrounds


A. Using attributes in the <font> tag to change the color of specific text.

This text is<font color="#ff0000">red</font>.

This text is red.


This text is <font color="#ff0000" size="+3"> red and larger</font>.

This text is red and larger.


B. Adding attributes to the opening body tag to change the look of a whole page (See HTML Guide No. IIb)

<body>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#990099">

default values for the <body> tag attributes:
bgcolor=white
text=black
link=blue
vlink=purple

For RRGGBB color codes, go to:
HTML Guide No. IIb (sample list)
RGB Triplet Color Chart

Browser-safe color chart [from The Slacker's Guide to HTML]

C. Using an image instead of a color as a background

Find an image to use as a background: Absolute Background Textures Archive

Here is an image (blue011.jpg) to use as a background.

This is the tag that forms the tiled background:
<body background="blue011.jpg" text="#FFFFFF">
OUR BLUE IMAGE BACKGROUND PAGE

Second Hands On Session

 

IV. Building a Web Site

A. Site Navigation: Hypertext Links to Move Among and Within Web Sites Using hypertext links to connect to places external to a Web site, within a Web site, and on the same page. (See HTML Guide No. IIc)

B. Design Considerations

1. Overall organization of a Web site
    Web Style Guide: Site Structure


2. Determining optimum page size
    Web Style Guide: Page Length


3. Page layout
    Web Style Guide: "Chunking"


Third Hands On Session
Adding relative and internal links to your Web pages

 

For more on HTML coding and tags we recommend the following:

W3C - World Wide Web Consortium Index of Elements

HTML Quick List from html code tutorial.com

Return to top of page

Last updated 12 October 2007 (MOE)
Olin and Uris Reference
Tony Cosgrave and Michael Engle
URL: http://www.library.cornell.edu/okuref/ws/html/html2.html