GLG410--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 in MS Word, Excel, and PowerPoint. Not much experience in HTML or Illustrator. Some experience in Photoshop. A little over a third have some experience in ArcGIS, a little under a quarter in MATLAB. Not much experience in Linux/Unix.
Note to Mac users: the Mac OS is part of the Unix family. Note to Android users: the Android OS is part of the Linux family.

Summary of experience

Mixed opinions about blogs and Blackboard (we might use it some).

Almost all students have laptops, but capabilities/capacities vary wildly. Accommodations will be made.

Expectations are generally to be better at using computers for earth and space science in preparation for careers in either industry or graduate school. Most popular topics/software to be covered are: (1) ArcGIS, (2) MATLAB, and (3) Excel. Mixed opinions about 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 -a HTML tutorial I borrowed some text from this and will follow this one today in class -a HTML Reference -a HTML Tutorial -a HTML Tutorial -T171 Tutorials

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:
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:

  <!-- header info used to contain extra information about
       this document, not displayed on the page -->


  <!-- all the HTML for display -->
          :      :
          :      :
          :      :

The very first line:


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.

Basic HTML authoring Circuit

Here is a short video showing the circuit of authoring, uploading, and viewing an html document:

Next trip around the circuit:

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.

A video illustration:

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. A video illustration:

Using SFTP to upload files

Our class Get a website page explains some about using the SFTP software as an alternative to MyFiles for uploading and downloading. Have a look at the explanations there, as well as look at this video illustration (which also has a bit of commentary about tagging strategy):

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="">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.

<th> Heading (optional) </th>
<td> Other cell</td> <td> Other cell</td>
Repeat rows and cells

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.
Assignment 2 (link here) is due Tuesday, August 30, 2011.

GLG410/598 Computers in Earth and Space Exploration

Last modified: August 25, 2011