Introduction to the Internet-lesson 1-creation of your first Web page

Lesson 1
Learning Outcomes

This introductory lesson will provide you with the opportunity to begin your exploration of the Internet and the creation of your first Web page. This lesson will provide a basis for subsequent lessons and you should pay special attention to understanding the basics of designing a Web page as this is a necessary component for the course.

When you have completed this lesson, you should be able to:
Explain how and why the Internet changes daily.
Outline several of the Internets capabilities and describe their impact on society.
Provide an analogy that is useful for understanding the Internet.
Compare and contrast the following sets of terms, using examples where possible.List the resources you need to access the Internet in terms of hardware, software and connectivity.
Internet – WWW
Web browser – Web site
URL – links
Local Internet access – ISP
http: – HTML
List the resources you need to access the Internet in terms of hardware, software, and connectivity.
Create a simple Web page using proper sequence of, HTML code, indentation, and spacing (HTML Practice Exercise #1).

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.
Appendix A: The Internet and the World Wide Web
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 1: Understanding How the Web Works
HOUR 2: Publishing Web Content
HOUR 3: Understanding HTML and XHTML Connections
NEW BOOK:
Chapter 1: Understanding How the Web Works
Chapter 2: Structuring an HTML Document
Chapter 3: Understanding Cascading Style Sheets

HTML Practice Exercise #1

Throughout Lessons 1 to 8 you will be expanding your knowledge of HTML codes through a series of practice exercises. These exercises, used in conjunction with the assignments, will culminate in a complete Web site. You might find it helpful to read the instructions for Assignments #4 and #5 now so that you have a sense of where the eight HTML practice exercises will be taking you.

For this first HTML practice exercise, you will be responsible for using the Web authoring techniques and the HTML codes that follow.

A. Creating Web Pages from the “Ground Up”

For this course, you will design a Web site from the ground up. Although there are many editors, programs, and software packages available to build Web sites, we will do it the “hard” way. That is, for you to be able to demonstrate a rigorous understanding of the fundamentals of Web site design, you must complete the HTML practice exercises and graded assignments. This experience will allow you to become confident and competent in Web page design. Programming without the use of Web page authoring tools will provide for a greater understanding and control of your Web page. This way, when you come across HTML code in the future, you will know how it works and what it means. HTML code is a necessary feature of any Computer Science course.

B. What do you need to make a Web page?

There are really only two pieces of software necessary to make a Web page. They are:

1. A text editor (we will use Notepad, NotePad++, TextEdit or Brackets).
2. A Web browser (Internet Explorer, Mozilla Firefox, Google Chrome).

You don’t even need to be on the Internet to create a Web page. (Web pages can be created and tested on any computer!) Many company’s Web pages are placed on an Intranet (or even a local computer in the office). An Intranet can be thought of as a set of documents that use the Internet structures but which are accessed only locally, that is, say, from the confines of a company’s building.

Web pages are written in a computer language known as HTML. This stands for HyperText Markup Language. A text editor is used to create HTML documents, and a Web browser is used to view the completed Web page.

A Web site is a collection of Web pages in a free-form database structure. This simply means the creator of the Web site doesn’t have to follow a strict set of rules when creating their Web site. The Web site can be a very dynamic entity, growing and collapsing, as the creator sees fit. It is this ease of expression that has led to the vast explosion of Web sites on the Internet and namely the WWW.

C. What does Hypertext Markup Language mean?

Hyper – means you can make jumps within your document, to another document on your system, or to a document anywhere on the Internet.

text – means you must save your Web pages as “text”. Text files do not have any word processing characters in them. HTML editors and Windows Notepad automatically make text files. Word-processors must be “told” to save files as text.

Markup Language – means that you will be adding “tags” to the text file to tell the browser how it should display the text. Tags are enclosed in < >, and usually exist in pairs.

D. HTML in Action

To see an example of HTML in action, go to my sample site found under the Resources section of this Web site.  Then, to see the HTML underlying this page, click on View – Source.

E. The Shell of a Web page

Just as the essays you write for University classes follow an outline (title, introductory paragraph, body paragraphs, conclusion, bibliography), so does an HTML document. These HTML tags are useful to computer scientists so that they have total control over the style and appearance of their Web pages. If you choose to use a Web page authoring tool in the future, you will be able to understand the codes generated by these tools.

READ HOUR 3: Understanding HTML and XHTML Connections
F. To Do: Your First Web Page

Now, try your own beginning page by copying Answer 3 on page 45 from the SAMS Teach Yourself textbook, into Notepad. Save your work, then load it into your browser. Use File – Open Page – Choose File – Open in Internet Explorer. Don’t forget to save it as a text file with the proper extension (.html). (See Below)
SAMPLE WEB PAGE (type in exactly using a text editor such as NotePad (Windows) or TextEdit (MAC):
<! DOCTYPE html>
<html lang=”en”>
<head>
<title>The First Web Page </title>
</head>
<body>
<p>Sample paragraph …
</p>
</body>
</html>
Save as: firstpage.html
Your File Names: In order to make things as easy as possible for you and me, you MUST follow the following rules when writing your own Web pages.
1. All HTML coding WILL be done in lowercase letters (any pages done in UPPERCASE lettering will not be marked, resulting in ZERO marks) using NOTEPAD or a similar text editor (NotePad++, TextEdit or Brackets). SEE RESOURCES FOR TEXT EDITOR DOWNLOADS  (NOT A WEB AUTHORING TOOL!!!)
2. All file names will be done in lowercase letters, with no special characters except underscore, and will conform to the following parameters:
a. no filenames will be over 8 characters in length and b. all HTML documents will end in .html (NOT .htm)
3. All graphics names will be done in lowercase letters, with no special characters except underscore, and will conform to the following parameters:
a. no filenames will be over 8 characters in length and b. all graphics will end in either .jpg, .jpeg,.png, or .gif (these are the supported image file types)
4. Please see this course site for sample pages and useful information.
REMINDER: The use of web page authoring tools is NOT allowed because it does NOT meet the objectives of this course and assignments will NOT be accepted in this format! (resulting in ZERO marks being awarded!)
Next Step
If you can meet the objectives stated at the beginning of Lesson 1, 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
There is no graded assignment to submit for Lesson 1.