Very Basic HTML Guidance

Very Basic HTML Guidance

Open Notepad and type in this basic web page HTML.

Untitled - Notepad

<HEAD>
<TITLE>test HTML</TITLE>
</HEAD>
<BODY>



</BODY>
</HTML>

Then type your page text into the opened Notepad file between the

<BODY>

</BODY>

tags using the following formating information -
save the file with a .htm extension

You can use this method to edit the Departmental HTML Template Files with Notepad.

Tags
Basic Formatting
Special Characters
Colours and Sizes
Links and Images

Hypertext Tags
(You're it!)

The things that affect the format of the text are Hypertext tags. These are short commands
placed within less than "<" and greater than ">" symbols, eg:

<TAG>

Since the < and > symbols are used for this purpose
they may not be directly typed into an HTML document - more later on how
to go about including them.

In the sections which follow some of the tags which can be
used for simple text formatting will be introduced.

Basic Formatting
(Easy stuff)

To get your text formatted correctly you need only know a few tags. These are:



  <P>  - New paragraph

  <BR> - Line Break

  <B>  - Start Bold text

  </B> - End Bold Text

  <I>  - Start Italic Text

  </I> - End Italic Text

  <S>  - Start Strike through Text

  </S> - End Strike through Text

For example to make a piece of text bold you would type:

a piece of text bold

Special Characters

There are numerous escaped characters, but these are the most important codes to know:



   

   &lt;      - A less-than sign (<)

   &gt;      - A greater-than sign (>)

More special character guidance HERE

Colours and Sizes
(The Pretty Stuff!)

Once you have mastered these simple tags you can add a few more which might be useful:



  <font SIZE=+1> </font>       - Change the FONT size

  <font COLOR=#FF0000> </font> - Change the FONT colour (see below)

  <UL> </UL>                   - Indented text (A list)

  <center> </center>           - Centered text

  <LI>                         - A bullet

These tags introduce a few new concepts, specifically colours and font
sizes. Font Sizes are expressed as a number from 1 to 7. In Netscape
the standard size is three. You can either set the font size to something
+ or - the current size, or to an absolute value. Therefore you could do
any of the following:

 

The font sizes look like the following:

Size 1
Size 2
Size 3
Size 4
Size 5
Size 6
Size 7

Font colours are slightly more difficult. The colour is specified as a
# (hash) followed by three pairs of Hexadecimal digits representing RED,
BLUE and GREEN respectively. Each pair runs from 00 to FF (Hex digits are
base 16, i.e. 0 1 2 3 4 5 6 7 8 9 A B C D E F). Therefore FF0000
is bright red, 00FF00 is bright green and 0000FF is bright blue. Here are
a few examples:

FF0000 - Red 00FF00 - Green 0000FF - Blue 000000 - Black 444444 - Dark Grey 888888 - Mid Grey DDDDDD - Light Grey FFFFFF - White 664400 - Brown
EEEE00 - Yellow 9900FF - Lilac DD11DD - Purple 990099 - Dark Purple 550055 - Deep Purple 660000 - Deep Red 006600 - Deep Green 000066 - Deep Blue 6699FF - Sky Blue DD8800 - Orange
FF0044 - Magenta

More Colours HERE.

Links and Images
(Getting Fancy)

Finally, you can try the most exciting part of HTML, adding images and
hypertext links to other documents. To do this you include a tag that
specifies the URL (Uniform Resource Locator) of the target document.
Think of the URL as the address of the document. You can copy it from a
link in Netscape, or make it yourself.

http://server.zone/document.html - A Web Page

e.g. http://www.es.lancs.ac.uk

To add a hypertext link to another page you specify that the tag will
be a Hypertext reference (HREF), cite the URL of the document to link to and
then indicate what you would like the name of the link to be (this is what
will appear in the text):

<A HREF="URL"> Text of link </a>

e.g.

<A HREF="http://www.es.lancs.ac.uk">Environmental Science</a >

<A HREF="/">Environmental Science</a >

produces Environmental Science

A hypertext link to generate an email is formatted thus :-