Instructor’s Manual
BUSINESS DRIVEN TECHNOLOGY PLUG-IN T10 – CREATING
WEBPAGES USING HTML
LEARNING OUTCOMES
1. Explain what HTML is.
Hypertext Markup Language, or HTML, is a system of codes that you use to create Web pages.
2. Describe the purpose of HTML tags.
HTML tags actually serve two purposes. First, they identify logical document parts — that is, the
major structural components in HTML documents. Second, HTML tags reference other elements,
that is, tags can include pointers and links to other documents, images, sound files, video files,
multimedia applications, animations, applets, and so on.
3. Explain how browsers display tagged HTML documents.
HTML is made up of tags and attributes that work together to identify document parts and tell
browsers how to display them. The tags and attributes work together to create a Web page that the
browser displays.
4. Describe how an HTML document is structured.
All tags are composed of elements that are contained within angle brackets (< >). The angle
brackets simply tell browsers that the text between them is an HTML command. Most tags are
paired, with an opening tag and a closing tag. Both tags look alike, except the closing tag also starts
with a forward slash (/). To apply tags to information in your document, place the opening tag before
the information, and place the closing tag after the information,
5. Describe what an HTML attribute is.
Attributes provide additional information about an element, such as how elements should align, what
other files should be accessed, or even the color of an element.
6. Describe how to create, save, and view HTML documents.
To create and save a HTML document:
1. Open a text editor (such as Notepad or SimpleText).
2. Start a new document by choosing File, then select New.
3. Enter the HTML code and text you want to include.
4. Save your document with the extension .htm or .html by choosing File Save or File Save As.
To view the HTML in a browser:
1. Open the browser of your choice.
2. Choose File, then select Open and type the local filename or browse your hard drive until you
find the file you want to open.
3. Select the file, and click OK to open it in your browser.
TECHNOLOGY PLUG-IN T10 – DESIGNING WEB PAGES USING HTML Page 1 of 3
Instructor’s Manual
7. Explain what a structure tag is.
Structure tags provide browsers with information about document characteristics. Structure tags
identify the document as HTML, provide introductory information about the document, and include
the title, among other similar things.
8. Explain how to apply bold, italic, and underline formatting to an HTML document.
Use <B> for boldface, <I> for italics, and <U> for underline in your HTML document.
9. Describe how to create ordered and unordered lists.
Lists come in two varieties:
1. Numbered (ordered) <OL>
2. Bulleted (unordered) <UL>
Insert the <UL>tags around the list text and then apply either the <OL> or <UL> tag around the list
text.
10. Describe the different types of Web links and how to insert them in a HTML document.
Hyperlinking to a Web Page - <A HREF="http://www.du.edu"> University of Denver</A>
Hyperlinking to an E-Mail Address - <A HREF="MAILTO:[email protected]">Contact
Me</A>
Hyperlinking to non-HTML content - <A HREF="my_html_reference.doc">Download my HTML
reference</A>
11. Explain how to insert images in a HTML document.
Inserting a graphic on a Web page is as simple as placing an <IMG> tag where you want the
graphic to appear. As an example: <IMG SRC="logo.gif">
EXTENDING THE CORE MATERIAL
HTML Primer - http://www.htmlprimer.com/
Basic HTML: Introduction - http://www.htmlgoodies.com/primers/html/article.php/3478141
Basic HTML: Tags - http://www.htmlgoodies.com/primers/html/article.php/3478151
HTML Tutorial - http://www.w3schools.com/html/default.asp
MAKING BUSINESS DECISIONS
1. Using Images As Hyperlinks
Project Purpose: Get students to understand the using images as hyperlinks.
Solution: Review tetons.html Although there is no right or wrong design here, students should be able
to create a generic Web page that has a picture of the Teton’s with hyperlink properties that refer to
http://www.nps.gov/grte.
TECHNOLOGY PLUG-IN T10 – DESIGNING WEB PAGES USING HTML Page 2 of 3
Instructor’s Manual
2. Developing A Web Page
Project Purpose: Get students comfortable creating a Web page from a “sketch”, including, adding
images, hyperlinks, lists, and tables.
Solution: Review topgolfclubs.html. This will test your students on how well they understand using
numbered lists and tables. Students will have to join cells in the first row in order to create the cell for
the heading. Students will have to join the cells in the last row in order to create the cell for the “Last
Updated:” reference. Students will have to use numbered lists in each middle column to display the
golf club information.
3. Express Yourself
Project Purpose: Get students comfortable creating their own HTML content and adding HTML
images, hyperlinks, lists, and tables.
Solution: Although there is no right or wrong answer here, students responses should address the
bulleted list of deliverables noted in the assignment.
4. Creating a Presence
Project Purpose: Get students comfortable creating business content and adding HTML images,
hyperlinks, lists, and tables.
Solution: Although there is no right or wrong answer here, students responses should address many
of the issues presented in this Plug-in.
APPLY YOUR KNOWLEDGE
PROJECT 24: Electronic Resumes
PROJECT 25: Gathering Feedback
TECHNOLOGY PLUG-IN T10 – DESIGNING WEB PAGES USING HTML Page 3 of 3
