Elementary HTML

Who should read this book?
This book is intended for several audiences:
1. 2.
Students enrolled in CSC251 at N.C. State. This book will provide the material for the lectures in this course. Students enrolled in CSC251 through the Friday Center at UNC Chapel Hill. This book will provide the necessary background in HTML to begin web programming in Perl. Anyone who is in charge of a large website that may need to edit some parts of the site by hand. With the simple step-by-step analysis of different aspects of HTML, this should make opening that page someone created with an HTML generator a little less scary! Anyone who knows very little or no HTML. This book really is elementary, and probably over-explains most of the HTML code presented, but it really presents the basics to get you going. Anyone who may need a refresher on HTML before going on to more advanced topics such as cascading style sheets or JavaScript. This book touches very lightly on these subjects and serves as a good primer for someone refreshing their HTML knowledge before jumping into more advanced topics.
3.
4.
5.
Another audience that may be interested in this book is those who may dabble in HTML, not touch it for 6 months, and then want to do some more in HTML. There are no real prerequisites to this book other than basic computer knowledge such as how to operate the computer, how to use a web browser, how to use a text editor, and how to open and save files. If you DONT know these things, you should probably take a hands-on course in beginning computingthis book is not for you YET! Also, students taking CSC255 at N.C. State should get the book entitled Elementary HTML and Web Programming instead of this book.
Elementary HTML V3.03 by Alan Watkins 2005-2009 Cover design and illustrations by Sidewalls, Alan Watkins and Mark Parzygnat 1991-2005
Elementary HTML v3.03
Chapter Summary
Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Chapter 6 Chapter 7 Chapter 8 Chapter 9 Chapter 10 Chapter 11 Chapter 12 Chapter 13 Chapter 14 Appendix A Appendix B
History and NCSU Web Pages Introduction to HTML Tags Lists, Preformatted Text, and Other Tags HR, Images and Hyperlinks Paths and Linking Images Backgrounds and Comments Tables Forms and Web Programming Imagemaps Frames Loose Ends JavaScript Design Issues Cascading Style Sheets Suggested HTML Exercises For Each Chapter Answers to Suggested Exercises
Page 3 Page 7 Page 11 Page 16 Page 21 Page 25 Page 29 Page 34 Page 44 Page 48 Page 55 Page 60 Page 64 Page 69 Page 77 Page 79
Chapter 1: History and NCSU Web Pages
Brief History and Terminology
1992 World Wide Web (www) released and the number of hosts broke a million 1993 The first browser, Mosaic, released (used at NCSU well into the 1990s) Since then, all sorts of extensions and other things that enhance the web have been added. In this book we are going to concentrate on HTML which stands for Hypertext Markup Language, and it isn't really a language, per se, but rather a set of instructions that tell a browser how to format text and other items for a user to see. Here are some important definitions concerning web pages:

Internet - All the computers in the world that are 'connected' WWW - World Wide Web - Collection of web pages on the Internet HTML - Hypertext Markup Language - The 'language' of web pages HTTP - Hypertext Transfer Protocol - The protocol that GETs a web page from a server to your browser XHTML Extensible HTML. Latest version of HTML is XHTML 1.0.
HTTP is not the only protocol browsers use...some other common ones are:

ftp - File Transfer Protocol - Used to transfer files https - Secure HTTP - Used to transfer web page information 'securely' gopher - Used to transfer text files in the early days of the Internet - named for University of Minnesota (The Golden Gophers)
One last important thing that should be said about HTML in general is that for all intents and purposes, there is no error checking. The browser takes what it is given and interprets it the best way it can. There are places on the Internet that will parse your web page and help you with some of this, but you can bet that in almost every web page someone makes using a text editor that there is an error somewhere, even if it doesn't affect the way the web page looks. That's what the information in this book is intended for...using a text editor to make, edit, or maintain web pages. Software packages that create web pages for you are creating HTML...users of these software packages may or may not know anything about HTML. However, you can be reasonably sure that a page created with a generator is free from syntax errors. For that reason, the HTML page parsing utilities available on the web probably get quite a bit less use than in the past.
Web Pages at N.C. State

Web pages reside on a 'web server'. You have to have a web server for people to be able to retrieve your web page. N.C. State has a web server set aside for students to use. The name of this server is www4.ncsu.edu. For everything we do in this class, www4 will work fine...if you get into more advanced features of web page creation, you will see how limited www4 really is. NCSU administration has limited this ability in order to keep all student web pages 'safe'. If you are not an NCSU student and dont have access to a web server, you can still play along. You can create files on your local computer, and then click file->open on your browser, and then click the browse button to load your pages. This is sort of like telling the browser you want to use your local computer as your web server. If this is what you are doing, you can skip to item#3 below. There are a few things you will have to do to create a web page and allow others to see it at N.C. State. Here they are along with instructions on how to do them: 1. Make a directory for your web pages to reside in At N.C. State, you MUST put your web pages in a directory in your home directory called www (lowercase). cd ~/ - Change to your home directory if not already there mkdir www - Make the directory for you web pages
2. Give the world access to this directory cd ~/ - Change to your home directory if not already there fs sa . www:servers l - Allow people to pass through your home directory cd www - Change to your www directory fs sa . www:servers rl - Allow people to get to and READ your www directory. Any other directories you create inside www inherit this attribute, so you dont have to set it for each directory.
3. Let's make a web page! Choose a text editor (I use pico or nano) and type in the following file and save it in www as index.html
<HTML> Hey, I have a web page! </HTML>
4. Test it out! Save the page you just made as index.html, call up a web browser (Netscape or Internet Explorer) and type the following in the URL (Uniform Resource Locator) box: (or do the file-> open thing if you created it on your local computer) http://www4.ncsu.edu/~homedir/index.html (Replacing homedir with your eos/unity id, ex: awwatkin for me) The reason this works is because ~homedir is bound to your home directory/www.
DO NOT go on to the next chapter until youve made a web page and can see it in a browser. This is the bottom building block of everything else we will go over!
Chapter 2 - Introduction to HTML Tags
Tag and HTML Syntax

A 'tag' is text in between <> that means something to the HTML interpreter. Tags shouldn't be overlapped. Close the innermost tag, then the next level up, and so on: <TAG1><TAG2>Text</TAG1></TAG2> - WRONG <TAG1><TAG2>Text</TAG2></TAG1> - RIGHT Often doing it wrong will work, but sometimes it will not.
The standard is to use lowercase letters inside tags, but as you can see, it is my preference to use uppercase. I think it makes it easier to read, but if youre a stickler for standards, use lowercase! HTML normally interprets multiple spaces, tabs, and returns as 1 space. You'll see how to get by this limitation later when we go over special characters. All HTML files should be saved as plain text with an .html extension. (.htm is ok too, but is really just there for Windows 8.3 filename compatibility).
Basic Tags For All Pages

All of the pages you make should have the following format: <HTML> <HEAD> <TITLE>Title</TITLE> </HEAD> <BODY> . . . </BODY> </HTML> This is an HTML document This is the page header part (No HTML code in header!!) Page titlepart of the header information End of the header The body is the rest of the page (where HTML code goes)
End of the body End of the HTML document
Headlines
Headlines are normally used at the beginning of sections of text. They are an easy way of making something stand out. For example, the word Headlines above was made with a headline tag. There are 6 you can choose from; you make them all relatively the same way: <H1>This is headline H1</H1> would give us:
This is headline H1
The rest look like this:
This is headline H2
This is headline H3
This is headline H4
This is headline H5
This is headline H6
All the headline tags add space above and below themselves, so you don't need to add any of the 'space creating' tags we'll go over in a minute unless you want more than is already added.
Changing Font Size

You can also make headlines or create emphasis with changes in font size...here's an example: <FONT SIZE=+1>This is font size=+1</FONT>
This is font size=+1

You can also go the other way....

This is font size=-1
This is font size=-2
The default font size is 3...you are setting these values relative to size 3. FONT has other attributes we'll see in Chapter #11. Also, this is the first tag where we used an attribute. SIZE is an attribute of the FONT tag which we set to some value. Values that contain spaces are required to go inside of quotes, otherwise theyre optional. I normally leave them off if theyre not required. Remember different tags may take different attributes!
Other Basic Tags

Bold - Make text bold This is <B>BOLD</B> This is BOLD. Italic - Make text italic This is <I>italic</I>. This is italic. Center - Center everything until end tag <CENTER>This is centered.</CENTER> This is centered. Line Break - Add a carriage return/linefeed to the text This line has <BR>a line break.<BR> This line has a line break. Note that BR has no ending tagas a convention, tags that have no ending tag can have a / placed at the end: <BR/> Paragraph - Start a Paragraph This line ends.<P>A new paragraph starts.</P><P ALIGN=CENTER>Another method of centering</P> This line ends. A new paragraph starts. Another method of centering
Note that although <P> does have an ending tag, it is very rarely used in this context.
10
Chapter 3 - Lists, Preformatted Text, and Other Tags
11
Lists
There are several different types of lists. Normally these will meet any of your needs in an HTML document. Ordered lists number each item in the list: <OL> <LI>Item 1</LI> <LI>Item 2</LI> <LI>Item 3</LI> </OL> OL stands for ordered list LI stands for list item
This code would generate the following: 1. Item1 2. Item2 3. Item3 There are some attributes you can add to the OL tag to change way the items are numbered. The format is: <OL TYPE=style START=value>
where style can be... 1 A a I i Numbers (default) Uppercase letters Lowercase letters Roman numerals Lowercase Roman Numerals
value is the value numbering should start at, numerically. Example: <OL TYPE=I START=2> <LI>Item1</LI> <LI>Item2</LI> <LI>Item3</LI> </OL>
12
This would generate: II. III. IV. Item1 Item2 Item3
Unordered lists are 'bulleted lists', which are used often in presentations and the like. <UL> <LI>Item 1</LI> <LI>Item 2</LI> <LI>Item 3</LI> </UL> This would generate:

Item1 Item2 Item3
Unordered lists can have a type attribute as well...valid values are:
disc (default) square
circle
Descriptive lists or definition lists are used when you're just looking for some indentation for your list items...from their name, they're also useful for putting definitions in a page: <DL> <DT><I>Term1 :</I></DT> <DD>Definition</DD> </DL> This would generate: Term1 : Definition There's nothing special about a definition list. They don't give any type of bullet or number to their list items, DT items aren't indented, and DD items are. Lists are another common item where people leave off the ending tags.
13
Also note that by nesting lists, you can come up with all sorts of attractive ways to list things, so experiment! 1. CSC 100 A. Lecture 1 B. Lecture 2 2. CSC 200 o Lecture 1 o Lecture 2
PRE - A Very Useful Tag

If you've started experimenting with HTML, you've probably come up with something you've already written that you'd like to put in a web page quickly. For example, say you have written a program like this:
//My program int main() { int a=1; //Assign a variable cout << "Hey"; //Print something }
BUT, when you put it in an HTML page, you forgot to add BR tags and other things, so it came out looking like this: //My program int main() { int a=1; //Assign a variable cout << "Hey"; //Print something } Now maybe it wouldn't take much time to fix this, but what if you have a list of your 1000 DVDs nicely spaced out and you don't want to format it in HTML? There's a tag that makes this easy...PRE (preformatted text). In fact, to print the program above correctly, I just put a PRE tag around it like this: <PRE>
//My program int main() { int a=1; //Assign a variable cout << "Hey"; //Print something }
</PRE> One thing to note about PRE is that tags inside a PRE block are still interpreted as HTML, so something like:
14
<PRE> <B>Hey</B> </PRE> will still print: Hey But, PRE is still a useful way to preserve your spacing. One other note is that PRE adds a blank line before and after the block.
Other Useful Tags

<EM>Emphasis</EM> Emphasis This is a logical rather than a physical tag because it tells how the text is being used, not how to display it. The display is left up to the browser. <STRONG>Strong</STRONG> Strong Another logical tag...normally rendered as bold. <CODE>10 Print "Hello"</CODE>
10 Print "Hello"
Notice this just changed to a mono-space font. <BLOCKQUOTE>Text</BLOCKQUOTE> This tag is used to indent a piece of text on the left and right. I've seen this used to format a direct quote from a source or for poetry: Whose woods these are, I think I know. His house is in the village though. <U>Underline</U> Underline <STRIKE>Strikethrough</STRIKE> Strikethrough
15
Chapter 4 - HR, Images and Hyperlinks
16
Horizontal Rule
Horizontal rules are very useful for separating sections of a web page. The HR tag is what is used for a horizontal rule. In addition, the HR tag takes other options that you may wish to use: <HR> - This is the default and should be the same as the next one <HR WIDTH=100%> <HR WIDTH=50%> <HR WIDTH=50> <HR WIDTH=50% ALIGN=RIGHT> <HR COLOR="red"> <HR NOSHADE SIZE=12 WIDTH=75%> <HR SIZE=12 WIDTH=75%> The HR tag doesn't have a closing tag and goes to the next line after drawing itself. The ALIGN attribute can take the values: LEFT, RIGHT or CENTER. The width can be a percentage or a number of pixels. Specifying NOSHADE turns off the 3D effect.
Images
The www has two standard formats as far as images go, and any browser should be able to display either type. They are .gif, pronounced 'jif', and .jpg, pronounced 'jay-peg'. A jpg image will sometimes have a .jpeg extension as well. Both of these image formats are pretty compact which makes them suitable for web pages. However, there can still be gifs and jpgs that are HUGE. HTML does provide ways of making images appear smaller on the screen, but the original file sizes will be the same, and the page can take forever to download. It is better to use a graphics program to reduce the size (physical and logical) rather than HTML. Any picture that is more than about 100KB is probably too big and should try to be reduced. Although current browsers can display other types of pictures, GIFs and JPGs are still the most common. Here is a list of information about both formats:
17
GIFs Invented by Compuserve Lossless compression Supports up to 256 colors Larger image or more colors take up more and more space Best for flat line drawings w/solid tones & simple images (clipart) Can be animated Support transparency (see below)
JPGs Stands for Joint Photographers Experts Group Lossy compression Supports up to 16.7 million colors Browser must uncompress...takes up a little more temp space and CPU cycles Better for photographs No animation No transparency
Images can also be transparent or not transparent. The following image is NOT transparent. You can see that the background behind the image shows through...this may be ok if you have a black background, otherwise it might not look how you want it to.
To overcome this, you can use your favorite graphics package to make the background transparent. When the background is transparent, it becomes 'invisible', and the background color of the page shows through...in this case white.
Images may also be 'hyperlinks', which is what we'll be going over in the next section. A hyperlinked object would look like this:
18
Notice the border around the 'true' outer edge of the image. You can get rid of the border or make it bigger with the information in a later lecture.
Hyperlinks
Hyperlinks are things that take you do a different place than where you are now. There are a few different places you can go, and you accomplish this by using a tag called A HREF (Actually A is the tag, HREF is an attribute) 1. You can go to another document If you want people to be able to click a link on your web page to get to Yahoo!'s search engine, you could enter the following: Click <A HREF="http://www.yahoo.com">here</A> to search Yahoo! Here's what it would look like in an actual page: Click here to search Yahoo! 2. You can go to a 'spot' in the current or other document This is accomplished by the use of what are called 'anchor' tags. Consider the following HTML document: <HTML> <BODY> <A NAME="myAnchor"></A> . ..Lots of HTML code.. . <A HREF="#myAnchor">Click here</A> </BODY> </HTML>
19
Now, if you clicked on the link that says 'Click here', you'd be taken back to the top of the page where the anchor was defined. You can link to anchors in other pages by using HTML code such as: <A HREF="http://www.page.com/index.html#myAnchor">Click here</A>
3. You can link to anything the browser can play, save or display This links to a picture... <A HREF="http://www4.ncsu.edu/~awwatkin/lamppost.gif">See it!</A> This links to a movie... <A HREF="http://www4.ncsu.edu/~awwatkin/clown.mov">See it!</A> This links to an FTP server (Gopher, telnet, etc)... <A HREF="ftp://ftp.ncsu.edu">See it!</A> Clicking this link will let you send me some email... <A HREF="mailto:awwatkin@unity.ncsu.edu">Mail me!</A> That's about it for links. There are several other things you can do with the A tag that are less common and won't be covered here. One other thing I do want to cover is making a link that pops up a new window. This is useful if someone is clicking to get help on something...when they close the new window, they will be right back where they were before without having to hit the back button. Here's an example that loads www.lycos.com in a new window. <A HREF="http://www.lycos.com" TARGET="_blank">Lycos</A> Ive used the TARGET attribute to tell the browser to open this page in a new window instead of the current one.
20
Chapter 5 Paths and Linking Images
21
Paths
When we talk about paths in HTML, we're normally talking about the paths we put in links, but the definitions we'll go over apply outside of HTML links. You can think of a path as a way of getting to a file on the web server. The first type of path is called absolute. An absolute path gives all the information that anyone on the web would need to get to the file in question without having any prior knowledge. So, for example, to get to the file x.html on the server www.yahoo.com in the TEMP directory, the absolute path to this file would be: http://www.yahoo.com/TEMP/x.html. We would use a link statement such as this: <A HREF="http://www.yahoo.com/TEMP/x.html">Yahoo!</A> The other type of path is called a relative path. A relative path can be thought of as directions on how to get to a file from where you are now. So, for example, if I am at my homepage: http://www4.ncsu.edu/~awwatkin, then we know that we are in the www directory of my unity home directory. Now, if I have another directory in my www directory called OTHER with a file called resume.html in that directory, I only need to know to go to the OTHER directory to get there, so I could put a path in a link statement like this: <A HREF="OTHER/resume.html">RESUME</A> Now, when we're at the resume page, we are now in a different location. We are in the OTHER directory, which is under the www directory, which is in my home directory. If the resume page wants to link to a page called info.html in a directory called STUFF which is in the www directory which is in my home directory, I can specify a link to this file with: <A HREF="../STUFF/info.html">INFO</A> ../ is a special shortcut to the directory right above the one you're currently in. ./ is a shortcut to the directory you are currently in. You can use absolute paths for every single link on your website, BUT it will slow things down. When you use an absolute path, the browser first looks up the name of the server, then contacts that server and requests the page in question. When you use relative links, you skip the lookup and contact (sometimes), which saves a lot of time. Using relative links also makes a web site more portable in case you ever have to move your website to a new server.
22
Linking Images
Almost every web page you'll make or visit will have some type of picture on it. The pictures can be static pictures or can be made into links. Regardless, you put an image on a page with the IMG tag with the SRC attribute:
<IMG SRC="http://www4.ncsu.edu/~awwatkin/GRAPHICS/redball.gif" ALT="red ball">
The above line simply produces the image of the file in the path: The 'ALT' parameter is optional, but should always be included. If the image can't be loaded, the text in this tag is supposed to be displayed. If it's not displayed, you can see what text is in the ALT parameter by holding the mouse over the broken link. Even if the picture loads, the text in the ALT parameter should be displayed if you hover the mouse over the picture. Two other tag parameters that can be useful with images are HEIGHT and WIDTH. As was discussed before, you should try to use graphics programs to reduce the size of a picture to the smallest size you need, but sometimes you may just need to tweak the size of an image a little bit, or blow it up...these parameters are very useful for these purposes.
<IMG SRC="GRAPHICS/redball.gif" HEIGHT=5 WIDTH=5>
<IMG SRC="/GRAPHICS/redball.gif" HEIGHT=50 WIDTH=50>
The final tag parameter Id like to discuss is the BORDER parameter. It was mentioned a couple of lectures ago that I would show you how to get rid of that border around a picture that is a link...here it is with and without the border: <A HREF="aPage.html"><IMG SRC="redball.gif"></A> <A HREF="aPage.html"><IMG SRC="redball.gif" BORDER=0></A> Note that making an image into a link is as simple as putting the A HREF and corresponding closing tag around the IMG SRC tag. Also note that the IMG SRC tag has no closing tag.
23
One other thing you can do with an image is to say where it should be displayed...consider the following: Text Text Text
I have put 2 images on the same line here, but I have used an extra attribute, ALIGN, to place one on the left and one on the right. Here's the code: <IMG SRC="GRAPHICS/redball.gif" HEIGHT=50 WIDTH=50 ALIGN=LEFT> <IMG SRC="GRAPHICS/redball.gif" HEIGHT=50 WIDTH=50 ALIGN=RIGHT> <CENTER>Text<BR>Text<BR>Text</CENTER> Notice that even though the text physically appears before the 2nd red ball, the code for it appears after the tag for the image. Getting everything aligned correctly is one of the more difficult tasks in HTML. Some other attributes <IMG SRC> will take:
SRC="URL" LOWSRC="URL" ALIGN=TOP ALIGN=BOTTOM ALIGN=MIDDLE ALIGN=LEFT ALIGN=RIGHT ALIGN=TEXTTOP ALIGN=ABSMIDDLE ALIGN=BASELINE ALIGN=ABSBOTTOM BORDER=# ALT="TEXT" HEIGHT=# WIDTH=# HSPACE=# VSPACE=# Image to load Load a low resolution image initially Align image differently, with respect to the row . . . . . . . . Put a # pixel border around the image (Default=1) Text to put out if image can't load or when mouse over Height of image in pixels Width of image in pixels Horizontal padding Vertical padding
24
Chapter 6 Backgrounds and Comments
25
Background Colors and Properties

There are a few basic things you can manipulate within the BODY tag of a page. Probably the most common are the background properties. The first thing you can do to the background is to change the default color. For example, if we wanted a page with red as a background color, we could make our BODY tag look like this: <BODY BGCOLOR="RED"> You can also specify other common colors (these should be recognized by any browser): Aqua Green Navy Silver Black Gray Olive Teal Blue Lime Purple White Fuchsia Maroon Red Yellow
...but what if you wanted a page that was kind of red, a little green and a lot blue? You can't really specify this color with a word, but you can tell the browser how much of each color you want in the background. For the page I just talked about, you could use the following BODY tag: <BODY BGCOLOR=#7733FF> The '#7733FF' represents the background color I just talked about. The 6 numbers actually tell the browser how much of each of three colors you want. This is an RGB value in hexadecimal...the first 2 digits tell how much RED you want in the color, the next 2 tell how much GREEN, and the last 2 tell how much BLUE. All of the color names the browser recognizes are just shortcuts for these hexadecimal values. Without digressing too much, just remember that after 09 comes 0Anot 10. 10 comes after 0F in base 16. The tag above that makes a RED background is the same as saying: <BODY BGCOLOR=#FF0000> - As much red as possible, no green or blue Now, if you made the background BLACK, you wouldn't be able to see any of your text since it's black too. So, HTML provides a way of changing a variety of text properties from within the BODY tag:
26
TEXT LINK VLINK ALINK
Text color Unvisited link color Visited link color Activated link color
As an example, here is a BODY tag that defines all of these: <BODY BGCOLOR=BLACK TEXT=WHITE LINK=RED VLINK=BLUE ALINK=YELLOW > I used some of the predefined colors, but you can use the hexadecimal format for any of these. Normally the only time ALINK is used is for completeness...the color that you choose for this only shows up for as long as someone holds the mouse button down on a link or when returning to a page from a page that was just visited by hitting the back button and before you click anywhere else in the page.
Background Images
You can combine the link colors you now know how to do with a background image. A background image can be something similar to what you see on someone's desktop computer as a background, but more often than not, backgrounds are 'textures' instead of pictures. Consider the following image:
This is a tiny image, only a few KB in size. The way browsers handle background images is if they don't fill up the screen, it 'tiles' them to fill up the screen. If you use an image such as the one I have above, all of these tiles blend together and make a nice background texture for your web page. To use this as the background image for a web page, just put the path to the image in the BODY tag using the BACKGROUND attribute:
27
<BODY BACKGROUND=/GRAPHICS/speck.gif> One other attribute you may want to be aware of is BGPROPERTIES="FIXED". This only works in IE and stops your background from scrolling.
Comments
Now that we are getting into some more advanced tags, you may want to put some information about the tags you are using in the web page itself. But, you may not want these notes to appear when the web page is loaded. You can accomplish this by using an HTML comment. Here's the format:  Everything in the tag is ignored. You can use this for notes, or to comment out some HTML code that may not be working exactly the way you want it, or for testing purposes.
28
Chapter 7 Tables
29
Tables
Tables are just that...tables. Tables have cells that contain different items. A table in its most basic form could just list some names and phone numbers: Name Phone John 555-1111 Jack 555-2222
The basic tags you need to make a table are: <TABLE> <TR> <TD> Beginning tag...says what follows is a table definition Table row Table data, a cell
All of the above tags have closing tags as well. A table is made up of a bunch of rows, which in turn are made up of a bunch of cells. If you want your table to have a border around it (like mine above), you can add a BORDER attribute to the TABLE tag: <TABLE BORDER=1> The number is the size of the border or the default (0) if not specified. Here's another table with some more tags and attributes.
Another Table Header Info Another Header Cell3
More Cell2 Text Cell1 Cell2
30
Let's break down the code I used to make this table line by line... <TABLE WIDTH=200 BORDER> <CAPTION>Another Table</CAPTION> <TR> <TH COLSPAN=2>Header Info</TH> <TH>Another Header</TH> </TR> <TR> <TD ROWSPAN=2>More<BR>Text</TD> <TD>Cell2</TD><TD ALIGN=RIGHT>Cell3</TD> </TR> <TR> <TD>Cell1</TD> <TD>Cell2</TD> </TR> </TABLE>
<TABLE WIDTH=200 BORDER> This tells the browser that what follows is a table definition. And puts a default border around the cells. It also specifies a WIDTH parameter. Be careful with this parameter. If you don't have it, the browser decides how to draw the table based on its size. If you specify a width, the table will be this width regardless the size of the browser. This has a practical use if the table needs to be at least a certain size to display correctly. <CAPTION>Another Table</CAPTION> This just puts what you have in between the opening and closing tags centered above the table. <TR> <TH COLSPAN=2>Header Info</TH> <TH>Another Header</TH> </TR> This section demonstrates a few things...first, notice the TH (Table Header) tag. There doesn't appear to be any difference in TH and TD except the TH data appears in bold, so <TH>A</TH> is equivalent to <TD><B>A</B></TD>. Back to the code...the <TR> tag tells us this is a table row. Next, TH tells us we're defining a data cell. This tag also has a new attribute...the COLSPAN attribute. This tells the browser that this cell is going to occupy 2 columns in the table. The next part is the text that is going in this cell. Then comes the closing tag for this cell. The rest of the section just defines one more normal cell with some text and then ends that cell and the row.
31
<TR> <TD ROWSPAN=2>More<BR>Text</TD> <TD>Cell2</TD><TD ALIGN=RIGHT>Cell3</TD> </TR> This section defines the row of the table. From the number of TD tags, you can see we're defining 3 cells. The first cell has another attribute we haven't seen: ROWSPAN. This tells the browser that this cell should be allocated 2 rows in the table. In the data for this data item, we added a break so we'd be sure to have some text on the 2nd line allocated for this cell. The second cell has nothing special in it. The last cell has an ALIGN attribute in the TD tag. It tells the browser to right-align the data for this cell. You can align data to the RIGHT, LEFT, or CENTER. <TR> <TD>Cell1</TD> <TD>Cell2</TD> </TR> There's nothing special about this section, but it does show what happens due to one of the cells in the previous row taking up 2 rows. The 1st cell specified actually goes in the second column of the table because the first column was taken by cell#1 in the previous row. </TABLE> Never forget to close a table. The results of a web page are unpredictable if you leave off the closing tag. Also, the data items in a table can be another table, and the code can get complex. I have seen an entire web page look blank because of a left off table closing tag. There are 2 other attributes you may want to use in the TABLE tag that I normally do not: CELLPADDING and CELLSPACING. Cellpadding is the amount of space in between the cell data and the edge of the cell. Cellspacing is the amount of space in between cells. One more thing about tables is they make it easy to create a newspaper or magazine effect to text...look at the following code: <TABLE> <TR> <TD>Left Column</TD><TD>Right Column</TD> </TR> </TABLE>
32
If we replace 'Left Column' and 'Right Column' with a bunch of text, it would look like this:
HTML
Today in HTML class, we learned about tables. There's all sorts of things we can do with them.
News
Today in the news a lot of things happened. Read more about them on page A-2.
Here's an opportunity to use a table within a table to put a border around the whole thing....
HTML
Today in HTML class, we learned about tables. There's all sorts of things we can do with them.
News
Today in the news a lot of things happened. Read more about them on page A-2.
List of Table Attributes and their effects:

Attribute align border bordercolor width height cellspacing cellpadding bgcolor summary title colspan rowspan valign nowrap Tag TABLE/TD/TR TABLE TABLE TABLE/TD TABLE/TD/TR TABLE TABLE TABLE/TD/TR TABLE TABLE TD TD TD/TR TD Effect Aligns table(deprecated)/text (left, right, center) Puts a border around the table (1-100) Defines color of the border Define width of table or cell Define height of table or cell or row Specify distance between cells in pixels Distance between cell contents and edge Specify background color Lets you specify a summary of the table May be displayed when mouse is over table Specify # of columns cell will take Specify # of rows a cell will take Alignment of text within a cell (top, middle, bottom) Causes text not to wrap, takes no value
33
Chapter 8 Forms and Web Programming
34
Forms
There's only so much you can do with forms without writing whats called a backend program to process the information. However, it is useful to know what they are and the tags used to create them so you will understand them when you come across them in HTML code. First well take a look at a form, then we'll look at the tags needed to create it, and then well talk about how forms interact with backend programs:
Your email address: Your Message

Default text
Your password:
Randomly Choose Something: How many classes are you taking? 1 2 3 Which browser are you using? IE Netscape
Alan BEN Chris
SUBMIT
CLEAR
35
Here's the code I used...

<FORM ACTION="lec6.html" METHOD=GET> <B>Your email address:</B> <INPUT TYPE="TEXT" NAME="email" SIZE=15 MAXLENGTH=30></INPUT> <B>Your password:</B> <INPUT TYPE="PASSWORD" NAME="pass" SIZE=10></INPUT><BR> <B>Your Message</B><BR> <TEXTAREA NAME="msg" ROWS=5 COLS=20>Default text.</TEXTAREA> <B>Randomly Choose Something:</B> <SELECT SIZE=3 NAME="selection"> <OPTION>Alan</OPTION> <OPTION SELECTED="selected">BEN</OPTION> <OPTION>Chris</OPTION> <OPTION>Don</OPTION> <OPTION>Ed</OPTION> </SELECT> <BR> How many classes are you taking?<BR> <INPUT TYPE=RADIO NAME="CLASSES" VALUE=1>1<BR> <INPUT TYPE=RADIO NAME="CLASSES" VALUE=2>2<BR> <INPUT TYPE=RADIO NAME="CLASSES" VALUE=3 CHECKED="checked">3<BR> <P> Which browser are you using? <INPUT TYPE="checkbox" name="IE" value="box1"> IE <INPUT TYPE="checkbox" name="N" value="box1"> Netscape<BR> <INPUT TYPE="submit" VALUE="SUBMIT IT!"></INPUT> <INPUT TYPE="reset" VALUE="CLEAR IT!"></INPUT> </FORM>
We'll break it down by section <FORM ACTION="lec6.html" METHOD=GET> This line tells the browser that what follows is going to be a form. In addition it tells what script the information will be sent to through the ACTION attribute, and how to send the data through the METHOD attribute. The 2 possible methods are GET (default) and POST. The differences are subtle, but I used GET because it will show you what is sent on the URL line. POST sends the data through an input stream for the backend script to read in.
36
<B>Your email address:</B>

<INPUT TYPE="TEXT" NAME="email" SIZE=15 MAXLENGTH=30></INPUT>
<B>Your password:</B> <INPUT TYPE="PASSWORD" NAME="pass" SIZE=10></INPUT><BR> <B>Your Message</B><BR> <TEXTAREA NAME="msg" ROWS=5 COLS=20>Default text.</TEXTAREA> There's nothing special about the lines that don't contain the INPUT tag. The lines with the INPUT tag define 3 different ways to input data. The first one says that we want input from a text box. Make the size of the box 15, but allow us to keep entering data until we get to a length of 30. The next input line says that the input is going to be a password, so we don't want to see what is typed...instead, put a * in the box when something is typed. This textbox will have a size of 10 with no real limit on the number of characters we can put in. The TEXTAREA tag says that we want a box to put text in. In this case, make it 5 lines deep and 20 columns across. Normally a TEXTAREA is used for a long message. Notice the use of the default text...
<B>Randomly Choose Something:</B> <SELECT SIZE=3 NAME="selection"> <OPTION>Alan</OPTION> <OPTION SELECTED="selected">BEN</OPTION> <OPTION>Chris</OPTION> <OPTION>Don</OPTION> <OPTION>Ed</OPTION> </SELECT> <BR> This section sets up the combo box. The SELECT tag says this will be a list you can scroll through and choose something from. Each OPTION tag represents one of your choices, and one of the options should have the SELECTED attribute set. The one with this attribute set will be the one that is highlighted by default.
How many classes are you taking?<BR> <INPUT TYPE=RADIO NAME="CLASSES" VALUE=1>1<BR> <INPUT TYPE=RADIO NAME="CLASSES" VALUE=2>2<BR> <INPUT TYPE=RADIO NAME="CLASSES" VALUE=3 CHECKED="checked">3<BR>
This section sets up the radio list. The only 2 things new here are the TYPE, which is RADIO and the CHECKED="checked" attribute, which tells which item you'd like selected by default. One other important point is that the NAME attribute defines how the buttons 'stick' together, so by having different names you could set up more than one radio selection list.
37
<P> Which browser are you using? <INPUT TYPE="checkbox" NAME="IE" VALUE="box1"> IE <INPUT TYPE="checkbox" NAME="N" VALUE="box1"> Netscape This sets up our check box...a checkbox is very similar to a radio button, but all the values associated with the same checkbox must have the same VALUE attribute. Also, you can check multiple boxes without adding an additional attribute.
<INPUT TYPE="submit" VALUE="SUBMIT IT!"></INPUT> <INPUT TYPE="reset" VALUE="CLEAR IT!"></INPUT> These are 2 special input types that are standard on most forms. They appear as buttons that you can click. The reset button clears any data that has been input, and the submit button sends the data to the place specified in the ACTION attribute. All of the data is in the form name=value, where name is replaced by all of the different NAME attributes, and value is whatever data the user input. </FORM> This tag ends the form.
Other Notes:

There is also an id attribute to the form tag. It's alphanumeric with no spaces and just provides a unique identifier for this form. Items other than TEXTAREA can have default values set via the VALUE attribute You can allow multiple selections in a drop down list by setting MULTIPLE="multiple" in the select tag There are other enhancements that have been made to forms, some of which are not supported by all browsers: o LABEL - Used to associate a text description with a form element o FIELDSET - Puts a box around a group of items o LEGEND - Provide a label in the fieldset o TABINDEX - attribute that allows you to specify what order the tab key will cycle through the form o ACCESSKEY - attribute similar to TABINDEX, but allows you to hit altto access that form element o BUTTON - Change the way default buttons look There's one more type of INPUT type...HIDDEN. It takes name and value attributes and is used to pass static info to the backend script. Example:
<INPUT TYPE=HIDDEN NAME=VARNAME VALUE=HIDDENVALUE/>
38
Web Programming
Understanding and creating forms is at the heart of web programming. Forms are the portals for information that is to be processed. When you sign up for a mailing list, search for something, or buy something online, a form is way this information is normally gathered. Using a form is easyyou enter some information and hit a button. But it doesnt end therelets take a look at whats happening behind the scenes:
1. I want form.html 2. Heres form.html 3. Heres my info 5. Results 4. Processing
Step#1 represents typing a web address in the URL box and hitting enter. Your request is sent to the web server, and the page is returned, which is represented by step#2. The web page that gets returned happens to have a form on it. You fill out the form, and when you hit the submit button, that information is passed back to the web server or wherever the ACTION attribute of the FORM tag said to send the information; this is represented by step#3. At this point, the server must do something with the information. Step#4 represents this step. Whether its searching databases to see what web pages match the keywords you entered on a form or validating a credit card number you entered on the form, some program written in a language such a Perl must produce a web page to send back to the user. This web page being sent back to the user is represented by step#5. This web page can be anything from a thank you for signing my guest book to a confirmation page for something youve ordered. Step#3 is passing user information to the web a web server, and steps #4 and 5 ARE web programming. In step#3, a strange looking string is passed to the web server that looks something like this:
39
name=Alan+Watkins&email=joe@home.com&msg=How+are+you%3F The meaning of this line is well defined. It is made up of variable/value pairs separated by &s. So, in this example we have 3 variable value pairs: name=Alan+Watkins email=joe@home.com msg=How+are+you%3F Obviously, a little more work needs to be done on this to make sense of it all. First, replacing all of the +s with spaces makes things look a little more normal, and finally replacing all occurrences of %2-digit-hex-number with their ASCII equivalents completes the transformation: name=Alan Watkins email=joe@home.com msg=How are you? Hmmmthat sort of looks like the beginning of a program where youve set some variables and the rest of the program operates on and takes different actions based on these variables. Thats exactly what a backend script does. One of these variables could be a password that the program compares to a stored password, and if it matches produces a top-secret web page. Or one of these variables could be the number of shirts you want to order, one could be your address, and one could be your credit card number. The program would then have all of the information it needed to validate your method of payment and know where to send a certain number of shirts. Based on the variables and values in this example, this is most likely the information for a guest book entry. The program will probably just write this information to a file and produce a web page that thanks the user for signing the guest book. Something else to notice about the information we have is that the variable names correspond to what we set the NAME attribute in our different form elements to. So in the previous example, we had a line of HTML that said: <TEXTAREA NAME="msg" ROWS=5 COLS=20>Default text</TEXTAREA> This made a box that we could type a message in. If we typed, How are you? and clicked the submit button, somewhere in the string that gets passed to the server would be the text msg=How+are+you%3F. So, you can control the names of the variables that get passed by changing the values of the NAME attributes in your form. Normally, a backend script is expecting certain variable names to be passed, because most of the time the script is written to process the input from a particular form.
40
So how does this backend program produce a web page? The same way you do! You make a file that a web browser reads to produce a web page by typing. A program cant type, but it can output information. So, anything output to the standard output stream by this program will be sent to your browser. If the output of this program happens to look like HTML code, then it has produced a web page. The only thing this program has to output that isnt in a normal web page is a line saying that what it is outputting is HTML. This is sort of like what youre doing when you save a file with an .html extension. Youre saying, This is a web page. The program does this by outputting a line that says:
Content-type: text/html\n\n So, if we were programming this in Perl, we would need the following line as the very one that wrote anything to standard output:
print "Content-type: text/html\n\n";
Before this line, there must be code to convert the string that was passed into a form that your program can understand. After this line, the possibilities are endless. For all of this to work, you need to have access to a web server and that web server needs to have an executable directory set up that will allow you to run programs in whatever language you will be using to do your web programming (lots of times, this special directory is called cgi-bin). If youre not the web server administrator, you may just need to ask that person to give you the permission to put programs in this directory. If you are the web server administrator, then you will probably need to set all of it up yourself. Your web servers documentation will have information on how to do this. To really learn and use web programming, you MUST learn a programming language, such as Perl, to write your back end programs in. Some examples of sample projects beginning web programmers can work on are given in the back of this book. A very simple example of checking a username and password is presented below. All our little project is going to do is take a username and password from the user and if it matches our predefined password, well tell the user theyre authenticated, otherwise well print out a failure message. First, lets make our form (Ive already typed my name and password as well):
41
Name:
Alan
Password:
****
SUBMIT
It cant get much simpler than that! Heres our HTML page that creates this form: <HTML> <BODY> <FORM ACTION="http://127.0.0.1/cgi-bin/chkpass.pl" METHOD=POST> <B>Name:</B> <INPUT TYPE="TEXT" NAME="user" SIZE=15 MAXLENGTH=30/> <B>Password:</B> <INPUT TYPE="PASSWORD" NAME="pass" SIZE=10/> <INPUT TYPE="submit" VALUE="SUBMIT IT!"/> </FORM> </BODY> </HTML> Ok, now that we have our form made, its time to write our backend script. For this example, well assume that the name and password dont have any spaces or special characters in them so we can make the parsing a little easier. In the form above, I typed Alan for the name and pass for the password. So the string that will be passed to the backend on standard input is: user=Alan&pass=pass Notice my NAME attributes in the HTML code are user and pass, which is exactly what gets passed to the backend along with the values I typed into these input items. It may be hard to follow the code below without knowing Perl, but the comments will tell you what the code is doing. I put this program in my cgi-bin directory and called it chkpass.pl, which corresponds to what I have in my ACTION attribute for this form.
#!C:/Perl/bin/Perl.exe #The previous line tells the system where the Perl interpreter isnothing else should be on that line $input=<STDIN>; ($nameval1,$nameval2) = split /&/,$input; ($junk,$name) = split /=/,$nameval1; ($junk,$pass) = split /=/,$nameval2; print "Content-type: text/html\n\n"; print "<HTML>\n<BODY>\n"; if ($name eq "Alan" and $pass eq "pass") { print "Alan, its you!!<BR>\n"; } else { print "Authentication failure.<BR>\n"; } print "</HTML>\n"; print "</BODY>\n"; #Store the passed in string in variable $input #$nameval1="user=Alan" and $nameval2="pass=pass" #$name="Alan" #$pass="pass" #Tell the browser this is a web page #This line just print out some HTML code #If the name is Alan and password is pass #Were authenticated and get the top-secret msg #Otherwise they get nothing #These 2 lines close our #open HTML tags
42
Depending on what the user types in, they will get one of two different web pages:
<HTML> <BODY> Alan, its you!!<BR> </BODY> </HTML>
or
<HTML> <BODY> Authentication failure.<BR> </BODY> </HTML>
Many things can cause your web program to malfunction. Check the following if the results arent what you expect: Make sure your ACTION attribute names the program you intended to run Make sure the script is executable Make sure the executable directory is set up correctly (see web server admin) Make sure the program doesnt have any syntax errors or logic errors Make sure you included the Content-type line first in the output Make sure whoever the script executes as has permission to execute files in the executable directory Make sure the directive (1st line of Perl script) is correct and doesnt have anything additional on the same linenot even a comment
If youd like a simple way of testing this or other web programming scripts, browse to: http://httpd.apache.org/download.cgi and download the version of Apaches HTTP server for your platform. For Windows, after the server is installed, you can put your HTML files in C:\Program Files\Apache Group\Apache2\htdocs and your Perl scripts in C:\Program Files\Apache Group\Apache2\cgi-bin. The directive youll need at the top of your scripts should point to your Perl executable. If Perl is not installed on your system, you can download it from http://www.activestate.com/Products/ActivePerl. If you take the defaults when installing this, your directive should be #!C:/Perl/bin/Perl.exe as in the example above. So, if you have these installed on your system, and you put the HTML from the previous page in the htdocs directory (call it example.html), and you put the Perl program in the cgi-bin directory (call it chkpass.pl), you should be able to browse to: http://127.0.0.1/example.html to test it out. 127.0.0.1 is a shortcut to whatever computer you are currently on. The nice thing about the Apache server is that after installation, everything you need is set up to test your web programming scripts as long as you use the default directories that I mentioned above.
43
Chapter 9 Imagemaps
44
Imagemaps
Imagemaps provide a way of letting different parts of an image take users to different locations. There are ways around using image maps, like making a bunch of different images, but imagemaps make the task easier. Also, there may not be a way of breaking an existing image up to do what you want. There are two different types of imagemaps: client-side and server-side. They basically do the same thing, but in years past, not all browsers supported client-side imagemaps. Today they all do, so HTML authors can use imagemaps even if they don't have control over the web server. Look at the following image for a demonstration of how an imagemap works:
Now, the HTML code so far is just the following: <IMG SRC="mymap.jpg" BORDER=1 USEMAP="#mymap"> The only new part here is where you tell the browser where the mapping is defined. The USEMAP parameter does this, and it tells the browser that the mapping is defined within a MAP tag called 'mymap'. Here's the code for defining the mapping, which can be anywhere in your HTML file: <MAP NAME="mymap"> <AREA SHAPE="rect"
45
COORDS="32,32,93,98" HREF="rectangle.html" ALT="RECTANGLE" > <AREA SHAPE="circle" COORDS="164,73,36" HREF="circle.html" TITLE="CIRCLE" > <AREA SHAPE="poly" COORDS="102,130,152,197,65,198" HREF="triangle.html" ALT="TRIANGLE" > <AREA SHAPE="default" NOHREF > </MAP> Let's break it down line by line...
<MAP NAME="mymap"> This tells the browser that this will be an imagemap definition named 'mymap'
<AREA SHAPE="rect" COORDS="32,32,93,98" HREF="rectangle.html" ALT="RECTANGLE" > <AREA SHAPE="circle" COORDS="164,73,36" HREF="circle.html" TITLE="CIRCLE" >
46
<AREA SHAPE="poly" COORDS="102,130,152,197,65,198" HREF="triangle.html" ALT="TRIANGLE" > All of these are essentially the same. The AREA tag says that this is one of the parts of the picture that will be 'clickable'. This clickable area is also called a hotspot. The SHAPE parameter tells what type of shape this area will be. All shapes are of type 'poly', but 'rect' is available because it is so common, and 'circle' is given because it would otherwise be very hard to define a true circle using the coordinates of a polygon. In a rectangle, the values in the COORDS attribute represent the top left and lower right corners of the rectangle, assuming that position 0,0 is the top left hand pixel of the image. In a circle, the coordinates are the center of the circle followed by the radius. Finally, in a polygon definition, the coordinates of the starting point along with each point where the polygon changes direction must be given. You dont have to give the final points coordinates because they are the same as the starting point. The HREF attribute tells what page should be loaded if a user clicks that area. The TITLE (or ALT) attribute is what is displayed if you hold the mouse over the area without clicking it. <AREA SHAPE="default" NOHREF> This tag tells the browser what to do with any area of the image that doesnt have any other definition. In this case, the NOHREF attribute tells it to do nothing. </MAP> This ends the imagemap definition. Of course, the hardest part about imagemaps is coming up with the coordinates to use in the definition. There is no easy way to do it, in fact, you really only have a couple of options. If you're only defining areas that are rectangles, you may be able to get it to work by trial and error. Otherwise, you will need to use a tool that will tell you the coordinates to use. The one I used for this chapter is called mapedit and is available at http://www.boutell.com/mapedit/. You can download a free trial to see how you like it.
47
Chapter 10 Frames
48
Frames
Basically, HTML frames are a way of allowing more than one web page to be displayed on a browser at one time. Normally, what frames are used for is to display a navigation page on one part of the browser while displaying content on another. This is the page we will use in this chapter to demonstrate how frames work:
Now, this isn't the usual frame setup you'll see...normally a page that uses frames will just have 2 frames (a navigation frame on the left and a main frame on the right), but in order to demonstrate all of the basics of frames, three frames are included here. If youve never played with frames before, then this will probably be the first time where youve needed to make more than one file to display a single page. In fact, the number of files you'll need for your frames page is the number of frames + 1. Here's why:
49
Since there will be more than one web page on the browser at one time, we need some way of keeping track of and controlling these pages. This is done with a frameset document. The frameset document holds all of the information about the individual frames. You can think of it as a type of control document but it normally doesn't really have any HTML code in it. Here is the frameset document I used to create my example page:
<HTML>  <FRAMESET COLS="20%,80%"> <FRAME SRC="frame_1.html" NAME=FRAME1> <FRAMESET ROWS="50%,50%"> <FRAME SRC="frame_2.html" NAME=FRAME2> <FRAME SRC="frame_3.html" NAME=FRAME3> </FRAMESET> <NOFRAMES> <BODY>No frame support.</BODY> </NOFRAMES> </FRAMESET> </HTML>
The first thing to notice here is that there is no BODY tag in this document. In fact, if you put a BODY tag in, the frame won't be displayed! The only other part of the document is where the frames dimensions and pages are defined. We'll take it line by line: <FRAMESET COLS="20%,80%"> This line tells the browser to split the browser into 2 columns. The first column should take up 20% of the screen, and the second part should take up 80%. You can specify an absolute number of pixels instead of a percentage. Also, if you wanted one of the columns to take up the rest of the available space, you could just put in a *. For example, the above line could have been written: <FRAMESET COLS="20%,*"> and the result would be the same. So, currently the browser would look like this:
50
A FRAMESET tag is really an allocation and spacing type of tag. It doesn't add any content. The next line adds some content: <FRAME SRC="frame_1.html" NAME=FRAME1> This line tells the browser that the first open space should be given to the file frame_1.html. We are going to give this space the name 'FRAME1'. I'll show you how this comes into play later. <FRAMESET ROWS="50%,50%"> The content of the other frame is going to be another frameset. To see what this line does, we have to look back at what has been done before. The line is saying to take the unclaimed space and split into 2 rows, each taking up the same amount of space. So after interpreting this line, here's what our browser would currently look like:
F R A M E 1
The next 2 lines add the content to the 2 vacant frames we still have which were created by the previous FRAMESET tag: <FRAME SRC="frame_2.html" NAME=FRAME2> <FRAME SRC="frame_3.html" NAME=FRAME3> Now we have allocated frame_2.html to the next available space, which happens to be the top part of the right side of the browser, and frame_3.html to the last spot. These have been given the names FRAME2 and FRAME3 respectively.
51
</FRAMESET> This line closes our inner FRAMESET tag since weve defined both frames within it. <NOFRAMES> <BODY>No frame support.</BODY> </NOFRAMES> The NOFRAMES section is used to display some type of web page for browsers that do not support frames. Nowadays, you really shouldnt see thisall browsers now support frames. You put this section right before you close the final FRAMESET tag. </FRAMESET> This line closes our outer FRAMESET tag. Technically, nothing is really final until the FRAMESET tag is closed. After both of ours are closed, here is how the browser would look, logically:
F R A M E 1
FRAME2 FRAME3
And that is exactly what our example looks like! That's it for the setup of the frame page. There are still some other things you need to know to get the whole frame page working the way you want to. For that, we'll need to look at one of the frame pages...let's look at frame_1.html since I've included most of the possibilities in that page: <HTML> <BODY> <H1>This is the page that will go in the first frame</H1><P> <A HREF="http://www.yahoo.com">Yahoo!</A><BR> <A HREF="http://www.lycos.com" TARGET=_top>Lycos</A><BR> <A HREF="http://www.ncsu.edu" TARGET=FRAME3>NCSU</A><BR> <A HREF="lec9.html" TARGET=FRAME2>Lecture 9</A><BR> </BODY> </HTML>
52
The thing you need to know about the pages within the frame is what happens when there is a link in the page. Normally, there are 3 things that you may want to do when someone clicks on a link in one of the frames: 1. Load a page in the current frame 2. Load a page in another frame 3. Replace all frames with the linked page To load a page in the current frame, you just use a normal link, like the Yahoo! link. <A HREF="http://www.yahoo.com">Yahoo!</A><BR> To load a page in another frame, add a TARGET attribute like in the NCSU link: <A HREF="http://www.ncsu.edu" TARGET=FRAME3>NCSU</A> You specify the name you gave the frame you want the new page to appear in as the target. The name comes from whatever value the NAME attribute of the target frame is in the frameset document. In this case we want the page to appear in the bottom frame, which we called FRAME3. To break out of the frame and make the link cover the entire browser (like a normal web page), we specify _top as the target as in the Lycos link: <A HREF="http://www.lycos.com" TARGET=_top>Lycos</A> If you have a lot of references to the same target, or just want to change the default of "_self" which loads in the current frame, you can specify a default using the <BASE> tag in the header of the page. So, seeing something like this on frame pages is pretty common: <HTML> <HEAD> <BASE TARGET="main" /> </HEAD> main doesn't have any real meaning, but most people do name the main frame main. That way, if they want something to appear in the frame main, they dont have to add the target attribute to all the link tags. There are a few more things you can do with frames, and a few more attributes you can add to your tags, but the above information will allow you to design just about any frame you need to. The rest of theses tags are summarized below:
53
Attribute BORDERCOLOR FRAMEBORDER FRAMESPACING TITLE
FRAMESET Attributes Explanation Color of the frame borders...gray is the default 0 - No frameset border, 1 - (default) show borders Width of frameset borders, 0 removes the border Description of this frameset
Attribute BORDERCOLOR FRAMEBORDER ID LONGDESC MARGINHEIGHT MARGINWIDTH NORESIZE SCROLLING TARGET TITLE
FRAME Attributes Explanation Sets the border color Same as above but only for this frame Unique id for this frame, must be alphanumeric without spaces Detailed description of this frame Number of pixels the top/bottom margins should be for this frame Number of pixels the right and left margins of this frame should be Takes no value, if specified, user can't change the size of this frame yes - scrollbars present, no - never, auto - when needed (default) Sets default target for this frame, similar to BASE tag (See below) Provide a title for this frame (not displayed)
Value _blank _parent _self _top NAME
Valid TARGET Values Explanation Opens in a new window Open in parent frame...requires nested framesets Open in same frame (default) Open in current window, replacing all frames Open in the named frame. If it doesn't exist, e same as _blank
54
Chapter 11 - Loose Ends
55
Embedded Objects
You can put things in your web pages like movies and sound. There is an attribute of the BODY tag we havent discussed that will allow you to play background music...BGSOUND...but embedded objects are a little different. You can think of them as a separate object within a web page. I've included one here along with the HTML needed to make it happen:
<EMBED SRC=http://www4.ncsu.edu/~awwatkin/SCRIPTS/blood_clown.mov AUTOSTART=FALSE VOLUME=20 WIDTH=350 HEIGHT=250 /> There's a few attributes you need to know about with the EMBED tag:
56
SRC WIDTH, HEIGHT HIDDEN AUTOSTART VOLUME
- Tells the location of the object to be embedded - Be careful with these...making it too small can hide the controls - Tells if the object is visible or not (TRUE/FALSE) - If TRUE, the object starts when the page is loaded - How loud to play the audio
Different applications allow other attributes to be used with this tag as well. The supported attributes depend on the application that plays the media. So, for example, while PLAY_LOOP=TRUE isnt supported for each application, it may make the object loop over and over if it is supported.
Address Tag
There is one more section to HTML documents we havent covered: the ADDRESS section. The purpose is for you to put author/version information at the bottom of a page. All you do is just enclose any closing information you want to include inside an <ADDRESS></ADDRESS> combination. The information appears in italics. You would put this tag right below your body close tag, </BODY>.
Special Characters
Sometimes you may want to include the text for a tag in your HTML page, or maybe you want more than 2 spaces to appear back to back. HTML provides special characters for this purpose. So, for example, to make the following text appear in an HTML page: <HTML></HTML> you would have to enter the following for them not to be interpreted as tags: <HTML></HTML> Here's a short list of some of the more common ones you may want to use:
< > & " < > & ® © " less than greater than ampersand Non-breaking space Registered Trademark Copyright Symbol Double quote
There are several others, too many to list here. Do a web search for special characters if you need a more complete list.
57
Superscript and Subscript

These are rather unique tagshere are two examples: A2+B2=C2 A<SUP>2</SUP>+B<SUP>2</SUP>=C<SUP>2</SUP> An=A1+A2+A3 A<SUB>n</SUB>=A<SUB>1</SUB>+A<SUB>2</SUB>+A<SUB>3</SUB>
Meta Tags
Meta tags provide a useful way to control the summary of your web pages in some search engines. When search engines go out looking for web pages to add to their databases, Mata tag information may be stored. So, you should put things that your web page concerns in META tags. They are not a complete solution for making sure your page appears at the top of every search engine, but they are still useful. The two most important attributes are DESCRIPTION and KEYWORDS. Here's an example: Say I have a page about dog diseases. More specifically, a page about Basset Hounds and the diseases they commonly catch. I could put the following Meta tags in the HEAD section of my web page: <HTML> <HEAD><TITLE>Alan's Basset Hound Page</TITLE> <META NAME="description" CONTENT="Common Basset Hound Diseases"> <META NAME="keywords" CONTENT="Basset Hounds Dogs Diseases"> </HEAD> Make sure you use an appropriate title as well, because search engines use the TITLE tag as well. Want to kill a spider? Enter the following Meta tag: <META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW"> Mata tags have other uses, but these are the most common. Remember, some search engines (Google for instance) do not use META tag information at all, but use things such as page content and heading tag info instead. The best rule of thumb is to always use appropriate information anywhere you can, even if its optionalsuch as the ALT attribute for images.
58
FONT revisited
There are a couple of attributes we didn't go over that you may use with the FONT tag that will spruce up your web pages. You can specify the size, face, and color...here's an example: <FONT SIZE=6 COLOR="RED" FACE="COMIC SANS MS"> This text was formatted with the FONT tag </FONT>
This text was formatted with the FONT tag

SIZE is relative to the default of 3 COLOR is the same as any color...can be a name or RGB values FACE is the name of a font...the system must recognize it to have effect There is an attempt to phase out the FONT tag in favor of CSS styles. Hopefully support for it will always remain so that you wont have to use a style sheet in order to specify the font name.
59
Chapter 12 JavaScript
60
Simple JavaScript
JavaScript is NOT HTML. JavaScript is NOT Java. JavaScript is a language that can run in a web page and do things that you can't accomplish with HTML alone. JavaScript can also help you make dynamic web pages. First let's go over how you add JavaScript to a web page. All you have to do is use a special tag that tells the browser that you will be adding some JavaScript: <SCRIPT LANGUAGE="JavaScript"> With this tag, the browser knows that what follows until the ending tag </SCRIPT> is not to be interpreted as HTML. Instead, it should be interpreted as whatever language we specified, and if the browser has the capability to interpret this language, the statements between these 2 tags will be executed. You used to have to enclose the actual JavaScript code in HTML comment tags, but it doesn't appear you need to do this anymore...I'll do it here for backwards compatibility. So here's what our little JavaScript program looks like: <SCRIPT LANGUAGE="JavaScript"> <! var mydate=new Date() document.write("<B>Date is "+mydate+"</B><BR>\n") --> </SCRIPT> In this piece of code, we have defined a variable called mydate and assigned to it whatever gets returned from creating a new object of type Date, which is a JavaScript construct. Then we are giving a string to be written out to the current document in the line that begins with document.write. Notice that since this is a program, you have to tell it the tags you want to write out because the output of this program is then interpreted as HTML code. Here is the result of putting this piece of code into our web page: Date is Fri Jul 25 16:14:40 EDT 2005 This sort of gives the impression that your web page is always current because the time that is put out is always the current time, even if you havent updated the page in weeks! You can also make dynamic web pages using JavaScript. Take a look at this:
61
Based on what name the user types in, they may get an entirely different web page. Here's the code: <HTML> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-var resp = prompt("Hi, who is this?","") if (resp=="Alan") document.write("<H1>Hi Alan. Don't forget to call me!</H1>") else if (resp=="Bob") document.write("<H1>Bob, you owe me $10!</H1>") else document.write("<H1>Hi "+resp+" welcome to my page!</H1>") --> </SCRIPT> </BODY> </HTML>
62
In this piece of code, the first line reads in a string from a pop-up box. The next 3 lines check to see what HTML code should be displayed based on what was entered in the pop-up box.
Event Handlers
Another popular thing done with JavaScript is to make an image change when the user runs their mouse cursor over it. Consider the following code: <IMG SRC="1.jpg" onMouseOver="src='2.jpg'" onMouseOut="src='1.jpg'"> onMouseOver and onMouseOut are known as event handlers since they are triggered by events, and you can inline JavaScript in them. In this case the events are mouse movements over or off of this picture. When the mouse is over the picture, it changes to 2.jpg, and when the mouse is not over the picture, it changes to 1.jpg. This is a very simple way to add dynamic content to web pages.
Validating Form Elements

Consider the following web page which has a simple form. The one field in the form is checked (via the event handler onSubmit) to make sure the user entered something before sending the information to the backend server. Returning false when an empty value is found stops the form from being submitted. <HTML> <HEAD> <TITLE>Check Form</TITLE> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> function checkForm(theform) { if (theform.terms.value=="") {alert("Enter something"); return false;} } </SCRIPT> </HEAD> <BODY> <FORM onSubmit="return checkForm(this);" ACTION="search.pl"> <INPUT TYPE="TEXT" NAME="terms"><INPUT TYPE="SUBMIT"> </FORM> </BODY> </HTML> That's all for JavaScript for this bookweve just touched the surface...if it interests you, there are several books and Internet resources on the subject!
63
Chapter 13 - Design Issues
64
The aesthetics of web page design could fill a book. The information presented here includes just a few guidelines to keep in mind when making your web pages. Its not crucial that you incorporate all of this information into every web page you make, but at least keep them in mind when youre putting a page together.
No Brainer Web Design
Make sure your page has a purpose Seems obvious, but whats the point of a web page that communicates nothing? Make sure the links work If the links on a page do not work, it makes it look like the page isnt maintained, or at least not maintained very often. Make sure your page has the content you intend it to have Test your pages after you make themnothing is perfect the first time through. Don't have any spelling errors...proofread! Spelling errors make a page look amateurishdefinitely not a site people would trust or want to buy something from. Make the web page and its reading level match your target audience If youre making a page for computer-literate people, dont insult them with information like what a mouse looks like. On the other hand, dont use complex networking terms for beginning computer users.
Stylistic elements
Try not to use blinking text Most browsers dont support this any more, but blinking text, especially when overdone, is VERY annoying. Make graphics an optimal size Don't have a 300K picture and then set the size to 1-inch by 1-inch. It's just too much for such a small picture. Use a graphics program to reduce the size. On the other hand, blowing a picture up too much will create pixelization. Use high contrast when putting text on pages Using low contrast makes reading difficult. The text should never blend in with the background. Avoid making web pages that are too 'busy' Lots of animations, etc are distractingdont overdo it. Maintain (graphical) consistency across pages. For example, using the same background across pages gives a consistent look and 65
lets people know theyre still on your site. Also, try to keep the look and feel of all the pages on a site consistent.
The first page should grab attention and inform this becomes more and more important as your site grows. HTML has linksuse them. The first page should tell the user what they can do while at your site...it shouldn't be one huge page with everything there is to do on your website. Don't make a page more than a page or two If you have a very long list of your CDs or something, using a multi-page web page is ok, but unless there is a reason to have such a long page, break it up into more than one page. Add a link at the bottom of the first page for the user to go to the next one. This will reduce page load time as well. Create 'a way out' of your web pages I came up with this idea one day when someone wrote me about something on my website. They found an informational link about it, but couldnt get to what they wanted. What happened is my information page showed up on a search engine, and when they got there, there was no way to get to the actual document they wanted. A link back to your homepage or one page up on the current topic will usually suffice. Make your web pages 'balanced' You have the whole web pageuse it. Dont slap everything on the left hand side; imagine your web page is a painting youre looking at. Test your pages on dialup People still us dialup...will your page really be important enough for someone to wait 5 minutes for everything to load? Try to make your web pages load as quickly as possible. If possible, try to limit the size of the page and all associated files to about 60K. It takes around 8 seconds at 56K to load 60K. There are more people on dialup that you'd imagine! And there are more pages on one topic they can choose if one doesnt load quickly enough.
Organizations
Hierarchical This is pretty much the type I've advocated here. This is the normal organization where you go further down a path on one topic the more links you click, and each topic would have a different path, which normally isnt connected to the other topics on your site. Linear Like a lesson...do one thing, and then go to the next. You see this often with book chapters online. Linear is like hierarchical except theres only one pathno
66
branching.
Random Kind of an all over the place design. Hard to maintain, hard to navigate, hard to hold interestavoid it if possible.
Ease of Navigation
If people cant find things on your site, they wont stay and they wont find what theyre looking for. There are several ways of providing the necessary navigation information to your site. Consider using navigation bars or tabs. Navigation bars are easily done with frames or by offering a content or information pagemost sites call this a site map. It is possible to have an inherent navigational scheme to your site if you put all of the main topics on the top page and everything is logically organized.
Horizontal Scrolling
Generally it is accepted that web pages should be designed for screen resolutions of 800x600 (this is the low end of course but guarantees consistency). One way to do this is to make all of your tables have a width of about 760. If you're designing a page that will be printed often, try to make it around 560 pixels wide or less. Often, designers will make every page inside of a table to enforce a consistent width.
Artistic
Organize things in a way that are appealing to the eye Again, think of a web page as a picture someone is looking at Make good use of whitespace Don't bunch things up or spread them out too much. A balance is always appealing to the eye. Color information Younger audiences such as children and preteens prefer bright, lively colors: http://nickelodeon.com
67
Late teens and early twenties prefer dark background colors with occasional use of bright contrast: http://www.korn.com 30s+ prefer light backgrounds with good contrasting text: http://www.ebay.com
Misc
Stay away from what I call the '1st time away from home' web page. This page normally starts out as a single picture at the top and says something about this being their first web page. Then, as time goes on, there just seems to be more of that on the same page. More pictures get added along with some text, and the length of the page grows to 10 or 15 screens long. It seems like college freshmen flock to this kind of page, probably because they havent fully learned about web design yet! For safety reasons, you may not want to give your phone number/address and put your picture on your web site. Lots of people break this rule, but when you put all of these things together on your website, youre giving out more information than most people would ever know about you. Many people aren't concerned with how their page looks, which is ok...but if you're doing a web page for a company or just want to make sure yours looks good, have someone who cares about how pages look critique yours. Avoid saying things like Click here to visit Yahoo! where the word here is a hyperlink; instead, consider saying something like Visit Yahoo! where the word Yahoo! is a link.
68
Chapter 14 Cascading Style Sheets
69
Style sheets are an extension to HTML and are very prevalent throughout the web. Their purpose is to manipulate HOW elements are supposed to look as opposed to WHAT they are supposed to do. The WHAT is HTML, the HOW is where style sheets come in. Most style sheets are NOT done by hand. What is presented here is intended to give a general overview of style sheets so that you can either create simple ones of your own, and so reading a web page that has a style sheet defined wont be so cryptic. An introduction to style sheets is best done with an example:
<HTML> <HEAD> <STYLE TYPE="text/css"> <! /*This is a class for the horizontal rule*/ .rule { border-top-width: 1px; /*Defines width of the line */ border-top-style: dotted; /*Set style of the border: solid, dotted, etc */ border-color: #FF0000; /*Defines color of the line */ margin: 1%; /*Defines amount of margin this element will use */ } A:link { /*This is the definition for a normal inks property*/ color: #FF0000; text-decoration: none; background: #0000FF; } A:visited { /* Links that have been visited */ color: #00FF00; text-decoration: overline; background: #0000FF; } A:hover { /* This effect is not shown in NN4.xx* / color: #999999; text-decoration: underline; background: #CCCCCC; } A:active { /* Color in NN4.xx is red */ color: #FFFFFF; text-decoration: line-through; background: #000000; } --> </STYLE> </HEAD> <BODY> <div class="rule"> </div> This will be between 2 horizontal rules <div class="rule"> </div> <HR> <!A regular rule <P><BR><P> <A href=" http://www.yahoo.com ">YAHOO!</A> <A href=" http://games.yahoo.com ">YAHOO!</A> </BODY> </HTML>
70
As usual, well explain it by section:
<HTML> <HEAD> <STYLE TYPE="text/css"> <! You define a style in the head tag. The style tag begins the definition, and the type attribute tells what type of style were defining. CSS means this is a cascading style sheet, which is the most common. The comment line is for browsers that may not support what youre doing, and it stops any of your style definition from being displayed. /* This is a class for the horizontal rule */ .rule { border-top-width: 1px; /* Defines width of the line */ border-top-style: dotted; /* Set style of the border: solid, dotted, etc */ border-color: #FF0000; /* Defines color of the line */ margin: 1%; /* Defines amount of margin this element will use */ } Within a style, you use C-Style /* */ comments. This section is defining whats known as a CLASS. Classes begin with a period followed by the name of the class. We decided to name this particular class rule since were using it to create sort of a horizontal rule. Classes let you define different styles for the same element, because you have to tell the browser when to apply the style. In the next section, youll see a style definition that actually changes the way a particular tag worksin that case, you dont have to tell the browser when to apply the styleit applies that style when you use the tag youve redefined. Notice that each line ends with a semi-colon except the lines with {}s. You can also leave off the semicolon on the line right before the closing curly brace. A:link { /*This is the definition for a normal inks property*/ color: #FF0000; text-decoration: none; background: #0000FF; } A:visited { /* Links that have been visited */ color: #00FF00; text-decoration: overline; background: #0000FF; } A:hover { /* This effect is not shown in NN4.xx, hold mouse over link to see effect * / color: #999999; text-decoration: underline; background: #CCCCCC; }
71
A:active { /* Color in NN4.xx is red */ color: #FFFFFF; text-decoration: line-through; background: #000000; } This section has four style definitions in it. Weve defined they way the four different types of links are displayed. We didnt have to redefine all of them, nor did we have to redefine all of the elements within each that we did. If you dont redefine one of the elements, the default behavior for that element will still hold. Instead of explaining each definition, well just explain one since we redefined the same elements for all of them. The tag weve changed the behavior for is the A tag and particularly the way links are displayed. For normal links, weve redefined 3 properties: color, text decoration, and background color. We want a regular link to have a blue background, red text, and no line anywhere. The other three types of links were redefined with different values. The best way to explain how this works is to look at the styles in actionwell do that next. --> </STYLE> </HEAD> This section closes our initial comment, ends the style definition, and closes the head section of our web page. Now we can see our styles in action! <BODY> <div class="rule"> </div> This will be between 2 horizontal rules <div class="rule"> </div> <HR> <!A regular rule <P><BR><P> To use our style class rule, we use the div tag. We didnt actually redefine anything about the HR tag, so we dont have to use that tag. What we did is define a class that can be applied to a division of the web page. So, this division of the web page will have a dotted red line at the top. Since the division is just a single line in this example, it will look like a dotted red horizontal rule. Weve done that twice and then put a regular HR tag to show that its functionality hasnt changed.
<A href="http://www.yahoo.com">YAHOO!</A> <A href="http://games.yahoo.com">YAHOO!</A> </BODY> </HTML> We did redefine the behavior of the A tag, so our redefined styles are displayed by default. The result is shown below:
72
Notice the style we applied to the 2 divisions of the web page that show up as red dotted lines. Also notice that the two things at the bottom of the page really are hyperlinks that you can click on. These are normal links that have not been visited yet, so the A:link style is what they use. We said we wanted these links to have a blue background, red text, and have no text decoration, which is exactly how they are rendered! If youve ever seen a web page where you could click on words that looked like regular text, what probably happen was that a style sheet was used that set the text decoration to none and the text color to black. If youre interested in style sheets, there are many books written on the subject. There are basically 3 ways of defining style sheets. What we just went over was an example of a global style sheet. The other 2 types are linked and inline. Global style sheets are defined in the page itself. Linked styles sheets are styles sheets that are stored in another document. Linked style sheets are useful if you want to use the same style over several pages, or if you want to hide the styles from the user. If your styles are defined in another file, you can use them by using the following tagyoure just linking the sheet in instead of defining it in the current page: <HEAD> <LINK REL="stylesheet" HREF="mystyle.css" TYPE="text/css"> </HEAD>
73
Youve already seen what our page looks like with a global style sheet; here is what it looks like using a linked styles sheet...notice how much cleaner the source code looks:
<HTML> <HEAD> <LINK REL="stylesheet" HREF="mystyle.css" TYPE="text/css"> </HEAD> <BODY> Here's some horizontal rules <DIV CLASS="rule"> </DIV> This will be between 2 horizontal rules <DIV CLASS="rule"> </DIV> <P><BR><P> <A HREF="a.html">YAHOO!</A> <A HREF="http://www.yahoo2.com">YAHOO!</A> </BODY> </HTML> All we did here was store what was between the <STYLE> </STYLE> tags in our original document in a file called mystyle.css. You can link in any style sheet thats available to you, whether you find one on the Internet you like, your friend wrote one, or you bought one. Another example of defining and using stylesnotice how different classes are used:
<HTML> <HEAD> <STYLE TYPE="text/css"> <!-/*Here, we are in effect redefining the H1 tag*/ H1 {font-family: serif; font-size: 55pt} /*Define some other usable classes*/ .red {color: red} .blue {color: blue} --> </STYLE> </HEAD> <BODY> <H1>Some Text </H1> <!Uses redefined H1 <H1 class="red">Some Red Text </H1> <!Uses redefined H1 and red class <H1 class="blue">Some Blue Text </H1> </BODY> </HTML>
74
Span and Div

The <span> tag is generally used to apply a style to inline text: <SPAN CLASS="red">This text uses the red class defined in the previous example</SPAN> and this does not. The <div> tag is generally used to apply a style to a block of text, which can also include other HTML elements: <DIV CLASS="foo"> The foo class style is applied here and <A HREF="page.html">here</A> as well. </DIV> The style attribute provides a way to define an inline style for a single instance of an element: <P STYLE="font-size: 10pt; color: red">This text is rendered as red, 10-point type</P>
Take a look at this example using span and div:

<HTML> <HEAD> <STYLE TYPE="text/css"> <!-.red {color: red} .mysize {font-size: 15pt} --> </STYLE> </HEAD> <BODY> <SPAN CLASS="red">This is red</SPAN>, but this isn't! <P> <DIV CLASS="mysize"> All of the elements in this block will be the same size. </DIV> <P> This is text with no style. </BODY> </HTML>
Note that using span and div along with style definitions, you can in effect create your own custom HTML tags. We used this in the very first example to create a tag that prints a dashed horizontal red line across the screen.
75
Precedence
In cases where inline, global, and linked style definitions conflict, the most specific style sheet will generally take precedence: inline overrides global, and global overrides linked.
Links
Heres a good link for a style sheet reference: http://www.w3schools.com/css Also, if you follow the following link and click on any of the examples, you will be in an interactive environment where you can see what a style looks like before putting it in one of your pages! http://www.w3schools.com/css/css_examples.asp
76
Appendix A Suggested HTML Exercises For Each Chapter

Suggested Exercise for Chapter#1 Get a sample web page working on whatever server you will be using for the class. Suggested Exercise for Chapter#2 Make a complete web page that has a headline, text with the font size changed, bold text, centered text, italic text, a line break, and a new paragraph. Make sure to give your web page a title too! Suggested Exercise for Chapter#3 Make a complete web page that has 3 lists. An ordered list of things you need from the store, an unordered list of your family members names, and a descriptive list with the definition of dog. Below these lists, add a section of pre-formatted text talking about your hobbies. Suggested Exercise for Chapter#4 Make a web page that has 3 hyperlinks and 3 images. Separate the images and links with a horizontal rule. Make one of the links open in a new window. Suggested Exercise for Chapter#5 Make a web page that has 3 image links on it. The first picture is in the current directory, the second is in a directory at the website http://www.yahoo.com/PICS/, and the 3rd is 2 directories up from the current directory.
Suggested Exercise for Chapter#6 Make a web page that has a background image and/or color of your choice. Be sure to give values to all of the link types as well. Add some text and a link to http://www.yahoo.com to your web page. Be sure to include a comment in the page about why you chose all of the colors that you did. Suggested Exercise for Chapter#7 Make a web page that contains a table with the names and addresses of 3 of your friends. Give the table a border of size 2. Experiment with some of the TABLE attributes listed on the previous page.
77
Suggested Exercise for Chapter#8 Make a web page that contains a form. The form should allow a user to put in a username and a message. There should also be 3 choices of the nature of the message, for example, personal, financial, and other. There should be submit and reset buttons, and when the submit button is hit, the data should be sent to ../../cgi-bin/msg.pl through the POST method. Suggested Exercise for Chapter#9 Make a web page that has an imagemap with 3 hot spots. You can use any picture you like to make the imagemap Suggested Exercise for Chapter#10 Create a web page that consists of 2 frames. The first frame should occupy the top part of the browser and the other frame should occupy the lower part of the browser. For the content of the pages, you can either make your own pages or just link to an existing website. Note that if you use existing websites, the only file you will have to make is the frameset document. Suggested Exercise for Chapter#11 Make a loose ends web page. This web page should have all of the loose ends we went over in this chapter. It should have META tags for a description and keywords, an embedded object, the text A2 + B2 = C2, the text <HTML> in red, and an ADDRESS tag. Suggested Exercise for Chapter#12 Make a web page using JavaScript that has JavaScript that prompts the user for their name and then displays that persons name and the date. Suggested Exercise for Chapter#13 Pick one of your favorite websites and see what elements of good/bad design you can spot. Suggested Exercise for Chapter#14 We only scratched the surface of CSS here. See if you can search the web and find the information on how to use the DIV tag to make a scrollable table, meaning that within the page, the table will have a scrollbar on the right hand side that isnt part of the browser itself. Then make a web page with one of these scrollable tables.
78
Appendix B Answers to Suggested Exercises

Example Answer for Chapter#1 Refer to your web server or ISPs documentation if you need assistance. Example Answer for Chapter#2 <HTML> <HEAD> <TITLE>My First Web Page</TITLE> </HEAD> <BODY> <H1>My Webpage</H1> <FONT SIZE=+1>This is my 1st web page</FONT><BR> <B>This </B>is <I>formatted</I> text. <P> <CENTER>This is centered</CENTER> </BODY> <HTML> Example Answer for Chapter#3 <HTML> <HEAD> <TITLE>Chapter 3</TITLE> </HEAD> <BODY> <OL> <LI>Milk <LI>Eggs <LI>Cheese </OL> <UL> <LI>Alan <LI>Bob <LI>Chuck </UL> <DL> <DT>Dog</DT> <DD>Any member of the canine family that says woof.</DD> </DL> <PRE>My hobbies include learning HTML and watching TV!</PRE> </BODY> </HTML>
79
Example Answer for Chapter#4 <HTML> <HEAD> <TITLE>Chapter 4</TITLE> </HEAD> <BODY> <A HREF=http://www.yahoo.com>YAHOO</A><BR> <A HREF=http://www.lycos.com>LYCOS</A><BR> <A HREF=http://www.tvland.com TARGET=_blank>TV Land</A><BR> <HR> <IMG SRC=../GRAPHICS/image1.jpg> <IMG SRC=../GRAPHICS/image2.jpg> <IMG SRC=../GRAPHICS/image3.jpg> </BODY> </HTML> Example Answer for Chapter#5 <HTML> <HEAD> <TITLE>Chapter 4</TITLE> </HEAD> <BODY> <A HREF=http://www.yahoo.com><IMG SRC=./image1.jpg></A><BR> <A HREF=http://www.lycos.com> <IMG SRC=http://www.yahoo.com/PICS/image2.jpg></A><BR> <A HREF=http://www.tvland.com><IMG SRC=../../image3.jpg></A><BR> </BODY> </HTML> Example Answer for Chapter#6 <HTML> <HEAD><TITLE>Chapter 6</TITLE></HEAD> <BODY BACKGROUND=../GRAPHICS/speck.gif BGCOLOR=BLUE TEXT=WHITE LINK=RED VLINK=BLUE ALINK=YELLOW>  This is my <A HREF=http://www.yahoo.com>link</A> </BODY> </HTML>
80
Example Answer for Chapter#7 <HTML> <HEAD><TITLE>Chapter 7</TITLE></HEAD> <BODY> <TABLE BORDER=2> <TR><TH>Name</TH><TH>Address</TH></TR> <TR><TD>Alan Watkins</TD><TD>123 1st St., Raleigh NC 27609</TD></TR> <TR><TD>Bob Jones</TD><TD>456 His 2nd St., Raleigh NC 27609</TD></TR> <TR><TD>Cherry Wilkes</TD><TD>789 3rd St., Raleigh NC 27609</TD></TR> </TABLE> </BODY> </HTML> Example Answer for Chapter#8 <HTML> <HEAD><TITLE>Chapter 8</TITLE></HEAD> <BODY> <FORM ACTION=../../cgi-bin/msg.pl METHOD=POST> <B>Username: </B><INPUT TYPE=TEXT NAME=name SIZE=10></INPUT> <BR>
<B>Your Message</B> <BR> <TEXTAREA NAME="msg" ROWS=5 COLS=20>Type your msg.</TEXTAREA> <B>What is your message about? </B> <SELECT SIZE=1 NAME="selection"> <OPTION SELECTED=selected>Personal</OPTION> <OPTION >Financial</OPTION> <OPTION>Other</OPTION> </SELECT> <BR> <INPUT TYPE="submit" VALUE="SUBMIT"></INPUT> <INPUT TYPE="reset" VALUE="RESET"></INPUT> </FORM> </BODY> </HTML>
81
Example Answer for Chapter#9 <HTML> <HEAD><TITLE>Chapter 9</TITLE></HEAD> <BODY> <IMG SRC="mymap.jpg" BORDER=1 USEMAP="#mymap"> <MAP NAME="mymap"> <AREA SHAPE="rect" COORDS="0,0,100,100" HREF="area1.html"> <AREA SHAPE="rect" COORDS="0,100,100,200" HREF="area2.html"> <AREA SHAPE="rect" COORDS="0,200,100,300" HREF="area3.html"> </MAP> </BODY> </HTML> Example Answer for Chapter#10 <HTML> <HEAD><TITLE>Chapter 10</TITLE></HEAD> <FRAMESET ROWS="20%,80%"> <FRAME SRC="http://www.yahoo.com" NAME=FRAME1> <FRAME SRC="http://www.ebay.com" NAME=FRAME2> </FRAMESET> </HTML> Example Answer for Chapter#11 <HTML> <HEAD> <TITLE>Chapter 11</TITLE> <META NAME="description" CONTENT="Chapter 11 HTML"> <META NAME="keywords" CONTENT="Loose Ends Misc"> </HEAD> <BODY> <EMBED SRC=song.wav AUTOSTART=TRUE/> A<SUP>2 + B<SUP>2 = C<SUP>2<BR> <FONT COLOR=RED><HTML></FONT><BR> </BODY> <ADDRESS>Version 1</ADDRESS> </HTML>
82
Example Answer for Chapter#12 <HTML> <HEAD><TITLE>Chapter 12</TITLE></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-var resp = prompt("Hi, who is this?","") document.write("Hi <B>"+resp+"</B>!!<BR>\n") var mydate=new Date() document.write("The date is <B>"+mydate+"</B><BR>\n") --> </SCRIPT> </BODY> </HTML> Example Answer for Chapter#13 Any answer is fine. If you need suggestions, try www.yahoo.com or www.ebay.com. Example Answer for Chapter#14 To do this, I searched the web using Yahoo! for these terms: scrolling table div This gave me links that had information about using an overflow attribute in the DIV tag: <HTML> <HEAD><TITLE>Chapter 13</TITLE></HEAD> <BODY> <CENTER><H1>My Scrollable Table</H1> <DIV STYLE="height: 150; width: 100; overflow: auto;"> <TABLE BORDER=1 WIDTH=100%> <TR><TD>cell 1 <TR><TD>cell 2 <TR><TD>cell 3 <TR><TD>cell 4 <TR><TD>cell 5 <TR><TD>cell 6 <TR><TD>cell 7 <TR><TD>cell 8 <TR><TD>cell 9 <TR><TD>cell 10 </TABLE> </DIV> </CENTER> </BODY>
83
</HTML>
84

Elementary HTML

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Elementary HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Who should read this book?

This book is intended for several audiences:

Elementary HTML v3.03

Elementary HTML v3.03

Chapter 1: History and NCSU Web Pages

Elementary HTML v3.03

Brief History and Terminology

Elementary HTML v3.03

Web Pages at N.C. State

Elementary HTML v3.03

<HTML> Hey, I have a web page! </HTML>

Elementary HTML v3.03

Chapter 2 - Introduction to HTML Tags

Elementary HTML v3.03

Tag and HTML Syntax

Basic Tags For All Pages

End of the body End of the HTML document

Elementary HTML v3.03

Changing Font Size

This is font size=+1

This is font size=+2

This is font size=+3

This is font size=+4

You can also go the other way....

Other Basic Tags

Elementary HTML v3.03

Chapter 3 - Lists, Preformatted Text, and Other Tags

Elementary HTML v3.03

Elementary HTML v3.03

This would generate: II. III. IV. Item1 Item2 Item3

Item1 Item2 Item3

Unordered lists can have a type attribute as well...valid values are:

disc (default) square

Elementary HTML v3.03

PRE - A Very Useful Tag

Elementary HTML v3.03

Other Useful Tags

Elementary HTML v3.03

Chapter 4 - HR, Images and Hyperlinks

Elementary HTML v3.03

Elementary HTML v3.03

Elementary HTML v3.03

Elementary HTML v3.03

Elementary HTML v3.03

Chapter 5 Paths and Linking Images

Elementary HTML v3.03

Elementary HTML v3.03

<IMG SRC="GRAPHICS/redball.gif" HEIGHT=5 WIDTH=5>

<IMG SRC="/GRAPHICS/redball.gif" HEIGHT=50 WIDTH=50>

Elementary HTML v3.03

Elementary HTML v3.03

Chapter 6 Backgrounds and Comments

Elementary HTML v3.03

Background Colors and Properties

Elementary HTML v3.03

TEXT LINK VLINK ALINK

Elementary HTML v3.03

Elementary HTML v3.03

Elementary HTML v3.03

Another Table Header Info Another Header Cell3

More Cell2 Text Cell1 Cell2

Elementary HTML v3.03

Elementary HTML v3.03