GLG410/598--Computers in Earth and Space Exploration


Announcements Syllabus Schedule Weekly lecture notes Assignments Links

Lecture 2

Introduction and HTML continued

Assignment 1: Getting some information

Introductory poll for the class.

Report on the poll

Overall pretty good experience with Office and Photoshop. Not so much with HTML, ArcGIS, or Matlab. Almost no experience with Linux/Unix.
Summary of experience

Not much enthusiasm for blogs; Blackboard ok (we might use it some).

Laptops for all students--variable opinions, but accommodations must be made.

Expectations are generally to be better at using computers to to earth and space science better. Most people were happy to emphasize ArcGIS and Matlab. Jury still out on Linux/Unix.

What is Linux/Unix?

Simply put it is another operating system like one of the various versions of Windows (2000, XP, or Vista) or MacOSX. It is designed for multi-user and multi-tasking machines and is a dominant operating system for servers and for the computers that run the internet. It is also generally free and community supported.

HTML continued

Our goal for today is to teach you enough so you can do assignment 2 (see below).
Some of this will be notes on the white board in the classroom.
Please recall the nice set of HTML links that we presented. These are much more comprehensive than anything we can do in just one class:

HTML resources

http://www.mcli.dist.maricopa.edu/tut/lessons.html -a HTML tutorial I borrowed some text from this and will follow this one today in class
http://www.fbe.unsw.edu.au/learning/html/ref/ -a HTML Reference
http://www.echoecho.com/html.htm -a HTML Tutorial
http://www.w3schools.com/html/default.asp -a HTML Tutorial
http://www.tutorials4u.com/html/ -T171 Tutorials
http://www.htmlgoodies.com

Servers versus clients versus browsers

Server serves to a client that runs a browser. Main browser types are Internet Explorer, Firefox, Mozilla, Safari. Each has some different capabilities and the capabilities are continuously improving, just as the sophistication of web sites improves.

Computer directory structures

Directories and subdirectories versus files and files of different types.
The difference between \ and /. Use / for all of your html.
Importantly, to go down from where your file is, you just name the path and separate them with the slash:
/directory_level_1/directory_level_2/file_of_interest
.
To go up from where your file is, you use the short hand
../
.

Creating Your HTML Document

An HTML document contains two distinct parts, the head and the body. The head contains information about the document that is not displayed on the screen. The body then contains everything else that is displayed as part of the web page.

The basic structure then of any HTML page is:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
  <html>
  <head>
  <!-- header info used to contain extra information about
       this document, not displayed on the page -->
  </head>

  <body>

  <!-- all the HTML for display -->
          :      :
          :      :
          :      :
  </body>
  </html>

The very first line:

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

is not technically required, but is a code that tells the browser what version of HTML the current page is written for. For more information, see the W3C Reference Specification.

Displaying an image in your browser

The next step after being able to write basic HTML is to be able to put graphics into your web page. The main file types that you can use are .gif, .jpeg, and .png in most browsers.

     <img src="filename.gif">
Note that the path to the file has to be correct. This one implies that it is in the same directory as the html file that points to it.

HTML linking

One of the great powers of HTML and browsers is that you can surf which means that you can move from one page to another or download files from pages via links. These links use an addressing scheme called Uniform Resource Locators or URLs. They are set off on your web page usually with a different color and are underlined.
Nice thorough description of linking (anchors).

Links to local files (relative linking)

You will take your first step of "anchoring" by creating a hypertext link to a second web page. These links are called "local" because they reside on the same computer as the working document (they do not have to venture out on the Internet). You will also be shuffling around the parts of your growing web site (do you see how this becomes more than just a "home page"?).

The simplest anchor link is one that opens another HTML file in the same directory as the presently displayed web page. The HTML format for doing this is:


     <a href="filename.html">text that responds to link</a>

Think of it as "a" for anchor link and "href" for "hypertext reference".

The filename must be another HTML file. Whatever text occurs after the first > and before the closing </a> symbols will be the "hypertext" that appears underlined and "hyper."

With the anchor tag, you can also create a link to display a graphic file. When the anchor link is selected, it will download the image file and display the image by itself in your web browser.

NOTE: Most web browsers will display such a link to an image file directly in your web browser. Depending on the web browser, and the preferences/settings on your computer, you may be promoted to either save the file or to select an application to display the file. Regardless of the action, if you get that far, the link to the image file has succeeded.

The simplest anchor link is to a file in the same directory/folder as the document that calls it. The format for creating a hypertext link to a graphic is the same as above for linking to another HTML document:


  <a href="filename.gif">text that responds to link</a>

where filename.gif is the name of a GIF image file. Note that file formats that will work in most browsers include jpeg and png as well.

How about using instead of text an image as the link? Then you nest the HTML tags:

<a href="filename.gif"><img src="small_image_filename.gif"></a>
For example:

<a href="images/03Ecuador.jpg"><img src="images/thumb03Ecuador.jpg"></a>
Notice that the images are one directory level down.

Links to remote files (absolute referencing)

If you want to link to something on a remote machine, you do the same as above, but use the entire path to the file (image or html or etc.):

  <A HREF="http://www.asu.edu/">Arizona State University</a>
Arizona State University

Using tables to keep things tidy

Most computer monitors are longer horizontally than vertically, so in order to use your space the most efficiently and to keep things on your pages organized, you should consider using a table.



<TABLE BORDER="1">
<tr>
<th> Heading (optional) </th>
<td> Other cell</td> <td> Other cell</td>
</tr>
Repeat rows and cells

</TABLE>
View source on this page to see a complicated table:
Advanced Field Geology page

Comments to make your HTML readable and understandable


<! If you want to write a comment -This is the way to do it... >
Use it to help you and others know what you were trying to do...

Assignment 2: Setting up a web page at ASU

We expect that you will turn in all of your assignments as web pages or links from web pages. We also expect that you will set up your own web site to learn HTML and get yourself out there in cyberspace.

For this exercise, you will set up a personal web site following these instructions: Setting up an ASU web site. Your site should contain:
  1. Introduction to you
  2. A picture or graphic (does not have to be of you, can be about your work or a logo or whatever)
  3. A subdirectory for our class that includes a page of links to your assignments (it will modified as the weeks go by, so the only entry here will be to this first assignment
  4. Hints
  5. Grading rubric
Assignment is due Tuesday, February 3, 2009.

GLG410/598 Computers in Earth and Space Exploration


Last modified: January 21, 2009