(more) Advanced HTML

(more or less) Advanced Stuff:
* Attributes
* Graphics(!)
* Indenting
* Tables
* URLs and document location

Attributes

Many tags support attributes:
<tagname attribute="value">
For example, anchor tags and image tags:
<a href="templates.html">link to template list</a>
<img src="/~glarose/images/bullet.jpg" alt="*">

These are used to supply information to the tag about what it should do. (Note that the attribute is included in the opening tag, but not in the closing tag!) A few useful examples:

<body bgcolor="#rrggbb"> or <body background="graphic-file">
bgcolor specifies a color for the background of the web page, in Red Green Blue hexadecimal (base 16--to fill two digits, 1 is 11, 2 is 22, etc: 33,..., 99, 10, AA, BB,..., FF)--so 0000FF is bright blue, 999900 is medium brown, etc. To see the colors, check out Doug Jacobsons's RGB Color Chart.

background specifies a graphic to use for the background (which is tiled over the background). Specify the graphic file as you would any other web location.

<body text="#rrggbb" link="#rrggbb" alink="#rrggbb" vlink="#rrggbb">
similar to bgcolor; sets the color of normal text, links, active links (those clicked on) and visited links.

<h1 align="alignment">
aligns the header; alignment can be left, right, center, or justify.

<hr width="value" align="alignment">
sets a width (in pixels, or a percent of the window size--e.g., 50%) for the horizontal rule, and an alignment (left, right, or center).
(In Gavin's HTML summary, many (though not all) tags are described with their attributes)

[table of contents] [end of document]

Graphics

How to get them:
* scan them in with a scanner
and convert them (e.g., with Adobe Photoshop) into a .gif or .jpg file.
* create them with a graphics program
(and, if necessary, convert them into a .gif or .jpg file).
* find (non-copyrighted) graphics you like on the WWW or other graphics sources (see the reusing existing HTML page).
and copy them for your own use.
(the picture on my home page was scanned in and doctored with xv, a shareware program for Unix. Similar (or better) results could have been obtained with Photoshop. The graphic on the How it all works page was created with xfig, a freeware drawing program, and converted to a .jpg file with xv. ImageMagick might have done a better conversion job.)

A List of Image Attributes
<img src="imagefile" alt="alternate-text" align="alignment" border="borderwidth" vspace="vspcvalue" hspace="hspcvalue">
alignment can be top, middle, bottom, left, or right. The first three specify alignment relative to the text around the image; left or right cause images to settle to the left or right of the text being entered.

borderwidth sets the width of any border (this is significant if the image is inside an anchor!), given in pixels

vspcvalue and hspcvalue give the vertical and horizontal spacing around the image.

Examples:
<img src="/~glarose/images/bulletR.jpg"
alt="bulletR" align="top">some text 		gives bulletRsome text
<img src="/~glarose/images/bulletR.jpg"
alt="bulletR" align="middle"
hspace=10>some text 		gives bulletRsome text
<a href="/~glarose/"><img
src="/~glarose/images/bulletR.jpg"
alt="bulletR" align="middle">some
text</a> 		gives bulletRsome text
<a href="/~glarose/"><img
src="/~glarose/images/bulletR.jpg"
alt="bulletR" align="middle"
border=0>some text</a> 		gives bulletRsome text
[table of contents] [end of document]

Indenting

Is legally done (at the moment) only with lists:
<dl>
<dt> This has
<dd> <dl>
<dt> a couple
<dd> of levels of<br>
indentation.
<p>
All done with<br>
definition lists!
</dl>
<dt> (It -is- legal to
<dd> nest lists!)
</dl>
 gives 
       .
This has
a couple
of levels of
indentation.

All done with
definition lists!

(It -is- legal to
nest lists!)

[table of contents] [end of document]

Tables

Tables are fabulous because they allow not only tables (ho-hum) but also Multicolumn Formats!--e.g., the section on indenting, above.

Example:
<table>
<tr>
<td>this is data cell 1
<td>this is data cell 2
<tr>
<td>this is data cell 3
<td>this is data cell 4
</table>
 
        .
this is data cell 1 this is data cell 2
this is data cell 3 this is data cell 4

Attributes for tables include borders (the value after the border attribute gives the width of the border):
<table border=5>
<tr>
<td>this is data cell 1
<td>this is data cell 2
<tr>
<td>this is data cell 3
<td>this is data cell 4
</table>
 
        .
this is data cell 1 this is data cell 2
this is data cell 3 this is data cell 4
this is data cell 1 this is data cell 2
this is data cell 3 this is data cell 4

For a more complete introduction to tables, see the table section of Gavin's HTML summary.

[table of contents] [end of document]

URLS and document location

Getting there

The addresses in anchors and images are URLs (Uniform Resource Locators). These tell, in order,
  1. How to talk to the HTTP server
  2. Where the document you want is
  3. What the document is, and
  4. What part of the document you want
So suppose we write the link (anchor)
<a href="http://brillig.NebrWesleyan.edu/~glarose/index.html#interstuff">Gavin's interesting stuff</a>

This says: if someone selects the text "Gavin's interesting stuff," get a file--
Talk to the other computer in the HyperText Transfer Protocol,
The other computer is brillig.NebrWesleyan.edu,
The file is found in a directory (folder) called /~glarose/,
The file is called index.html, and
We want to start at a place called interstuff in that file.

If this were in another file on brillig that is already being served via HTTP, we can omit the information about the protocol and computer:
<a href="/~glarose/index.html#interstuff">Gavin's interesting stuff</a>

If the file on brillig is in fact in the directory /~glarose, we can just say
<a href="index.html#interstuff">Gavin's interesting stuff</a>

And if the file is actually the file index.html, we can just specify the location in the document:
<a href="#interstuff">Gavin's interesting stuff</a>

Defining locations to go to

To define the location interstuff that we were going to in the file, we also use an anchor tag, but with a different attribute:
<a name="interstuff">this is the location called interstuff</a>
As an example, use the View Source ability of your browser to see how the links to the table of contents at the end of each section in this document are set up!

[table of contents]

[workshop home] [previous (other issues)] [next (templates)]
[HTML summary]

last modified on 17 May 1996

(more) Advanced HTML
http://brillig.NebrWesleyan.edu/~glarose/summary/workshop/advhtml.html
Comments to: glarose@NebrWesleyan.edu