Basics of the Web:

What is a browser anyway? What happens when you click on a link from a web browser? [the source page, images, embedded scripts, external scripts/applets, etc.]

A browser is essentially an application that can access and transfer files fom any URL given to your local machine (the one running the browser). It has the ability to read and display several types of files, including: '.html', '.htm', '.shtml'

Note: HTML is not a general programing language. It is often reffered to as a language in the same sense that postscipt is a language. It is a special purpose language used to describe a page (document). The various parts of the language do everything from specifying the font and style to use to describing various images and other files that are to be embedded within the given document, and, these days, it can even be used to change a page that has already been displayed based on user (viewer) actions as well as other criteria.

When you click on a link, the browser (which is running on your local machine - a.k.a. the "client") tracks down the original file (according to it's URL), connects to the machine that owns the file (this is the "server", which could be anywhere in the world plus a few places in space) and copies (downloads) it from the server into a local directory (some sort of "cache"). Once it has a copy of the "document", your browser parses (interprets) the file based it's suffix (let's stick with '.html' for now). The browser displays the document as specified in the HTML description. Any references to external files (like images) are resolved (they also have to be copied from the server) and then they too are displayed (how they are handled depends on what kind of file it is. The browser knows what kind of file it is based on that file's suffix.).

Client vs Server

Who runs where? When you are surfing the web, you are the client and each link that you click on becomes a server for the time that you are 'visiting' the page. When you create your own website the machine that holds the files comprising your website is the server and anyone else using the web who clicks on one of your pages is then the client.

Who does what? In the old days things were pretty clear but these days with Java Applets, Dynamic HTML, and various scripting languages (like Javascript and PHP) it gets a little fuzzy. Often it is the developer of the page that must decide what will be done where. Little things like "mouseovers" (when an image changes or something else happens every time your mouse passes over something on the page) are usually done entirely on the client's side. Other things, like most search engines, run on the server's side. The search request is collected on the client's side and sent back to the server, who then processes the request and sends back a page to display which contains the results.

Basics of HTML:

tags, anchors, forms, links, images, browsers

In an HTML page, various pre-defined objects are created and associated with each page. For example, there exists an array of image objects. Each image has an entry in this array along with various attributes that serve to describe it (such as: src (the source of the image - the file where it lives); height (how many pixels high the image is suposed to be when displayed), etc.

There is also a list for each anchor (an anchor is a part on the page we can reference), link, and form. Most objects can be referenced through their arrays by number (eg. images[4] ) - they are stored in the same order in which the HTML parser comes across their references HTML source (which is not always the order in which they appear on the visible page). The objects can also be given names (<img src="x.gif" name="thisone"> ) so we can then reference the image by name ( images["thisone"] )

A note on notation: The values assigned to attributes must be enclosed in quotes. If you have something inside that 'value' that also needs quotes, then you must alternate between double and single quotes:

(<img src="x.gif" name="thisone" onClick=" function_call( 'arg-to-function' ) "> )

Dynamic HTML is an extension to 'regular' HTML that allows parts of the page to be changed after that page has already been loaded and displayed. It defines numerous "events" that you can detect and act upon.

HTML objects, attributes, event handlers (like onClick and reset)

Calling Javascript from a Webpage:

There are basically 2 ways to run javascript scripts from a web page. Stuff in the HTML HEAD section is parsed before the BODY

1. define the code in the <HEAD> portion of the web page and then call the functions as necessary.

<HEAD>

<script language="JavaScript1.2" >

<!-- // the entire javascript code portion is embedded inside

        // an HTML comment that will keep the HTML parser from getting

        // confused by the javascript

var N = 0; // defines a global variable called 'N'

void functionX( Var1, Var2 ) {

// code goes here

}

-->

</script>

</HEAD>

2. put the code in a file named "X.js" and then simply refer to it in the HEAD section

<HEAD>

<script language="JavaScript1.2" src="images.js"></script>

</HEAD>

Whichever way the code is defined, once that's been done, it can be used in the BODY portion like this:

<a href="http://www.cpsc.ucalgary.ca" target="parent" class="linkstyle"

onmouseover="linkOn('level1_0')"

onmouseout="linkOff('level1_0')" name="link-0">

<b><img src="../Resources/Clipart/pr_pin.gif" name="level1_0"

border="0" naturalsizeflag="2" height="26" width="26" align="CENTER"></b>

<font face="Arial,Helvetica,Helvetica,Geneva,Swiss,SunSans-Regular" color="yellow">

<nobr><b> Cpsc Home</b></nobr></font></a>

Calling java From a Web-Page:

Applet vs. Application: an application is a stand-alone program while an applet is designed to be run from a web-page. The applet has no "main" function or method; it is a class definition derived from Applet and is instantiated automatically when the page that refers to it is loaded into the browser.

It is referenced in an HTML document like this:

<APPLET CODE=MyApp.class

      CODEBASE="Http://www.cpsc.ucalgary.ca/~becker/461/Asst/SearchEngine">

      <PARAM NAME="arg1" VALUE="something">

</APPLET>