Advancing Your Webpage

Well you survived the web page creation exercise, and from what I have seen so far -- people have done a good job. Today's exercise asks you to expand on what you have learned by further developing and extending you webpage. Our key objectives for this project are:

Make sure what you had before is working

Some people made small errors with their prior web page that need to be fixed. These problems include:

If you had one of these problems please speak to an instructor or assistant before starting.

Viewing Source

One of the major principles of computer science is the notion of building on the knowledge of previous individuals. Creating web pages is a prime example of this. You have already created a home page from scratch using basic html. It is likely that as you examine other web pages you may see aspects of those pages that you would like to include as part of your page(s). It is completely legitimate to extract that portion of the person's web page, make any desired modifications and include it as part of your own. There are at least a few caveats:

  1. You should not take copyrighted material without permission
  2. You should not display something that you own but do not have distribution rights for.
  3. You should not copy portions of a for profit site -- although you can still look to see how they do something and use that as a learning experience and build something on your own in the same spirit
  4. Using someone's cool use of a table, frame etc... is one thing, but taking someone's created image and portraying it as your own is another. In cases like this, it is better to link to the person's page to show what you want to show, then to take the material directly.
  5. In general, you should use good judgement, if you think the person might object to your use of the material then you should not use it

Now that we have covered the ground rules. Let's look at the source of your web page.

  1. Open up a separate browser window (so you can continue reading this page)
  2. In that window, go to the home page you created for this class.
  3. Under the View menu, select Source
  4. A window will pop up displaying the html for your web page. You can only look at this code and cannot modify it, however, you can easily cut and paste from it
  5. For practice, ask the person next to you for the URL to their page. View its source as well. Try to identify where the things visible on their page appear in the source.

Head and Body

There are two tags we did not discuss last week but are worth noting now because they allow you to add additional types of formatting to your page and will be critical later when we discuss scripts.

Disassembling your webpage

Up until now most of you put everything on a single web page. All of your html was within you index.html file. This is generally ok for short pages but once a page begins to grow, it becomes necessary to break it up into logical parts. This is straightforward to do. Your index.html file becomes the gateway into the web page and then from this introductory page you can link to other pages on certain topics. So what should index.html contain:

When you have another page you created that you want to link to then the links work exactly as before except you need only include the name of the file in your anchor link. For example, <a href="filename.html">About me</a>

Task: You need to modify your web site so that you have:

  1. An introductory web page
  2. A sub page about yourself
  3. A sub page devoted to school related things
  4. A sub page devoted to something you are passionate about
  5. A sub page with your schedule (see below for more info)

You are certainly welcome to include more sub pages if you wish. Try to reuse as much stuff from your original web page as possible.

Tables

One of the most powerful and utilized tools of html is the table. To see some examples of table in html page, this one or it can even be used to organize a page so that it appears to have frames when in reality it is broken up in a series of complex tables. If you really want to go gung-ho with tables, I recommend finding a really good html visual editor, however, for what I ask of you you should interact with the table code directly. There are three tags you need to be aware of to make a table:

  1. <table> and </table> These wrap around your table and define in fact that a table will exist. It can include some parameters inside the tags to define features of you table including:
    • width = "100%" or some percentage of the width of the screen to fill up
    • border = "4" or some other value to define the thickness of the border
    • align = "center" or right or left
    • cellspacing = "5" or some number of pixels between cells
    • cellpadding = "5" or some number of pixels between cell walls and contents
    • bgcolor = "blue" the color of the table
  2. <tr> and </tr> The start of a row
  3. <td> and </td> The start of a cell (within a row)

Task: Make a separate page to hold your weekly schedule. You should be sure to link to this page from your main page with an appropriate link.

Introduction to scripts

JavaScript is a type of "scripting language." That is it is a type of programming language but it is primarily used to write sure programs that perform a simple task. Although the reality is that there are many complex javascript programs in existence. However, the advantage of javascript is almost all web browsers have the capability of executing these scripts and you can incorporate the into your webpage to enhance the users experience. Be careful however because too much of a good thing in a web page can often actaully make it tedious and dreary.

Javascript appears on your web page with tagged by a special tag called <script>. This script makes the program not appear as normal text on your web page but instead causing some interesting action to perform. Check out each of the following scripts to see what they do.

You can put javascript on your page very easily. In order to use javascript, you will need to identify what is the code in someone's source and where to place it in your own page. Typically, you place javascript in the <head> or the <body> on your page (as required by the script) and sometimes parts will go in two different areas. So pay close attention. There are also aspects of the script that may exist outside the script tag, so you may need to identify these as well. Finally, there are other concepts such as forms and mouse events that you may be using without truly understanding what is going on. In fact, the whole javascript things should be greek to you. This is more an exercise of cutting and pasting than anything else.

Task: Add at least 3 javascripts to your web pages. They can be from the set above or they can be ones you find on the web.