Instructor: Brian Klinkenberg

Office: Room 209
Office hours: Tue / Thu
12:30-1:30

TA: Alejandro Cervantes

Office hours: Mon and Tues from 10-11 in Rm 115.

Lab Help: Jose Aparicio

Office: Room 240D

Computer Lab: Rm 115

 

 

Lab 2B: HTML Instructions

Introduction to HTML

What is this lab is about? Since your final project must be a web-based presentation, it is vital that you spend some time learning the basics of HTML. Also, learning how to create web pages is a useful skill to have.

The information below is what is covered in the lab. See the Outline for HTML tags you are expected to become familiar with. Try to use as many of these tags as possible in your web page. See the assignment if you don't know what it is. If you missed the lab or can't remember how to use tags, check out The HTML Code Tutorial. This on-line document provides simple explanations of the tags you'll need to use. Check out the links below and then read over the instructions below.

To access your pages from within the department:
http://smew.geog.ubc.ca/~username/

To access your pages from outside the department:
http://www.geog.ubc.ca/undergrad/username/
(trailing "/" is required)

Note: Use American spelling when coding HTML. For example, use "color", not the Canadian "colour".

Useful links for this lab:

Here's the Lab Lecture - What is HTML?

The World Wide Web is a unique tool that allows you to access not only text but also pictures, sound, and video information from across the Internet world.

HTML, or HyperText Markup Language, is the language that tells a web browser how to display its multimedia documents. The documents themselves are plain text files (ASCII) with special "tags" or codes that a web browser knows how to interpret and display on your screen. With just a simple text editor, you can create your own HTML pages that users on the Internet can then display.

Tutorial on HTML - OUTLINE

  • What is HTML?
  • HTML Documents
  • Markup Tags
    • HTML
    • HEAD
    • TITLE
    • BODY
    • Headings
    • Paragraphs
    • Lists
    • Horizontal Rules
  • Linking
    • Relative Pathnames Versus Absolute Pathnames
    • URLs
    • Links to Specific Sections
  • Other neat Stuff:
    • Inline Images
    • Background Color
  • Troubleshooting
    • Avoid Overlapping Tags
    • Embed Only Anchors and Character Tags
    • Commenting Your Files

CHECK THIS OUT!

The Webby Awards are given out each year to web sites that are deemed to be the "best"--check out the recent winners in order to get a sense of what others think are great pages: 13th Annual Webby Awards Nominees & Winners

ASSIGNMENT

DUE: Oct 19th or 20th at the beginning of your lab.

Create your own home page and copy it to a folder labeled www on H:/ in your home directory. In the folder, make sure you include your main HTML file, smaller files you link to and any graphic files you may use. You need all these files in order for your page to work properly. If you're unsure ask your TA to look over your files. Please name your main HTML page as: index.html

Your html file should have the following:

  • Proper use of <HTML>, <TITLE>, <HEAD>, <BODY> tags
  • A couple of headers, paragraphs and maybe even a horizontal line. (Use the <h1> and </h1> tag for a first level header; the <P> tag for a paragraph and <BR> for a line break; and the <HR> for a horizontal line.
  • An unordered list. Hint use the <UL>, </UL> and <LI> tags
  • A link to a file in the same directory (the file can be a simple txt file)
  • A link to an external web site
  • An image or graphics file. You can save one using the right mouse button key as was demonstrated in class or scan your own in. If you want to scan in your own image or photo, check out the scanner instructions (currently under revision).
  • A linked image - within the site or to another URL. If you are using an image from another site, please ensure that you source the image.
  • What ever else you want. Impress me!