On the CD In this section, we show some examples of simple HTML, HTML with links and images, an example to demonstrate debugging, and HTML tables. The projects demonstrated here are basic HTML. The CD-ROM contains the code for the projects in the folder named chapter2code.
The following is an example of the simplest possible HTML document. Notice that it contains a head section and a body section. The head section can contain other tags.
<html> <head><title>Simple html file </title> </head> <body> something </body> </html>
Start any text editor. Notepad is the one that comes with any Windows operating system. Do not use Microsoft Word and do not use any special HTML editors until you have a firm grasp of how tags work. Type in these lines of text. You can (and should) change what is between the <title> and </title> tags and what is in between the <body> and </body> tags to make it your own example. Please be aware that spacing and line breaks are ignored. Suppose you type the following:
My first HTML File
The quick brown fox jumped over the lazy dog's back.
A browser may display
My first HTML file The quick brown fox jumped over the lazy dog's back.
Save the file with the name test1 and the extension html. To do this in Notepad, you must click on All Files so that the file does not have the extension txt.
Now invoke a browser. Click on File (see Figure 2.1) and then Open (Open File in Netscape) and browse to the file you just created.
Figure 2.1: Browser File pull-down menu.
You should see something resembling Figure 2.2. (We show here the original example.)
Figure 2.2: Display of simple HTML file.
Here is another example to try and then modify to make sure you understand the role of the tags:
<html> <head> <title>Second example </title> </head> <body text="red"> <h1>A Red page </h1> <p>This is a Web page showing examples of the basic formatting tags <br> that you could use. </p> <p>You do need to remember: <i>Less is more </i> when it comes to formatting. </p> <h6>This may be too small to read. </h6> <center>You may choose to <br> <b> center </b> your text. </center> <a href="test1.html">Back to the first example. </a> </body> </html>
On the CD Save this file as test2.html and open it in a browser as before. You should see something resembling Figure 2.3. Please note that all figures are in full color on the CD-ROM.
Figure 2.3: HTML example.
The text attribute in the body tag changes the text color to red. The default color is black. The text is centered on the screen; the screen capture shown here is of the upper-left corner of the screen. Notice also the small text produced by the h6 tags.
You also can specify a different color for the link text under the different situations indicated in Table 2.2.
Original link text
Link text after link has been taken: the visited link
Link text when the mouse button is down: the active link
Before going on to another example, do the following experiment in the browser: change the size of the window. The browser changes the layout to fit the new window. Figure 2.4 shows the window, which has been narrowed.
Figure 2.4: Narrowed window for HTML example.
To demonstrate the display of images, you need to have an image file! You can acquire (acquire is the technical term) an image file by creating one in a program such as Photoshop or Paintshop Pro or downloading one from a Web site. You do the latter by clicking on the right mouse button and following the instructions to Save picture as…. or Save image as…. You will be given a chance to name the image. The image type is indicated by its extension; generally.gif or .jpg. You cannot change the type of image. What you can do is use one of these programs to save it in a different format. Our example will use an image file named heart.gif. Create the following file, using the name of the image file you have acquired.
<html> <head><title>File with images </title> </head> <body> <center> <h3>A page with images </h3> <img src="/books/2/886/1/html/2/heart.gif"> </center> This is actually a page with the same image used several times. Here is a tiny one: <img src="/books/2/886/1/html/2/heart.gif" width="50"> and here is another one: <img src="/books/2/886/1/html/2/heart.gif" width="50" height="100">. Its aspect ratio (proportions) has been changed. <br> <a href="http://newmedia.purchase.edu/~Jeanine/origami"> <img src="/books/2/886/1/html/2/heart.gif"></a> </body> </html>
The hyperlink differs from the previous one in two ways. The writing between the <a> and the </a> tags is an image tag and not plain text. This coding makes the image the link. This is referred to as an icon. Often, small versions of images are links to larger versions. In this case, the small image is called a thumbnail. You can use text, an image, or both as the displayed link. The value of the href attribute is more complex than the one used in test2.htm, although the first one actually requires more explanation. When the browser comes upon a value for the href attribute that is a simple filename, it “assumes” that the file is located in the same place as the HTML document being displayed. In contrast, when the browser “sees” an href value starting with http://, then it “knows” to go to that location on the Web. There is one more item to note here. The href value is not complete because it appears to refer to a folder without a filename, namely the folder origami. When this happens, the server looks for a default file in the folder specified. A file named “index.html” or “index.htm” can serve as this default file. This is the file returned to the client.
Save this file as test3.html and invoke it from a browser. You should see something like Figure 2.5. We have resized the window.
Figure 2.5: HTML example with images.
Notice the border around the last heart on the screen. This indicates that this is a hyperlink. If you click on it, the browser will take you to the page specified by the href attribute, assuming you are connected to the Web. If you have a connection that requires you to tie up your telephone line, you might consider doing your development work without being connected. The local file references will all work, and you can move the cursor with the mouse over a link and then look at the lower toolbar to see what the href value is. This allows you to check the hyperlink destination without actually clicking on the link.
To demonstrate what happens if you make mistakes, try the following altered version of the previous HTML file:
<html> <head><title>File with images </title> </head> <body> <center> <h3>A page with images </h3> <img src="/books/2/886/1/html/2/heart.gif"> This is actually a page with the same image used several times. Here is a tiny one: <img src="/books/2/886/1/html/2/hart.gif" width="50"> and here is another one: <img src="/books/2/886/1/html/2/heart.gif" width="5" height="100">. Its aspect ratio (proportions) has been changed. <br> <a href="http://newmedia.purchase.edu/~Jeanine/origami"> <img src="/books/2/886/1/html/2/heart.gif"></a> </body> </html>
Internet Explorer produces the display shown in Figure 2.6.
Examine the screen shot shown in Figure 2.6 and the HTML source to see if you can determine what needs to be fixed before reading on.
Figure 2.6: HTML example with mistakes.
There seems to be three problems: an image is missing, one of the hearts is very skinny, and the text and images appear to be laid out strangely on the screen. Missing images arise from bad filenames or image files that are actually missing. Therefore, you need to determine that it is the second image and check the filename in the second img tag. The third image is the skinny one. Check out the width and height attributes. The layout is the subtlest problem. It arises from a fairly common error. Try to match up all the paired tags. The layout problem happened because centering is turned on and never turned off.
The last two examples use the table tags. The first example is a table of data.
<html> <head><title>Pretty Dull Data </title> </head> <body> <center> <h3>Numbers</h3> <table border="4"> <tr> <td>2</td><td>4</td><td>8</td> </tr> <tr> <td>3</td><td>9</td><td>27</td> </tr> </table> </body> </html>
This produces the screen shot shown in Figure 2.7.
Figure 2.7: Table of numbers.
If the border attribute is omitted, as you will see in the following example, there is no border. The value for the border attribute can be a number or other designations. The value 4 produces this three-dimensional effect.
Another use for table tags is to control the layout. The following HTML with table tags will position images and accompanying text.
<html> <head><title>Layout using tables </title> </head> <body> <h3>Models</h3> <table> <tr> <td>Traditional crane</td> <td><img src="/books/2/886/1/html/2/crane.gif"></td> </tr> <tr> <td>Broken heart</td><td> <img src="/books/2/886/1/html/2/heart.gif"></td> </tr> <tr> <td>Business card frog</td><td> <img src="/books/2/886/1/html/2/frog.gif"></td> </tr> </table> </body> </html>
This example demonstrates nesting of HTML tags similar to the example showing how to make an image into a link. In that example, the img tag was between the <a> and the </a> tags. Here, image tags are between the <td> and the </td> tags. Another way of expressing this is that the <img> tags are the contents of the td elements. The layout using tables produces the display shown in Figure 2.8. The screen shot shows the internal contents of the window. The browser used was Internet Explorer.
Figure 2.8: Names and images formatted using a table.
Practice using these tags, combining and mixing what you learned from each example. Although it might make you uncomfortable, make some intentional mistakes to see what is produced. For example, leave out some of the starting and ending tags for tables. This will exercise your debugging skills for later.