Intermediate HTML: Frames, Columns, and Enhanced Layout

Course Outline

Prerequisites: Students should be fully knowledgeable of all the HTML features covered in WestLake Internet Training's World Wide Web Publishing with HTML course such as text layout, inserting graphics, hyperlinks, and tables.

Student objectives:

To learn how to enhance your Web site by implementing frames and targets
To learn advanced techniques for utilizing graphics on pages (e.g. how to specify the precise dimensions of your graphic through HTML)
To learn how to create client-side image maps
To learn how to construct text columns using HTML tables
To learn how to use <META> tags to improve your site’s rankings in search engines
To learn how to create a slideshow of revolving pages using <META> tags
To learn about interactive Web features such as forms, CGI scripting, JavaScript and Java that you may want to include on your site
To use JavaScript to replace one image with another when a user hovers over the image with her mouse

Frames and Targets (discussion)

Netscape Navigator 2.0 and later, Microsoft Internet Explorer 3.0 and later, and America Online 3.0 and later support frames and targets. Frames enable Web developers to split their pages into multiple panels, each of which can contain a separate HTML document. Clicking on a link in one of these panels causes a new document to load into that same panel. Through the use of targets, users can click on a hyperlink in one panel and have it open a document in a different panel or in a completely new browser window.

Good and bad uses for frames
The <FRAMESET> and <FRAME> tags
Complex layout of frames
Using the <NOFRAMES> tag to ensure compatibility with frames-incapable browsers

Exercise: Constructing the Home Page for a Frames-Based Newsletter

Begin constructing a home page for a frames-based newsletter which will include three frames

Adding Links between Frames (discussion)

Using targets to change the contents of a frame and to open new windows
Magic target names
Using the BORDERCOLOR attribute to change the color of frames and framesets

Exercise: Targeting Links

Complete the home page for the frames-based newsletter by targeting links to load documents into specific frames

Advanced Graphics Concepts (discussion)

Controlling the positioning of text relative to a graphic using the ALIGN attribute of the <IMG> tag
Accelerating how quickly your page loads by using the HEIGHT and WIDTH attributes of the <IMG> tag
Controlling the spacing between a graphic and surrounding text by using the HSPACE and VSPACE attributes of the <IMG> tag
Improving the appearance of the page as it loads by using the ALT attribute of the <IMG> tag

Exercise: Advanced Graphic Positioning

Insert a graphic and format it for quickest possible loading time

Image Maps (discussion and hands-on)

Appropriate and inappropriate uses for image maps
How to design or select a graphic that can be easily mapped
Creating a client-side image map
Testing and refining the image map once it is completed

Layout Your Page in Columns Using Tables (discussion)

Using features of HTML tables, you will learn how to lay out the text of your page in columns

Exercise: Laying out Your Page in Columns Using Tables

Format the newsletter story in the previous exercise into a two-column layout

<META> Tags (discussion and hands-on)

Using the DESCRIPTION and KEYWORDS attributes to improve how search engines catalog your site
Using the AUTHOR and GENERATOR attributes to record additional information about your pages
Using the HTTP-EQUIV attribute to load a new page after a certain period of time

Exercise: Adding a Series of Changing Banner Ads to Your Site

Interactive Features (discussion)