Lesson 3

Lesson 3: Creating Web Pages

Instructional Objectives: Students will learn how to create and format a basic web page as a precursor to creating web pages on high schools.
Time Required: one class period
Advance Preparation: You should have a projector or TV screen setup beforehand to use. You should have on hand a basic html book or a printout of html tags. You can printout a guide from http://www.digitalpublishingservices.com/html/ or http://webdesign.about.com/library/beginning/bl_htmltutorial.htm . You may want to download any web page and have it on student computers if you are having problems with internet access. You may also want to bookmark the following page on student computers, http://www.digitalpublishingservices.com/html/chapter01.htm .
Materials / Resources Required: A projector or TV screen setup, computer with Internet access and a basic word processor such as Notepad, Simpletext or Wordpad. You might want to have a copy of web pages for dummies or any book on basic html for reference.
Vocabulary: hypertext markup language (html), tags, browser, link, webpage, website
Concepts, Focus Questions (and responses), Generalizations, Key Points: Focus questions for this lesson are:
How do you create a webpage?
What are the basic elements that all web pages must have? How do you format a web page? Web pages are documents that are viewed through a web browser. Websites are made of one or more web pages. Web pages are generally created in a language called html. HTML documents must end in .htm or .html, you must put this extension when you are saving your web page. The extension is not automatically put on the document like when you work with Microsoft Word where the .doc extension is placed on the document. All web pages must contain 4 basic tags: html, head, title and body. Tags are commands that are written between < and > symbols. The first tag in any html document is <HTML> and the last tag in any html document is </HTML>. Tags are not case sensitive, although I teach my students to put them in caps and on separate lines for visual clarity. Tags are opened in a document and should be closed by placing a backslash in front of the word, ie. </HTML>, </FONT>. The next tag an html document should have after the <HTML> is the head tag <HEAD>. The next tag an html document should have is the title tag <TITLE>. This tag is used to define what message will be placed in the title bar at the top of the web page. A general rule for creating web pages is that the last tag you open should be the first one you close, so if I open three tags: <HTML><HEAD><TITLE>, the order I should close them is: <TITLE><HEAD><HTML>. The <HEAD> and the <TITLE> tags should be closed before opening the body tag <BODY>. This is where the actual content of the web page is to be placed. Tags used for formatting (bold, underline, center, etc.) are to be placed in the body section. When you finish putting your content on your webpage, the last two tags that should be on your document are the close body and html tags (</BODY> ,</HTML>). To be able to view your document, you need to open it up in a web browser such as Internet Explorer, Netscape or Opera.
Procedures:
1. Ask students if they have ever written a webpage before, if they have ask them what language do you create web pages with? Give them a hint, it's not English. Tell students that they will be creating web pages right away.
2. Have students to to the following page: http://www.bard.edu/ and go to View--> Source (View--->Page Source in Netscape). Ask student if they understand anything they see, (Probably not) but by the end of today's class they will understand some of what they see.
3. Tell students whenever you see a word between the less than and greater than symbols, that is a tag. The first tag that any web page must have is the html tag written <HTML>, the next tag your document must have is the <HEAD> tag. The next tag your document should have is the <TITLE> tag. This is the tag that will put whatever you place here on the title bar of your web browser. Students should place these tags within their Notepad document . They should write the following after the <TITLE> tag, This is my first web page and then save the file as index.htm. They should then open their web browser and go to the File menu and select open file. They should open their index.htm document. Click here for an example of the document. Right click here and select save document to disk. Right click on the previous link and select Open in New Window to see the webpage. Students will not see anything in the body of the web page, but they will see the sentence this is my first web page on the title bar.
4. Students should go back to Notepad or other basic word processor and add a <BODY> tag. This section is what will be seen on the webpage. Students will create a centered title called About me. They will skip a line then write a brief paragraph about themselves. They will highlight three basic points about themselves. Have student refer back to the auto evaluation they did in Lesson 1. Students will skip three lines and write in an <H7> font, centered and in italics, Last revised by and their name. Click here for an example of what the final document should look like. Here is an example of what the html code should look:
```
    <HEAD>

    <TITLE> This is my first web page </TITLE>

    </HEAD>

    <BODY><H1><U><CENTER>About me</CENTER></U></H1>

    <BR><H3>

    I am a student in the 8th grade. I have one sister. I like eating plantains 
    and yucca. I like playing sports and video games.

    </H3>

    <H3><B>

    <UL>  
```
```
    <LI>I am hard working.
    <LI>I tend to procrastinate a lot.
    <LI>I am trustworthy, but disorganized. 

    </UL></B></H3>

    <BR><BR><BR>

    <H7><CENTER><I>Last revised by Anthony Salcedo on June 22, 2004.</I></CENTER></H7>

    </BODY>

    </HTML>
```
Activities: Students can create another web page called hobbies.htm. You can go to view source to see the html code. The title should be my favorite hobbies and should contain the following: bold, underlined in heading size 2 the words Favorite hobbies, skip one line and then a numbered list that contains their three favorite hobbies then skip 3 lines and on the bottom of the page it should say Last date modified on (date) by (their name). This should be centered, in a heading size 5 font and in italics. Note: The difference between a bulleted list and a numbered list in html is that a bulleted list begins with the <UL> tag which stands for unordered list and a numbered list begins with the <OL> tag which stands for ordered list. The rest of the code is the same. At the end of the list, you must close the list tag: </UL> for a bulleted list and </OL> for a numbered list.
Summary: Web pages are not that difficult to create. They are generally written in HTML and are comprised of tags. Tags are simply words within brackets. When you open tags, you must also close them. Tags are closed by the innermost tag first. The first and last tags in a webpage are html. A simple rule to follow when writing html code: whatever you open, you must close.