LESSON PLAN: HTML Links and Images

LESSON PLAN:  HTML Links and Images

Lesson Overview:

This lesson assumes that students have been trained on the basics of HTML and can properly form, save and display HTML pages in a browser.  It is also assumed that students are familiar with HTML tag attributes and how they function.

Students will gain knowledge of inserting hyperlinks and images into HTML Web pages.  Hypertext links are the function that created the World Wide Web by creating a mechanism for any HTML page on the Internet to link to any other HTML page.  This interlinking of all these pages creates a virtual "Web" from which the World Wide Web gets its name.

Insertion of Images into HTML pages vastly expanded the usability of the pages and fueled the growth of the World Wide Web as a primary vehicle for information sharing in the world.  Images add interest, color and style to Web pages that cannot be done with text alone.  The combination of text information, images and linking has created a powerful informational medium accessible to practically anywhere in the world.

Length of Lesson:

One two-hour session

Notes:

This lesson is number four in a series of five lessons that comprise the basic HTML learning model.

Instructional Objectives:

Students will:

• Use Notepad to write code for their HTML pages
• Use Internet Explorer Web browser to display HTML pages
• Create hypertext links to internal data on a page and to external Web pages
• Insert and format images on a HTML page
• Use images as hypertext links to internal data or external Web pages

Supplies:

Computers with Microsoft Notepad and Internet Explorer installed.  Students will need a storage device such as a floppy disk or CD ROM to store projects.

Instructional Plan:

Linking in HTML

The instructor will discuss the relationship of hypertext linking to creation of the World Wide Web.  The concept and function of hypertext linking will be discussed.  The proper code to create links to internal data within the same Web page or external Web pages will be discussed and demonstrated.

HTML link tags

The structure and function of the following tags will be discussed:

            <A>

HTML link attributes

The instructor will discuss format and placement of the following attributes:

            href=”linking URL or anchor”

            target="location for the linked document"

            mailto="email address to send email"

Students will complete Exercise 1  - Creating HTML Links in HTML

Inserting images into HTML pages

Images add interest and draw attention to your Web page.  The instructor will discuss and demonstrate how to insert and position images into the HTML page.  The instructor will also discuss and demonstrate using an image to create a link to another Web page or to internal data on the page itself.  Using images as a background for the entire Web page will also be discussed and demonstrated.

HTML image tags

The structure and function of the following tags will be discussed:

            <IMG>

HTML image attributes

The instructor will discuss format and function of the following attributes:

            Src="URL or path to image file

            Width="x"

            Height="x"

            Alt="text describing image for browsers that do not display images"

            Align="left, right"

Students will complete Exercise 2  - Inserting Images into HTML

There are many more attributes that will be discussed in future learning modules but all are structured as we have discussed.

Sources:

Print

• LeMay, Laura, Teach Yourself Web Publishing with HTML 4 in 14 Days. Indianapolis: Sams.net 2000.

Assessment:

Students will complete the Assessment 1 exercise to demonstrate understanding of inserting links and images into HTML pages.

Author:

Norman W. Benton

Lehigh Valley College

Center Valley, PA