UvA FNWI UvA
ICT | Guides | Web Service | Guides | HTML Primer


 
  26 visitors in
May 2012
 
  last update
21 - 09 - 2004
 
 

 

HTML Primer

Special characters

In HTML there are four characters that should not be used directly. They have special meanings when written as-is.

< should be written in HTML as &lt; (critical)
> should be written in HTML as &gt; (critical)
& should be written in HTML as &amp;
" should be written in HTML as &quot;

Document layout and title

The document should start with <HTML> (first line) and should end with </HTML> (last line). The document consists of two basic parts, the heading and the body. The heading starts with <HEAD> and ends with </HEAD>. The body starts with <BODY> and ends with </BODY>.

Except comments and white-space, there should be no characters outside the heading and the body sections. Comments can be opened using the <!-- string, and closed using the --> string.

The document heading

In the document heading, the document title can be specified. A title string starts with <TITLE> and ends with </TITLE>. A title is commonly opened and closed on the same line.

Fonts and stuff

Bold <B>This text will be bold</B>
Strong <STRONG>This text will be very visible</STRONG>
Italic <I>This text will be italic</I>
Emphasized <EM>This text will be emphasized</EM>
Typewriter <TT>This text will be in typewriter font</TT>
Code <CODE>This text will be program code</CODE>
Strikeout <STRIKE>This text will be striked out</STRIKE>

Headers cause blank space above and below the line.

<H1>Header size 1</H1>

<H2>Header size 2</H2>

<H3>Header size 3</H3>

<H4>Header size 4</H4>

<H5>Header size 5</H5>
<H6>Header size 6</H6>

Addresses will flow to a separate line:

<ADDRESS>user@www.science.uva.nl</ADDRESS>

Special Language Characters

&Aacute; ... Á    &Acirc;  ... Â    &AElig;  ... Æ
&Agrave; ... À    &Aring;  ... Å    &Atilde; ... Ã
&Auml;   ... Ä    &Ccedil; ... Ç    &Eacute; ... É
&Ecirc;  ... Ê    &Egrave; ... È    &ETH;    ... Ð
&Euml;   ... Ë    &Iacute; ... Í    &Icirc;  ... Î
&Igrave; ... Ì    &Iuml;   ... Ï    &Ntilde; ... Ñ
&Oacute; ... Ó    &Ocirc;  ... Ô    &Ograve; ... Ò
&Oslash; ... Ø    &Otilde; ... Õ    &Ouml;   ... Ö
&THORN;  ... Þ    &Uacute; ... Ú    &Ucirc;  ... Û
&Ugrave; ... Ù    &Uuml;   ... Ü    &Yacute; ... Ý
&aacute; ... á    &acirc;  ... â    &aelig;  ... æ
&agrave; ... à    &aring;  ... å    &atilde; ... ã
&auml;   ... ä    &ccedil; ... ç    &eacute; ... é
&ecirc;  ... ê    &egrave; ... è    &eth;    ... ð
&euml;   ... ë    &iacute; ... í    &icirc;  ... î
&igrave; ... ì    &iuml;   ... ï    &ntilde; ... ñ
&oacute; ... ó    &ocirc;  ... ô    &ograve; ... ò
&oslash; ... ø    &otilde; ... õ    &ouml;   ... ö
&szlig;  ... ß    &thorn;  ... þ    &uacute; ... ú
&ucirc;  ... û    &ugrave; ... ù    &uuml;   ... ü
&yacute; ... ý    &yuml;   ... ÿ    in development

Text flow controls

Lines in HTML need to be broken explicitly when
you want
this effect
A line break is made using <BR>
A paragraph break is made using <P>
A horizontal ruler is made using <HR>

Pre-formatted text is available. This allows columns. Tabs are recognized. 

  <PRE>
  ITEM		PRICE
  -----------   -------
  apples	4.50
  cherries	1.23
  bananas	3.34
  twinkies	1.75
  </PRE>

Standard HTML features are supported in pre-formatted mode. It is not like the LaTeX verbatim mode.

Lists

Definition list: <DL> 

  <DL>
  <DT>gnu \'n(y)u:\ n or gnu or gnus [modif. of Bushman
      nqu] pl :
  <DD>any of several large African antelopes (genera
      Connochaetes and Gorgon) with a head like that of an ox,
      short mane, long tail, and horns in both sexes that
      curve downward and outward
  <DT>ox \'a:ks\ \'a:k-s*n\ n or ox.en :
  <DD>1: the domestic bovine mammal (Bos taurus); esp :
      an adult castrated male 2: a bovine mammal
  </DL>

gnu \'n(y)u:\ n or gnu or gnus [modif. of Bushman nqu] pl :
any of several large African antelopes (genera Connochaetes and Gorgon) with a head like that of an ox, short mane, long tail, and horns in both sexes that curve downward and outward
ox \'a:ks\ \'a:k-s*n\ n or ox.en :
1: the domestic bovine mammal (Bos taurus); esp : an adult castrated male 2: a bovine mammal

When the data following <DT> is short, using <DL COMPACT> will save space.

Unordered list: <UL> 

  <UL>
  <LI>just an item
  <LI>another item
  <LI>last item
  </UL>

  • just an item
  • another item
  • last item

Ordered list: <OL> (same example with UL replaced by OL)

  1. just an item
  2. another item
  3. last item

List using menu: <MENU>

  • just an item
  • another item
  • last item

    • Directory list: <DIR>

  • just an item
  • another item
  • last item

    • For directories list items should be shorter than 20 characters.

    Lists may be nested.

    HyperLinks

    HyperLinks are made using URLs. A URL points to a unique resource, for instance:

    <A HREF="http://hoohoo.ncsa.uiuc.edu/docs/setup/admin/AccessingFiles.html">URL</A>s

    points to the documentation on URLs. A URL can consist of connection type, site, directory and parameters. It has the form:
    [con-type:][//host]/[directory][(#anchor|?parameters)]

    • Connection Type
      • http - Server needs to be running the HTTP Daemon
      • ftp and file - Anonymous ftp connection
      • gopher, mailto, telnet, wais
    • Site
      • Any Internet address will do
      • Never abbreviate to www, carol or adam. This is only filled in correctly by the local name server. If you need to use a site name, use the full name; e.g. www.science.uva.nl
    • Directory
      • The directory name is mapped by the server to some local disk or directory.
      • At FNWI ~user is translated to /home/user/public_html for http connections.
      • Executables in user directories will not be executed by the HTTP Daemon.
    • Parameters
      • Pointers to anchors (NAME= fields)
      • Parameters to executables
      • Imagemap coordinates (two parameters to executable)

    http://www.science.uva.nl/ is a complete URL to the FNWI WWW server. It will address the HTTP Daemon and request the standard document (index.html) from the root directory of the daemon.

    Once on the server, URLs can be shorter. The connection type and site can be omitted. In the above mentioned document, the URL http://www.science.uva.nl/about/index.html could be referred to as /about/

    Until here, ftp connections work in the same way. The parameters however are for HTTP daemons only (pointers to anchors depend on the browser as well). For further discussion on parameters read the HTML Primer or the HTML Quick Reference.

    Inline images

    Images can be included everywhere. In pre-formatted text, in HyperLinks or in normal texts. An image is also specified in URL form. Possible image types are X bitmaps (by using .xbm extension) and Gifs (by using .gif extension). 

      <IMG SRC="http://www.science.uva.nl/pict/telefoon.gif" ALIGN="middle" ALT="o">

    This example includes the file /pict/telefoon.gif which is retrieved from the HTTP Daemon at www.science.uva.nl. It will be vertically centered with other items on the line (due to ALIGN="middle"). Parameters for the ALIGN are top, middle or bottom (default). The ALT="o" is specified for HTML browsers without graphics capabilities. It indicates the the string o should be displayed as alternative for the image.

    Making clickable images is done by placing a HyperLink around the image.

    Other HTML features

    Forms can be made using the <FORM> ... </FORM> section.

    Example documents

    Example documents can be found all through the World Wide Web. A great starting point is of course our local server. To view the source for a HTML page, when using Mosaic press "d" in the document view subwindow or choose View Source... from the File menu. When using Netscape, choose Source... from the View menu. When using lynx press "\" to toggle between the source and the HTML page.