2. How Do I Set up My Web Site?
2.1 What Is A Homepage and Where Do the Files Reside?
A homepage is a first level file that contains HTML (or XML) script code that a client browser program can interpret and display. The script is usually HTML 3.2 or 4.0 but could be other versions or XML or other more specialized markup languages.
The default name of the file is index.html (or it could be index.htm on an MS Windows system). It is placed into the .mosaic subdirectory of a users directory on an Nx machine. Suppose that Johnny Braggadocio had a user account on a local network and that his user name is
braggadocio
In the braggadocio directory, he needs to make a subdirectory (use
> mkdir .mosaic
for UNIX flavored operating systems or
> md .mosaic
for MS Windows type operating systems). The .mosaic is a "dot"
directory, which means that it is hidden and can only be accessed by listing
it with the "dot" in the name ( > ls .mosaic or > cd
.mosaic). The homepage index.html for Johnny Braggadocio goes in
this Nx directory.
users/braggadocio/.mosaic/index.html (users may be a different name)
There must be a Web server on the local network
running as a service on a dedicated server and it has an IP address and a
DNS name such as
www.juniper.cs.unr.edu
for the host and network.To access the homepage of Johnny Braggadocio, the Web server must have an address for Braggadocio that includes the path and filename, without which case it will retrieve the default homepage
users/braggadocio/.mosaic/index.html
Any user can access the Braggadocio homepage by using one of the following
addresses.
www.cs.unr.edu/~braggadocio
www.cs.unr.edu/~braggadocio/index.html
http://www.cs.unr.edu/~braggadicio/index.html
The Web server will go to the braggadocio
directory and look under the .mosaic subdirectory for a given
file, or if none is given, it will look for the default homepage
file with the name index.html.If Johnny Braggadocio had a subdirectory named photos under the subdirectory .mosaic with another homepage type of file named album1 then it could be accessed by a user's client browser with the URL
www.cs.unr.edu/~braggadocio/photos/album1.html
although the actual path (which does not work as a Web address) is
www.cs.unr.edu/~braggadocio/.mosaic/photos/album1.html
For our purposes here we will use the CS computer
laboratories and so we need to log in and get the cursor in our main
directory. Then we check to see if there is already a subdirectory named
".mosaic" and if not, then we make one (otherwise we use the existing
one). In that subdirectory, we will put our HTML files (including "
index.html"). To change to the homepage directory, we type the following.
> cd .mosaic
If there is an error, then there is no ".mosaic"
subdirectory present and one must be created by typing
> mkdir .mosaic
> cd .mosaic
> ls -l * (get detail listing of this directory)
There will be nothing in the subdirectory ".mosaic"
when it is first created. We will put the main homepage file
index.html
there when we create it with an editor.2.2 How Do I Write A Homepage HTML Script Template?
To write a hypertext markup language (HTML) script we need a good text editor that saves the file in ASCII text format (no word processor special formats will work, although some of them will convert your wordprocessor files to HTML - we warn against this or other programs that write HTML script because the script is very difficult to read and contains extra tags that we don't need). If a UNIX type of operating system is used, then EMACS is an excellent editor (and is recommended here). For MS Windows users, the basic text editor edit is sufficient. MS WordPad can be used, but care must be taken that the file name is preserved (it may save your file as index.html.txt or index.txt when you provide the file name index.html). The first step is to bring up the editor with the file name index.html. Then the HTML script can be typed in and saved as index.html.
HTML is a tag oriented language, which means that the special instructions for formatting the display are given between the tag indicators "<" and ">". Most tags come in pairs of open and close tags, such as <B>...</B>, which means that everything between <B> and </B> will be displayed in bold face. The following tags define a basic template that should be used to fill in other script that does special things.
<HTML>
<HEAD><TITLE> This is My Title </TITLE>
</HEAD>
<BODY>
........................................
......(extra script goes here)..........
........................................
</BODY>
</HTML>
The title (within the TITLE tags is displayed in the top bar of the browser and is optional (not required). Other things can appear within the HEAD tags, such as JavaScript functions. The main material that gets displayed in the browser window goes inside the tags
<BODY>...</BODY>
This is where we put various text and images for
display, as well as and links to load files from other URLs.Our first homepage uses the teach-by-example method. We will make a simple homepage, explain it somewhat, and then display it.
<HTML> <HEAD>The First Example </HEAD> <BODY> <H1> Hello WWW! (heading Level 1) </H1> <H2> Hi, again! (heading Level 2) </H2> <B> This is bold.... </B> <I> and this is italic.. </I><BR> <U> and this is underlined..</U><BR> <CENTER> This is centered in the browser window.</CENTER><BR> <BIG> This is bigger than regular. </BIG><BR> This is regular text without any special formatting. It will flow onto the screen from left to right and then wrap to the next line if it is too long. If you put in a space between words, it will show, of course. But if you put in two or more spaces, only one space will show on the screen.<P> Now suppose that we want to load an image that has the file name "starglim.gif" into the window at the current cursor location. See below. First, we are going to use a <BR> tag for break (carriage return/line feed) and <P> for "paragraph" (P gives a double break).<BR><P> <IMG SRC="starglim.gif" WIDTH=100 HEIGHT=100><P> </BODY> </HTML>
Web (client) browsers can load in images in the following image formats.
gif, png or jpeg
if it each one is in the same (current) directory as the file that calls it,
or if it is in a subdirectory of the current directory and path has that
subdirectory in the given image file name (e.g.,
<IMG SRC="/myimages/starglim.gif">
Note: In the development phase of your Web site it is much easier
to just make a directory on your local machine (call it mosaic to
indicate that it is where you .mosaic directory files are being
temporarily stored). After you edit your index.html file and
save it, then run Netscape, click on File on the top bar (left
side), then on Open Page. When the pop-up box shows on the screen,
click on the Choose File button on the right, select the mosaic
directory and the index.html file and click Open. The browser
will read you file, interpret it and display it on the screen. You can
have the browser and the editor open at the same time in different
windows and
i) edit (file with editor)
ii) save (file from editor)
iii) reload (file in browser)
This will allow you to efficiently see the results of your edits immediately
and without a network connection or Web server. This works for HTML files
and HTML files that use JavaScript that is interpreted by the browser, but
will not work for PHP or server-side programs that interact with the Web
server.
2.3 How are Fonts, Colors and Horizontal Bars Scripted?
2.3.1 Setting Font Faces. Fonts, background color and text color are set in the <BODY> tag and these persist until changed with a special font/color tag. Consider the following examples where we first set the font to a size and next where we make the font size 1, 2 or 3 steps larger and 1, 2 or 3 steps smaller, relative to the base font. Each open font tag must be paired with a close font tag
<FONT ... > ... </FONT>
The last two of the tags listed below make the font a little bigger or a little smaller, respectively than the base font.
<FONT SIZE=7>..</FONT> (absolute size)
<FONT SIZE=6>..</FONT>
<FONT SIZE=5>..</FONT>
<FONT SIZE=4>..</FONT>
<FONT SIZE=3>..</FONT>
<FONT SIZE=2>..</FONT>
<FONT SIZE=1>..</FONT>
<FONT SIZE="+1">..</FONT> (relative to present size)
<FONT SIZE="+2">..</FONT>
<FONT SIZE="+3">..</FONT>
<FONT SIZE="-1">..</FONT>
<FONT SIZE="-2">..</FONT>
<FONT SIZE="-3">..</FONT>
<BIG> . . . </BIG> (a little bigger)
<SMALL> . . . </SMALL> (a little smaller)
2.3.2 Setting Background and Text Colors. To set the background
color and the text color for a page, we use the following script inside
of the BODY tag itself. We designate a color by mixing red, green
and blue. Each color is designated by two hexadecimal digits, say Hh,
where H is the most significant hexadecimal digit and h is the least
significant.As we know, a byte (8 bits) makes two hexadecimal digits (the leftmost 4 bits are H and the rightmost 4 bits are h). Each hexadecimal digit is one of
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F where A = 10, B = 11, C = 12, D = 13, E = 14 and F = 15Thus two hexadecimal digits H12 take values of from 0 to 255 (256 different 8-bit binary numbers 00000000 to 11111111. This gives 256 shades of red, 256 shades of green and 256 shades of blue for 256x256x256 = 224 color combinations.
Putting the respective bytes together for red, green and blue, we obtain 3 bytes (one for red, one for green and one for blue). Each byte consists of 2 hexadecimal digits. Thus we have a color.
R1R2G1G2B1B2
A color is composed of 6 hexadecimal digits: 2 each for red, green and blue.
The 6 hexadecimal digits go from 00 00 00 (black) to FF FF FF (white, or full
intensity). The 3 bytes yield 224 > 16 million different colors.
Some basic color mixtures are:
red and green => yellow green and blue => teal red and blue => magenta red and green and blue in equal amounts => grayTo make text printable from the Web and be readable, we should have a lighter background and a darker text because the background does not print out but the text does (try printing an almost white text on a white paper background - it is unreadable). We set the background color and text color inside of the opening body tag as shown in the following examples.
<BODY BGCOLOR="#FF0000" TEXT="#000000"> (red BG, white text)
<BODY BGCOLOR="#00FF00" TEXT="#777777"> (green BG, med. gray text)
<BODY BGCOLOR="#0000FF" TEXT="#FFFFFF"> (blue BG, white text)
<BODY BGCOLOR="#FFFFFF" TEXT="#000000"> (white BG, black text)
<BODY BGCOLOR="#BBBBEE" TEXT="#884444"> (blue-gray BG, brownish text)
The first tag sets the background color to red (red =
255, green = 0, blue = 0) and the text color to black (red = 0, green = 0,
blue = 0). The second tag sets the background to green and the text to gray
(if red, blue and green are set to the same values, the result is a gray,
from black = 000000 to white = FFFFFF).The third tag has blue background and a white text color. The fourth has a white background and black text. The fifth tag has a light gray that is slightly bluish (take BB, BB and BB to give light gray and then use the remainder of the blue, FF = BB + 44, so we get light gray with a little (44) blue extra on top of that).
We can also use several predefined colors, which are white, black, red, blue, navy, green, teal, pink, yellow, orange, gray, cyan, silver, brown and magenta. The following example shows the use of the named colors.
<BODY BGCOLOR="silver" TEXT="magenta"> ................................... ................................... </BODY>Once the background and text colors are set, they persist throughout that page file (although links to other files cause the colors in the other files to take effect). However, there is a way to change the text colors for paragraphs, lines, words, individual letters, or from some point on the page forward.
2.3.3 Changing Font Colors and Using Default Faces. The way to change the color of the font is to put the color attribute in the font tag. For example, consider the following.
<FONT FACE="arial, times" COLOR="orange">...</FONT>
This sets the font face to garamond type
unless the browser does not have access to it, in which case it will use
the font default typeface times instead. The color will be set to
orange. The second example shows this.
<HTML><HEAD></HEAD>
<BODY BGCOLOR="#F8F8FF" TEXT="teal">
<CENTER><H2>Second Example</H2></CENTER><P>
Here is some extremely unexciting text that is just filler stuff. So
let's fill in a little more until we get the text wrapping around to
the next line, etc., etc., blah, blah, blah.......! Now let's add a
little excitement by changing the font face and color.<P>
<CENTER>
<FONT SIZE=7 FACE="comic, garamonde, chicago, helvetica" COLOR="orange">
How about this font? Does that not grab you by the socks?<P>
</FONT></CENTER><BR>
Now here is some more text in the previous font face and color.
</BODY>
</HTML>
<CENTER>To see the above HTML script file displayed by the
browser<BR>
<A HREF="demo2.htm"><FONT FACE="times" COLOR="red" SIZE="+2">
Click </FONT>
<FONT COLOR="brown" SIZE="+3">Here!</FONT>
</A></CENTER><P>
The horizontal bars are the easiest and they add a lot to a page. The format is given below.
<HR> makes default horizontal line 2 pixels thick
<HR SIZE=4> makes horizontal line, 4 pixels thick at bottom
<HR WIDTH=500> makes a horizontal line 500 pixels wide
<HR SIZE=8 WIDTH=300> makes a horizontal line 8 pixels thick, 300 wide
Other widths can be use for special effects. Below are some examples of
widths of 1, 2, 3, 4, 5, 6 and 10 pixels. The last two show that the
width can also be set (<HR SIZE=5 WIDTH=500> and <HR SIZE=1
WIDTH=300>, and both of these are centered or they would appear on
the left side).
A few of these can enhance a page, but too many become garish.
2.4 How Are Lists and Tables Scripted?
2.4.1 Unordered and Ordered Lists. There are three types of lists:
<UL><B>A List of Cars I Like.</B> <LI>1929 Bugatti <LI>1952 Studebaker <LI>1956 Mercedes Gull Wing <LI>1958 Edsel <LI>1990 Lamberghini <LI>1998 Ferrari Testarosa </UL>
<OL TYPE=i><B>A List of Cars I Like.</B> <LI>1929 Bugatti <LI>1952 Studebaker <LI>1956 Mercedes Gull Wing <LI>1958 Edsel <LI>1990 Lamberghini <LI>1998 Ferrari Testarosa </OL>Here is how the browser interprets this script.
<OL><B>A List of Cars I Like.</B> <LI>1929 Bugatti <LI>1952 Studebaker <LI>1956 Mercedes Gull Wing <LI>1958 Edsel <LI>1990 Lamberghini <LI>1998 Ferrari Testarosa </OL>Here is how the browser interprets this script.
2.4.2 Definition Lists. Instead of including the caption after the list tag, it looks better to put it before the list tag. We do that in the following special kind of list called the definition list. We display it immediately following the script code.
<B><BIG>A List of Some Favorite Cars</BIG></B> <DL> <DT>Luxury and Elegance: <DD>1929 Bugatti - a few were built for royalty <DT>Regular Cars: <DD>1952 Studebaker - advanced features such as free wheeling and self-adjusting brakes <DD>1958 Edsel - a nickleodean Ford posing as a deluxe Mercury <DT>Sports Cars: <DD>1956 Mercedes Gull Wing - a fabulous sports machine <DT>Elegant Sports Cars: <DD>1990 Lamberghini - at $256,000, the waiting list is long <DD>1998 Ferrari Testarosa - the ultimate sports road machine </DL> __________________________________________________________________________A List of Some Favorite Cars
<CENTER><TABLE BORDER=6 BORDERCOLOR="magenta" BGCOLOR="yellow"><BR>
<CAPTION><B>Example - Sidewinders in The Nevada Desert</B>
</CAPTION><BR>
<TR><TH><BR></TH><TH>Young Sidewinders</TH>
<TH>Adult Sidewinders</TH><TH>Old Sidewinders</TH><BR>
<TR><TD>North</TD><TD ALIGN=center> 1,234</TD>
<TD ALIGN=center>2,765</TD><TD ALIGN=center>396</TD><BR>
<TR><TD>South</TD><TD ALIGN=center> 7,193</TD>
<TD ALIGN=center>13,778</TD><TD ALIGN=center>9,832</TD><BR>
</TABLE></CENTER>
| Young Sidewinders | Adult Sidewinders | Old Sidewinders | |
|---|---|---|---|
| North | 1,234 | 2,765 | 396 |
| South | 7,193 | 13,778 | 9,832 |
2.4.4 Making Fancy Buttons with Tables. Links can be put into
tables. Putting a link into a simple table with a single row actually
creates a nice button for the link. Suppose that we want to have a link
to the syllabus for this course, which is an HTML file with the name
syll.htm. We can use just a text link as described below.
<CENTER><A HREF="syll.htm">Go to Syllabus!</A><CENTER><P>
This link is interpreted by a browser as shown below.
But we could also put the link into a table, give it a border size, a border color and a background color. We can also put in explanatory text. Consider the following.
<CENTER> <TABLE BORDER=5 BORDERCOLOR="red" BGCOLOR="pink"> <TR><TD><A HREF="syll.htm>Go to CS433/633 Syllabus</A></TD> </TABLE> </CENTER>The client browser interprets it as follows.
| Go to CS433/633 Syllabus |
While we are on the topic, a link can be any URL that specificies a valid Web site anywhere on the Web. For example, the following takes us to the CS Web site.
<CENTER><A HREF="www.cs.unr.edu">CS Web site!</A> </CENTER>Here is the actual link interpretation by the browser.
2.5 How Can I Insert Images and Text Files in My Page?
2.5.1 The IMG Tag and Links to Images. We have already seen how to insert an image into a page. Actually there are two ways to display an image on the screen. The first is to just load the image into the browser window as we did before. This can be done for images as follows.
<HR SIZE=2 WIDTH=470 ALIGN=center>
<CENTER> <IMG SRC="tbtgrls.jpg" BORDER=4 WIDTH=450 HEIGHT=360><BR>
</CENTER><BR>
<HR SIZE=2 WIDTH=470 ALIGN=center><P>
This puts a horizontal rule of 520 pixels wide centered above and below the image. It also puts a border around the image of 4 pixels thickness, sets the width to 500 pixels and the height to 400 pixels. Now we load the image.
The following image is the browser's interpretation of the
above HTML script.
Another way to view an image is to use a link so that the user must click on the link, at which time the browser loads the linked file and displays it. This file can be
i) an image file, ii) a text file, iii) an HTML file, or iv) another file typeWe show a *.jpg file, a text file and an outside HTML file below obtained by clicking a link. When we use a link, however, we have no contol over the border or the size, although we can change the font size with the <FONT...> tag.
<CENTER>
<FONT SIZE="+1">
<A HREF="tbtgrls.jpg">Click for Image!</A>
<A HREF="mystuff.txt">Click for Text!</A>
<A HREF="http://ultima.cs.unr.edu/cs633/syll.htm">Click for HTML!</A>
</FONT>
</CENTER>
2.5.2 Putting Images in Tables. We can put almost any structure inside of a table, which allows us control over the arrangement, the border and border color. Below is a good example to use as a guide. The HTML code for this is listed below the table of images.
| 
| 
|
| 
| 
|
HTML Code for the table given above:
<CENTER><TABLE BORDER=4 BORDERCOLOR="green" BGCOLOR="pink"><BR>
<CAPTION ALIGN=top><B><BIG>Ready for Lunch Yet?
</BIG></B></CAPTION><BR>
<TR><TD><IMG SRC="carrot.gif" WIDTH=100 HEIGHT=100</TD>
<TD><IMG SRC="pizza.gif" WIDTH=100 HEIGHT=100</TD>
<TD><IMG SRC="cantaloupe.gif" WIDTH=100 HEIGHT=100</TD><BR>
<TR><TD><IMG SRC="grapes.gif" WIDTH=100 HEIGHT=100</TD>
<TD><IMG SRC="banana.gif" WIDTH=100 HEIGHT=100</TD>
<TD><IMG SRC="peach.gif" WIDTH=100 HEIGHT=100</TD><BR>
</TABLE></CENTER><P>
2.6 How Can I Jump to Another Site or Position on the Same Page?
2.6.1 Linking to Other Points. We saw at the end of the previous section that we could load images or text into our window by means of a link that is called by the <A HREF="filename">clickable statement</A> tags. The link that we see on the screen will be underlined and in a different color. We can also jump to a URL address this same way. For example, consider the following.
<CENTER><A HREF="http://www.unr.edu>Jump to UNR's Page</A> </CENTER>
Here is the same script interpreted by the browser.
To jump to another part of the Web page we must put an anchor at the point to where we want to go to with the jump. Suppose that we want to jump to Section 2.5. In this case we would go back to that section and insert the anchor opening and closing tags as given below in bold face with the anchor name given in the opening tag.
<BIG><B><A HREF="#Anch1">2.5 How Can I Insert Images and Text Files in My Page?</A></B> </BIG><
Then we go to the location from where we want to start the jump and insert the following.
<CENTER>
<A HREF="#Anch1">Go to Section 2.5</A>
</CENTER><P>
We can click on this link to go to Section 2.5 and come back by clicking the "Back" button in the area near the top left corner of the browser screen. Here is how the client browser interprets the (centered) link.
It is particularly useful in a long document to
put anchors in the contents page so the user can jump to any section
or chapter, etc.
2.7 How Can Clients Input Data from a Browser?
2.7.1 Forms. A form is interpreted from the open and close tags
<FORM ... >...</FORM>
Between these open and close tags can be put
The user input data is sent as a long string back to the Web server, which must then parse the string and pick out the data and write it to a file or database or use it in data sent back to the browser. The file can be
i) a compiled C program, ii) a Java program compiled to bytecode, iii) a script file, iv) a Pearl script file v) UNIX script, vi) other (such as PHP script)We will use PHP script that is mixed in with the HTML script because of its power and ease of use.
A preview of a sample form in actual HTML script is given below.
<CENTER>
<FORM ACTION="http://ultima.cs.unr.edu/cs633/unit2/mystuff.php" METHOD=POST>
<INPUT TYPE="TEXT" NAME ="Text1" VALUE=""> <P>
<INPUT TYPE="SUBMIT" VALUE="Send Data!">
<INPUT TYPE="RESET" VALUE="Clear All!">
</FORM>
</CENTER>
The above HTML script is interpreted by the browser
as follows [there is NO such file as mystuff.php so none will be found!].
The METHOD provides the format of the packaging of the data for the Web server (there are 2 methods: GET and POST)
The INPUT tags have attributes that describe the TYPE of input. The TYPE may be TEXT, CHECKBOX, TEXT, RADIO BUTTONS, SELECT MENU, PASSWORD, SUBMIT BUTTON, RESET BUTTON, or IMAGE.
A form has a METHOD by which the data string is formed and sent to the Web server in a particular format given in the HTTP specifications. There are two methods.
1. GET
2. POST
The first method GET is the same one used when the client browser requests a
file from the Web server. The second is more versatile. We show an example of
a form below. It has a password field, a text input field, some
check boxes, some radio buttons, a textarea and a
select menu.Check Boxes. These can have none, one or more boxes checked by the user and each has a different name to denote the particular box checked.
Radio Buttons. These allow only one button to be checked and an entire set of radio buttons has the same name. Each has a different value so that the set will actually only have a single value. If one is checked and then another is checked, the first one is unchecked.
Text Input. This text field allows a string of text characters to be typed into the one-line box. These are used for names or city or street or comment, etc.
Password Field. This is a field like a text field except the everything typed into it is blotted out with the "*" symbol so no one can see the password that is being entered. These can be used for any kind of secret one-line entry. Password data is not sent as encrypted data and so it should be encrypted before it leaves the users computer (JavaScript can be used for this!).
Text Area. This is just a box for entering one or more lines of text. It can accomodate long text entries. The lines can be set to be a certain length and the text will wrap around to new lines. We can use
ROWS=m and COLS=n
but this doesn't limit the actual rows or columns - only the
ones visible at one time).Select Menu. This provides a menu of items that the user can select from with a mouse click on one item. Clicking on another item will undo the first. This data entry is used to present a choice of items for the use to select from. This data input entry form is interpreted as a menu of choices designated by the tags, between which the selections appear.
The tables below shows some reference information that will make sense once we see an example.
| Tag | Tags Needed | Inside Open Tag Attributes |
|---|---|---|
| FORM | open/close tags | METHOD, ACTION, ACCEPT, etc. |
| INPUT | open/no close | TYPE, NAME, VALUE, SIZE,
MAXLENGTH, etc. |
| Input Type | Inside INPUT Tag Attributes |
|---|---|
| TEXT, CHECKBOX, RADIO, IMAGE, PASSWORD |
NAME, VALUE, LENGTH, SIZE, etc. |
| TEXTAREA | ROWS, COLS (for visible area) |
| SELECT | NAME, SIZE, SELECTED, MULTIPLE |
The example below is for the homepage of the mythical student Johnny Braggadocio. It is not done here, but inside each opening INPUT tag we could also use MAXLENGTH="n" and SIZE="m" where n is the maximum length of input and m is the number of characters that are visible at any one time.
<FORM METHOD="POST" ACTION="/cgi-bin/mySaveData.exe">
<INPUT TYPE="password" NAME="password SIZE="8"> Password<BR>
<INPUT TYPE="text" NAME="username" SIZE=22> Name<BR>
<INPUT TYPE="text" NAME="address" SIZE=30> Address<BR>
<INPUT TYPE="text" NAME="citystate" SIZE=30> City/State/ZIP<BR>
<INPUT TYPE="image" SRC="watermelon.gif" NAME="imgmap1"><BR>
<INPUT TYPE="image" SRC="cantaloupe.gif" NAME="imgmap2"><BR>
<HR>I like all of these: <BR>
<INPUT TYPE="checkbox" NAME="likes1" VALUE="money">Money<BR>
<INPUT TYPE="checkbox" NAME="likes2" VALUE="sportscars">Sports Carts<BR>
<INPUT TYPE="checkbox" NAME="likes3" VALUE="wine">Wine<BR>
<INPUT TYPE="checkbox" NAME="likes4" VALUE="women">Women<BR>
<INPUT TYPE="checkbox" NAME="likes5" VALUE="food">Food<BR>
<INPUT TYPE="checkbox" NAME="likes6" VALUE="music">Music<BR>
<INPUT TYPE="checkbox" NAME="likes7" VALUE="knowledge">Knowledge<BR>
<HR>But my top choice is: <BR>
<INPUT TYPE="radio" NAME="favorite" Value="money">Money<BR>
<INPUT TYPE="radio" NAME="favorite" Value="sportcars">Sports Cars<BR>
<INPUT TYPE="radio" NAME="favorite" Value="wine">Wine<BR>
<INPUT TYPE="radio" NAME="favorite" Value="women">Women<BR>
<INPUT TYPE="radio" NAME="favorite" Value="food">Food<BR>
<INPUT TYPE="radio" NAME="favorite" VALUE="music">Music<BR>
<INPUT TYPE="radio" NAME="favorite" Value="knowledge">Knowledge<P>
Enter Life History:<BR>
<TEXTAREA NAME="history" ROWS=5 COLS=60> - </TEXTAREA><BR>
Number Hours/Week I Study:<BR>
<SELECT NAME="studyhrs" SIZE=5>
<OPTION VALUE="none">None
<OPTION VALUE="some">1-8
<OPTION VALUE="medium">9-14
<OPTION VALUE="high" SELECTED>15-22
<OPTION VALUE=veryhi">Over 22
</SELECT>
<INPUT TYPE="submit" VALUE="Submit"><INPUT TYPE="reset">
</FORM>
When the above form is interpreted by the browser, it
appears as shown below._____________________________________________________________________
When the user clicks on an input image, all of the data is sent to the Web server as a long string where special characters are encoded. The image name and the x-y mouse coordinates are sent from the image input and the x-y mouse position can be used in a server side program in its processing.
To make this form of inputs more attractive and better
organized, we put it into a table below. The inputs that go together are
put together in a table row. The entire table is centered so that it is
easier for the user to see and select items.
The script is given below. The table tags are inside of
the form tags. The table rows contain multiple lines for input type tags.
<CENTER>
<FORM METHOD="POST" ACTION="/cgi-bin/mySaveData.exe">
<TABLE BORDER=4 BORDERCOLOR="red" BGCOLOR="silver">
<TR><TD><INPUT TYPE="password" NAME="password SIZE="8">Password<BR>
<INPUT TYPE="text" NAME="username" SIZE=20>Name<BR>
<INPUT TYPE="text" NAME="address" SIZE=30>Address<BR>
<INPUT TYPE="text" NAME="citystate" SIZE=30>City/State/ZIP<BR>
<INPUT TYPE="image" SRC="grapes.gif" NAME="imgmap1">
<INPUT TYPE="image" SRC="cantaloupe.gif" NAME="imagemap2">
</TD>
<TR><TD><HR>I like all of these: <BR>>BR?
<INPUT TYPE="checkbox" NAME="likes" VALUE="money">Money<BR>
<INPUT TYPE="checkbox" NAME="likes" VALUE="sportscars">Sports Cars<BR>
<INPUT TYPE="checkbox" NAME="likes" VALUE="wine">Wine<BR>
<INPUT TYPE="checkbox" NAME="likes" VALUE="women">Women<BR>
<INPUT TYPE="checkbox" NAME="likes" VALUE="food">Food<BR>
<INPUT TYPE="checkbox" NAME="likes" VALUE="music">Music<BR>
<INPUT TYPE="checkbox" NAME="likes" VALUE="knowledge">Knowledge<BR>
</TD>
<TR><TD><HR>But my top choice is: <BR>
<INPUT TYPE="radio" NAME="favorite" Value="money">Money<BR>
<INPUT TYPE="radio" NAME="favorite" Value="sportcars">Sports Cars<BR>
<INPUT TYPE="radio" NAME="favorite" Value="wine">Wine<BR>
<INPUT TYPE="radio" NAME="favorite" Value="women">Women<BR>
<INPUT TYPE="radio" NAME="favorite" Value="food">Food<BR>
<INPUT TYPE="radio" NAME="favorite" VALUE="music">Music<BR>
<INPUT TYPE="radio" NAME="favorite" Value="knowledge">Knowledge<BR>
</TD>
<TR><TD>
Number Hours/Week I Study:<BR>
<SELECT NAME="studyhrs" SIZE=5>
<OPTION VALUE="none">None
<OPTION VALUE="some">1-8
<OPTION VALUE="medium">9-14
<OPTION SELECTED VALUE="high">15-22
<OPTION VALUE=veryhi">Over 22
</SELECT><BR>
</TD>
<TR><TD>Enter Life History:<BR>
<TEXTAREA NAME="history" ROWS=5 COLS=60> - </TEXTAREA><P>
</TD>
<TR><TD><INPUT TYPE="submit" VALUE="Submit"> <INPUT TYPE="reset" VALUE="Clear All!">
</TD>
</FORM><P>
</TD> </TABLE></CENTER> <P>
We can easily put the text inputs in a table.
Above we have centered the form, put a table before the data entry
tags with each set of data input tags begin in a <TD>...</TD>
cell. The bordercolor is red and the bgcolor is silver.
2.7.2 Sending Form Data. The data input types have an attribute called "NAME" that is the name of a parameter that is sent back to the Web server. In the example
<INPUT TYPE="text" NAME="firstname" VALUE="">the name of the parameter firstname and its initial value is set at NULL (the quotes enclose nothing). When the user types text into this box, the VALUE will change to the new value. When the combined string of all names of parameters and their values are sent back to the Web server, they are passed to the program given by the ACTION="filename" inside the opening FORM tag.
In the example of Section 2.7.1 above, the parameter names to be sent back to the Web server are
password, username, address, citystate, imgmap, likes, favorite,
history, studyhrs
The way that these will be paired with their respective values and
merged into a string to be sent back to the Web server depends upon
which method is used inside the <FORM ...> tag. Consider
<FORM METHOD="POST" ACTION="/cgi-bin/mySaveData.exe"> <FORM METHOD="GET" ACTION="/cgi-bin/mySaveData.exe">The GET method attaches the name-value pairs to the end of the browser request, separated by a ?. It is limited to a total of 1024 bytes of data, so we use the POST method for a larger volume of data. The program that does the parsing (and other things such as saving to file or computing with) the data is called a
common gateway interface program (or CGI program)The CGI specification is a set of rules for for exchange of data between the browser (via the Internet) and the Web server. The browser data sent to the Web server is treated as
standard input (equivalent to keyboard input)The data sent out by the CGI program as standard output (to the screen) is captured by the Web server and sent back to the browser for interpretation and display on the screen.
The name-value pairs for the form parameters are merged into a string when the user clicks the submit button. Each space in a value is replaced with a "+" so that the value will be a connected string. A "=" connects the parameter with its value and parameter-value pairs are separated by the ampersand ("&"). Special characters (such as "!") are encoded ("%21" for "!"). In the example of the previous section, the string sent back to the Web server would have the following form.
password=zxy379&username=Johnny+Braggadocio&address=111+W.+Eleventh+St.&...
It is the job of the program mySaveData
given by ACTION="mySaveData" in the opening FORM tag to execute and
parse the given standard input data stream to obtain the values for
these parameters. The string must be decoded also (each "+" is converted
to a space, "%21" is converted to "!"). Once the values are obtained
they can be written to files or database tables or used in new HTML code
to be sent to the standard output, in which case the Web server sends it
to the client browser. All standard output of any CGI program is sent
back to the browser by the Web server. In this way we can generate new
HTML code and values to be displayed on the browser screen.2.7.3 Using the Form Data. CGI programs (executables or scripts to be interpreted) can be called in two ways.
i) called in a FORM by the ACTION parameter ii) called from a linkIn either case, the name of the CGI program is passed to the Web server which then runs the program. When the CGI program runs, all of its standard output (to the screen) is sent by the Web server to the client browser, where the browser interprets it.
It is therefore very important for the client
browser to know what kind of data is being sent to it. If it is
plain text (ASCII), it will be displayed in text format with all of
the spacing kept intact. If it is HTML, if will be interpreted and
the text will be poured (wrapped) onto the screen. If it is image
data, either *.jpg or *.gif, then it will be sent to the graphics card
as pixel data, etc. Therefore the first data that the CGI program outputs
to the standard output (screen) must be similar to the following:
"Content-Type: text/html\n\n"
"Content-Type: text/plain\n\n"
"Content-Type: image/gif\n\n"
etc.
To parse the form data coming from the browser we need a CGI program,
that is, a program somewhere on the network where the Web server resides
that is either
i) an executable C or C++ program (compiled into
machine language)
or
ii) a script such as Perl or Unix script or byte
code (e.g., Java) to be interpreted
In the first case, the program given in the form's opening tag is loaded
by the Web server and run, which means a slight delay. In the second
case, an interpreter program must be loaded and run, and then it
interprets the code in the file designated in the form opening tag.
Both of these are a little slow, although the first is faster. There are
new methods that are more efficient, but most form data is currently
being parsed by Perl script or PHP script. A Java program that parses
data is given here. It must be compiled and the resulting *.class file
put into a directory that the server can access. Because a Java interpreter
must be used to interpret the bytecode, this Java interpreter must be found
by the Web server, i.e., the path must be set for the operating system.
2.7.4 Getting Count Data from a File via CGI. The following program in C can be called by the Web server to run on the server side to access a text file called count.txt that stores a count. The program reads the count, increments it, sends the new count back to the client browser to be displayed on the screen and then writes the new count to the file count.txt. Note: the file count.txt must be made writable by everyone to be updatable (use the following for a unix type operating system: > chmod 777 count.txt ).
Now we will call the program cgiex1a.cgi that resides in /~looney/cs633/cgi-bin. We can use either the following anchor link or the form to access an executable CGI file.
Anchor link format: <A HREF="http://www.cs.unr.edu/~looney/cs633/cgiex1a.cgi">Mr. Web Server, please run my program</A> Form format: <FORM METHOD="GET" ACTION="http://www.cs.unr.edu/cs633/cgiex1a.cgi"><BR> <INPUT TYPE="submit" VALUE="Run My Program"> </FORM><P><HR> <A HREF="cgiex1a.c">View C Source Code</A><P>We will center these in the window and let the browser interpret them below. By clicking on the link we can call the CGI program "cgiex1a.cgi" that is a compiled C program. By clicking on the submit button in the form we can also call the CGI program "cgiex1a.exe" and also see the source code by clicking on the link below these.
The C program cgiex1a.cgi is a copy of the compiled program cgiex1a (in UNIX). The .cgi suffix denotes that it is a CGI program and the Web server is configured to run such program. The program is located in the cgi-bin subdirectory as shown.
.mosaic/cs633/cgi-bin/cgiex1a.cgiThe source code cgiex1a.c is listed below.
#includeImportant Notice: For C++ programmers, the printf() and fprintf() statements may look strange. However, they are used in C and Java and so any C++ programmer should become familiar with them. For those who prefer the C++ print statement, the following are equivalent.#include int main( int argc, char *argv[]) { int count; // define count variable as integer FILE *fptr; // define fptr as a file pointer // next, output type of data to follow printf("Content-Type: text/html\n\n"); // try to open file if ((fptr=fopen("count.txt","rw")) == NULL) { printf("Can't open count file to read!"); exit(0); } // if successful, read count, increment, else // set file counter to 0 and rewrite { fscanf(fptr,"%d",&count); count=count+1; fseek(fptr, 0L, 0); fprintf(fptr, "%d", count); fclose(fptr); // print out message with count printf("<HTML><BODY BGCOLOR='#333355' TEXT='magenta'>"); printf("<CENTER><BIG><B>Page Accessed: "); printf("<TABLE BORDER=5 BORDERCOLOR='teal' BGCOLOR='blue'>"); printf("<TR><TD><BR></TD><TD><H2><U>%d</U></H2></TD>",count); printf("<TD><BR></TD></TABLE> Times, sir!</B></BIG>"); printf("<P> - - your faithful Web Server<P></CENTER><HR><HR>"); printf("<P>Click [Back] on top left to return!<BR>"); printf("</BODY></HTML>"); // done, so exit program exit(0); } }
printf("Content-Type: text/html\n\n");
cout << "Content-Type: text/html" << endl << endl;
As a reference for Java standard and file input/output
we list a program in Java that will also update the count in the ascii
file count.txt.
// counter.java
import java.io.*;
import java.lang.*;
class counter
{ public static void main (String args[]) throws Exception
{ String cfile = "count.txt";
int count = 1;
String s1 = "";
RandomAccessFile file1 = new RandomAccessFile(file, "rw");
long filePointer = 0;
long fileLength = file1.length();
while (filePointer < fileLength)
{ s1 = file1.readLine();
filePointer = file1.getFilePointer();
}
count = Integer.parseInt(s1);
count = count + 1;
s1 = Integer.toString(count);
System.out.println("Content-Type: text/html\n\n");
System.out.println("<BIG><B>");
System.out.println("<CENTER><TABLE BORDER=4 BORDERCOLOR='red' ");
System.out.println(" BGCOLOR='pink'><TR><TD>");
System.out.println("This page has been accessed: ");
System.out.println("</TD><TD> " + s1 + " times</TD>");
System.out.println("</TABLE></CENTER>");
System.out.println("</B></BIG><BR>";
file1.seek(0);
file1.writeBytes(s1);
}
}
To use the Java counter we will use a little shell script program
that will execute the Java interpreter and give it the program counter.class
designated by counter. To run this program, click the following link.
| Run Java CGI Program |
2.8 What Are Some Good Examples of Frames?
Rectangular subwindows can be set up in a top level
HTML file. A frame is such a subwindow. The top level HTML file
lays out the frames as blocks in a row-column or column-row format by
giving the widths and heights as either absolute pixels (okay for a
small dimension) or the percentage of the window space available (a very
convenient way). The tags required are FRAMESET and FRAME.
Examples are given below.
<FRAMESET ROWS="110, *">
<FRAME NAME="topframe" SRC="mytopper.htm" SCROLLING=NO>
<FRAMESET COLS="200, *">
<FRAME NAME="lowerleft" SRC="lowleft.htm" SCROLLING=NO>
<FRAME NAME="lowerright" SRC="lowright.htm" SCROLLING=NO>
</FRAMESET>
</FRAMESET>
________________________________________________________
\
ROW 1 (Frame 1) } 110
________________________________________________________ /
| \
ROW 2 | |
| |
(Frame 2) | (Frame 3) |
| |
| } *
COL 1 | COL 2 |
| |
| |
| |
| |
| |
_______________|__________________________________________/
|------200------|-------------------*----------------------|
The first line of the above example breaks the
browser window into two rows, of which one is 110 pixels high and the
other one is the (*) default (all of the remaining pixels in the width of
the browser window). The rows are formed with the FRAMESET tag and its
closing tag. The second line gives a name and a source for the HTML file
that will be poured into the top frame.
The third line deals with the second row (subwindow) and breaks it into two columnar parts of which the first is 200 pixels wide and the second one is the default (*) remaining number of pixels. The fourth line gives the source HTML file to be poured into the left columnar block and the fifth line gives the source HTML file for the second column. After that, the inside FRAMESET is closed and then the outside FRAMESET is closed.
We could have partitioned COLS first instead of ROWS and then further partitioned one or more COLS into ROWS. The HTML files that are poured into the frames (subwindows) must be developed and be available when called in the FRAME tag (using SRC="..."). Below is an example of a simple use of frames. The top level page file here is "mycbr.htm" as is shown below.
| Top Level HTML File |
<!-- mycbr.htm -->
<HTML>
<FRAMESET ROWS="102, *">
<FRAME NAME="heading" SRC="heading.htm" SCROLLING=NO>
<FRAMESET COLS="150, *">
<FRAME NAME="selects" SRC="selects.htm" SCROLLING=NO>
<FRAME NAME="main" SRC="main.htm" SCROLLING=NO>
</FRAMESET>
</FRAMESET>
If we were to exchange the COLS with the ROWS, then
the browser window would be broken into two columnar blocks. The first one would be the
left column and the file "myheading.htm" would be poured into it. The
next column would be broken into two ROW blocks into which the other
two files would be poured.There is one more important item concerning frames. One of the frames can be designated as a TARGET so that when some button or link is clicked in another frame, the results will pour into the TARGET frame. An example is given below. Note the key assignment such as TARGET="main" in the various linked file "myselect.htm" that causes the retrieved file to be poured into the frame with NAME="main" (see "myselects.htm" below).
| View myselects.htm |
| View mymain.htm |
| View myheading.htm |
2.9 What is the Common Gateway Interface?
2.9.1 The CGI Data Flow. The common gateway interface (CGI) is a standard for the exchange of data between the client browser and the Web server. When the user inputs data into a form in the client browser and clicks on the submit button, the data is sent as name=value pairs that are separated by "&" in a long string behind a GET or a POST request header. The request header contains the request for a CGI program that resides on the server side to be run. The POST method is used more nowadays and it sends the data as stdinL (standard input).
| Method | Data Format |
|---|---|
| GET | sends ENV (environment) variables, of which QUERY_STRING
is the variable that contains the name=value pairs |
| POST | sends ENV variables but the data is sent as stdin
(standard input, as from keyboard), not in an ENV variable |
The CGI program may be an interpreted script that requires an interpreter to be run to interpret the script or it may be a compiled program (usually C). The Web server (the daemon httpd) in most cases returns the requested file to the browser for interpreting and displaying on the screen. However, the CGI standard requires that the Web server load and execute the program (directly or its interpreter). The table below shows the types of software run on both sides. The figure below that shows the interchange of form and CGI output data.
| Side | Type of Programs |
|---|---|
| Client Browser | HTML, VRML, JavaScript, Java Applets,
JScript, VBScript, ActiveX, Plug-ins, Application Helpers |
| Web Server | UNIX shell script, Perl script, VRML, ActiveX,
VBScript, JavaScript, C, C++, Java, PHP script |
The Web server must be configured for this. It will usually have a directory tree such as
/usr/local/etc/httpd/cgi-bin/*It is in the cgi-bin subdirectory that the CGI program must reside (or in a subdirectory of cgi-bin). The system administrator must allow persons to put CGI files in that subdirectory. An alternative is for one to make a cgi-bin subdirectory of ones own .mosaic subdirectory. This will usually work for modern web servers if they are configured for it.
The user inputs data in a form and clicks the submit button. That data is sent to the Web server with the request given in the ACTION parameter for a CGI program to be run. The data follows a request header and goes to the server.
2.9.2 An Example. Here we give a simple form and send the data to a simple CGI file that sends it back to the browser to display on our screen. First we show the HTML for the form and then interpret it with the browser. To send the data to the Web server for processing with the CGI program, we type in a name and then click the submit button.
<CENTER>
<FORM ACTION="cgi-bin/sendback.cgi" METHOD=GET>
<HR WIDTH=500>
<B><I>Please sign our guest book:</I></B>
<HR WIDTH=500><BR>
Name:<INPUT TYPE="text" NAME="guestname" VALUE="" SIZE="40"
MAXLENGTH="60"><P>
Email:<INPUT TYPE="text" NAME="email" VALUE="" SIZE="40"
MAXLENGTH="60"><P>
<INPUT TYPE="submit" VALUE="Save in Guest Book"><HR WIDTH=500>
<BR><INPUT TYPE="reset">
</FORM></CENTER>
The browser interprets the above script as shown below.
The CGI program sendback.cgi is a simple C program that merely sends the ENV variables to the standard output (screen) so that the Web server sends them back to the client browser. This program uses the GET method. The source code for the C program sendback.c can be seen by clicking the link below.
Now we will do the same thing except that we will use the POST method. Note that the environment variables on this one give the method as POST and that there is no data in the environment variable QUERY_STRING as there was for the GET method.
<CENTER>
<FORM ACTION="cgi-bin/sendback.cgi" METHOD=POST>
<HR WIDTH=500>
<B><I>Please sign our guest book:</I></B>
<HR WIDTH=500><BR>
Name:<INPUT TYPE="text" NAME="guestname" VALUE="" SIZE="40"
MAXLENGTH="60"><P>
Email:<INPUT TYPE="text" NAME="email" VALUE="" SIZE="40"
MAXLENGTH="60"><P>
<INPUT TYPE="submit" VALUE="Save in Guest Book"><HR WIDTH=500>
<BR><INPUT TYPE="reset">
</FORM></CENTER>
2.9.3 Environment Variables, MIME and Error Codes. The request header contains several environment variables. The most important ones are listed below.
| ENV VARIABLE | Purpose |
|---|---|
| REMOTE_ADDR | IP address of client's machine |
| REMOTE_HOST | HOST name of client's machine |
| HTTP_ACCEPT | list of MIME types the browser can interpret |
| HTTP_USER_AGENT | Browser information |
| REQUEST METHOD | GET or POST |
| CONTENT_LENGTH | defined only for POST, no. data bytes |
| QUERY_STRING | contains name=value pairs for GET method |
| PATH_INFO | user specified path (http://hostname/path/name) |
| PATH_TRANSLATED | translates relative path to absolute path |
Some other environmental variables are: SERVER_SOFTWARE, SERVER_NAME, SERVER_PORT, GATEWAY_INTERFACE, and SCRIPT_NAME.
The Multimedia Internet Mail Extension (MIME) types of data are text, multipart, message, image, audio, video and application.
| Type | Description |
|---|---|
| Text | plain or html |
| Multipart | multiple types for data (e.g., multipart/form-data) |
| Message | used for email messages |
| image | *.jpg (lossy compression) and *.gif (lossless) |
| Audio | *.au (Sun), *.wav (MS) and *.aiff |
| Video | *.mpg (lossy), *.avi (MS), quicktime |
| Application | octet-stream, postscript, word, wordperfect rich text format |
Examples are text/plain, text/html, image/gif, image/jpeg, audio/basic, and audio/x-wav.
The error codes that the Web server sends back in response to the browser's requests are given by the HTTP standards. They are listed below.
| Response Code | Error Description |
|---|---|
| 100 - 199 | informational, request being processed |
| 200 OK | client request is successful, requested data being sent |
| 401 | unauthorized user |
| 403 | forbidden, no permission |
| 404 | file not found |
| 500 | internal server error, server configuration error |
Unit 2 Problems
1. In what subdirectory does a user's homepage file index.html reside? In what subdirectory do the user's CGI programs reside?
2. Show how to set the background color to pink in a table. How can the thickness of the border be set to 5 pixels.
3. Show how to put a list of the names of three books into a table and then put an image below the list, also in the table.
4. Show how to put the three images carrot.gif, grapes.gif and pizza.gif into a table with a cell for each image and a green border around the table. Set the images at 120 pixels by 100 pixels.
5. Design a form for a user to input: i) first name; ii) middle initial; iii) last name; iv) street address; v) city, state and zip code.
6. How can an image be put into a form?
7. Put a simple form in a table.
8. What is the difference between the GET and POST methods for sending form data to the Web server?
9. Write the HTML code for a window that has two columns and the first column is broken into two rows.
10. Put a link inside a table.
11. What does the environmental variable QUERY_STRING contain in the GET method for submitting form data? What about the POST method? 12. A CGI program is to send back an image file alps.gif. What must the first line of standard output of the CGI file be?
13. A space is designated by when extra spaces are needed in HTML code (otherwise it pours on the screen with at most one space between characters). Any text that is inside the <SUB>...</SUB> is subscripted, while inside of <SUP>...</SUB> it is superscripted. Other codes are available for special characters. Write some HTML code that uses the above codes (e.g., H2O and E = MC2).
14. Show a page that is tiled, that is, a small image is "tiled" or repeated to completely fill up the background. The image should be light so the darker text can be read easily on it and should be about 100x100 pixels. The format for tiling is to put a BACKGROUND in the opening BODY tag as shown below.
<BODY BACKGROUND="mytile.gif"> . . . </BODY>