HTML for the complete beginner

Adding Text

We can do many thing with our text, change the font style, make it bold, underlined, line through it, under it ...
HTML uses a lot of tags to create the desired result, most of which has now been replaced with CSS, which is in most cases faster and easier to use. Both ways (CSS or HTML tags) will work with HTML and XHTML thou some tags are starting to be phased out.
Let's see how - Remember to use lower case for all tags.

Line Breaks

I suppose the first thing we want to do with adding text is to make new lines or paragraphs when we want. As you may of noticed pressing enter in your code doesn't work. So how do it do it?

Line breaks, carriage returns, whatever you want to call them, are done by tags as well.

<br /> means new line after this tag (line break), since the <br> is only one of a few single tags (in HTML) we start and end with only one tag like so <br /> in XHTML. Make sure there is a space between the r and slash or it wont work in older (v4) browsers
<p> means new paragraph after this tag. HTML didn't require a closing tag but XHTML does.

This is using the line break<br />

<p>This is using the paragraph</p>

Some browsers ignore multi <p> tags, so instead of <p></p> use <br /><br /><br /><br />.

Alignment

What if we want to align some text in the center or to the right (since default is left), we can use these tags

<p align="center"> Contents </p>

<p align="right"> Contents </p>

<div align="center"> Contents </div>

<div align="right"> Contents </div>

Notice the <p> tags are still the paragraph tags and the <div> are line break (like the <br> tag).
The <div> tag by itself wont do anything, it is used for assigning CSS classes and/or alignment values with it.

Note the <br /> can not contain any alignment or any other values, it's a standalone tag.

Text Effects

What else can we do while adding text?

<i>italic</i> or <em>emphasis</em> or <cite>cite</cite> or <var>variable</var>

<b>bold</b> or <strong>strong</strong>

<s>~~strike~~</s> or <strike>~~strikeout~~</strike> or <del>~~del~~</del>

<u>underline</u> or <ins>ins</ins>

<tt>typewriter</tt> or <code>code</code>

<big>bigfont</big> and <small>small font</small>

<sup>^{raised font}</sup> and <sub>_{lowered font}</sub>

We can use all or some of these tags in conjunction with each other, example:

<em><b><u> font stuff </u></b></em>
and/or
<font color="#ff0000"><b><i> fonts stuff </i></b></font>
or even
~~H20~~ H²0 which is done by
<s>H20</s> <font color="#0000ff">H<sup>2</sup>0</font>

Becareful using the underline tag as people can confuse it for a link, also bold should only be used for high lighting.

Another tag with a silent effect is the <acronym> tag, this can be used like so: Mon put your mouse over the word 'Mon' and you should see the word 'Mon is short for Monday'
We did this by <acronym title="Mon is short for Monday">Mon</acronym>
Note NS7 is the only browser to display this tag properly (it should have a dotted line under it). we can add one for other browsers by adding acronym {border-bottom: 1px dotted black;} to our style sheets (the line doesn't work in older versions of IE).

NOTE: Remember you may use multi tags for effects like above but the order MUST stay the same.
Also some browsers can't read multi tags like above so will only apply the first one or two tags, So if you plan on using multi leveled tags use the ones you want most on the out sides.

<1><2><3> this is right </3></2></1>

<1><2><3> this is wrong </1></2></3>

Remember the tags should NEVER cross paths like shown in this example

Wrong way
Sample of how the tags should not be layed out

Mixed up tags mostly just wont show up, if your browser gets confused or doesn't know what you have done, it will ignore it. Or if the tags are major ones, can cause errors and not show anything.

Adding spaces

Spaces in your text wont work either, if you type <b>I pressed the space bar</b> you will find when you view you page it will show up as I pressed the space bar (note no extra spaces)

Using blank images for spacing is a big no no. we use a special character   which gives us an extra space, so to get our space in our sentence we use this space character like so:
<b>I pressed the         space bar</b> which will give us what we want. Don't go overboard using this. This magic space is also affected by the font size tag but is always invisible.

The Font Tag

Fonts are how we display text. They can make or break your web page. But in saying that anything can. We can do a lot with fonts, change the size, the style, the shape, color, appearance etc.

HTML favors the font tag but XHTML perfers CSS. CSS is a lot easier in the long run, instead of having to type out hundreds of font tags we can just type one small line of CSS and thats it. I'll show you both ways. CSS can be used with HTML without problem, most text effects work throughout the browser range

The basic HTML font tag is:

<font> Notice the opening and closing tags </font>

But without something for them to do, change size, color etc they won't do anything but take up room and slow your page down. The tags should be written in lower case.

<font size="4" face="comic sans ms" color="#ff00cc">Looks like this</font>
which will give us: Looks like this

or <font size="4" face="symbol" color="#ffcc00">Looks like this</font>
which will give us: Looks like this

What it means
size="??" font size (1 to 7 or -2 to +4) default is 3
color="??" font color, you must use the # in front of the RGB colors. Note, the 0 in the RGB color is a number, not a letter. See the "Color chart", for the 216 net safe colors.
face="??" font style (caution here) If someone declares a font style on their web page for effect and you don't have it, you won't see it, and some sites look great with fancy fonts, but you should never force people to download your font to view your page.

Rainbow text or mutli coloured text is not good coding, it not only slows the loading time of the page down it is also hard to read, use the color section with caution.

A small note for non-Americans, the word colour in HTML is spelt the American way - color

The font face= can be set like this: <font face="busys font, fancy font, symbol, Wingdings">
As far as I know, the only really fonts in this list is symbol and Wingdings. If I declared this font tag, your browser would search for the first on the list, not finding it, would then look for the second until it found one in your font folder. So the font you would see would be Symbol, if you didn't have it or Wingdings you would see the default font.

Notice the (") around numbers and names, these must be used always, especially with values, but be careful to include both as one missing (") will ruin a tags effect and may corrupt your entire page.

To view what font styles you have open your font folder (C:\windows\fonts) and double click to view. People love to download new fonts, I for one have over 800 (not all in the font folder). Windows has a bug which will cause problems if you have over 450 - 500 fonts in your folder, so be warned.

Universal fonts are: (displayed at size 3)

Arial - Comic Sans MS - Courier - Courier New - Georgia - Helvetica - mono - sans-serif - serif - Times New Roman - Verdana

Fonts can be made bigger or smaller with the size=""

<Font size="1">
<Font size="2">
<Font size="3"> <-- This is the default font and size.
<Font size="4">
<Font size="5">
<Font size="6">
<Font size="7">

Which tells the browser what font size to be, remember all computers display them differently, or we can tell the browser to increase the default by:

<Font size="-2">
<Font size="-1">
<Font size="+1">
<Font size="+2">
<Font size="+3">
<Font size="+4">

The default is 3, -1 is one size smaller than the default, four is one size bigger than default, can you see the pattern? I'm using the font 'Arial' on these pages.

Some fonts react different at different sizes, take Verdana at 1 and Times New Roman at 1. Notice the 'Verdana' font is still readable where as the Times new Roman isn't
Verdana and Arial would be the most common used.

or another way is to use the header tags

Header tags are simply <h1></h1> as the biggest down to <h6></h6> being the smallest. These tags have a built in 'next paragraph - <p>' command in them, above and below.

The biggest heading

<h1>The biggest heading</h1>

The second biggest

<h2>The second biggest</h2>

The third biggest

<h3>The third biggest</h3>

The fourth biggest

<h4>The fourth biggest</h4>

The fifth biggest

<h5>The fifth biggest</h5>

The smallest

<h6>The smallest</h6>

<h? align="left">text</h?> Aligns the contents between the tags to the left
<h? align="center">text</h?> Aligns the contents between the tags to the center
<h? align="right">text</h?> Aligns the contents between the tags to the right

the question mark is the number (from 1-6) used

If you use one size font through out the whole page (like you should) then you only need one <font ...> at the beginning of the page (after the <body> tag) and one </font> at the end of your page (before the </body>).
Editors make the mistake of adding the font tag per line, which is bad because all it is doing is adding size to your file, which we don't need. (This rule doesn't apply to tables).

We can also use text=" " in the body tag to make the text a certain color for the whole page, like so; <body text="#FFCC00"> but we can't use face, size etc in the body tag.

The "Comic sans MS" looks like a fun font but would hope you keep away from using it as every new web maker uses it, as well as centering it on a page, makes the page look horrid, unless your 6 then you could get away with it :). Also writing LiKe tHiS iS nOt cO0L, cHeCk oUt VVeB d3zIgN1nG (like this is not cool, check out web designing) any 5 year old can do that. Rainbow text (text changes color as it goes along) should also be avoided, apart from really annoying to read is unfair for the many colorblind people out there. Remember:

Important
Content - you have to have something people are interested in.
Navigation - people must be able to get around your whole site within 3 click (3 links) and always find their way out
Layout - make your layout easy to follow, with colours that wont blind them or confuse them, make all your pages similar in appearance.

When we first begin to make web pages, we tend to use a large curvy font like Comic Sans MS and center it on the page, some pages look good laid out in the center, most don't however. Could you imagine if the morning newspaper or school study books were all centered? It would get hard to read and follow.

The basic XHTML way is:

Harder to explain without a full CSS lesson, but I'll give it a go, if you're confused check out the CSS page for more help.

The above lists a lot of the HTML method but the page could be twice as long if I gave more examples and ways of doing things. With CSS method we list it in the head section, like so:

<html>
<head>
<style type="text/css">

</style>
<title> Your page title will go here </title>
</head>
<body>
Your contents will go here
</body>
</html>

This sample would make everything in the content area (between the <body> and </body> tags) look like this

The font-family: works just like the face as mention in the HTML section
The font-size: is like the size except now we state how big (px = pixels)
The color: is the same as color
The background-color: in this case is clear, can also be a color but should be used with the color
The font-weight: in this example is bold

Other options include:
text-decoration:underline makes text underlined
See more in the CSS section

Common errors

Missing a closing tag will cause your contents below the start of that tag to display that effect
Typos are always a common error

Summary

We have seen that we change and display the font styles, colors and sizes with the <font></font> tags
We have seen how we can use headers to display larger text by using the <h?></h?> tags, also using 'align' within the tag
We have seen how fancy fonts wont work on all computers as not everyone has the same ones.
<br> is to start a new line.
<p> is to start a new paragraph.

Exercise

Add to your web page, A header with your name in it.
Add another header with "Welcome" and align it in the center.
Add a line of red text and one line of black text
Use the <b></b> , <em></em> and/or the <s></s> tags to create effects

These exercises are to get you going, the more you do the better you'll get so if you want to try something go for it, do it. Don't be afraid of trying new things, with HTML the worse you can do is lock up your computer (save your work as you go). HTML is an easy language but trying to filter it down into subjects is hard because every part of it is used within each other.