Use these Webpages as an Interactive Lesson in Elementary HTML for Making a Class Homepage with Linked Student Webpages.
First visit one of the homepages, then use the Save as... Format: Source commands to create a text file for it. The result will be that you have both the webpage and its source code open on your monitor in a browser and text window, so you can understand the tags used on the page and demonstrate their functions by making changes. Save and then open the text file with your your browser's Open File... command to see the effects. A good place to start is by changing the title of and school name on the Sample Class Homepage as an example and then have your students change YOUR NAME on the Student's Homepage to their own names. Next experimenting with various background and font colors is both instructive and fun.
It will be useful to first print out the following to refer to while working:
HTML tells your web browser how to display your text. Here's the minimum:
<html>
<head>
<title>My Homepage</title>
</head>
<body>
Welcome to my homepage.
</body>
</html>
Notice that TAGS enclosed in <angle brackets> tell your browser what to do.
Most tags are pairs opening <html> and closing (with a SLASH) </html>
Pairs of tags on Your Homepage are:
<html></html> your browser reads the enclosed file in Hyper Text Markup Language.
<head></head> contains the title and information describing your page.
<title></title> appears in the top of the browser window.
<body></body> contains the main part of your page.
<h1></h1> Heads a section of your page. (sizes from 1 to 6)
<blink></blink> blinks the enclosed text on and off.
<big></big> makes the enclosed text bigger.
<center></center> centers the enclosed text.
<a></a> Anchors a LINK.
(Clicking links on your homepage returns a viewer to the class homepage
or opens a mail message addressed to you.)
Sometimes a single tag occurs on its own.
Single tags on Your Homepage are:
<br> marks a BReak at the end of a line.
<p> marks the end of a Paragraph.
<hr> marks a Horizontal Rule accross your page.
<font size=3> sizes the FONT (typed keybord symbols) from 1 to 7.
<font color=orange> colors the font. (Experiment with different color names.)
More html commands used within the tags on your page:
<body bgcolor=turquoise> BackGround color - almost any color you can name.
<body text=black> text color - experiment with various color names.
<body link=blue> link color for places you can go by clicking on the link - best left blue.
<body vlink=purple> Visited link shows places you have already been to - best left purple.
<h1 align=center/left/right> aligns the section heads.
<a href="URL"> Links to an URL. Uniform Resource Locator - the address of a webpage.
<a href="mailto:someclass@someschool.ac.jp (SOME NAME)">
Opens an email message addressed to a student in some class at some school in Japan.
Now try making some changes to your homepage.
Remember to SAVE the text file each time you make a change,
then open the file with your browser to see how your change looks.
Complete your biography and project description, but remember -
the web browser will only include line breaks and paragraphs when you tell it to.
When you and your students are satisfied with your changes to your homepages you are ready to link them together using the <a href="http://your.page">YOUR PAGE'S NAME</a> tag, but first your will need to post your pages on a server, so that you can get a real URL for "your.page". If your school's server isn't available, here's a web page that has links to many places you can post pages for free http://www.vivanet.com/~woodj/money-mart/freeway/homepages.html in addition to http://www.tripod.com from which you've copied my class homepage source code and on which you may post your class homepages free for the asking.
Now make a source copy of Kevin Werbach's Bare Bones Guide to HTML at http://werbach.com/barebones/ and also of the excellent new HTML primer at http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html or one of the many other fine tutorials listed at http://www.csuchico.edu/educ/markup.html to continue the development of your class web site. Also, "The Game of keeping your reader's attention" at: http://www.synapse.net/~woodall/icons/game.htm is useful for designing a business website.
See You Online!
After you're set up please visit my Sample Class Homepage again,
click on --> teacher and email me about how you're doing. See you online!
View a Student's Homepage
View the Class List