Lab 8

A few things will be covered to help you get your final projects to specifications, the rest of the lab will be allocated to give you time with your teams to work on your group presentations.

Group presentations will be next week during lab.



Validation

HTML validation website: http://validator.w3.org/

*Note: You MUST include this at the top of your html code for the validator to read your code!!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

This should be one of the meta tags you should include (otherwise the validator will complain about it):
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

Why should I validate my HTML pages?

One of the important maxims of computer programming is: Be conservative in what you produce; be liberal in what you accept.

Browsers follow the second half of this maxim by accepting Web pages and trying to display them even if they're not legal HTML. Usually this means that the browser will try to make educated guesses about what you probably meant. The problem is that different browsers (or even different versions of the same browser) will make different guesses about the same illegal construct; worse, if your HTML is really pathological, the browser could get hopelessly confused and produce a mangled mess, or even crash.


Three ways to validate:

All of these methods are equally valid.  Make sure to use the icon and link in your website to show when your website is valid.

*If you want to check, my lab descriptions for lab 5 through 10 are valid!!

Valid HTML 4.01 Transitional


Javascript

*For your final project, you need to include at least 2 javascript or applets on your website. You must cite your sources!! For today's lab, you only have to show one example.

Javascript, like CSS, is another programming language regularly used in websites to add both additional style and functionality to your page. I won't go over how to code javascript (*insert cheering here*), but I will give you a few tips on how to identify when/where it is being used.

When looking for javascript to use, obvious things to search for in other people's code is the word javascript (duh!). If the code is located in the page, additional things you will want to search for are keywords such as script, function, and the use of parenthesis ( ). One more thing to notice is that all javascript functions are inside html comments

--------------
The following is an example of using javascript to create a popup window:

The link

The following code is also located in the source code of this page:

<!-- code taken from http://www.cs.tut.fi/~jkorpela/forms/javascript.html#window -->
...
  <script type="text/javascript">
<!--function popup(){
newwin = window.open('','something','width=150,height=150,resizable=1');}
//--></script>

...
<a href="images/ppbounce.gif" target="somename" onclick="popup();">The link</a>
...

*Note that the function, called popup() is referenced twice: once to defining what it does, and one other time for when it is used.


--------------
The following is an example of using javascript in a form:

Enter something in the box:


*The red text is what you would hypothetically copy
<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<!-- code taken from http://www.cs.tut.fi/~jkorpela/forms/popup.html -->
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
function testResults (form) {
    var TestVar = form.inputbox.value;
    alert ("You typed: " + TestVar);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">Enter something in the box: <BR>
<INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
<INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
</FORM>
</BODY>
</HTML>

*Once again, the keywords to look out for are script, javascript, function, and the use of parenthesis. In this case, the tag form is also very important for taking in input that the javascript then uses.

--------------

These are very simple examples functional enough to illustrate my example, but not enough for use on your project (bwah hah hah!!!). The use of javascript can be as simple as created buttons the user can click (e.g. http://student.ucr.edu/~jdier001/contact.html uses a button to send email) or something as elaborate as animated navigation bars (e.g. http://student.ucr.edu/~jbarb005/ puts my page to shame).

It is up to you to search the web to find javascript that adds useful functionality to your website, and makes sense with the theme of your page. Try to avoid blindly copying and pasting code, and try to understand what the code does, and how you can tailor it to your specific use.

Sample Final Projects and Additional Resources

http://student.ucr.edu/~jdier001/
http://student.ucr.edu/~jship001/
http://student.ucr.edu/~jbarb005/

http://www.geocities.com/siliconvalley/7116/
http://javascript.internet.com/
http://www.javascript-page.com/

The remaining time will be used to work on your final projects as well as give you time to iron out the details of your group presentation.

Keep in mind that presentations will be next week during lab. Don't miss it!!