This website has been archived from TrainWeb.org/trolleypostcards to TrainWeb.US/trolleypostcards.

Nick's Quick Guide to HTML

1. Writing HTML.
2. Marking up documents with tags.
3. Basic document structure tags.
4. Character format tags.
5. Hypertext Links.
6. Advanced document structure tags:
   1. Lists.
   2. Pictures.
   3. Tables.

Writing HTML:

Marking up documents with tags:

HTML documents are basically plain-ascii text documents in which you put tags to indicate special formatting or features.

All HTML tags are surrounded by the characters "<" and "> ". For example, the tag which marks a line break is <br> . Two additional things to know about tags in general are:

1. Some tags have options. The basic format of such tags is <TAG OPTION=VALUE> (you can put VALUE in quotes, but don't have to). For example.
2. Tags which mark up a block of text come in pairs, like this: <TAG> text text text </TAG> . That is, the end of the text block is marked by a tag identical to the one at the beginning except that you put a "/" before the name.

Tags are case-insensitive, by the way.

Basic document structure tags:

Here are two two tags you'll be using in almost every document.

1. <title> DOCUMENT TITLE</title> : It is not necessary to give a document a title, but you generally should. The title you give the document will be displayed at the top of the browser window when people look at it.
2. <p> : This tag marks the end of paragraphs. A blank line by itself does not mark a paragraph, and will be ignored by the browser.

Here are some others which will give your document some structure:

1. <h1> SECTION TITLE</h1> : Use this to mark a section header. The browser will present the text in bold and/or in a large font if possible.
2. <h2> SUBSECTION TITLE</h2> : Use this for the title of a section division less important than the one marked by "h1" tags. You can continue to break things down all the way to "h6".
3. <hr> : This stands for "horizontal rule" and tells the browser to draw a horizontal line across the page.
4. <center> TEXT </center> : Center the text between these two tags.

Character Format Tags:

You can use the tags below to tell the browser to put text into a specific typeface. But keep in mind that these are all subject to different implementations in different browsers, particularly "lynx", which obviously has a limited number of options.

1. <b> TEXT</b> : Make text bold. (But actually comes out as underlined on lynx).
2. <i> TEXT</i> : Make text italicized.
3. <em> TEXT</em> : Emphasize text; however the browser sees fit!
4. <tt> TEXT</tt> : Print text in non-proportional font.

Hypertext Links:

The Basic Structure of Link Tags:

The schema for hypertext links is as follows:

<a href=URL name=LINKNAME> TEXT </a>

URL's:

Where URL (universal resource locator) describes where to go when the user clicks on (or otherwise selects) this link, and LINKNAME is the name of this location in the document (more on this below).

The complete structure of a URL is thus:

(PROTOCOL://MACHINE)(/FILE)(#LINKNAME)

Where

1. PROTOCOL is what type of connection to make (in the case of links to other www documents, this will always be "http".
2. MACHINE is the name of the computer where the file pointed at is found.
3. FILE is which file to get from that computer.
4. The optional LINKNAME specifies a particular place to go in that file. More on this later.

Thus, the tag

<a href=http://xyzzy.ucsb.edu/pub/www/plugh.html#y2> Click here!</a>

Makes a link which, if clicked will cause the browser to make a web connection to the computer "xyzzy.ucsb.edu", get the file "plugh.html" from the directory "/pub/www/docs", and go to the link named "y2".

As noted by the parentheses, a URL does not need to be complete. Here are some examples of how URL's can be abbreviated:

1. href=otherdoc.html: If you just specify the name of another document, without saying on what machine or in what directory, the browser will look for that document in the same directory and on the same machine as this one.
2. href=/www/docs2/nutherdoc.html: If the document is on the same machine but in another directory, you can give the full path.
3. href=../docs3/three.html: You can also refer to the relative path of the document.

Note that if you want to refer to a document in the same directory as the one with the link, it is better to use just the document name as in (1) than the full path since that way the link will remain valid even if the documents are moved to a different directory.

Link Names:

By adding #LINKNAME to a URL, you tell the browser where to go in a document. This option can be added to a full URL or to a URL in any of the abbreviated forms above, or can be used just by itelf to refer to a location with the current document. Thus, if a user selects a link like the one below:

<a href=#somewherelse> Click here to go somewhere else in the current document!</a>

The browser will search the current document for a tag like this:

<a name=somewherelse> Hi there!</a>

Lists:

Lists are easy to set up in HTML. The basic structure for lists is as follows:

<ol>
<li> ITEM #1
<li> ITEM #2
<li> ITEM #3
...
</ol>

This will create a ordered (i.e., numbered) list. To create an unnumbered list, replace the tags <ol> and </ol> with <ul> and </ul>.

Note: Lists can be embedded in other lists.

Pictures:

There are two ways to include documents in your web site. The first way is to just have a link to the document. For example, with the tag:

<a href=picture.gif> Click here to see a pretty picture.</a>

The user will be able to click on the link, and the browser will load up the picture.

The advantages of including pictures this way are that (1) If the picture is really big, then the user can skip it. (2) If you have the right configuration its possible to see the picture this way even if you're using lynx (you can set it up to call an external viewer program).

To actually include a picture in your document proper, use the "img" tag as below:

<img src=FILENAME>

As with filenames in URL's, you can either just list the name of the file, to specify that the picture file is in the same directory as the current document, or put an absolute or relative path.

The usual formats for images in web documents are .gif and .jpg. It is best to use .jpg files because they are the most compact. To convert between these formats, any many others including .bmp, you can use the program xv3.

Note that you can put image tages inbetween the <a> and </a> tags of a hypertext link to create clickable "buttons".

Tables:

Tables are a new feature of HTML and are not supported by all browsers. They are also a little bit complicated to create, but they are too useful to overlook for either of these reasons.

The basic tags for making tables are:

1. <table> ... </table>: These mark the beginning and end of a table, respectively.
2. <tr>: This marks the start of a row in a table.
3. <td> ... </td>: These tags circumscribe the contents of a (data) table cell.
4. <th> ... </th>: These tags circumscribe the contents of a (header) table cell. Structurally, <th> tags are the same as <td> tags, but their contents will be formatted differently.

To demonstrate these with a quick example, the following codes...

<table>
    <tr> <td></td>   <th>Mon</th> <th>Tues</th> <th>Weds</th>
    <tr> <th>AM</th> <td>58</td>  <td>62</td>   <td>59</td>
    <tr> <th>PM</th> <td>52</td>  <td>58</td>   <td>80</td>
</table>

...produce the following table.

	Mon	Tues	Weds
AM	58	62	59
PM	52	58	80

Now consider a few things you can do to make tables a little more fancy:

1. You can add borders between the cells of a table by adding the argument border to the <table> tag.
2. You can make one cell which takes the horizontal space of two (or more). To do this, add the argument colspan=(number of columns) to the <td> or <th> tag.
3. Similarly, you can make one cell take the vertical space of multiple cells by adding rowspan=(number of rows).

These features are demonstrated in the code and associated table below:

<table border>
    <tr>
        <td rowspan=8>Celtic</td>
        <td rowspan=6>Insular</td>
        <td rowspan=3>Brythonic</td>
        <td>Breton</td>
    <tr>
        <td>Cornish</td>
    <tr>
        <td>Welsh</td>
    <tr>
        <td rowspan=3>Goidelic</td>
        <td>Irish</td>
    <tr>
        <td>Manx</td>
    <tr>
        <td>Scots Gaelic</td>
    <tr>
        <td rowspan=2 colspan=2>Continental</td>
        <td>Gaulish</td>
    <tr>
        <td>etc.</td>
</table>

Celtic	Insular	Brythonic	Breton
			Cornish
			Welsh
		Goidelic	Irish
			Manx
			Scots Gaelic
	Continental		Gaulish
			etc.