HTML For The World Wide Web
New Mexico High School Supercomputing Challenge
Summer Teacher Training Session WNMU
Joe A. Watts
Table of Contents
A Basic Web Page . ..3
More Basics, Headings .. 4
Attribute Expansion ... . . ..5
Different Hyperlinks . ..6
The Speedy Typist . .7
Tables .. .. 8
Use of Color to Distinguish Tables .. .9
Carlos Car Corral ... .10
A Basic Web Page:
<html>
<head>
<title> Classroom Exercise One </title>
</head>
<body>
Hello World!
</body>
</html>
Questions:
In the textbook all of the tags are in upper case. In the above listed example all of the tags are in lower case. What difference does it make?
Where if anywhere does the title get displayed?
Eagle-eye HTMLers will notice that the title "Classroom Exercise One" has spacing ahead of the "C" in Classroom and following the "e" in One. What difference does this spacing make to the web page?
What difference does spacing make to the display of "Hello World!"
Try inserting the <h1> </h1> tags around the text "Hello World!" What effect does it have when viewed through a browser.
Exercise Two: Headings
<html>
<head>
<title> Exercise Two </title>
</head>
<body>
<h1> Exercise Two </h1>
Enter a paragraph about your school
<p>
Enter two paragraphs about what you expect to learn
<p>
Last Modified: Your Name, Date
</body>
</html>
In the above example, we used the <h1></h1> tags to mark the text "Exercise Two" as a heading.
What happens if you change the number from <h1></h1> to <h2></h2>? How about 3-6? How about <h9876></h9876>?
What could possibly be done to differentiate the "Last Modified" text from the text about your school and what you expect to learn paragraphs.
Exercise Three: Attribute Expansion
<html>
<head>
<title> I am getting the hang of HTML </title>
</head>
<body>
<h1> Exercise Three </h1>
Write a paragraph describing your favorite city.
<p>
Write a paragraph about your favorite color.
<p>
<font face="arial" size="-1" color="red">Last Modified: Your Name, Date</font>
</body>
</html>
In Exercise 3 we varied the title to be different from the heading. Is it ok for the title to be different from the heading?
At the bottom of the body, we began working with the <font> </font> tags. Contained within the opening tags are text surrounded by quotes. What is the name given to text contained within an opening tag surrounded by quotes?
After noticing the change in text, try three different font faces, three different sizes and three different colors (back cover of text book). Report back on the changes you made and the impacts if any to your web page.
Why would someone wish to include on their web page a last modified date?
Exercise Four: Different Hyperlinks
<html>
<head>
<title> Exercise Four </title>
</head>
<body>
<h3> Exercise Four </h3>
Report in journal fashion (50 words or less) on your trip to Silver City.
Include the text STTS somewhere in the paragraph and create a hyperlink to the
Challenge homepage.
<p>
For more information on how to write HTML pages in Journal Fashion, write to:
<a href="mailto:xxxx@mode.lanl.k12.nm.us">Your name goes here.</a>
<p>
<hr width="640" align="left">
<p>
<font face="arial" size="-1" color="red">Last Modified: Your Name, Date</font>
</body>
</html>
In the above exercise you are asked to create a hyperlink to the challenge homepage. (Hint <a href="">). In your own words, describe what hyperlinks are and how they work.
What is different about the hyperlink for your name and the STTS hyperlink.
The <hr> tag produces what? Try changing the attribute "left" to something else. What happens if you remove the align altogether? Try changing the length to a percentage "50%" What happens?
Exercise Five: The Speedy Typist
The speedy typist is new to writing HTML and has produced the following:
<html>
<head>HTML is easy >
<body>
HTML is Easy
My first HTML page is pretty good if I do say so myself. In case you don't know
who I am, my name is <a href="speedy@aol.com">The Speedy Typist.</a>
<p>
I like to following image <br>
<img src="http://mode.lanl.k12.nm.us/Includes/snake.jp">
<p>
<table border terrier="1">
<tr>
<td>Here is my table</tb>
</table>
<hr width="6" align="double">
<pb>
<font feature="Anvil" size="-1.526" color="blread">Last Modified: Speedy Typist, 6/05</font>
<body>
</end>
There are several things that Speedy Typist can do to fix this HTML file. Identify as many as you can.
Exercise Six: Tables
<html>
<head>
<title> Simple Sample Table</title>
</head>
<body>
The table following is just a simple 2 x 3 table. It has very few fancy attributes, but it does show how the parts of a table fit together.
<p>
<table border="5" width ="75%">
<caption> A Simple Table</caption>
<tr>
<td> Row 1 / Column 1 </td>
<td> Row 1 / Column 2 </td>
<td> Row 1 / Column 3 </td>
</tr>
<tr>
<td> Row 2 / Column 1 </td>
<td> Row 2 / Column 2 </td>
<td> Row 2 / Column 3 </td>
</tr>
</table>
<p>
The table in this example has 6 cells.
</body>
</html>
The above table contains width="75%" as one of the table width attributes. Change the percentage to a width of 480. What are the results?
Change the border attribute to zero. What happens?
Replace the Row 1 / Column 1 and Row 2 / Column 1 <td> with <th>. What happens?
Exercise Seven: Use of Color to Distinguish Tables
<html>
<head>
<title>Calendar</title>
</head>
<body>
<table border="5" width ="75%">
<tr>
<th colspan="3" align="center">June</th>
</tr>
<tr>
<td> Row 1 / Column 1 </td>
<td> Row 1 / Column 2 </td>
<td> Row 1 / Column 3 </td>
</tr>
<tr>
<td> Row 2 / Column 1 </td>
<td> Row 2 / Column 2 </td>
<td> Row 2 / Column 3 </td>
</tr>
</table>
</body>
</html>
Take the above listed table and devise a calendar for the month of June.
Using the bgcolor attribute color the June cell.
In the above listed table the attribute colspan is used to set up what?
Use what you learned about font color to emphasize Weekend days.
Exercise Eight: Carlos Car Corral
Because of everything that you have learned about HTML, Carlos Santana, owner of Carlos Car Corral, has approached you. Carlos is very confident that your knowledge of HTML will help him to sell twice the volume of cars that he normally sells. He is willing to pay you big bucks.
After contemplating his offer and checking with your accountant, you agree to make the web site.
Carlos asks the following:
Have great big text at the top of the page that clearly states Carlos Car Corral.
Put a last modified date at the bottom of every page so that customers will know when the page was last updated, in the event they have already visited the site and would like to know what new cars are on the site.
Create a hyperlink that mails to carlos_car_man@aol.com , but that reads on the page Carlos Car Corral.
Using tables, create four categories that lead to other pages. The categories are Exotic Cars, Economy Cars, Family Cars and Sports Cars.
On each of the sub pages, use tables to feature 4 cars. On the left side of the table Carlos would like to have a description of the car and the cost. On the right side, a picture of the car. Since Carlos is anxious that his customers be able to contact him immediately he would like for you to put his email in a conspicuous location.
Carlos strongly believes that people are motivated by color. He would like for you to establish a color theme that accentuates and is unique to each of the sub-pages.
Tips:
You can find cars at major manufacturer web sites, such as www.ford.com .
You may find it helpful to build the site first and then go in search of cars.
Since this site uses multiple images, you will probably want to create an image directory.
Dont forget to plan your site out with paper and pencil before simply programming away.