GCSE ICT

GCSE Information and
Communication Technology

.: Home .: Web Page Design .: HTML

The HyperText Markup Language

Web pages are constructed using a special set of commands called HTML. These commands specify how the final web page should look: where the pictures should be placed; the sizes of the fonts; the colour of the background. To actually see the web page you need a special piece of software (called a browser) that can convert HTML to the finished page.

One of the best ways to learn HTML is to look at other people's pages and see how they wrote their HTML. If you are using a PC and Microsoft's Internet Explorer you can use your mouse to right-click on any web page and choose view source. This will show you the HTML used to create the page.

Anatomy of a Web Page

Very simply, HTML is a collection of commands enclosed within greater-than and less-than brackets: <HTML>. These commands are called tags and they define the layout and behaviour of the web page. Nearly all tags come in pairs - so that they can enclose a piece of text. For example the tag to make a piece of text appear italic is <I>. Now if you wanted the word 'web' to appear in italics you would write it in HTML as: <I>web</I> and it would appear as web. The second tag in the pair is exactly the same as the first except that it has a forward-slash.
(Note: the spellings used in HTML conform to American English ... so use color and center instead of good old colour and centre).

The HTML code shown here on the right was used to create the web page shown on the left.

The first tag lets the browser know that what follows is written in HTML. The second tag defines the beginning of a special part of the web-page called the head. The head usually contains a lot of extra information about the page ... and in this case it has the title.

<HTML>
<HEAD>
<TITLE>World of Marbles</TITLE>
</HEAD>

<BODY bgcolor="yellow">

<H1>Welcome to John's World of Marbles</H1>

<IMG SRC="marble.jpg">

<P>This web page is dedicated to everything to do with those little, glass spheres of fun which we call <B>marbles</B>.</P>
<P>There will be marble news, reviews of the latest hot marbles, competitions and a gallery of readers' marbles.</P>

</BODY>
</HTML>

The next set of tags relate to the body of the web-page: this is the stuff that will actually appear in the browser window. In this case the body tag also defines the colour of the web page's background.

The <H1> tag specifies a font which is good for page headings; <P> refers to a paragraph; and <B> indicates that the text should be bold.

The little picture of the two marbles is included using the
<img src="name"> tag.
(you can use either upper or lower-case text for the tags ... I used uppercase just to emphasise the tags in the example)

Writing HTML

Many people prefer to create their web pages by writing the HTML code into a text editor (such as Notepad in Windows or Vi in Linux) and then save it as an HTML file. This does have a number of advantages:

You have a lot of control over the layout of the web page
You learn a lot about web-page construction
You can copy HTML code from other web pages that you have made and paste it into your new page.
The finished HTML code is very 'clean' and easy to read.
You don't have to buy any extra software

Although developing your entire web-site in notepad may give you a rather smug, superior feeling - it is a lot quicker to buy a decent piece of web-editing software. I have used Macromedia's Dreamweaver to make most of this site.