Web Development III


Now that you have your own web page and you have your own domain we are going to play around a bit with ways to enhance your web page. Enhancements are always dangerous since too much clutter on a page can ruin the page for anyone who visits, but just the right amount of appropriate enhancements can go a long way to make an average web site have some real zing.

In Part I of this project, we discussed how one should never have to directly interact with the underlying html and it is far better to use an editor such as NVU that allows you to edit your web pages so that you can see what you page will look like to everyone in the world as you develop it. However, depending on the editor that you are using there are often things that are just not possible to do. In these cases we sometimes have to enter the source of our web page and make low level changes or additions.  In this project, many of the enhancements that we will learn to add to our page require that we go into this low level mode of development. In order to do this it requires us to develop a basic understanding of what html is so that we can at least find the road marks that tell us where we should add or edit content.

An HTML primer

As decribed before HTML refers to the HyperText Markup Language that forms the foundation of most pages on the web. It is a relatively simple concept that will be described here in brief.

A html document is made up of tags which define formatting and other behind the scenes information, and the text that makes up the page. In general all tags come in pairs, the first tag states to begin some type of formatting and a second corresponding tag states the formatting should end. For example, to make text bold in an html document would require  the following to be written.

<b>This text is bold </b>

The <b> states that the boldface should begin and the </b> that it should end. In general the closing tag is always indentical to the first tag except for the backslash.

Your document consist of many tags, and a well written document has certain tags that are always specified to define regions of the document but have no direct bearing on how the document appears. Such tags include <html> <head> and <body>. A well formed web page will always have these tags appear as follows:

<html>
<head>
In the head goes anything that need to happen before the page is displayed
</head>
<body>
Almost everything else goes in the body. When in doubt it should be placed in the body.
</body>
</html>

Using other people's content

One of the oldest ways of adding cool content to your web page and getting a feel for what you can do with html is to copy html from some other web sight. To acquire content from another page is typically straightforward:

  1. Make a backup copy of your web page so you can always revert it to how it looked prior to these changes

  2. First go to the web page you wish to copy from and under the View menu in your web browser select Source or Page Source

  3. Notepad will open with their html, search through the source for the part that seems to be relevant to the cool thing you would like to copy

  4. Copy only the html you believe to be relevant and return to your page in NVU

  5. Select the source tab from the bottom of the screen and paste the html into what you believe is an appropriate location.

  6. View your page to determine if you changed it in a way that you are happy with. Problems could include you copied the wrong part of the page, you pasted into the wrong part of your page.

There are some major caveats to be warned about before doing this. You should not copy material that is clearly and uniquely their own, material from which they make their living, nor material that they have stated should not be borrowed or copied. Most people are just fine with someone copying the html they used to make a cool looking table, or a way they found of making an animation across the top of the screen. However, you should always err on the side of caution in this one. If you are unsure you can always ask them for permission or your instructor for guidance.

Javascript

One of the earliest and easiest ways to enhance a web page is by using javascript. Javascript is a programming language that can be written into the web page to make some rudimentary enhancements to your page.  We will be inserting a few simple javascript programs into our web pages to get a feel for how it is done.

Flash

Flash is the latest but by no means newest craze on the web. Flash provides a mechanisms for embedding very impressive and yet often annoying animations, advertisements and straight content onto our web pages The game at the top of this web page is one example of using Flash on a web page. The additional practice problems I include in the lecutre notes are another example of its use. In addition, many web sites cater directly to the Flash user. It is difficult to create your own Flash programs and we will not be attempting in this class. We will see how to incorporate existing flash onto our web pages and you should feel free to use the repository of free flash examples that are available on the web if you wish to add additional flash animations or games.

CGI

A final method of enhancing your web page is a method called CGI (short for Common Gateway Interface). CGI tends to provide important functional capabilities to web sites including most online transactions, most web counters as well as others. You should now use CGI for any serious project without deeper understanding of how it works, but we will do some a simple example to lete you see how it is done.

Your Assignment

For this portion of the project you will be adding enhanced content to your web pages. You can either do this to existing pages on which this content might be appropriate or you may make entirely new pages to display you enhanced content. In either case, you should have links from your index.html page to the pages with the enhanced content.

  1. Adding Javascript to your page

  2. Adding Flash to your page

  3. Adding CGI to your page.

Web Project Completion

When you have completed all 3 parts on the project. Send an email to gweiss@cis.fordham.edu and provide the domain name of your web site.