Lab 5
Lab 5 - HTML
It's that time of the semester folks, and here's the ever-popular HTML lab. While this lab tends to take a considerable amount of time to complete (Hint: start early!), it also is one of the more rewarding labs. In order to give you a good overview of HTML we will cover a large number of topics here (Hint: pay careful attention to the turnin information, which will spare you from getting a zero).
Topics:
Note: Do not try to use FrontPage / Composer / DreamWeaver / etc. to create your web pages. If you do so, you will get a ZERO on the lab. Ignore these warnings at your own risk! |
Introduction
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, leading to the birth of the World Wide Web (WWW). 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. We know that you are familiar with using several of the major components of the Internet; you are looking at a web page right now. This lab is designed to help you participate more in the Internet experience. Instead of just viewing pages, you will learn to create them.
For this assignment you will make a web page, your own little corner of the WWW - impress your friends & family, take over the world, show pictures of your dog to people in South Korea...and so on and so forth - so here we go!
Part 1: The Basics of HTML
What is HTML:
HTML stands for "Hypertext Markup Language". It is essentially a set of standardized parameters that are used to create web pages. Web browsers such as Internet Explorer or Netscape are able to read the HTML parameters and display the web page as it is supposed to look.
Right now you're probably sitting there reading this and saying to your self, "Self, I know what web pages look like. I'm looking at one now." Actually, what appears on your screen isn't the only representation of a web page. If you are using Internet Explorer or Netscape, right-click somewhere on this page and select "View Source."
Now you can see the page as it really looks. Welcome to the world of HTML.
(This is what the TA's saw when they wrote this page.)
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: 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 tags 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 it will 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 yourself "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 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.
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]
If you are not the type of person who enjoys memorizing hexadecimal (#00FF00) color codes, you may find it very comforting that browsers understand many basic colors in English.
Thus, you may use:
<font color=red> ... </font>
<font color=blue> ... </font>
<font color=purple> ... </font>
<font color=green> ... </font>
<font color=darkblue> ... </font>
<font color=yellow> ... </font>
... and so on and so forth. If you see effects you like on webpages, view the code. Chances are you can just use their format tags to get the same effect on your own page.
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 example:
<img src="buzz.gif">
When the page is up on the Internet, 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 structure and format tags (the page would display the movie quote from earlier):
<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, structure tags merely layout the basic parts of the web page. All web pages must have these tags in them and in the same basic positions.
The <html>...</html> tags appear respectively 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 webpage
Every page you create for this lab must begin with <html> and end with </html>. You may not rely on any of the nifty CoWeb features nor may you use any webpage builder software.You are going to create an HTML file from within JES that will eventually be uploaded to the Internet to become your web page. To begin:
- Open JES and start a new file.
- You should then turn off the blocking in JES. Go to Edit -> Options and then make sure that the "Block Box" option is not checked. You should just ignore the text coloring that JES does; it doesn't mean anything for HTML.
- Then, when you save the file, be sure to save it as an HTML file. You should name it "Lab5.html". Then, you should create a new folder for this HTML file and for any files or pictures that you use on your webpage.
- Do not try to load the file in JES. It is not written in python, so JES won't understand it. You can view and edit it as much as you like while it is an HTML file. Later in the lab there are directions for how you will upload it.
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 show you how to add images to your page.
- 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, but you may be creative (within Georgia Tech rules). 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.
- Most of the OIT labs have scanners available for students. During the week OIT labs have staff available if you need assistance with operating the scanner. There is also a media lab in the library that you can use.
- Make sure your image is a .gif or .jpg image. It must have no spaces in the file name. Some browsers will not be able to show the picture if it does. If this applies to your photo, just rename the file and remove the space.
Note: For extra credit, you may post your page on the Prism network instead of on the CoWeb. If you wish to do so, skip to step number 6. More directions will follow later.
- Once you have the image file on your computer, you will have to upload the image to your CoWeb page. Everything you upload for this lab must be uploaded to the page that is titled with your name. Remember at the beginning of the class when you created a link of your name on the "Who's Who" page that then led to a page where you put information about yourself? That is the page that everything will be uploaded to. So, open your internet browser and go to this page.
- Click on "attach" at the top of the CoWeb page.
Note: If you are not on the GA Tech server, you will be prompted for a username and password to attach. You can get this from your TA or professor.
- This should show you a new page. Click "Browse" to find the image on your computer. When you have found the image you want, click "Upload".
- You'll have to add a content tag in your HTML file to tell the web browser to include the image and where it needs to be.
- Your image content tag should take the form of
<img src="file"> where file is the name of your file in the form "file.format". For example, the tag could be <img src="party.jpg">.
- 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.
- To view your page, you must save the HTML file and any images you use in it all in the same folder. Then when you open the HTML page, you will see the images 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. You have to do all the changes before you actually put it online.
Note: When adding images to your page make sure not violate the "Georgia Institute of Technology Computer and Network Usage Policy" or federal copyright laws.
Part 4: Creating Links
- Begin editing your page.
- Choose a text phrase you wish to link to something.
- Just before that phrase add an open tag with the link information in the form of: "<a href="URL">"
- Here the URL should be the address 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/">"). For this assignment, you will probably need to use only absolute links.
- To close the link, just put the tag </a> at the end of the phrase.
- If you wish to make an image link, simply enclose the image tag between the <a>...</a> (e.g. <a href=http://www.gatech.edu/> <img src="buzz.gif" width=10%></a>).
- If you wish to make the link one which can be used to send email use the "href=mailto:" parameter (e.g. <a href=mailto:gtXxxxX@prism.gatech.edu>Email Me</a>).
Part 5: Tables
Tables provide an excellent way to display and arrange data. For example, those of you who are football fans might want to show Tech's football record from last year. To do this, you could 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 create 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 mix text and graphics in your layout (see the example below).
- In the <table> tag you can also specify the width (in percentage of screen size) you want the table to be (e.g. "width=50%").
- The <tr>...</tr> tags set out the extents of each row within the table.
- The <td>...</td> tags delineate the format of each individual cell in the table.
- To specify the size of the cell, you would use "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 a certain cell occupy more than one cell space, 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 method used to create a simple web page with a table format:
<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 CS1315
student here at Tech.....
</td>
<td><img src="http://coweb.cc.gatech.edu:8888/uploads/cs1315/43/buzz.gif"></td>
</tr>
</table> |
Creates:
Foo's Web Page |
Hi, my name is Foo. I'm a CS1315 student here at Tech.....
|
|
Part 6: JavaScript
Note: This section of the lab is optional. You can earn up to 5 points of extra credit for completing one of these sections.
JavaScript is a common scripting language, used by non-professionals for simple tasks. JavaScript is ideal for Internet applications since it can be embedded in HTML. You will be studying JavaScript a little later in the class. This section is a preview of some of the simple, practical applications of JavaScript that can enhance your personal webpages.
JavaScript has many possible applications. However, due to built-in features of the CoWeb, not all JavaScript will function here. In addition, JavaScript is browser specific. Therefore, we will only focus on a couple of very simple examples. You must have JavaScript (also called Active Scripting) enabled on the security settings of your web browser to complete this section of the lab. Use the Help utility of your browser to figure out how to do that.
Pop-Ups
When some event that can be captured occurs and a new page opens on top of the current page, this is a pop-up. Pop-ups are used for advertising or to let you explore a link without leaving the page of origin. They are executed using a sequence of JavaScript lines.
- For this explanation, you will be adding a picture or graphic to your page, just as you did in the "Adding Images to your page" section. Follow the directions from that section to size your image and to upload it to the CoWeb. Then choose the space in your HTML file where you want the picture to appear. At that point in your code, insert
<script>
function PopUp()
{
var win=open
("http://www.Your pop-up page","Name","titlebar=no,width=400");
}
</script>
<p>
<image src="Picture.jpg"
width="300" onMouseOver="PopUp()" />
</script></p>
- The words in italics must be filled in by you.
- "Your pop-up page" is the address of the page that you want to open.
- "Name" is what you want to appear on the title bar of this new window. To clarify, on the page you are viewing right now, the title bar says "Lab 5".
- The picture name must appear after the "image src" tag in the form "name.jpg" (or .gif), just as in all image source tags.
- Once you fill in all that information, a pop-up will occur when the viewer scrolls over the picture. However, there are multiple other events that you can use to trigger the pop-up. The only part of the script that must be changed is the part that states "onMouseOver"; replace it with any of these to create a different effect:
- onKeyPress
- onKeyUp
- onKeyDown
- onClick
- onDblClick
- onMouseOver
- onMouseOut
- onMouseMove
- onMouseDown
- onMouseUp
- onLoad
Color-Changing Text
Another easy effect that you can create using JavaScript is changing the color of your words based on events. For example, when you move your mouse over a list of choices, each item goes from blue to red as you pass over it. The basic code for this can be done in JavaScript as follows:
<ul>
<li
Event1="this.style.color='Color1'"Event2="this.style.color='Color2'">Text</li>
<li
Event3="this.style.color='Color1'"Event4="this.style.color='Color2'">Text</li>
</ul>
This section of script, when complete, will create a two item list where the colors of the items change when triggered by some event. To complete the script, you must fill in the words in italics:
- Event is one of the event items from the list given in the pop-up section, such as "onMouseOver". Events 1 and 2 cannot be the same; neither should Events 3 and 4.
- Color is whichever color you want that item in the list to change to. Most colors in plain English work, but if you have a problem try another color. Colors 1 and 2 should not be the same; neither should Colors 3 and 4.
- Text is whatever word, phrase, section, or sentence that you wish to have in the list. The text is what will actually change color.
You should play around with this script for a while. It can be pretty fun, and some combinations of events work better together than others. Here is just an example of what kind of results you can produce:
- Strike one!
- Strike two!
- Strike three!
Part 7: Posting your page on the CoWeb
Note: Click here for directions to posting your page on Prism (instead of CoWeb) for 5 points of extra credit.
Once you have completed all of the requirements for the lab, you'll need to upload it to the CoWeb. Don't forget to save your finished HTML file. Make any changes you want to make before you begin to upload the file. The method for uploading the HTML file is basically the same as the method for uploading a picture - which is described in "Adding Images to your Page" above.
- Open your internet browser and go to the page you uploaded your images to earlier. Remember that everything you upload for this lab must be uploaded to the same page: the page titled with your name that you created in Lab 1.
- Click on "attach" at the top of the CoWeb page.
Note: If you are not on the GA Tech server, you will be prompted for a username and password to attach. You can get this from your TA or professor.
- This should show you a new page. Make sure that the option labeled "add a reference to the upload at the end of the page" is selected.
- Click "Browse" to find the HTML file on your computer. When you have found the correct file, click "Upload".
- Then click on "view" at the top of the page to return to the normal view of the page. Your file "Lab5.html" will appear as a link on the bottom of that page. To see your page, just click on the link.
Part 8: Tips / More Info
Tips:
- Do not begin this lab at the last minute! Plenty of technical difficulties could pop up, and OIT is not open on the weekends.
- Give yourself time to ask questions on the CoWeb. It is there to help you.
- Making your webpage look the way you want takes some practice - so plan ahead. You may want to play around with these concepts before you even begin your page.
- 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 wish to add additional content to your site, it is recommended that you make separate HTML pages for it. However, after Lab 5 has been graded feel free to make any changes you wish to your site. It is really your site and it will remain on the CoWeb for the forseeable future.
More Info.:
- W3C has a good page full of tons of resources (including many examples) for people learning to create web pages. It is located at http://www.w3schools.com/html/. (W3C is the organization that writes the standards for the web design. One of their columnists even has a nice page designed for the beginner located here)
- For those who are seriously into HTML, check out this website for more tags. For a less comprehensive list of useful HTML tags, here is an online cheatsheet.
- Here is a good resource for choosing those pesky hexadecimal color codes.
- O'Reilly Publishing has a nice line of books some of which focus on web site development (Webmaster in a Nutshell is one of best books on the topic), many of them are available for sale at the Tech bookstore.
Turnin
There is no true "turnin" for this Lab. Simply leave your page as is before the deadline. However, until a post on the Announcements section of the CoWeb says you may do so, you may not modify ANY pages that are part of your Lab 5. It is also a good idea to "lock" your Lab 5 pages to prevent other people from coming in and messing them up. When you are editing your CoWeb page, underneath the "save" button is a check box labeled "Lock this page". To lock (password protect) your page, click in the box and then type in a password twice (remember to use both letters and numbers in your password).
Requirements
- Your main Lab 5 CoWeb page must include:
- Your name and GTnum prominently displayed at the top of the page.
- A digital photograph.
- Part of this lab is learning how to use a digital-camera/scanner. Copying a picture posted on someone else's web page is not acceptable.
- A paragraph of text about yourself.
- 1 clickable text link which leads to another site.
- 1 clickable image link which leads to another site.
- A mail-to link which will send email to your prism account.
- Table with at least 4 rows and 3 columns. (A suggestion is to make a table that holds your schedule.)
- List the names of the people you collaborated with on this lab.
- Extra Credit:
- A functioning pop-up OR color changing text created with JavaScript. [5 points]
- Uploading your webpage to Prism. [5 points]
Note: All material posted on your site must be non-offensive and comply with the
"Georgia Institute of Technology Computer and Network Usage Policy".
Grading Scale:
- 100% All of the above requirements are complete and functioning.
- 50% 1-2 of the above requirements are missing/non-functioning.
- 0% >2 of the above requirements are missing/non-functioning.
- Possible 10 points of extra credit.
This lab taken from CS1321.
Link to this Page
- Lauren Biddle last edited on 14 October 2003 at 10:01 pm by r37h125.res.gatech.edu