• 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>).

• 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.
    
    

<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>	

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

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.

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.

1. 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>
   



2. 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.
   
   
3. 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

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>

• 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.



1. 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.



2. 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.


3. 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.



4. Click "Browse" to find the HTML file on your computer. When you have found the correct file, click "Upload".



5. 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