HTML container tags

In the previous column 'Get your Web site started' we looked at how most tags require an opening and a closing command. These are called container tags. The reason for the name is simple - the text or object 'contained' within the opening and closing command is acted upon by the function of the command, such as the following:

<B>this text is bold</B>

There are, however, exceptions to every rule. Some tags, such as <BR>, do not follow this format because there is nothing to contain - the line break(<BR>) IS the object. Two more examples are <HR> and &nbsp;. <HR> inserts a horizontal rule on your page, and &nbsp; inserts a space. Pressing the spacebar several times in your code will NOT create several spaces in your Web page. There is always a default of one space on either side of a character. Therefore, if you wanted three spaces between two words, you would code it like this:

two &nbsp; words

There is one space (by default) after the word two, then the &nbsp; character, followed by another default space. Or, you could code it like this:

two&nbsp;&nbsp;&nbsp;words

In this instance, all spaces are replaced by code but the result is the same.

Tag Syntax

Think of tags as having the following structure:

<COMMAND property="value">"contained object</COMMAND>.

If there are no properties to define, then you only require <COMMAND>object</COMMAND>. There are also occasions where you may want to define several properties using the one command:

<BODY background="tiles.gif" bgcolor="black">

In this instance, there will be a background graphic called "tiles.gif". A background colour (bgcolor) is also included in case the user's browser is set to NOT show graphics.

In this example, BODY is the command with two defined properties - one called background, with a value of the image name, and another called bgcolor, with a value of black. If there is no background graphic to display, then there need be only one property and value:

<BODY bgcolor="black">

In the following example, we will format some text by using properties within the FONT command. Note that whenever we refer to the colour of an item, we spell it 'color':

<FONT color="red" size="2" face="arial">Contained text</FONT>

Images

The code for inserting images is very simple. The command is IMG (stands for image), the property is src (stands for source), and the value is the name of the graphic. As with <BR&gt, there is no need to close the IMG command. An image is an object in itself and therefore does not contain anything else within it:

<IMG src="picture.jpg">

When using graphics, it is important to place the images in the same folder as your HTML file. Alternatively, create a sub-folder called 'images' which holds all your graphics, in which case your reference to the image would be:

<IMG src="images/picture.jpg">

Some people set their browser to not display images for speed of loading. Consequently, you should always include the alt property in your IMG command. When you hover your mouse over an image, a small box will pop up with predefined text - this is the effect of alt. If the graphic does not show because of user settings or code error, then at least the alt value will alert the user to what they are supposed to be seeing. Considering most menus are composed of graphics, this is very important for effective navigation.

<IMG src="picture.jpg" alt="This is a picture" border="0">

There are four main types of links: online, local, inline and mail. The first we will investigate now, and the others will be the focus of the next column.

Online links take you to another 'live' Web site when clicked.

<A href="http://www.pcworld.idg.com.au">Click here</A&gt for PC World

'A' is the command (stands for anchor), href is the property and the value is the URL (address) of the site to which the link takes you. The text contained within the anchor and close-anchor commands is the link. In this instance, the user will go to the PC World Web site when they click on the words 'Click here'. The words 'for PC World' are outside the container tags and therefore treated as normal text.

TASK

Look at the Web page illustrated here. Using this column as reference, see if you can replicate the code required to create it. Note: you will have to find your own graphics to replace those I have used. Remember to place all images in the same folder as your HTML file or reference them accordingly.


Join the PC World newsletter!

Error: Please check your email address.
Rocket to Success - Your 10 Tips for Smarter ERP System Selection
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Heidi Woof

PC World
Show Comments

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Matthew Stivala

HP OfficeJet 250 Mobile Printer

The HP OfficeJet 250 Mobile Printer is a great device that fits perfectly into my fast paced and mobile lifestyle. My first impression of the printer itself was how incredibly compact and sleek the device was.

Armand Abogado

HP OfficeJet 250 Mobile Printer

Wireless printing from my iPhone was also a handy feature, the whole experience was quick and seamless with no setup requirements - accessed through the default iOS printing menu options.

Azadeh Williams

HP OfficeJet Pro 8730

A smarter way to print for busy small business owners, combining speedy printing with scanning and copying, making it easier to produce high quality documents and images at a touch of a button.

Andrew Grant

HP OfficeJet Pro 8730

I've had a multifunction printer in the office going on 10 years now. It was a neat bit of kit back in the day -- print, copy, scan, fax -- when printing over WiFi felt a bit like magic. It’s seen better days though and an upgrade’s well overdue. This HP OfficeJet Pro 8730 looks like it ticks all the same boxes: print, copy, scan, and fax. (Really? Does anyone fax anything any more? I guess it's good to know the facility’s there, just in case.) Printing over WiFi is more-or- less standard these days.

Ed Dawson

HP OfficeJet Pro 8730

As a freelance writer who is always on the go, I like my technology to be both efficient and effective so I can do my job well. The HP OfficeJet Pro 8730 Inkjet Printer ticks all the boxes in terms of form factor, performance and user interface.

Michael Hargreaves

Windows 10 for Business / Dell XPS 13

I’d happily recommend this touchscreen laptop and Windows 10 as a great way to get serious work done at a desk or on the road.

Featured Content

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?