Internet Seminar: Creating Interactive Web Pages
In this lab, we add some spice to Web pages by focusing on links, color, images, and forms.
The <a> tag is used to specify a hyperlink. There are two things that you must specify in order to create a link:
The <a> tag is used to bracket the words that should come out underlined in blue. The information about the file being linked to is embedded inside the <a> tag .
Give an example:
<a href= "http://www.yahoo.com > link to Yahoo! </a>
produces
Point out that the http:// is necessary.
Common errors - leaving out or misspelling the URL. Show an example of what
happens. Also, leaving out the text for the anchor.
There are 5 color elements of a Web page: the background color, the color of the text, and three colors for links: the unvisited link color, the visited link color (been there, done that), and the active link color (sometimes visible while you hold down the mouse button before you release).
Any or all of these can be changed in the <body> tag.
Example: <body bgcolor="yellow" text="red"
link="green" vlink="pink" alink="white">
Point out some warnings:
In order to include a picture on a Web page, you first have to have a file containing a picture. The picture should be in .GIF, .JPG (or .JPEG), or .PNG format only. Other formats will not work with all browsers. (AOL supports .BMP and .ART formats, but they will NOT work with all other browsers. Just because it works in AOL doesn't mean it's OK to use.)
You can get a picture from a digital camera, from scanning it in, from creating one in Windows Paint accessory, or from right-clicking on an image in a Web page and saving it on your computer. You may be able to find some images already on your computer in the My Images folder.
There are two ways of including pictures on a web page:
Show an example with the BC logo that doesn't work well as a background. Show another example that works nicely. Show an example of a large picture that fills up the screen, but will be repeated if there is enough text that you have to scroll down.
2.
as an inline image. Use <img src="filename.gif"
/>
Show an example - see how the text flows around the image.
The image files must be in the same folder as the web page.
There is a saying that A picture is worth a thousand words. In Computer Science, we say that a picture is worth more than a thousand words: if you look at the file size of an image file, you will find that they are quite large. Large images make the page load slowly. For Web pages, small images are best.
We will show how to lay out a form on a Web page, using HTML.
NOTE: At this point, the form will not actually do anything. To get something to happen when a button is pressed requires some programming, not just HTML. (Later on in the semester, we will associate button clicks with JavaScript. Forms can also be used to send input to CGI programs, although we will not do that in this class.)
A form is included in a Web page using the tags <form> and </form>
Within the <form> tag we will include an attribute to give the form a name so that it can be referred to later (like an identifier name).
Various elements can be included in a form: text boxes, radio buttons, checkboxes, drop-down menus (the type usually used for selecting a state when filling out an address in a form) and buttons. We will show only text boxes and buttons.
Note that the input tag does not have "content:" and therefore ends with a / .
· To include a button, use
<input type="button" name=
"button1" value="Click Here" />
The name is a name that we are giving the button in order to be able to refer to it, if necessary (sort of like a variable identifier)
The value is the message that is displayed on the face of the button.
Emphasize that nothing will happen when the button is pressed, because this is only the HTML to lay it out.
· To include a text box, use
<input type ="text" name=
"firstname" value="John" />
The name is a name that we are giving the button in order to be able to refer to it, if necessary (sort of like a variable identifier)
The value is the default entry that is filled in to the text box, but can be changed by the user.
value can be left out, and then the box would be empty. Show an example both ways
Show that regular text and HTML tags can be interspersed with the form elements.
For example:
<form name = "myform">
Enter <b>first</b> name:
<input type="text" name="first" />
<br />
Enter <b>last</b> name:
<input type="text" name="last"
value="Smith" />
<p> <input type ="button" name="mybutton" value="Press Here" /> </p>
</form>
Some students were very interested in learning how to incorporate audio files into Web pages. Here is a discussion and some examples. (But the HTML on these pages has not been updated - it is all in caps)