GLG410/598--Computers in Earth and Space Exploration
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...
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:
- Introduction to you
- A picture or graphic (does not have to be of you, can be about your work or a logo or whatever)
- 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
- Hints
- The top level directory for your web site is www. This is not where the Secure FTP takes you, but one level higher. So make sure you go into that directory first, and then build your website from there.
- If you are a MacOSX user and you use TextEdit, you need to go to Format->Make Plain Text. Otherwise it will try to make it so you can see your html, rather than as the interpreted version (your web page). Make sure also to save with extension .html
- Grading rubric
- Directory structure setup (main page plus assignments directory; includes html cleanliness)--20 points
- Content of introduction (how informative)----10 points
- Graphic--10 points
- Overall layout and useability (site design)--10 points
Assignment is due Tuesday, February 3, 2009.
GLG410/598 Computers in Earth and Space Exploration
Last modified: January 21, 2009