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:
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.
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.
Here are two two tags you'll be using in almost every document.
<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.
<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:
<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.
<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".
<hr> : This stands for "horizontal rule" and tells
the browser to draw a horizontal line across the page.
<center> TEXT </center> : Center the text
between these two 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.
<b> TEXT</b> : Make text bold. (But actually
comes out as underlined on lynx).
<i> TEXT</i> : Make text italicized.
<em> TEXT</em> : Emphasize text;
however the browser sees fit!
<tt> TEXT</tt> : Print text in
non-proportional font.
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
PROTOCOL is what type of connection to make (in the case of
links to other www documents, this will always be "http".
MACHINE is the name of the computer where the file pointed
at is found.
FILE is which file to get from that computer.
The optional LINKNAME specifies a particular place to go
in that file. More on this later.
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:
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.
href=/www/docs2/nutherdoc.html: If the document is
on the same machine but in another directory, you can give the
full path.
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:
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 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:
<table> ... </table>: These mark the beginning and
end of a table, respectively.
<tr>: This marks the start of a row in a table.
<td> ... </td>: These tags circumscribe the
contents of a (data) table cell.
<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...
Now consider a few things you can do to make tables a little more fancy:
You can add borders between the cells of a table by adding the
argument border to the <table> tag.
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.
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:
