Introduction to the Internet-lesson 2-create effective web pages
Lesson 2
Learning Outcomes
This lesson will provide you with the opportunity to begin to discover how to create effective web pages. You will also create new Web pages using new HTML commands. You will use previously learned HTML commands and practices, and the new commands will build towards subsequent lessons in HTML.
When you have completed this lesson, you should be able to:
Define HTML and understand how it works.
Examine the tools used to create HTML documents.
Create an HTML document.
Use tags, attributes, and anchors.
Add images and links to an HTML document.
Create a simple Web page using the tags in HTML Practice Exercises #1 and #2 while demonstrating proper sequence, HTML coding, indentation, and spacing.
Textbook Readings
Please keep in mind the preceding intended learning outcomes while reading the assigned chapters from The Internet, 9th Edition, Schneider/Evans, Course Technology, Cengage Learning.
Tutorial 8: Creating Effective Web Pages Session 8.1
SAMS Reading
This reading will prepare you for the HTML Practice exercises that accompany the first eight lessons and Assignment #5, your Web site, by explaining the basic concepts and tools that are needed to create Web pages.
OLD BOOK
HOUR 5: Working with Text Blocks and Lists
HOUR 6: Working with Fonts
HOUR 8: Using External and Internal Links
NEW BOOK
Chapter 6: Working with Fonts, Text Blocks, Lists
Chapter 7: Using External and Internal Links
HTML Practice Exercise #2
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.
For this exercise you will be responsible for learning the following HTML codes and using each of them at least once in a Web page you develop. To see these tags in action, visit the sample Web pages in the Resources.
Explanations of HTML Tags
HTML CODE DEFINITION/MEANING
<ul> </ul> table of contents, unordered list
<li> </li> list item in a table of contents
<ol> </ol> ordered list, uses numbers
<dl> </dl> definition list or indented list
<dt> </dt> definition term
<dd> </dd> definition data
<div> </div> a region of text to be formatted
<body style = “background-color : #b3d8ff”> set the background color corresponding to the hexadecimal number
<b> </b> bold text
<i> </i> italic text
<address> </address> formally identifies your name and/or e-mail address at bottom of page
<a> </a>
Parts of the Anchor Tag
href
# anchor tag
a subtag that states that the anchor is linked to another location, called a target. The target is where the hyperlink will take the reader. An example of an external link is <a href=” http://www.google.com “>Google!</a>
a subtag that states that the anchor is linked to another location, called a target. The following is used for internal links:
<a href =”#top”>Back to Top</a>
<u> </u> underlined text
To Do
Now create a Web page using lists, formats (bold, italic, background colour), and the anchor tag. For this Web page you could continue your resume by adding, under an appropriate heading, a list of Programming Languages and/or Application Programs you are familiar with. You could also place an anchor tag to your favourite Web site and an anchor tag back to the top of your page. Remember to type your Web pages in Notepad, NotePad++, TextEdit or Brackets, and to view them in Google Chrome or Internet Explorer. If you are having difficulties, be sure to check the sample site in the Resources component of this Web site.
Next Step
If you can meet the objectives stated at the beginning of Lesson 2, you are ready to proceed to the next lesson. Keep in mind the weekly schedule recommended in the course syllabus.
Please post to the Discussion area of this course Web site any questions or comments related to the lesson. Only emergency and private messages should be sent through the E-mail Instructor component of the site.
Assignment
Please visit the Assignments portion of the course Web site for details on Assignment #1
Leave a reply