52midnight.com/linux

52midnight.com/sea
Basic HTML
The simplest start to creating web pages

   

LINUX ONLINE

HELP

Providing online help is where Linux shines. It's free, quick, easy, highly expert, and far friendlier than what you're used to from other OS's.

VENDORS

Several stores in Australia sell Linux Live CDs and install disk sets. Click here for a short list.

DISTROS

Linux is available as a large number of distributions or distros. Those below are recommended, but a full list is at  DistroWatch.com

KNOPPIX

The original and still one of the best Live Distros that runs directly from CD without being installed. Best choice for Beginners, and as a rescue disk.

UBUNTU

Enormously popular, simple Gnome desktop, very helpful forums, a good 'plain vanilla' choice for new Users.

PCLinuxOS

Very easy to install, powerful KDE desktop, friendly forums, more 'ice-cream sundae' than 'plain vanilla'.

VECTOR LINUX

"Keep it simple, keep it small" is the idea behind a fast system that still has everything needed.

PUPPY

Small, fast, many features, ideal for older machines. Can be run from a USB stick

52MIDNIGHT

Projects
Archives
Electronics
Computers
Linux

These notes are for the use of those wanting to create simple HTML documents.

The source code of this document can be used to study the use of HTML tags.

To see the source code that generated this page in your browser, click on:

   View > Page Source

The final reference for HTML is the official specification: www.w3.org/TR/html4

The HTML colour chart gives codes for the 216 standard colours.
 


Basic page template
Cut and paste the template below into your favourite text editor, save it as a text file with the extension .html and open it in a browser to get a basic HTML document. If this does not work, click here to open the page generated by this code, select File > Save As from your browser's top menu bar, and save the file to a working directory as start.html.

    <html>
    <head>
    <title>Browser Title</title>
    </head>
    
    <body bgcolor=#FFFFFF text=#000000>
    <hr>
    <p>&nbsp;
    <p align=center><font face=serif size=5><b>TITLE</b>
    <p>&nbsp;
    <hr width=80%>
    <p>&nbsp;<font face=sans-serif size=2>
    <p>Body text
    <p> ...
    <p> ... end of body text.</p>
    <hr>
    </body>
    </html>
    

Tags and Attributes
HTML instructions are called tags, and consist of an opening angle bracket, one or more letters, and a closing angle bracket. The paragraph tag is a typical example:

    <p>
Most tags are used in pairs - opening and closing tags - enclosing the text to which they refer. The closing tag is the same as the opening tag, but precedes the initial letter with a forward slash:
    </p>
Some tags do not have a closing tag, as for example the line-break tag <br> and some closing tags are optional. The closing paragraph tag is seldom used, since opening another paragraph automatically closes the previous one, but there are times when it is useful. A tag can also contain attributes. A centre-justified paragraph is denoted by:
    <p align=center>

Fonts
Many browsers default to a serif font (often Times New Roman) which is the most readable face in hardcopy, but less so on a video screen. This is just one example of why HTML has a poor reputation amongst many computer professionals. The easiest font to read on a video screen is a sans-serif font such as Arial. Although Arial is installed on all Windows machines, it is usually not present in other Operating Systems. The best general solution is to simply specify serif for headings and sans-serif for text, and allow the browser to choose the best default. Font sizes range from 1, the smallest, up to 7, the largest. Using the font size attribute allows the onscreen size to be changed in the browser to suit the user (e.g. View > Increase font in Netscape). See the end of this document for colour statements.

    Basic font statement: <font face=sans-serif size=2>
    Coloured font: <font face=serif color=#000000 size=2>
    Cancel last font statement: </font>

Basic layout tags
HTML browsers ignore whitespace - spaces, tabs, line breaks and paragraphs - and must be told where to put them. There is no TAB function in HTML, and various tricks must be used to obtain tabbing functions. The tags below provide the basic layout functions, and using these in combination with the information above enables the creation of basic text documents.

    Non-breaking space: &nbsp;
    Line break: <br>
    Paragraph: <p></p>
    Bold text: <b></b>
    Italic text: <i></i>
    Preformatted text: <pre></pre>

The <pre> tag will respect formatting - spaces, tabs and linebreaks - and is best used with a monospaced font. This is useful for such things as computer code excerpts:

    <pre>
    main() {
    	printf(" First aligned item:\n");
    	printf("Second aligned item:\n");
    	printf(" Third aligned item:\n");
    	printf("Fourth aligned item:\n");
    }
    </pre>
    </font>
    

Hyperlinks
Perhaps the most useful capability of HTML is the ability to link documents by means of hyperlinks. For reasons best know to its designers, a hyperlink is not designated by <h> or <l>, but by <a>, supposedly for 'anchor'. An anchor can be thought of as a bookmark - it marks a point within a document that the browser will jump to when a hyperlink referring to it is clicked. The most common hyperlink tags are:

Mark an anchor:  <a name=Name></a>Heading
Jump to a link within the same document:  <a href=#Name>Jump to Heading</a>
Jump to another document:  <a href=casual.html >See other file</a>
Jump to a link within another document:  <a href=casual.html#Name>See Heading in other file</a>
Jump to a network document:  <a href=http://www.server.domain/directory/filename.html>Web address</a>

Images
Images are very useful for documentation, and can be included using the <img> tag. Typically they are placed within a centred paragraph, but attributes can be used to position them to left or right of flowing text and set clearance margins. Images can also function as hyperlinks by placing them within anchor tags. The width and height attributes can be omitted. Only .gif and .jpg files should be used - the .png format is recognized officially, but not by many browsers.

<img src=../x.gif >
<img src=../x.gif width=200 height=100 border=0 hspace=10 vspace=10>

Comments
It is often useful to include comments in an HTML file which are not visible in the browser. This can be done using:

    <!-- Place comment text here -->

Lists
There are three common list formats in HTML - unordered, ordered and definition. The best way to understand them is to do some experimenting. A common trick for obtaining indenting is to use a pair of <ul> </ul> tags without any <li> tags.

    Unordered list:
      <ul>
        <li>First item in list.
        <li>Second item in list.
        <li>Third item in list.
      </ul>

      Ordered list:

      <ol>
        <li>First item in list.
        <li>Second item in list.
        <li>Third item in list.
      </ol>

      Definition list:

      <dl>
        <dt>First term to be defined.</dt>
        <dd>Definition of term.</dd>
        <dt>Second term to be defined.</dt>
        <dd>Definition of term.</dd>
      </dl>

Simple tables
Tables are the basic layout tool for HTML without stylesheets. A bit of experimenting will show a multitude of uses, especially where nested tables are used - i.e. one table inside another. Although closing row and column tags can be omitted in simple tables, they must be used in nested tables, and careful attention should be paid to their correct use. A common fault is to omit the </table> tag, in which case some browsers give you a blank page. Very puzzling at first!

<table cellpadding=4 cellspacing=0 border=1>
<tr><td align=center bgcolor=#CC9900><b>Heading 1</b>
</td><td align=center bgcolor=#CCCC00><b>Heading 2</b>
</td><td align=center bgcolor=#CCCC00><b>Heading 3</b>
</td></tr><tr><td>Text 1.1</td><td>Text 1.2</td><td>Text 1.3
</td></tr><tr><td>Text 2.1</td><td>Text 2.2</td><td>Text 2.3
</td></tr><tr><td>Text 3.1</td><td>Text 3.2</td><td>Text 3.3
</td></tr></table>

This gives:


Heading 1
Heading 2
Heading 3
Text 1.1Text 1.2Text 1.3
Text 2.1Text 2.2Text 2.3
Text 3.1Text 3.2Text 3.3

Complex tables
More complex tables may appear differently in different browsers, and some experience is required to use them correctly.

<table width=100% cellpadding=4 cellspacing=0 border=1>
<tr><td align=center bgcolor=#CC9900><b>Heading 1</b>
</td><td align=center bgcolor=#CCCC00><b>Heading 2</b>
</td><td align=center bgcolor=#CCCC00><b>Heading 3</b>
</td></tr><tr><td rowspan=3 valign=top>Text 1.1</td><td>Text 1.2</td><td>Text 1.3
</td></tr><tr><td>Text 2.2</td><td>Text 2.3
</td></tr><tr><td colspan=2 align=center>Text 3.2 </td></tr></table>

This gives:


Heading 1
Heading 2
Heading 3
Text 1.1Text 1.2Text 1.3
Text 2.2Text 2.3
Text 3.2

Colours
There are several ways to specify colours in HTML. The most useful has three pairs of hexadecimal numbers preceded by a hash sign (#) to specify the red, green and blue components. See the HTML colour chart for a full explanation and a table of colour patches.

    Bright red:  #FF0000
    Bright green:  #00FF00
    Bright blue:  #0000FF
    Dark red:  #990000
    Dark green:  #009900
    Dark blue:  #000099
    Black:  #000000
    Grey:  #999999
    White:  #FFFFFF
 
 

LINUX ONLINE

HELP

Providing online help is where Linux shines. It's free, quick, easy, highly expert, and far friendlier than what you're used to from other OS's.

VENDORS

Several stores in Australia sell Linux Live CDs and install disk sets. Click here for a short list.

DISTROS

Linux is available as a large number of distributions or distros. Those below are recommended, but a full list is at  DistroWatch.com

KNOPPIX

The original and still one of the best Live Distros that runs directly from CD without being installed. Best choice for Beginners, and as a rescue disk.

UBUNTU

Enormously popular, simple Gnome desktop, very helpful forums, a good 'plain vanilla' choice for new Users.

PCLinuxOS

Very easy to install, powerful KDE desktop, friendly forums, more 'ice-cream sundae' than 'plain vanilla'.

VECTOR LINUX

"Keep it simple, keep it small" is the idea behind a fast system that still has everything needed.

PUPPY

Small, fast, many features, ideal for older machines. Can be run from a USB stick

52MIDNIGHT

Projects
Archives
Electronics
Computers
Linux