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 " " 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.
|