HTML Programming

Getting Started	Colours	Lines & Line Breaks
Text, Text Size & Form	Links & Pictures	Tables

GETTING STARTED

In order to have full control over the layout of your own web site you must learn to be somewhat fluent in HTML. HTML stands for Hypertext Mark-up Language which is the programming language that Internet Explorer, Netscape, and a few other web browsers use to read and create web pages. All HTML pages can be programmed in some kind of text reader/writer (like Notepad for Windows, or SimpleText and BBEdit for Mac's OS). All you need to do is create a new text document, insert the control (delimiting) tags, save as a filename.html file, and when you're done send it to your server (upload).

Keep the code / program open in a text editor (e.g. Notepad) while you preview the text with a browser (also kept open). In this way you can quickly flick between programs and see how the code for the page is behaving. Also try looking at the page on a different browser (different machine, platform, screen size, etc.) now and again to see how the layout differs with your code in a different environment.

Don't be afraid to look at other peoples work and use elements of other peoples work in your own pages. If you use large chunks of other people's code, you MUST give them credit; imagine if it were your work being plagiarised.

A FEW THINGS TO START WITH:

All HTML documents should begin with the first command <HTML> which tells the browser that you don't just want the text to be displayed and that you want all the features of an HTML document (aka. a web page). In practise the first line is usually an SGML (predecessor to HTML) DTD statement, and the <HTML> normally appears on the 2nd or 3rd line (look at the top of this document code).
The next thing you want to do is create your title to the page... like the title to this one is Web design tutorials - HTML PROGRAMMING. You can see the title at the top of the window in the browser. This is done with the <TITLE> tag. After <TITLE> you type the desired title and then end it with </TITLE> to let the browser know that the rest of the document isn't included in the title. The title is always contained within a pair of <HEAD> and </HEAD> tags. This header area is where all information relevant to search engines and browsers are kept, i.e. meta tags, along with JavaScript code.You may also use various symbols in your title.
The next command is the <BODY> command. Within the body command you may choose to change the color of the background, links, used links, text, or even add a background image. Here's an example:

<BODY BGCOLOR="red" TEXT="#0000FF" LINK="#800080" VLINK="#800080" ALINK="#A000A0">

BGCOLOR is the background color, TEXT is the text, LINK is a link, VLINK is a visited link and ALINK is an active link (either in the process of happening or the page is already open in another window)

See ABOUT THE COLORS below.

NESTING TAGS

Most tags have a corresponding ending tag. In the case of <BODY>, the closing tag will be </BODY>, You will notice that in most documents that you will not see the </BODY> until just before the </HTML> at the very end of the document.
All of your main (visible) code will be between the <BODY> and </BODY> tags. Similarly, all of the main sections, i.e. the header and the body (or frameset) will be between the <HTML> and </HTML> tags.

ABOUT THE 'COLOR'

You may have already noticed that the colour of the body text for this page is black and is entered as "Black". HTML 4.0 allows the use colours names like this, of which there are hundreds, e.g. linen, peachpuff, beige, etc. (see a reference guide for a full list). You may require a different colour, and prefer to use the six character RRGGBB code (seven if you include the # at the start). This code theoretically gives you command of over 16 million colours (256 x 256 x 256), which sounds a lot, but in practise the user, or client may not have as many as this. For this reason many web pages are designed using web safe colours.

The code is comprised of pairs of hexadecimal numbers, which correspond to the amount of energy coming out of each of the red, green and blue electron guns in your monitor, "00" being the lowest energy, and hence being the darkest, and "FF" being the brightest. Using this code for the 'color' is more reliable and specific.

You can create your own colors by experimenting with the code. The first two "digits" make up the amount of red in the color, the second two - the amount of green, the third - the amount of blue, like this:

#RRGGBB

'COLOR' EXAMPLES

Here are some examples for the background colours :

<BODY BGCOLOR="#440044"> is purple
<BODY BGCOLOR="#000088"> is blue
<BODY BGCOLOR="#440000"> is maroon
<BODY BGCOLOR="#008800"> is green
<BODY BGCOLOR="#080808"> is black
<BODY BGCOLOR="#C8C8C8"> is really light gray
<BODY BGCOLOR="#989898"> is light gray
<BODY BGCOLOR="#787878"> is light medium gray
<BODY BGCOLOR="#505050"> is medium gray

WEB SAFE 'COLORS'

In text based and graphical web pages designers tend to use specific colours for larger areas of colour, which are known to not be approximated by most browsers, and hence no messy 'dithering' of colours (mixing pixels of different colours to approximate a specific colour). The standard Web Safe pallette is comprised of 216 colours, and allows variation from 0% to 100% of each of the three colour guns, allowing increments of 20%, ie, 0, 20, 40, 60, 80 and 100%. If you work this out you will get 6 levels for each colour, allowing 6 x 6 x 6 = 216 colours.

Now, there is a simple rule to these colours, and for some reason it is called the 51 rule, the reason being that the colours go up in 51s (decimally). This is not the easiest of rules to deal with until it is converted to hexadecimal (represented by the # in the code). 51 in hex is 33. So if you're thinking in hex it becomes the 33 rule. Okay, so now the values are 00, 33, 66, 99, cc (seety-see) and ff (efty-eff). If you are using a web design package like Homesite, Dreamweaver, Fireworks or Image Ready you will be able to access the Web Safe Color Pallette and verify this, otherwise you'll just have to take my word for it.

A great description of web safe colour usage can be found at David Siegel's Creating Killer Websites page, which is a fine companion to his book of the same name.

LINES AND LINE BREAKS

In the following section, # represents a number that can be inserted

<BR> is a Line Break (like return in a word processor)

<HR> is a line:

<HR size=#> changes the width of the line:

<HR size=1> gives a hair line:

<HR width=#> makes the line shorter or longer:

<HR width=#%> makes the line shorter or longer as a percentage of the window width

When you make smaller than screen size lines you can also align them:

<HR width=50% Align=LEFT>

You can also make the line thicker by using a non-shaded line:

<HR noshade size=2>

TEXT, TEXT SIZE, AND FORM:

<B>Rhubarb, rhubarb</B> is bold : Rhubarb, rhubarb

<I>Burble, mumble</I> is italic : Burble, mumble

Header Size

In the form of :

<H#>Blah, blah, blah!</H#>

where # is usually a number between 1 and 6 - big to small

1 : Blah,

2 : blah,

3 : blah!

The FONT tag

The FONT tag is being phased out. However, it is an easy to use, cheap and cheerful way to change font face, size and color. (The use of Cascading Style Sheets is now advised so that entire web site styles can be adjusted by changing the details of just one style sheet.)

<FONT size=#>Text</FONT> is the font Size

<FONT color="color name, or code">Text</FONT> is the font Color

<FONT face="font family 1, font family 2, etc.">Text</FONT> is the font Face

Indentation (Definition Lists):
<DL>

<DD>TEXT</DD> Tabbed text (Definition Data)

</DL>

Any section between a <pre> ... </pre> pair will come out on the page as it is laid out in the code (there is an example of this in the code to this page), but beware! You must still be careful not to use control characters, i.e. < or > in this area.

<P></P> creates a grouped paragraph - you can omit the </P> in most cases.

SYMBOLS: (don't need an ending command)

& is a & - an ampersand

< is a < - less than

> is a > - greater than

  is a non breaking space (good for tables)

LINKS & PICTURES:

Mail To Someone:

<a href="mailto:put@address.here">Name of Company or person</A>

Turns into: Name of Company or person

A link to another page:

<A HREF="http://www.linknet.com/~directory/file.html">Link</A>

Turns into: Link

A link to somewhere within the page:

Name the spot that you want the link to take you to:
<A NAME="Test">Place to go</A>
Looks Like: Place to go (like nothing right?)
Then make the link to the spot:
<A HREF="#Test">The link to the spot</A>
Looks Like: The link to the spot. (go ahead... try it)

A Picture (in the same directory):

You can use jpegs (.jpg) of GIFs (.gif) in HTML. If the file is in a sub-directory, remember to precede the file name with the directory name and a forward slash ( / ) (Consult a reference guide for text alignment details). Note that all of the images have an alt="picture description" attribute. This is to provide accessability to users who may not be able to see the images, e.g. visually impaired users and people using speech modules. The US government has passed legislation to ensure that sites are accessable to people with disabilities, and you can be sure that other governments will follow suit. Don't be caught out on this one.

A Simple pre- scaled picture

<IMG SRC="picture.gif" alt="Parsley leaves">

Turns into: Parsley leaves

A Picture With a Link (in this case a link to e-mail):

<A HREF="mailto:put@address.here"><IMG SRC="images/picture.gif" alt="Chicken claw"></A>

Turns into:

Picture With Defined Size:
(this is good for scaling pictures to a definite size or just for page format).

<IMG WIDTH=72 HEIGHT=58 SRC="images/artichoke.jpg" alt="Artichoke">

Turns into: Artichoke

A Picture With Defined Size and a link (in this case a mail link):

<A HREF="http://www.parsley.com"> <IMG WIDTH=72 HEIGHT=58 SRC="picture.gif" alt="Parsley leaves"></A>

Turns into:

A Picture With Defined Size, a link, and no border:

<A HREF="mailto:meyer@primenet.com"> <IMG WIDTH=72 HEIGHT=58 BORDER=0 SRC="picture.gif" alt="Parsley leaves"></A>

Turns into:

Note: The alt attribute will display while larger images are downloading and it means that you can navigate a site without the pictures being present.

TABLES:

This is how to make a SIMPLE table:

First choose a width for the table:
<TABLE width=450...
Then choose the size of the border of the table (0 or NO gives no border):
<TABLE width=450 border=5...
And find out the width the total number of cells will take up so the line looks like this:
<TABLE width=450 border=5 cols=3>
(In practise you can leave out the number of columns if the table is simple)
Tell the browser you are starting a new row of the table with:
<tr>
Put in your content so the line looks like:
<td align=center width=150>First link/text
(you may align properly in this stage)
After the maximum number of cells and width are filled up... end the table line with </tr>
After the last thing in your table use </TABLE>

Example : (look at the code)

First link/text

Second link/text

Third link/text

HERE IS ANOTHER EXAMPLE TABLE:

First link/text	Second link/text	Third link/text

One	Two	Three

"cellspacing" is the width of the separator lines inside of the table
"cellpadding" is the deepness of each cell in the table
"border" is the thickness of the border of the table

This page was adapted from a piece by Josh Meyer

This document has been adapted for use on the Sutton Coldfield College City and Guilds Computer Networking course Web Page Design. The course is presented and maintained by Jon Elliott.