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. For more information on this topic, visit Vincent Flanders' Web Pages That Suck website.
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 KompoZer 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.
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.
An HTML document is made up of
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 strongly emphasize the advice
Don't delete all your files!
you would write
<strong>Don't delete all your files!</strong>
in your document. The <strong> states that the strongly emphasized text should begin and the </strong> that it should end. In general the closing tag is always indentical to the first tag except for the backslash.
Note:Rather than using a directive to strongly
emphasize the text, you can also specify that the text should be set
in boldface, via
<b>Don't delete all your files!</b>
In other words, instead of explaining the structure of the document,
you're giving explicit formatting instructions. HTML purists tend to
agree that the former is superior to the latter.
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 appearing as follows:
<html>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:
Make a backup copy of your web page so you can always revert it to how it looked prior to these changes.
First go to the web page you wish to copy from and under the View menu in your web browser select "Page Source".
A text window (e.g., Notepad for Windows, TextEdit for Macintosh) will open with the page's HTML. Search through the source for the part that seems to be relevant to the cool thing you would like to copy.
Copy only the HTML you believe to be relevant and return to your page in KompoZer.
Select the source tab from the bottom of the screen and paste the HTML into what you believe is an appropriate location.
View your page to determine if you are happy with the changed page. Problems could include copying the wrong part of the page and pasting 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.
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 simple Javascript program into our web pages to get a feel for how it is done.
Flash provides a mechanism for embedding enriched content (such as animation) onto our web pages. Since it is difficult to create your own Flash programs, we will not be doing so 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.
"With great power comes great responsibility." Some of the most annoying pages on the Web owe their suckiness to bad Flash animations. Read what Harley Flanders has to say about misusing Flash, and learn from the master!
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 not use CGI for any serious project without deeper understanding of how it works. There is an advanced follow up course in the Department of Computer Science if you are interested in learning more about this topic.
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.
You have now completed the Web Development Project. Send an email to your instructor containing your real name and the URL of your web site. (If you acquired a domain name that points to the website, please provide the domain name for the site.)