In the previous Session we looked at PDF Files. In this section we will look at HTML Tags.

Download a PDF version of this lesson (17k) Useful and commonly used HTML Tags. This lesson is a sample from the manual.

The easiest way to add text content to your website is to use the Rich Text Editor in the Text/HTML module. From time to time you will feel that you would like a little more control on the layout provided and this is where knowing some basic HTML will come in handy.
There are some great resources on the internet describing HTML code. A simple Google search will reveal thousands of these or else most reputable bookshops have a few books on HTML.

HTML Tags

[Extracted from “The Complete Idiots Guide to Creating an HTML 4 Web Page” 3rd Edition, Paul McFedries]

HTML is an acronym for Hyper Text Mark-up Language.

• Hyper Text – refers to the ability of a webpage to contain a pointer or link to another page.
• Mark-up – refers to the ability of HTML to display style of the text specified. The origins of this derive from newspaper editors “marking up” story copy for the typographer/printer. E.g. “Bold”, “Headline” etc.
• Language – HTML is not a programming language but rather a small collection of letter combinations and words used to specify styles such as bold and italic.

Relevant text in the web page is surrounded with the appropriate tags. In general, tags use the following format:
sample content

For example, the tag for bold font is <B>. So to make a phrase appear in bold on the page it is created like this:

<B>Sample Phrase</B>

And this will display in the browser as:       Sample Phrase

Tags are sometimes referred to as tag pairs because they require a pair of elements. An element is simply the tag description encapsulated by a ‘<” and “>” sign. E.g. .The closing or end element is distinguished from the opening element by a “/”.

Image Maps

Image maps are “hotspots” on an image that display comments when the user scrolls their mouse over an image and enables the user to click to follow the link. 1. Add the image in the text/HTML module. 2. Add the map name to the img tag, eg. <IMG src="/Portals/0/”/Australia-map.gif" useMap=#MyMap border=0> 3. Add the following text in the HTML window: <MAP name=MyMap> <AREA shape=RECT coords=0,0,0,0 etc.> <AREA shape=RECT coords=0,0,0,0 etc.> <AREA shape=RECT coords=0,0,0,0 etc.> </MAP>

“Hotspots” come in 3 shapes and “co-ords” refer to the co-ordinates that define the shape.
Add an AREA tag for each hotspot that you wish to create, specifying the shape and co-ordinates for each shape.
ALT attribute is optional but recommended.
HREF attribute is optional but required for navigation purposes.

Tables

Tables were designed to hold tabular data but web developers soon discovered their ability to more easily plan and control page layout. Tables are a good way to start layout management. Once you have mastered updating of the website you may wish to think about learning CSS to achieve the same result with smaller file sizes.

Table formatting options