HTML Mark Up
This guide is available from one of our sister sites but has proved helpful to many of our users so we reproduce it here

 

This is not the definitive guide to writing HTML but it will help you format your web pages using font styles and colours: For a more definitive guide we recommend W3Schools.com

First the basics:

HTML is based on a system of TAGS these look like this <> what goes inside the tag determines what is displayed. Most HTML tags require an opening tag <> then the text you want to format then a closing tag </>.

Note the slash / inside the tag. this denotes the close or end of the formatting.

Lets look at an easy example of tags in action 

Bold

The BOLD tag this is <b> and the corresponding closing tag is </b>

Everything inside the tags will be bold. This is what the above sentence will look like when the page is loaded into a web browser.

 The BOLD tag this is and the corresponding closing tag is

Its that easy.

Forgetting to close the tag will make everything following the opening tag bold.

(For reasons I wont go into now you can also use <strong> </strong> to symbolise bold text which ever is the easiest for you to remember)

Italics

To set your text into italics is exactly the same as with bold except that the tag this time is <i> and the corresponding closing tag is </i>

Example this bit is in italics and this bit is not.

this is the HTML mark up for the above sentence

Example <i>this bit is in italics</i> and this bit is not.

Tags can be used in conjunction with each other but must be opened and closed in the correct order.

For example :

Example <i>this bit is in <b>italics</b></i> and this bit is not.

Would result in

Example this bit is in italics and this bit is not.

(For reasons I wont go into now you can also use <em></em> to symbolise italic text which ever is the easiest for you to remember)

Underline

The tag for underlining text is <u> and the corresponding closing tag is </u>

Here is the above sentence as it would appear

The tag for underlining text is and the corresponding closing tag is

Font Size

There are a selection of standard font sizes for web browser fonts

This is how you would use the font size tag

<font size="1">small</font> results in small
<font size="2">slightly larger</font> results in slightly larger
<font size="3">normal</font> results in normal
<font size="4">bit bigger</font> results in bit bigger
<font size="5">bigger</font> results in bigger
<font size="6">bigger still</font> results in
bigger still

<font size="7">very big</font> results in

very big

Once again its important to remember the closing tags otherwise everything following your open <font> tag will be the same size until it comes across a closing </font> tag.

Font Colour

This is how you set the colour of a font 

<font color="red">red</font> results in  red

Setting colour and size in one go can be done thus

<font size="4" color="red">red</font> results in:  red

Note the spelling of colour its spelt color although I don't understand why it has to be spelt wrong but it does otherwise it wont work.

If you type <font size="4" colour="red">red</font> this is what you get: red

Other commonly used colours are:

<font color="blue">blue</font>blue
<font color="green">green</font>green
<font color="purple">purple</font>purple
<font color="yellow">yellow</font>yellow
<font color="orange">orange</font>orange

Setting the Typeface of a font

To set the typeface of a font once again involves the <font> and </font> open and close tags.

So this <font face="Comic Sans MS"> sentence </font>looks like this:

So this sentence looks like this:

So we can set the colour size and typeface all in one go like this:

So this <font face="Comic Sans MS" size="2" color="Red">sentence</font>
looks like this:

So this sentence looks like this:

Here is a list of common typefaces you can use:

arial   <font face="arial">arial</font>
arial Black <font face="Arial Black">arial Black</font>
Century Gothic <font face="Century Gothic">Century Gothic</font>
Comic Sans MS <font face="Comic Sans MS">Comic Sans MS</font>
Courier <font face="Courier">Courier</font>
MS Sans Serif <font face="MS Sans Serif">MS Sans Serif</font>
Tahoma <font face="Tahoma">Tahoma</font>
Times New Roman <font face="Times New Roman">Times New Roman</font>
Verdana <font face="Verdana">Verdana</font>

Paragraphs and line breaks

To set a paragraph you use the paragraph tag<p> with its corresponding closing tag</p> 

This page is laid out using these tags.

However if you just want a carriage return or a line break as its known you use the <br> tag

This is an interesting tag because it does not have a corresponding ending tag. There is no tag</br>

if you type <br>Hello<br>Welcome<br>To<br>My<br>World results in:
Hello
Welcome
To
My
World

Spaces

HTML ignores more than one blank space at a time so to achieve longer spaces you can use the mark up "&nbsp;" This is called a non-breaking space

Note the ampersand(&) at the start and the semi colon(;) at the end these are part of the tag and must be included. this tag does not have the customary <> tagging its more of a type of notation.

It also does not have a closing tag.
 


HTML mark up guide