The Sysadmin Notebook  

Sitemap

Essential HTML

Core Syntax for Creating HTML Documents

Contents

The W3C HTML 4.01 Specification

A URL consists of three pieces:

  1. communication protocol
  2. server name
  3. path to resource

HTML is an SGML application, conforming to ISO 8879, and is therefore characterised by:

  1. An SGML declaration (specifies characters and delimiters)
  2. A document type definition (DTD, which defines syntax)
  3. A specifications of the markup semantics, and additional sytactic restrictions
  4. Documents containing content and markup

The SGML constructs used in HTML are:

HTML documents are transmitted as a sequence of bytes accompanied by encoding information. The structure of the transmission is called a message entity. A message entity with content type 'text/html' is an HTML document. The charset definition identifies the character encoding used. Content type can be specified in the header as either "Content-Type: text/html; charset=ISO-8859-1" or "<META http-equiv="Content-Type" content="text/html"; charset=ISO-8859-1>". The later form is preferred, because some servers disallow the charset parameter to be sent.

Basic Structure of an HTML document:

  1. HTML version information: identifies a DTD
  2. A header section: containing document title (required) and keywords (optional, used by for example search engines). META elements can be included to provide information about the document (eg. <META name="Author" content="Dave Ramlakhan">). The same information can be provided as a link element: <LINK rel="Author" type="text/plain" href="http://drdsl.clara.net/docinfo">
  3. The content section: document body
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Welcome</title>
    <link rel='stylesheet' media="screen" type='text/css' href='css/layout.css' />
  </head>
  <body>
    <div id="masthead">
      <h1>Welcome</h1>
    </div>
    <div id="sidebar">
      <ul><li>...</li></ul>
    </div>
    <div id="topbar">
      <ul><li>...Menu items here...</li></ul>
    </div>
    <div id="content">
      <p>...Content goes here...</p>
    </div>
    <div id="footer">
     <p>...Footer content goes here...</p>
    </div>
  </body>
</html>

Structural Elements

Top Bottom

The 'id' attribute assigns a name to an element and must be unique in a document. The 'id' attribute can be used as

The 'class' attribute assigns a set of class names to an element, and can be shared by multiple elements. The 'class' element can be used as:

'span' and 'div' elements are used in conjuntion with 'id' and 'class' attributes to mark content as either inline or block-level respectively

Paragraph: <p> (block-level element: can not contain other block-level elements) Line Break: <br> Horizontal Rule: <hr> Preformatted Text: <pre>

Text Formatting Tags

Top Bottom 
Bold: <b>
Big Text: <big>
Emphasised Text: <em>
Stronger Empahasised Text: <strong>
Italic: <i>
Small Text: <small>
Subscripted Text: <sub>
Superscripted Text: <super>
Inserted Text: <ins cite="some reference uri" datetime="$date">
Deleted Text: <del cite="some reference uri" datetime="$date">
Computer code text: <code>
Teletype Text: <tt>
Sample Output from Computer Code: <samp>
Text to be entered by the user: <kbd>
Abbreviations: <abbr>
A variable: <var>
Acronyms: <acronym>
Address: <address>
Text Direction: <bdo>
Indented Block Quotation: <blockquote cite="url">
Quotation with quotation marks: <q>This will appear with quotation marks, and can contain further quotations</q>
Quotation: <q>
Citation: <cite>
Definition: <dfn>
Headers: <h1>..<h6>

HTML Entities

Top Bottom 
Non-breaking space: &nbsp;
Less than: &lt;
Greater than &gt;
Ampersand: &amp;
Cent: &cent;
Pound: &pound;
Euro: &euro;
Section: &sect;
Copyright: &copy;
Trademark: &reg;

Links

Top Bottom 
Link to url: <a href="url">Name</a>
Link to url with accesskey: <a accesskey="U" href="url">Name</a>
Link that opens in another window: <a href="url" target="_blank">Name</a>
Anchor within document: 
Link to Anchor within a document: <a href="url#linkname">Go to Linkname in URL</a>
Link to Anchor in same document: <a href="#linkname">Go to Linkname</a>
Link to a stylesheet (only in head section): 
  <link rel="stylesheet" href="/css/style.css type="text/css" media="print">
Create an image map:
<p><object data="navbar.gif" type="image.gif" usemap="#map">
<map name="map">
  <p>navigate the site:
  <a href="page1.html" shape="rect" coords="0,0,118,28">Page 1</a> |
  <a href="page2.html" shape="rect" coords="118,0,184,28">Page 2</a> |
  <a href="page3.html" shape="circle" coords="184,200,60">Page 3</a> |
  <a href="page4.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Page 4</a>
</map>
</object>
The map can be declared outside the object body, to display the map even when the object cannot be rendered: 
<object data="navbar.gif" type="image/gif" usemap="#map">
<p>this is the navigation bar</p></object>
<map name="map">
<area href="page1.html"
	alt="The first page"
 	shape="rect
	coords="0,0,118,28"></area>
<area href="page2.html"
	alt="The second page"
 	shape="rect
	coords="184,0,276,28"></area>
</map>
A basic 'mailto' link:
<a href="mailto:contact@my.site.com">Email Us</a>
Mailto link with subject line:
<a href="mailto:contact@my.site.com?subject=Great Web Site">Email Us</a>
Mailto multiple recipients (keep it all on one line):
<a href="mailto:contact@my.site.com,admin@my.site.com?cc=admin@my.site.com
&bcc=moderator@mysite.com&subject=Can someone tell me why...
&Body=Your%20website%20is%20so%20cool">Contact Someone</a>

Objects

Top Bottom 
Include an image in a document: <img src="images/my.png" alt="description of image">
Alternate method to include an image: <object data="images/my.png type="image/png">
Include an application: <object classid="bin/clock.py">An animated clock</object>
Include an application with alternate actions: 
<object title="The animated clock" classid="bin/clock.py">
  <!-- Else, try the video -->
  <object data="video/clock.mpeg" type="application/mpeg">
    <!-- Else, display some text -->
    The time is now the same as it was this time yesterday
  </object>
</object>
Include application with parameters and 'loading' message:
<object classid="bin/clock.py" standby="Loading application..">
  <param name="timezone" value="GMT" valuetype="data">
    Your browser can't handle this app
</object>

Tables

Top Bottom 
Begin a table: <table summary="accessibility description of contents of table" width="50%">
Caption for a table: <caption>Table Title</caption>
Begin a table row: <tr>
Begin a table header cell: <th>
Begin a table ordinary cell: <td>
Display an empty cell: <td>&nbsp;</td>
Span cell across more than one column: <td colspan="2">
Span cell across more than one row: <td rowspan="2">
Create table with row groups:<table><thead>..</thead><tfoot>..</tfoot><tbody>..</tbody>
Create column groups: <colgroup span="2" width="40">
Mark column for targetted formatting: <col width="30">

Lists

Top Bottom 
Bullet points: <ul><li>...</li></ul>
Numbered List: <ol><li value=3>list item 3</li><li value=6>...</li></ol>
Definition List: <dl><dt>..</dt><dd>...</dd></dt></dl>

Forms

Top Bottom 
Begin Form: <form>
Define input area: <input>
Define text input area: <input type="text" name="myName">
Define radio input area:
<form>
	<input type="radio" tabindex="1" name="OS" value="Linux">Linux<br />
	<input type="radio" tabindex="2" name="OS" value="AIX">AIX
	<input type="submit" tabindex="3" value="submit">
</form>
Define checkbox input area:
<form>
	<input type="checkbox" name="OS" value="Linux">Linux<br />
	<input type="checkbox" name="OS" value="AIX">AIX
</form>
Define submit button and action:
<form name="input" action="form_submit.pl" method="get">
	Username:
	<input type="text" name="user">
	<input type="submit" value="submit">
	<input type="reset">
</form>
Use images for buttons:
<form name="input" action="form_submit.pl" method="get">
	<label>Username:
	<input type="text" name="user"></label>
	<button name="submit" value="submit" 
	type="submit">Send<img src="icons/submit.gif" alt="Submit"></button>
	<button name="reset" type="reset">Reset<img src="icons/yikes.gif"
		alt="Yikes"></button>
</form>
Define text area: <textarea name="your thoughts" rows="20" cols="80">
Define dropdown: 
<select name="">
	<option value="">
	<option value="">
</select>
Alternate Dropdown:
<form action="url" method="post">
  <p>
    <select name="Books">
      <!-- the selected attribute marks the default selection -->
      <option selected label="none" value="none">None</option>
      <optgroup label="Perl">
        <option label="Llama" value="llama">Learning Perl</option>
	<option label="Camel" value="camel">Programming Perl</option>
        <option label="Panther" value="Advanced Perl Programming"</option>
      </optgroup>
      <optgroup label="MySQL">
        <option label="Butterflies" value="butterfly">Learning MySQl</option>
        <option label="Cookaburra" value="cookaburra">MySQL in a Nutshell</option>
      </optgroup>
	<input type="submit" value="submit">
	<input type="reset">
    </select>
</p>
</form>
Create Select Multiple Scrollable selection box:
<form action="url" method="post">
  <select multiple size="4" name="book-select">
    <option selected value="llama">Learning Perl</option>
    <option selected value="camel">Programming Perl</option>
    <option value="panther">Advanced Perl Programming</option>
    <option value="sheep">Perl Cookbook</option>
    <option value="emu">Mastering Perl/Tk</option>
    <optin value="staghound">Perl Best Practices</option>
  </select>
  <input type="submit" value="submit"></input>
  <input type="reset"></input>
</form>
Create form with access keys:
<form action="url" method="post">
  <label for="username" accesskey="U">
  User Name:
  </label>
  <input type="text" name="user" id="username"></input>
  <input type="submit" value="submit"></input>
  <input type="reset"></input>
</form>

Define button: <input type="button" value="Clickme"></input>

Redirects

Top Bottom

Include a meta tags with the http-equiv attribute set to refresh if you want to automatically redirect from one page to another: 

<html><head>
<meta http-equiv="Refresh" content="5;url=http://www.newsite.org" />
</head>
<body><h3>Sorry! We have moved! </h3>
<p>You will be redirected to <a href="http://www.newsite.org">the new site</a>
in five seconds.</p>
</body>
</html>