Introduction to HTML

This page introduces the following elements of the HTML language: Head and Body, Useful Body Tags, Links Within Documents, Links Elsewhere, Links Close By, Graphic Images, Lists and Tables.

Head and Body

HTML stands for HyperText Markup Language. HTML files are text files; conventionally, the filenames end in .html though they can also end in .htm. In the HTML file, white space (space, tab, new line, new page) is ignored by the browser except in so far that it separates words. So you can introduce new-lines as you like to make the structure of the document clearer; they will all be formatted out of existence when the browser justifies the right and left margins to fit its window.

HTML files can be viewed by pointing your browser at file:filename, or by File / Open File .... They must start with a <HTML> tag and end with a </HTML> tag. In between, there must be a Head and a Body; so the whole file has the structure

   <HTML>
      <HEAD> Head elements </HEAD>
      <BODY> Body elements, and content </BODY>
   </HTML>

The Header bit is easy; all you need is a title.

   <HEAD> <TITLE>Your Title Goes Here</TITLE> </HEAD>

The Body bit is where the action is. It consists of text and images, which will appear, suitably reformatted, on the display.

Useful Body Tags

In HTML, there are standalone tags, and tag pairs. The tag pairs can be nested inside each other.

<HR>: The <HR> tag creates a Horizontal Rule, or line, across the display.
<H1>text-phrase</H1>: The <H1> tag pair creates a top-level (big) header. There are six levels altogether, <H1> to <H6>.
<P>a-paragraph-of-text</P>: The <P> tag pair creates a paragraph and places a blank line after it.
<I>text</I>: The <I> tag pair creates italicised text.
<B>text</B>: The <B> tag pair creates bold text.
<CODE>text</CODE>: The <CODE> tag pair creates constant-width text - useful for displaying file names, programming code segments, etc.
<PRE>text-including-new-lines</PRE>: The <PRE> tag pair tells the browser to turn off its margin justification, so that Pre-formatted text remains formatted.

Links within Documents

By default, links jump to the top of a document. You can also create hyperlinks that jump to other places within the document. First you name that place, with the NAME option of the Anchor tag pair:

   <A NAME="anchor-name"> text </A>

Then you can jump to that point under the name #anchor-name, and within the same document that's all the reference you need; e.g.

   For more details see the <A HREF="#appendix">Appendix</A>.

and then, later in the same document,

   <A NAME="appendix"><H1>Appendix</H1></A>
   This appendix describes the . . .

Links Elsewhere - Absolute URLs

Absolute URLs can be used to reference any resource on the Internet. The full syntax for a URL is

   access-method://server-name[:port-number]/directory/file

The access-method can be http (for HTML documents), ftp (for file transfers), telnet (for interactive login sessions), mailto (for sending e-mail), news (for reading news-groups), etc. For example,

   For PC file-serving, we also use
   <A HREF="http://lake.canberra.edu.au/pub/samba">Samba</A>,
   which is available
   <A HREF="ftp://nimbus.anu.edu.au/pub/tridge/samba">by ftp</A>
   and discussed in the
   <A HREF="news:comp.protocols.smb">comp.protocols.smb</A> newsgroup

Links Close By - Relative URLs

If the destination of your link shares the same access-method, the same server or even the same directory as the current document, then you don't have to spell out the shared bits in your URL. For example,

   You may also be interested in
   <A HREF="../misc/other.html">some other stuff</A>.

Graphic Images

Images are specified with the <IMG SRC="URL-of-image"> standalone tag. You may also specify details of the Alignment, and an Alternative text to be displayed if the browser is unable or unwilling to display images.

   <IMG ALIGN=TOP SRC="../img/smilingface.jpg" ALT="Hi There !">

Lists

There are three sorts of lists, which can be nested inside each other.

<UL> <LI>item</LI> <LI>item</LI> <LI>item</LI> </UL>

Unordered (bulletted) list of items.

<OL> <LI>item</LI> <LI>item</LI> <LI>item</LI> </OL>

Ordered (numbered) list of items.

<DL> <DT>item-title</DT> <DD>item-text</DD> </DL>

Definition list of items, identified by their titles, with a chunk of associated text for each item. Good for glossaries, bibliographies, etc. For example,

<DL>
   <DT>The Science of Juggling</DT>
   <DD>Good review; but does not mention Group Theory</DD>
   <DT>Juggling for the Complete Klutz</DT>
   <DD>Excellent introduction</DD>
</DL>

Tables

The complete Table is enclosed between the <TABLE>...</TABLE> tag pair. Within that, each Table Row is enclosed within a <TR>...</TR> tag pair; then within each Row, each Table Header (or column title) is enclosed within a <TH>...</TH> tag pair, or each Table Detail (or cell) is enclosed within a <TD>...</TD> tag pair. For example,

   <TABLE BORDER=1>
      <TR> <TH>Name</TH> <TH>Phone</TH> </TR>
      <TR> <TD>Fred Bloggs</TD> <TD>02-345-6789</TD> </TR>
      <TR> <TD>Gina Bloggs</TD> <TD>09-876-5432</TD> </TR>
   </TABLE>

HTML makes a perfectly satisfactory word-processor, as tools are available to convert HTML into most other relevant formats.

For more details of the language (there is lots more ...), see e.g. HTML, the Definitive Guide by Chuck Musciano and Bill Kennedy, O'Reilly.

Back to P J B Computing or to www.pjb.com.au . . .