WebTech University Courses
First of all I ought to point out that there is an excellent series of FREE courses available on the Internet from WebTech University. That is where I started off learning HTML: you are assigned your own tutor who sends you your assignments, marks them when they are done, and is there to offer help if any is needed. At the end of each two-week course (HTML 101, Tables, Frames, Forms and PSP 101) there is an exam and if you pass you are awarded a certificate which you can display on your website or print out if you wish.
But, assuming that the reason you are reading this is that you want a quick "fix" to get your site underway, there are a few basic tips and hints which can get you started.
A Basic Web Page
Before you start to type in the HTML for your page, you need some information handy :
the name of the background GIF you want to use
the name and dimensions of any other clipart, buttons, photos etc.
(these need to be loaded onto your website server)
the hexadecimal code for the colour of the text you want
the hexadecimal colour code for an alternative background
The code for any colour can be found by using the palette on Paint Shop Pro, the small JavaScript chart below, or a chart for 512 standard colours is on this page.
It is a good idea to include an alternative colour for your page background because a) it will appear as soon as the page is opened, before the background GIF loads, and will let the viewer know that something is happening and b) I understand that there really are still some people out there that view pages with browsers that don't support images.
HTML (Hypertext Markup Language) is typed in using plain English and HTML "tags" to tell your computer what you want to do.
Nearly all tags come in pairs - an opening tag and a closing tag. If you forget the closing tag, your page will not display correctly, particularly for viewers using Netscape.
Tags are ALWAYS enclosed in < and > signs (the "less than" and "more than" symbols, and the closing tag has an additional / : thus the opening tag for the whole page, the HTML tag, is typed in <HTML> and the page is closed with </HTML>
To start a page you must put in the HTML tag, the Head tag and the Title tag, then type in the title of your page in plain English and close the Title and then the Head tags :
<HTML><HEAD><TITLE>***Your page's name***</TITLE></HEAD>
(note that the tags are closed in reverse order to that in which they were opened.)
At this point it is also a good idea to type in the page's closing HTML tag - </HTML> - which will eventually be the very last tag on your page.
This has established your page - now you need to put something on it! The next tag pair are the BODY tags - the closing BODY tag will be the next-to-last tag on your page. Within the BODY tag you will set the page background, its alternative colour, and the text colour: (use the real name of your background image and the hexadecimal colour codes you have chosen - these are only examples.) Always put the tag attributes within quotation marks - some browsers will not dispay correctly if you don't.
<BODY BACKGROUND="background.gif" BGCOLOR="#EEEEEE" TEXT="#FFFFFF">
Spelling is crucial - use the American versions of color and center or again your page will not work!
You can also choose what FONT you would like your text to appear in : it is best to go for one of the standard fonts such as Comic Sans MS, Arial or Times Roman as then everyone will see the text the same as you put it in. Within the FONT tag you can also set the size of the font, with 1 being tiny and 7 the biggest - if you don't set the font size it will default to 3, which is the size of the text on this page, and change the colour if you want to. Any changes you make will be cancelled by the "close font" tag, .
Thus, <FONT SIZE="5" FACE="COMIC SANS" COLOR="#000077">Look at this</FONT> will appear on your page as Look at this. Each time you want to change your font face, size and/or colour you will need to set new FONT tags.
Starting a new line is easy ; think "break" and type in <BR> NB. This is one of the few tags that DOESN'T need a closing tag. If you want a bigger space between lines or paragraphs, simply type in as many <BR> tags as necessary to position the text as you want it.
To underline text, use the tags <U> and </U> around the words to be underlined, and to put in italics use <I> and </I> .
You can align your text in several ways : to centralise the whole of the content of your page, put in a <CENTER> tag immediately after the <BODY> tag and a closing </CENTER> tag immediately before the closing BODY tag.
If you want your text "justified" (with the text adjusted so all the lines fill the full width of the page, like this page) you need to use the paragraph tag <P> with the instruction to justify the text : <P ALIGN="JUSTIFY"> - this also doesn't need a closing tag. (You can also ALIGN the text to CENTER, LEFT or RIGHT instead.)NB - this is not supported by all browsers.
Finally, you can divide the page up with a Horizontal Rule - <HR> (another single tag.) This will draw a narrow grey line across the page - if you want a shorter line, just set a percentage width : <HR WIDTH="75%">
The <HR> tag automatically centres, so if your page was justified you will need to re-set this tag after the line is used.
To summarise :
<HTML><HEAD><TITLE>My new web page</TITLE></HEAD>
<BODY BACKGROUND="background.gif" BGCOLOR="#EEEEEE" TEXT="#FFFFFF">
<CENTER>
<FONT SIZE="6" FACE="COMIC SANS MS" COLOR="#FF0000>MY NEW WEBSITE"</FONT> <BR><BR>
<P ALIGN="JUSTIFY"> <BR>
The first part of your page content goes in here
<HR WIDTH="75%">
<P ALIGN="JUSTIFY">
The second half of your page goes here.
</CENTER>
</BODY>
</HTML>
ALWAYS close all tags except <P>, <BR> and <HR> , and make sure your tags are "nested" correctly : HTML - HEAD - TITLE - close TITLE, close HEAD; BODY - CENTER.......close CENTER, close BODY and close HTML (TITLE and HEAD have already been closed.) As your page gets more complex it is particularly important to keep an eye on this - one way to do it it to type in the tags as pairs, each pair inside the next, and then insert the contents in between them: <FONT COLOR="#FF0000"><B><I>look!</I></B></FONT>.
Email me if you need any more help with this.
Clipart image free with Microsoft Office