A basis of a website is simply a collection of webpages, usually linked together. Discuss what makes up a webpage. For instance, a webpage could be considered as two distinct levels, the first level being the underlying programming that a web designer uses to make the website. The other level is the displayed webpage. In other words, the programming constructs the displayed webpage using text, images and possibly sound. This is easier to grasp by using a "what you see is what you get" or WYSIWYG editor as discussed in Section 3.
Review HTML tags and elements such as the <html> and <body> tags, along with the paragraph <p> tag and <h> heading tags. Discuss the all-important hypertext link <a>, which enables the user to click and navigate from one location to another. A full hyperlink tag would be <a href="URL”>Displayed Text</a>. The “URL,” or “uniform resource locator,” is the actual web address in the link such as "http://www.anywebsite.com." Discuss how to close tags. For instance, </html> is the closing tag for the entire page's HTML code. Some tags, such as the
or "break" tag, do not need to be closed.
This where the class can see how a web browser parses the code and contents into a displayed webpage. It is helpful to see the HTML code and the webpage simultaneously. While many web browsers allow viewing the source code from a webpage, the code from a commercial website is often extremely advanced and too complex for beginner level. If your school does not have a web development program, consider downloading a freeware or shareware web development tool. KompZer is one such tool and is available for PC and Mac. Dreamweaver is a popular for-purchase tool. “What you see is what you get” or “WYSIWYG” editors, such as KompoZer, allow you to split the screen, viewing the HTML source code in one window and the resulting webpage display in another. Students can write or edit HTML code in the “source” section and see the changes to the displayed webpage take place in the other window. This hands-on activity is more exciting and should encourage involvement.
If the students seem to be grasping everything well while using a WYSIWYG editor, have them write a webpage manually, using only a text editor such as Notepad. Copy the code from the text editor and paste it into the WYSIWYG editor to test it, or open it in a web browser using Open File, generally under the File menu. Problems in the code structure could be discussed as a class. Alternately, the teacher could supply the students with a webpage containing HTML errors, then challenge the students to find the mistake in the HTML code. Finally, students could form small groups and create group websites, or each group could create a page for use in a combined class website.