Lab 2 - HTML
Due before 08:00:00 on the morning of 09/30/2001

Introduction

For those of you who've spent the last ten years hiding under a rock, we have this thing called the Internet. The Internet started in the 1960's as a way for defense contractors to share information. In the early 1990's the Internet became commercialized and the World Wide Web (WWW) was born. Since then the Internet has mushroomed from a handful of small independent sites to a vast intertwined network with over 1.6 trillion different web pages.
The WWW is the most visible part of the Internet and is a forum where millions of people are free to share their views and information. By now you should be familiar with using several of the major components of the Internet (see Lab 1), we also expect that you've used the WWW to visit web pages before (hint: you're at one now). In this lab we will be showing you how you can create your own web page so you can have your own little corner of the WWW too.

Part 1: The Basics of HTML

What is HTML:

The Basic Parts of HTML:
There are two main parts of HTML: tags and content. As you can guess, "content" refers to the actual "stuff" that can be seen on the page. In the case of a page like this, the dominant form of content is text. The "tags" are any of the stuff you saw that was between < and > symbols. Tags tell the browser how to display the content.

In the case of a page like this, the tags tell the browser important things like how to align the text, where the line breaks are, formatting of the text (font size, bold, underline, italics, etc.), and so forth.

Types of Tags - Formatting Tags:
Formatting tags are the dominant form of HTML tag and are characterized by having an opening and closing pair of tags. These tags tell the browser when to begin (open) a specific formatting option and when to end (close) it.

Example:
Let's say you wanted to highlight some an important movie quote by making adding italics to it.

"Luke, I am your father."
I know that the opening tag for italics is <i>. The closing tag for any formatting option will have the same name as the opening tag, but be prefaced by a slash (closing tags do not have any parameters listed since the browser assumes that you are closing the tag with all of the options you opened it with). Therefore I must open my italics with an <i>, located just before the word "am" and close it with an </i>, located just after the word "am"; like this:

"Luke, I <i>am</i> your father."
By now you're probably saying to your self "how can I make that last line appear in bold with a large red font?" Since this web page is psychic, it will now answer your question...

You can do that by adding the tags for bold (<b>..</b>) and the tags for font (<font>..</font>) around it.

Being psychic, this page is also detecting that something is missing here. You haven't told the browser how big to make the font or how what color to make it. (While this page is psychic, your web browser is not, so you'll have to tell it...) In most opening tags you can specify the parameters with which that tag will open. In this case, you'll want to use "color=#FF0000" and "size=+2" (this will make the color red and the font +2 sizes larger than normal, see the "Sample HTML Tags" page for more details).

As such the HTML will now look like this:

<font color=#FF0000 size=+2><b>"Luke, I <i>am</i> your father." </b></font>
Resulting in the following being shown in the browser:

"Luke, I am your father."
[Insert applause here]

Types of Tags - Content Tags:
Another type of tags are content tags. A good example of a content tag is an image. Since content, like images, already exist as a separate file on the server, all that the tag needs to do is to tell the browser how to display it. As such, there is only a single tag (no open-closing tag pair) which contains the parameters that specify where the content is and how to display it.

All that is needed to add an image to your page is to put in an image tag where you want the image located that specifies the name of the image file; like the following:

<img src=buzz.gif>
This will display the "buzz.gif" image from the server, like so:


Types of Tags - Structure Tags:
There is one last type of tag. This is the structure tag. Since there are only four of them which you need to know, they are easy to remember.

• <html>..</html>
• <head>..</head>
• <title>..</title>
• <body>..</body>

These tags layout the page. Here is an example of the HTML for a basic web page (with the structure tags) displaying our favorite movie quote:

<html> <head> <title> My Movie Quotes </title> </head> <body> <font color=#FF0000 size=+2><b>"Luke, I <i>am</i> your father."</b></font> </body> </html>

As you can see the structure tags merely layout the basic "structure" of the web page. All web pages must have these tags in them and in the same basic positions.

The <html>...</html> tags appear as the first and last things in the file and tell the web browser that the file contains HTML.

The top few lines of any html file should be the head (delineated by the <head>...</head> tags). The only thing you need in the head is the title of the page (within the <title>...</title> tags) as you wish it to appear on the browser's title bar.

Obviously that leaves the rest of your page, the body, to be put in the "body" of the page (which is, get this, between the <body>...</body> tags, amazing isn't it?).

Part 2: Beginning to make your page on Acme.

1. Start up your SSH program* and log into acme.
   
   (* If you're using Windows you should have putty installed and ready to log into acme, if not go here first.)
   
   
2. In Acme, type "ls -al" (as shown). Here you will see a listing of all the file in your home directory. If you notice, there is a listing for a directory indicated as ".", this is a reference to the current directory (i.e. your home direcory). Also you will see a listing for a directory called "public_html". In order to let the web server access your files, both your home directory and your public_html directory must be Readable and eXecutable by Others.
   
   (For more information on how to change file permissions and how to read a file listing in unix, please see Lab 1.)
   
   
3. Change directories to your public_html directory and begin a new file in pico titled "index.html". This file will become your "index page", or rather your "home page".
   • If you are new to writing web pages, it is recommended that you start off with something basic, like the page in the box above.
   
   
4. When you are done editing your index page, you will have to change the file permissions so that it is Readable by Others.
   
   
5. To see how your page looks try viewing it in your favorite web browser. Just go to "http://www.prism.gatech.edu/~gtXxxxX/" (where gtXxxxX is your GTnum).

Part 3: Adding images to your page.

For this lab you will need to have multiple images on your web page (including a photograph). This section will help show you how to add images to your page.

1. You will need to get a picture of something (it is recommended that you post either a photo of yourself or a photo of something here at Tech). If you or a friend have a digital-camera you may use it to take the picture. Otherwise you will have to get a regular photograph and scan it in (it may be a photo taken prior to this semester).
   • Most of the OIT labs have scanners available for your use. (During the week OIT labs have staff available if you need assistance with operating the scanner.)
   • Note: make sure your image is a .gif or .jpg image and has no spaces in the file name (some browsers hate this).
   
   
2. Once you have the image file on your computer, you will have to FTP it to acme (use binary format). For more info on how to transfer files using FTP, please see the How to FTP page.
   
   
3. Now you'll need to SSH in to acme.
   
   
4. Once in acme you should change into your public_html directory. If you have not already done so, it is recommended that you make a sub-directory titled "images" to store your images in. Once you make the directory you should make it Readable and eXecutable by Others.
   
   
5. You'll need to move the image file (which is probably in your home directory) to your newly created public_html/images directory. Once you move it, make sure that the image is Readable by Others.
   
   
6. Now resume editing your index.html file. In your index.html file you'll have to add a content tag to tell the web browser to include the image.
   • Your image content tag should take the form of "<img src=/images/file>" where file is the name of your file.
     
     
   • Many times your image file will not match the size you wish to use on your web page. As such you'll probably want to add the one of the following parameters: "height=value" or "width=value" where value is either a dimension in pixels or in "percentage of screen size" (e.g. "width=30%" will make the image 30% as wide as the screen). In either case, the unspecified dimension (height or width) will be automatically scaled to keep the image in proportion.
   
   
   
7. Now save your index.html file and try viewing you page in a web browser. You should now see the image as part of the page. You may have to move the image tag around and play with the scaling parameters a bit to make it look the way you want.
   
   

Part 4: Creating Links.

1. Begin editing your index.html file.
   
   
2. Choose a text phrase you wish to link to something.
   
   
3. Just before that phrase add an open tag with the link information in the form of: "<a href=URL>"
   • Here the URL should be a link to the page. It may be a relative link in that it links to a page relative to the current location (this is most often used within a website) (e.g. "<a href=my_poem.html>"). It may also be an absolute link in that it works regardless of the present location since it contains the full address of the page (this is most often used when linking to other web sites) (e.g. "<a href=http://slashdot.org/>").
     
     
4. To close it off just put the closing </a> at the end of the phrase.

Part 5: Tables

Tables provide an excellent way to display data. They can also be one of the best for arranging data. Those of you who are football fans might want to spread the good word about Tech's football season this year. To do this you might want to check out the Athletic Association website and make up a table presenting some of the statistics for this year...

<table border=1>
    <tr><td><b>Game</b></td>          <td><b>Status</b></td></tr>

    <tr><td>GT vs Syracuse</td>       <td>Win 13-7</td></tr>
    <tr><td>GT vs The Citadel</td>    <td>Win 35-7</td></tr>
    <tr><td>GT at Navy</td>           <td>Win 70-7</td></tr>
    <tr><td>GT at F$U</td>            <td>Postponed</td></tr>
    <tr><td>GT vs Clemson</td>        <td>9/29/2001</td></tr>
    <tr><td>GT at Duke</td>           <td>10/6/2001</td></tr>
    <tr><td>GT vs Maryland</td>       <td>10/11/2001</td></tr>
    <tr><td>GT vs NC State</td>       <td>10/20/2001</td></tr>
    <tr><td>GT vs North Carolina</td> <td>11/1/2001</td></tr>
    <tr><td>GT at Virginia</td>       <td>11/10/2001</td></tr>
    <tr><td>GT at Wake Forrest</td>   <td>11/17/2001</td></tr>
    <tr><td>GT vs U(sic)GA</td>       <td>11/24/2001</td></tr>
</table>	

This will create a table that looks like the following:

Game	Status
GT vs Syracuse	Win 13-7
GT vs The Citadel	Win 35-7
GT at Navy	Win 70-7
GT at F$U	Postponed
GT vs Clemson	9/29/2001
GT at Duke	10/6/2001
GT vs Maryland	10/11/2001
GT vs NC State	10/20/2001
GT vs North Carolina	11/1/2001
GT at Virginia	11/10/2001
GT at Wake Forrest	11/17/2001
GT vs U(sic)GA	11/24/2001

As you may notice there are a lot of HTML tags here...

• The <table>...</table> tags set out the borders of the table.
  
  
  • To make the borders visible add the parameter "border=1" to the <table> tag. Alternatively "border=0" will make the borders invisible. Invisible borders work well when you are trying to layout a page of text & graphics (see the example below).
    
    
  • In the <table> tag you can also specify the width in percentage of screen size you wish the table to take up (e.g. "width=50%").
    
    
• The <tr>...</tr> tags set out the extents of each row within the table.
  
  
• The <td>...</td> tags delineate the each individual cell in the table and can have many options.
  
  
  • Specify the size of the cell you can use the "width=n%" and "height=n%" (where n is the percentage of screen width/height to occupy.
    
    
  • To add a background color use "bgcolor=#xxxxxx" (where xxxxxx is the code for the color you like). To add an image background, use "background=images/file-name" (where file-name is the name of the image you wish to use).
    
    
  • To make the cell occupy more than one cell location use "rowspan=x colspan=y" (where x and y are the number of rows and columns the cell will take up.
    
    

Here is a slightly more complex table used to layout a simple web page:

<table width=50% border=0> <tr><td colspan=2><b> <center>Foo's Web Page<center></b> </td></tr> <tr> <td width=50 bgcolor=#FFFF00%> Hi, my name is Foo. I'm a CS1321 student here at Tech..... </td> <td><img src=buzz.gif></td> </tr> </table>

Result:

Foo's Web Page
Hi, my name is Foo. I'm a CS1321 student here at Tech.....

Part 6: Mailforms

Now that you have your own little site up on the web, it would be nice to see who has been visiting your site. The easiest way of doing this is to create a Mailform (you should put the mailform in a separate .html file from your index page). When a visitor fills out a mailform on your page, the web server will email you a copy of the information that the visitor submitted.

Since many of the header tags for your mailform must be done in a precise manner in order for the server to process them, a sample mailform is given below. Due to the nature of the mailform, it is expected that you will just copy the red & blue portions of the mail form into your page. However, the section in black is the main body of the form and you are encouraged to customize it with any combination of input fields and questions that you see fit (within the range of decency, of course).

<FORM METHOD=POST action="/cgi-bin/mailform">
    <!-- Form header & Send-To Information -->
	<INPUT TYPE=HIDDEN NAME="mform-email"
	          VALUE="gtXxxxX@prism.gatech.edu">
	<INPUT TYPE=HIDDEN NAME="mform-subject" VALUE="Test Data">
	<INPUT TYPE=HIDDEN NAME="mform-response"
	          VALUE="http://www.prism.gatech.edu/~gtXxxxX/thankyou.html">
	<INPUT TYPE=HIDDEN NAME="mform-encoding" VALUE="text">

    <!-- Main Part of the Form -->
	Name: <INPUT NAME="NAME">

	Class:
	<SELECT NAME="class">
	    <OPTION>Not selected</OPTION>
	    <OPTION>Fresh.</OPTION>
	    <OPTION>Soph.</OPTION>
	    <OPTION>Junior</OPTION>
	    <OPTION>Senior</OPTION>
	    <OPTION>Other</OPTION>
	</SELECT>

	Comments:<br>
	<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=60 >Say Something</TEXTAREA>
	<br>

     <!-- Submit / Clear Buttons -->
	<INPUT TYPE=SUBMIT VALUE="Done"> or
	<INPUT TYPE=RESET VALUE="Clear">
</FORM>

Part 7: Tips / More Info.

Tips:

• Your TA will be grading most of the lab using a current version of one of the major Internet browsers. However since you don't know exactly which one they will use, it is recommended that you not use any browser-specific tags on the pages which will be graded for this lab.
  
  
• If you are interested, acme has the text-based web browser lynx installed. Simply type "lynx www.prism.gatech.edu/~gtXxxxX/" (where gtXxxxX is your GTnum) at the command prompt to see how your page would look in a small text-only browser.
  
  
• If you wish to add additional content to your site, it is recommended that you make separate HTML pages for it. However, after Lab 2 has been graded feel free to make any changes you wish to your site (it is your site).
  
  

Turnin

Turnin: