Kate's Basic Notepad HTML [FAQ]

Kate's Basic Notepad HTML FAQ

Open Notepad and type or cut and paste in this basic web page HTML.

Untitled - Notepad

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

type your page text here using the following stuff to format and fancy it up
then save the file with a .htm extension. ( e.g.  test.htm )

You will then be able to view it as a "web page" with your browser.

</BODY>
</HTML>

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 we will introduce some of the tags which can be used for simple text formatting.

Basic Formatting
(Easy stuff)

To get your text formatted correctly for the notice boards 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

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:

   &amp;     - Ampersand (&)
   &lt;      - A less-than sign (<)
   &gt;      - A greater-than sign (>)
   &reg;     - A registered trademark sign (®)
   &copy;    - A copyright sign (©)
   &Yacute;  - A Sword sign (Ý)

More characters HERE

AllChars provides a quick, easy-to-remember way of creating accents like � � � � � and special characters like � � � � � � � � 1/2 � � � � � in most Windows programs.
and it's FREEWARE.

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, and will not be displayed on anything less than Netscape 2.0 anyway. 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. The two most common kinds of URL are:

http://server.zone/document.html - A Web Page
e.g. http://the-stable.lancs.ac.uk/~esarie/kate.htm
mailto:person@server.zone - An email address
e.g. mailto:kenambi@hotmail.com

More mailto options HERE

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 :

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

e.g.

<A HREF="http://the-stable.lancs.ac.uk/~esarie/kate.htm">Kate's Page</a>

produces:- Kate's Page

If it is to a file saved in the same folder/directory as your .htm file, you just need

<A HREF="file_name.htm">Link to file_name.htm</a>

which produces:- Link to file_name.htm

Images are typically handled in the same way; using the IMG tag instead of HREF, and only citing the URL of the image:

<IMG SRC="URL">

e.g.

<IMG SRC="http://es-scripts.lancs.ac.uk/~esarie/kate/images/test.gif">

Shows the

Kate Test GIF.

The original of this page was written by David Donachie
(edited by George Smith 11,07,96 and I.E-N 18,09,02)
and was "stolen" (with permission) from
http://www.ed.ac.uk/~geas/PLACE/guide.html
before being mucked around a bit and added to for this porpoise..