Lecture 2

Introduction and HTML continued

A relevant recent article from SLATE: The Secret Technique for Learning How to Code

Our goal for today is to teach you enough so you can do assignment 3 (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

W3C standards
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>
  <html lang="en">
  <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>

is not technically required, but is a code that tells the browser that this is a generic html page.

Basic HTML authoring Circuit

Here is a short video showing the circuit of authoring, uploading, and viewing an html document (note that I use a slightly older DOC Type specification at that time):

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.

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

Using parallel directory structures to stay organized

One thing that can be confusing is the idea of the index.html file. It is the default file that the web server looks for as it goes into each folder. Each index.html file is different. One way to keep things straight, especially if you usually use the same local machine is to make the two directory structures parallel. Here is a video explanation:

Setting up the second web page (Assignments folder and page)

Now that we have the parallel set up, let's finish off by demoing how to set up the assignments page:

Assignment 3: 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.
If you are using a Mac with TextEdit, make sure to select Preferences (under File Menu)-->and set the Format as Plain Text. Check this link.

Assignment 3 (link here) is due Wednesday, September 2, 2015 before class.

GLG410/598 Computers in Earth and Space Exploration

Last modified: September 1, 2015

GLG410--Computers in Earth and Space Exploration