Metropolitan State University

ICS 225 Web Design and Implementation

Fall 2004

Lab 7: Browsers, Browser Differences and Validating Code

Create a directory called Lab7 and place all the parts of this lab in the directory.

For each file, put the name of the file, your name and a brief description of the purpose of the page in comments at the top of the page.

Part I. Validating Code

In order to ensure cross-platform compatibility as much as possible, you should write your web pages to adhere to XHTML standards. To check your code, go to http://w3.org/. Find the column labeled “W3C A to Z”. Click on the “Validators” link. From there, choose the “W3C Markup Validator” to validate that your web pages meet the XHTML standards. Enter the URL of your web page, starting with http:// The validator will tell you whether your script is VALID or INVALID XHTML. You may ignore the warnings generated by JavaScript.

At a minimum the validator requires you to follow these XHTML standards:

1. Have this line as the top line of each HTML page (before the <html> tag).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

2. In the <head> section, add this line:

3. The script tag must look like this to pass validation:

Validate three or four of your existing web pages. Work on the pages until they pass validation.

Part II. Getting a Browser

There are many browsers available. You can download free browsers to your home computer. (Please do not download software in the Metro State computer labs.)

1. AOL’s Netscape version 7.2 is available at

http://channels.netscape.com/ns/browsers/download.jsp

This version of Netscape had improved popup window controls and better security.

2. Microsoft’s Internet Explorer 6 is available at

http://www.microsoft.com/windows/ie/default.mspx

3. Mozilla’s Firefox browser can be downloaded from

http://www.mozilla.org/products/firefox/

4. W3C’s Open Source browser, Amaya can be downloaded from

http://webdesign.about.com/gi/dynamic/offsite.htm?site=http://www.w3.org/Amaya/

Part III. Browser Versions

1. Display the name and version of the browser being used to review your web site (see sample program on p. 87). It is not sufficient to dump the text string to the browser window – your user will not know what it means. You will need to parse the string and display a meaningful message.

2. Identify and display a list of all the plugins currently installed in your browser if you are running Netscape. There should be more than one. If you are running IE, display a message that IE does not support plugins.

3. Identify and display the operating system under which you are running. It is not sufficient to dump the text string to the browser window – your user will not know what it means. You will need to parse the string and display a meaningful message.

4. Test this program using both Internet Explorer and Netscape.

5. Capture the screens showing the differences To capture a screen, place the cursor in the window you wish to copy. Press ALT-PrntScrn and then paste into a Word document.

Part IV. Browser Differences

1. Learning about browser differences:

http://www.adobe.com/support/techdocs/18362.htm (browser differences)

http://www.webclass.ru/eng/Tutorials/HTML/Handling_browser_differences.html (browser differences)

http://home.earthlink.net/~bobbau/platforms/text-size/ (differences in text sizes)

http://web.mit.edu/acs/webguide/browsers.html (browsers in general)

http://webdesign.about.com/library/weekly/aa041999.htm (detecting which browser you are using)

http://webdesign.about.com/library/weekly/aa120902a.htm (browser detection)

http://www.ericmeyeroncss.com/bonus/trick-hide.html (CSS differences)

http://www.webmasterworld.com/forum21/ (blog on HTML and browsers)

2. Write a web script which shows up differently depending on what browser you are using. That is, find one potential problem and make it occur.