Simple
Introduction to HTML
Simple
Introduction to HTML
Its really very simple to make a web page. You will need one to complete some homework assignments for this class. First, we can simply design a local web page. Web pages are written in a special language called the "hyper-text markup language". Basically this consists of regular text with a number of "tags" that give the html interpreter (your web browser for example) information on how to display material on your page.
HTML tags are used to mark the elements of a file for a browser. An element is defined as a fundamental part of the structure of a document. Document elements are therefore things you are familiar with from documents you have written (even if you have never written in html): headings, paragraphs, tables, lists, quotes, figures, etc. Tags are designated with angle brackets, and they are typically paired to begin and end some instruction (e.g., to designate a level 1 heading: <H1>Chapter 1</H1>). The end tag always has a slash (/).
The required elements for any document are <html>, <head>, <title>, and <body> tags.
Now, your are ready to create a very simple html page. Open the Windows Notepad (which is a text editor that writes simple ascii files). Type the following, filling in your name, etc.
<head>
<title> My EVSC494 Page </title>
</head>
<body>
<H1> EVSC494 Homework- (enter your name here, its your work) </H1>
<p>This is where I can prepare my homework for EVSC494</p>
</body>
</html>
Save the html file to a file on the LocalData Directory. Now, open an ftp session and transfer this file to your University account. When you get to the main directory on your Unix account (this is /home/yourid) you should create a new directory called public_html. Copy the file you uploaded from the windows machine to this directory and call it home.html. Now, you can view your web page with your browser by pointing to the server: e.g., http://faraday.clas.virginia.edu/~yourid.
In theory, this is how you can build your web pages for homework assignments and your class project. In practice there is a much easier way. Go back to your workstation and open the software called Claris Homepage. This is what we refer to as a What You See is What You Get (or WYSIWYG) editor. This will greatly simplify the preperation and editing of web pages. You may also want to use Microsoft Word which will write files out as html when you select this format from the SaveAs option....Now, reconstruct a new html page using Claris Homepage. You will still need to use ftp to copy this to your University account.
The UVA ITC provides several tutorial sessions for learning how to design web pages. You also might want to check out some of their on-line help.
Adding
imagery to HTML
In-line images can be added with "image source" html commands like the following
<IMG SRC="goesch4.gif" WIDTH="553" HEIGHT="415">
If I wanted the image smaller, I could change the height and width:
This is the way thumbnails are made. They can then be linked to a larger copy of the image so that when it is clicked upon the full-size image will appear:
This kind of linking is done with a command like:
<A HREF="goesch4.gif> <IMG SRC="goesch4.gif" WIDTH="55" HEIGHT="41"> </A>
The first part of this <A HREF= .....> defines a referenced location, it can be an image, or another html document, so it can point to something local (like the picture goesch4.gif in the example above), or it could point to something remote, for example todays current water vapor image off the UVA weather-page:
See <A HREF="http://windfall.evsc.virginia.edu/~mcuser/webpage/curwv.gif"> current water vapor </A>
Links to images at other locations on the net
Expert (and
humorous)
help is also available all over the web, search away!
I do encourage you to develop these skills on your own, not at the expense of learning the content material of this class, but in addition to it, you will notice that as a group learning to write web-pages at the University of Virginia, you are still in the minority, you can/should use this to your advantage. The following graph comes from a survey on technology usage at the University, it sought to identify what fraction of the University community makes its own web-pages.
