HTML stands for 'HyperText Markup Language.' It's a system of 'marking up' plain-text files with formatting instructions, known as 'tags.' Tags are distinguished from a document's contents by enclosing them in angle brackets, like this: <tag>.

The language has undergone numerous revisions as the web has developed, and this page will help you to get started with HTML 4.01 or earlier. The World Wide Web Consortium, however, recommends the use of XHTML, the next-generation page mark-up language, instead to accomodate the latest web technology.

It's unlikely that HTML 4.01 will be completely phased out simply because too much of the web has been constructed with it - just don't expect pages created in HTML 4.01 to be accessible from your mobile phone!

This page should give you enough information to get started and allow you to spruce up your PageBuilder page: you can copy any of this code into PageBuilder, adapting it as you go along.

If you want to start building your own pages from scratch, I suggest you buy a copy of the book The Complete Idiot's Guide to Creating a Web Page — complete with CD Rom, it contains all the advice and info you'll need.

Most tags come in pairs, an opening tag:
<tag> then the text affected by the tag followed by a closing tag </tag>
Closing tags always have a forward-slash immediately after the opening angle bracket: </

1) Basic Page Structure | Dressing It Up | Adding Images | Making Links
Using HTML 4.01 and earlier, basic page structure is determined with 'standalone' tags, that don't need to be paired with a closing tag.

For This Element	Use This Code
Line Break
Paragraph Break	An optional </p> tag should be used to close a paragraph.
Horizontal Rules:
	This produces a standard 'shaded' (or bevelled) line
	Use the "size" attribute to determine line thickness...
	...which can be as thick as you choose.
	Use the "noshade" attribute to flatten the line...
	...and again, it can be any thickness you choose.

---

Basic Page Structure | 2) Dressing It Up | Adding Images | Making Links

• Experiment with different colours, such as Aqua, Gray, Green, Lime, Orange, Silver, Teal & Yellow.
• Experiment with different font sizes, from "+1" to "+5".

For This Effect	Use This Code — substituting your text for the words displayed as necessary...
Bold
Use a different font	<font face="Helvetica Black, Arial Black, sans-serif">Use a different font</font>
Make it larger...	<font face="Helvetica Black, Arial Black, sans-serif" size="+2">Make it larger...</font>
Colour it red	<font face="Helvetica Black, Arial Black, sans-serif" size="+2" color="red">Colour it red</font>
Big Blue	<font face="Helvetica Black, Arial Black, sans-serif" size="+4" color="blue">Big Blue</font>
Block of White Text on Black Background	<table bgcolor="black" border="0" cellpadding="3"><tr><td> <font face="sans-serif" color="white"><b>Block of White Text on Black Background</b></font> </td></tr></table>
Yellow Text on Red Background with Black Border	<table cellpadding="2" cellspacing="0" border="0" bgcolor="black"><tr><td> <table cellpadding="5" cellspacing="0" border="0" bgcolor="red"><tr><td> <font face="sans-serif" color="yellow"><b>Yellow Text on Red Background with Black Border</b></font> </td></tr></table></td></tr></table>

---

Basic Page Structure | Dressing It Up | 3) Adding Images | Making Links
To add an image, you need to know where it is, what it's called and how big it is.
• "img src=" tells your browser to use an IMAGE from this particular SOURCE.
• "width" and "height" are the image dimensions in pixels
• "alt" defines the text displayed if the image can't be displayed.
Some of the images available on this server are shown below.
To add your own image to your page, please send it as an email attachment to webmaster@groomsville.co.uk.

To Use This Image	Use This Code
	<img src="http://www.groomsville.co.uk/images/new5.gif" width="75" height="46" alt="New!" align="left">
	<img src="http://www.groomsville.co.uk/images/coffeecup3.gif" width="27" height="43" alt="Coffee" align="left">
	<img src="http://www.groomsville.co.uk/images/music.jpg" width="63" height="46" alt="Music" align="left">
	<img src="http://www.groomsville.co.uk/images/partytime.gif" width="119" height="95" alt="Party" align="left">
	<img src="http://www.groomsville.co.uk/images/praying.gif" width="97" height="126" alt="Hands" align="left">
	<img src="http://www.groomsville.co.uk/images/island.gif" width="98" height="96" alt="Island" align="left">
To use images located on other servers, you need to have the owner's permission and the full Web address (the URL, Uniform Resource Locator). Here are a couple of examples:
	<img src="http://www.st-lawrence-eastcote.org.uk/ffa/ffaimages/flowervase.gif" width="58" height="99" align="left" alt="Flowers">
	<img src="http://www.stmatthews-yiewsley.org.uk/images/flowers.gif" width="55" height="67" align="left" alt="Flowers">

---

Basic Page Structure | Dressing It Up | Adding Images | 4) Making Links
Links (or "hyperlinks") are the backbone of the internet, connecting webpages to one another.
PageBuilder will automatically link your page to the relevant Home Page and Site Index.
If there are other pages you'd like to link to, you'll need to know their full web addresses.

Constructing a Hyperlink
• Start with the usual angle bracket: <
• Then an a, meaning "ANCHOR", telling the browser to 'anchor' a link at this point.
• Follow this with href=, meaning "HYPER-REFERENCE IS"
• Then, in inverted commas, the "web address" and the angle bracket to complete the opening tag >
• Next comes some text describing the link...
• ...and finally, the closing "END OF ANCHOR" tag, </a> — after which normal text resumes.

To Make This Link	Use This Code
Visit Maranatha Bookshop	<a href="http://www.maranathabookshop.co.uk/">Visit Marantha Bookshop</a>
Complete Idiot's Guide to Creating a Web Page	<a href="http://www.mcfedries.com/books/cightml/">Complete Idiot's Guide to Creating a Web Page</a>