HTML Lessons

HTML is written in something called tags. Tags come in pairs, an opening one and a closing one.
The first
pair of tags we'll write are the HTML tags themselves. You put one HTML tag at the top, and one at the
bottom:
<HTML>
</HTML>
This tells a browser like Internet Explorer or Firefox that the code is HyperText Markup Language.
Two things to notice here. One, that the word HTML is surrounded by angle brackets (the Less Than and
Greater Than keys on your keyboard); and two that the second Tag has a forward slash before the HTML.
All your tags must be surrounded by the angle brackets < >. This tells the browser that there is some HTML
code that needs executing, and that it is not to be shown on the web page. Miss an angle bracket out and it
can really mess up your web page.
The first Tag tells the browser to start doing something; the second tag tells the browser to stop doing it. The
stop symbol is that forward slash. So miss that out and, again, your web page can really be messed up.
The next pair of tags are the HEAD tags: They go between the two HTML ones:
<HTML>
<HEAD>
</HEAD>
</HTML>
Again, notice that both the HEAD tags are surrounded by angle brackets, and there is a forward slash before
the final one </HEAD>.
The HEAD section of HTML page is where you put special instructions for the browser. Your browser will
not print directly to a web page when things are inserted into the HEAD section. For example, if you wanted
to display the words 'Hello World' on your page, and you typed them in between the two HEAD tags, then the
Browser would just ignore them. That's because 'Hello World' is direct text, and not a special instruction that
the browser can understand.
A special instruction your browser can understand is the TITLE tag:
<TITLE> </TITLE>
The Title tag always goes in the HEAD section of the HTML skeleton.
The TITLE tag doesn't do very much. And it definitely should not be confused with the name of your web
page. If you saved your web page as MyFamily.html then that would have no bearing on or relationship with
the TITLE tag. Whatever you type between the two TITLE tags is what appears at the very top of your
browser window. And that's it, that's all it does. (You'll see what it looks like in a moment.)
The final, and most important part, of the HTML skeleton is the BODY section.
In between those two BODY tags is where you'll write most of your HTML code. Think of the BODY as the
white page in Word Processing. When you type something in your word processing software, it is
immediately displayed. Similarly, when you type something between the two BODY tags and then view the
results in a browser, whatever you typed will be displayed. As long as it's not a tag, your browser will try to
display it for you. So remember: if you want people to see it, put it between the BODY tags.
DOCTYPE
One special tag is DOCTYPE. It's not really a HTML tag, but an instruction to the browser about which
version of HTML is allowed. In version of HTML prior to HTML 5 the DOCTYPE could be very messy. In
HTML 5, however, it's just this:
<!DOCTYPE HTML>
DOCTYPE needs to go at the very top of the page. There is no end tag for DOCTYPE. Note the exclamation
mark after the first angle bracket, and the space between DOCTYPE and HTML.
So add a DOCTYPE to the top of your page. Your text editor will look something like this:
Saving Web Pages

To save your code as a web page, click the File menu at the top of Notepad (or whatever Text Editor you are
using.) From the File menu, select Save As. The Save As dialogue box appears (We created a new folder to
store all our web pages in, and called the folder HTML)..
Note the default extension at the bottom, under 'Save as type' It says, Text Documents (*.txt). If you leave it
on that then you won't have web page, you'll have a text file. Click on the drop down list and change it to 'All
files'. (You don't need to do this if you're using TextEdit on a Mac. Just typefirstwebpage.html in the Save
As box.)
In the File Name box, type firstwebpage.html
Note that we've used all lowercase letters. This is not strictly necessary, but is recommended. Also, try not to
add spaces to web page names as this can cause problems. You can use underscores or hyphens, though. So
these two are OK:
first_web_page.html
first-web-page.html
But these two should be avoided:
first web page.html
FirstWebPage.html
Click on Save and you'll have a HTML page that can be displayed in a browser.
Viewing your web pages in a browser

To view the results, open up an explorer window. In Windows, this is done by holding down the Windows
keys and then pressing the letter E on your keyboard. Or click your Start menu in the bottom left, and then
click on Computer. On a Mac, click the Finder icon in the Dock.
Navigate to where you saved your HTML page. In our case, this was a folder we created called HTML,
which is on our network:
In the image above we have a file called firstwebpage.html. If yours has .txt on the end instead of.html then
try again because it's not a web page but a text document.
Double click your HTML file and it will launch in your default browser. For us, this is Firefox. Yours might
be Internet Explorer or Safari. You should see a blank white page with your TITLE at the top. Here's the
Firefox version:
And here's the same page in Internet Explorer:
Notice that in both versions the TITLE we added is at the very top of the screen ' 'My First Page'. The same
TITLE can be seen further down, at the top of each browser tab.
Exercise
Change the TITLE tag to something other than 'My First Page'. Click File > Save in your text editor. Switch
back to your browser and press F5 to refresh the page. Your new TITLE should appear at the top of the screen
and at the top of the browser tab.
Create a Basic HTML Template
We've produced a video to go with this lesson. It's recommended that you read the text below as well, though.
The video is here:
How to Create a HTML Template
While you have the Windows Explorer or Finder screen open, you can save your current HTML skeleton as a
template. That way, you don't have to type it all out every time you want a new web page.
In your text editor, delete any text between your two TITLE tags. Now click File > Save As. From the Save
As dialogue box change the name of your web page to template.txt:
Click Save to save the code as a text file. You will be returned to your text editor. Click File > Save Asagain.
Now change the name of the file to newpage.html. In the Save As Type box in Windows, change it to All
Files:
Save the file and switch to Windows Explorer or Finder. You should now see three pages:
One of these, the template is a text file rather than a HTML file. From now on, you can open the template text
file, and repeat the process above: Click File > Save As, change the Save As Typebox to All Files, then type
a new name for your web page, not forgetting the html ending.
There is a problem, however. If you were to double click your newpage.html file it would open up in your
browser. But you will want to open it up in Notepad so that you can edit the file and make changes.
To solve the problem, you can add an item to the Send to menu in Windows (Macs will have an Open
With right-click menu. Your text editor should be on there). This appears when your right-click the file:
In the image above, we have Notepad on the Send to menu. Selecting this item means that we can quickly
open up the code in Notepad.
To add an item to the Send to menu, switch back to your Explorer window. In the address bar at the top, enter
the following:
%APPDATA%\Microsoft\Windows\SendTo
Press the Enter key on your keyboard and you will be taken to the Send to folder:
You can now drag and drop items from your Start menu to this folder. (Make sure Windows Explorer doesn't
fill the whole of your screen by clicking the Restore Down icon just to the left of the Red X.)
Click your Windows Start button. From the All Programs > Accessories menu, locate Notepad again. Hold
down your left mouse button on Notepad. Keep it held down and drag across to your Windows Explorer and
your Send To folder:/
Let go of your left mouse button and Notepad will be on your Send To menu when you right-click a file in
Windows Explorer.
Now you can quickly open up your HTML code in Notepad and makes changes to it.
To recap this section, here are the important points again:
The HTML skeleton is the foundation on which most internet pages are based
HTML is written in Tags
Tags usually come in pairs
A Tag is a word surrounded by angle brackets, e.g.: <HTML> </HTML>, <HEAD> </HEAD>,
<TITLE> </TITLE>
A pair of tags has as a starting Tag and an end Tag. The end Tag is preceded by a forward slash
Add <!DOCTYPE HTML> to the top of all your HTML pages.
Basic HTML - Heading Tags

You can have a nice big heading on your web page quite easily. This is done with the H tags. The biggest size
heading you can have is H1. If you want smaller sized headings then you change the number after the H. You
can have up to 6 different sizes. All headings need to go between the two BODY tags.
Try it out for yourself. Open up the code for your firstwebpage.html file, if it's not already open. (If it's not,
you can now right-click and Send To > Notepad. If you didn't get this working then simply clickFile >
Open from the menu at the top of your text editor.)
Add the following just below your first BODY tag:
<H1>A Size 1 Heading</H1>
Incidentally, tags are not case sensitive. So you can have this:
<h1>A Size 1 Heading</h1>
Or even this:
<h1>A Size 1 Heading</H1>
But using all capital letters makes your code more readable.
Once you've added the H1 tags, though, your HTML should look like this:
To see what it looks like, open Windows Explorer or Finder on the Mac, if it's not already open. Navigate to
where you saved your web page to, and then double click to open it up. (If you already have the page open,
simply press F5 to refresh the page.) You should see this in your browser:
Switch back to your code and change the 1's into 3's. So your HTML heading should now be this:
<H3>A Size 3 Heading</H3>
Save the changes. Go back to your browser and press F5 to refresh the page. You should see this:
Notice how much smaller the H3 heading is compared to the H1 heading. (If your headings don't look right,
make sure you haven't missed any angle brackets out, or any forward-slash closing tags.)
Exercise
Try the other H numbers to see how they compare. You can only go as far as H6.
Paragraph and BR breaks
If you've ever used a word processor like Microsoft Word then you know that to start a new paragraph all you
need to do is to hit the Enter key on your keyboard. The cursor will then move down, ready for you to start
typing. In HTML, however, you can't do this. If you want to start a new paragraph, you have to use the P tags.
To try it out, add the following just below your Heading (You can use your own text, though, rather than type
out the Hamlet soliloquy):
<P>To be, or not to be: that is the question: Whether 'tis nobler in the mind to suffer the
slings and arrows of outrageous fortune, or to take arms against a sea of troubles, and by
opposing end them? </P>
<P>To die: to sleep; no more; and by a sleep to say we end the heart-ache and the
thousand natural shocks that flesh is heir to, 'tis a consummation devoutly to be
wish'd.</P>
When you've finished, your HTML code should look like this: (Don't worry about the indenting, though. We
did ours just so it would look nice in this book. Only one press of the spacebar is recognised in HTML,
everything else is ignored, including indents and carriage returns.)
Note the P tags:

<P></P>
You have to use the P tags whenever you want to start a new paragraph.
Strictly speaking, though, you don't need the closing P tag. You can just do this to start a new paragraph:
<P>
To be, or not to be: that is the question: Whether 'tis nobler in the mind to suffer the slings
and arrows of outrageous fortune, or to take arms against a sea of troubles, and by
opposing end them?
<P>
To die: to sleep; no more; and by a sleep to say we end the heart-ache and the thousand
natural shocks that flesh is heir to, 'tis a consummation devoutly to be wish'd.
The result is the same. But in modern web coding, it's best to use the closing tag for paragraphs, so that you
can add Styling rules. (You'll learn how to do this a little later.)
Save your work and view the results in your browser. You should see this:
Notice the paragraphs breaks in the text. Notice, too, that although our code was indented, this doesn't show
up in the browser. The browser will ignore all those indents we had, and any extra white space. If you want
white space you have 'tell' the browser. You do this with the break tags, like P and BR (which you'll see
soon).
As an exercise, try deleting the P tags in your code. Save and refresh your browser. Watch what happens:
Without the P tags the text just runs on.

There is still, however, a paragraph break after the heading, even though we deleted all the P tags. This is
because the H heading tags insert their own paragraph breaks.
The BR tag
The BR tag is used when you don't want a full paragraph break. The space between lines of text is then
reduced. The BR tag doesn't need a closing tag, and can be just by itself.
As an example, add the following to the end of your text (the BR part).
<P>To die: to sleep; no more; and by a sleep to say we end the heart-ache and the thousand natural
shocks that flesh is heir to, 'tis a consummation devoutly to be wish'd.
<BR>
... Rest of Hamlet's Soliloquy goes here
</BODY>
</HTML>
Notice that we've deleted the end P tag for the second paragraph. If you leave it in, you'll get a double line
break from the two <P> tags, as well as a single line break from the <BR> tag.
Save your changes and switch to your browser. Press F5 to refresh the page and the results should look like
this:
So if you don't want a full, double-line break then remember to use the BR tag. And careful of the end P tags
or you'll end up more line breaks than you expected.
Bold and Italics

Two more tags that come in useful are the Bold and Italic tags. They are quite easy to use. Here are the Bold
tags:
<B> </B>
And here are the Italic tags:
<i> </i>
The text you want to change goes between the two tags:
<B> ... Rest of Hamlet's Soliloquy goes here</B>
<i> ... Rest of Hamlet's Soliloquy goes here</i>
If you want Bold and Italic text then you can nest the two:
<B><i> ... Rest of Hamlet's Soliloquy goes here</i></B>
The two I tags go between the two B tags. You can have it the other way around, though, with the I tags first:
<i><B> ... Rest of Hamlet's Soliloquy goes here</B></i>
Be careful of this, however:
<i><B> ... Rest of Hamlet's Soliloquy goes here</i></B>
This is a mismatched pair of tags. The two tags on the inside are B and I, and the ones on the outside are I and
B. A modern browser will probably correct the mismatch, but older ones may not.
Try it in your HTML code:
Save and view the results in your browser:
There is also an underline tag you can use:

<U> ... Rest of Hamlet's Soliloquy goes here</U>
You can nest all three tags: bold, italics, and underline:
<U><B><i> ... Rest of Hamlet's Soliloquy goes here</i></B></U>
All this nested HTML code can be a bit messy, however. The modern solution is to use something called a
Cascading Stylesheet. Using a Stylesheet allows you to do all your text formatting in the HEAD section, or
better yet in an external file. (You'll see how to do all this shortly.)
HTML Lists
You can insert a bulleted list onto your page with HTML. There are two types of lists to choose from:
Ordered List and Unordered. An Ordered list is one that uses number, letters, roman numerals, or a
combination. Like this:
An Unordered List is one that uses bullets. Like this:
To get a list with numbers or letters, this tag is used:

<OL>
</OL>
The OL stands for Ordered List, of course. But those two tags won't get you a list. You need to include
another tag, the LI tag. LI stands for List Item. You need one pair of LI tags for every item in your list. So for
three items, the code is this:
(Strictly speaking, you don't need the end LI tags.)

To get the bulleted list, the UL tag is used. UL stands for Unordered List. It's used in exactly the same way.
Just substitute the OL tags for UL tags.
For both the Ordered and Unordered list, you can specify which type you want to use for the bullets or
numbers. The types are these:
You use the Types like this:
You can specify a start, as well. But the start has to be a number:
So that List will be uppercase letters, starting at the 7th letter, or 'G'.
There are three types of bullets you can use for unordered lists: Disc, Circle, and Square. You use them like
this:
The default is Disc. So if you want round black circles for your bullets, you can miss the TYPE attribute off:
And here are the results in a browser:
Try out the various lists in your HTML code, and add the different types to the code. That way you will get a
feel for how they are used, and what they look like.
An Introduction to Cascading Style Sheets
HTML was not intended to be a graphic design tool. It was set up as a simple way to display text in a
browser, rather like a word processor displays text on a page. Tags were added over the years in order to add
a bit of colour and life into the basic white page (actually, grey at first). So along came things like images,
tables, frames, and forms. These could all be presented on the page using straight HTML code.
Web designers clamoured for a better way to present their work on a web page. Plain HTML just wasn't
enough. After all, with HTML, in order to get text or an image exactly where you want it, you have to resort
to complicated tables to force the alignment. And suppose you want colour behind a single paragraph of text,
and not have to colour the entire page? Very tricky with straight HTML. And what about hyperlinks? Is there
any way, with HTML, that we can turn the underline on and off?
These questions, and many more, were finally addressed by the introduction of Cascading Stylesheets. A
Style is, basically, just another way to manipulate elements on a page, in order to bring a spark of life into
your web design.
What is a Stylesheet?
If you were using a word processor like Microsoft Word, you could tell the word processor how you want
blocks of text to be formatted. For example, all of your page Headings could be in 28 point Times, bold, and
coloured red. If you wanted the same Heading again, you can just click a drop down list and select the
Heading style you set up.
Using straight HTML, you can't do that. There's no way to apply the same formatting with a single Tag.
Cascading Stylesheets, however, let you do precisely that ' change whole blocks of text with a single tag. This
not only makes your code easier to read, it is also very simple to change all the formatted blocks of text to say
a different font size or font colour.
For example, in HTML, if you want to set the first paragraph of every page to bold and italics, you'd have to
do this for every single paragraph that needs it:
<P>
<B><i>This is the first paragraph on page One. The same font styles are needed for each page on my
web site.</i></B>
</P>
With Stylesheets, you can get rid of all that code, and place it in the HEAD section of your page. You would
then just apply the Style to any paragraph that needs it. Like this:
<P Class = "FirstParagraph">
This is the first paragraph on page one. The same font styles are needed for each page on my web site.
</P>
The new code, I'm sure you'll agree, looks much cleaner. And if you decided that the text colour should be
blue, you can just make one change to your Stylesheet code and all the first paragraphs of your pages would
change.
A stylesheet is set up by using the word STYLE in between two angle brackets. An end STYLE tag is needed
to tell the browser to stop formatting the style:
<STYLE>
</STYLE>
Your stylesheet code then goes between the two Style tags. Here's a style that can change text blue:
<STYLE>
.Font1 { Color: Blue }
</STYLE>
<P Class =" Font1">
This is my text.
</P>
Although you may not understand the code layout yet, the point is that you can add other styles to the one
above that we have called Font1. We can add a bold style and a size style:
<STYLE>
.Font1 {
Color: Blue;
Font-size: 24pt;
Font-weight: Bold;
}
</STYLE>
Now the part of the code where we applied the style (P Class = Font1) will have its text updated. We don't
have to make any changes at all to the P part of the code.
So a style is way to change blocks of code (or even individual words) and apply formatting to the block as a
whole. You don't need individual HTML tags in the BODY of your page; just using the style name once will
ensure that your formatting is applied to the whole block.
Cascading Style Sheet Rules
The video is here:
Cascading Stylesheet Rules
A Cascading Stylesheet rule tells the browser what the HTML looks like, and what it should do. A rule can
dictate what just one HTML tag should look like, or you can construct your own rule to be applied as and
where you want it.
For example, a rule can be set up that tells the browser to format every <P> tag so that its first line is
indented. Or you could construct your own paragraph rule, and just apply the style to certain paragraphs, not
all paragraphs.
There are three parts to a Rule: The Selector, the Property, and the Value.
The Selector
There are three different kinds of CSS Selector: An HTML selector, a Class selector, and an ID selector.
An HTML Selector is the text part of an HTML tag. The complete paragraph tag is <P>. So its
Selector is just P ' in other words, strip the angle brackets off and you get the HTML Selector.
A Class Selector is one you set up yourself, to be used anywhere on your page. The Font1 from
our STYLE example above was a Class Selector. We picked the name ourselves and then
applied the style to some text on the page.
An ID Selector is similar to a Class selector, but you use them to identify a particular element, a
text box element on a form, for example.
Here's an example of what all three selectors look in a STYLE tag.
The first one, H1, is the HTML Selector. Notice that it has had its angle brackets removed. With an HTML
selector, all the HTML tags on the page will be formatted in the style you have set. So for H1 above, all the
text between the <H1></H1> tags on the page will now be in Red.
The second one, .NewFont, is the Class selector. Note that a class selector must start with a full stop (period).
Then you type the name for your selector (anything you want). No space is added between the full stop and
the name of your selector.
The third one, #NewTextboxColour, is the ID selector. An ID selector starts with the hash/pound (#) symbol.
You then type the name you want to use for your ID selector. Again, no space is added between the symbol
and the name of your selector.
Property and Value

Once you have set up your Selector, you then define the Properties and Values for that selector.
The Property for the selector is the thing you're trying to change. Examples are: Font, Color, Background,
Margin, Text.
The Value for the selector is the new setting for the property. For example, for our COLOR property, we can
set it to a value of an actual colour (red, blue, yellow), or a colour code (#FFFF00, #000000).
The property and the value are enclosed in curly brackets { }. The syntax for the whole thing would then be:
Selector {Property: Value}
An example is:
H1 {Color: Red}
H1 is the selector, Color is the property, and Red is the value of the property. Note the colon ( : ) after the
Property. This is used to separate a Property from a Value, so that the browser knows which one is which.
If you want to add more than one property and value, there are two way to do it: all on one line, with each
pair of properties and values separated by a semi-colon ( ; ). Or you can put each pair of properties and values
on multiple lines separated by a semi-colon ( ; ). Like this:
H1 {Color: Red; Font-weight: Bold; Font-Size: 16pt;}
The multiple lines version is this:
The multiple lines version is easier to read.

So, to sum up:
A CSS rule has three parts, a Selector, a Property, and a Value

The Selector can be a HTML selector, a Class selector, or an ID selector
You separate the Property and Value from the Selector by enclosing them in curly brackets, a left
curly bracket first { and a right curly bracket to close the rule }
A Property is separated from a Value by a colon ( : )
If you're using more than one pair of properties and values for the same selector, separate them with
semi-colons ( ; )
Where to put your styles

STYLES can be inserted into three locations: Inline, Embedded, and External.
Inline Style Sheets

You can place a style tag directly in a HTML Tag. This is called Inline. Inline styles will override ones placed
elsewhere. Here's an example of an Inline style:
<H1 STYLE = 'Color: Red'>My Heading</H1>
To place a style in a HTML tag, do the following:
Type the Tag you want to change

Next, type a space and then the word STYLE
Type an equals sign ( = ) after the word STYLE
Type a double quote mark
Type the Property followed by a colon
Type the Value
Type the another double quote mark
Type the right angle bracket ( > ) of the HTML tag
Embedded Style Sheets
Embedded styles go in the HEAD section of your HTML page. When you embed a style in the HEAD
section, you use the two tags to tell the browser where the style starts and ends. You can add a TYPE
attribute, if you want. But modern browsers don't need it.
Then in between the two STYLE tags, you would type your CSS Rules.
External Style Sheets
Instead of typing the <STYLE> tags and the code for all your CSS rules in the HEAD section, you can type it
all in a separate text file. You then 'tell' the browser where the text file is. The text file (along with its code) is
then treated as though it were in the HEAD section. You set up an External stylesheet like this:
To embed a stylesheet the LINK tag is used. The REL attribute tells the browser that you want to link to a
stylesheet; the TYPE tells the browser what sort of file is being used; the HREF attribute tells the browser the
name of the file, and where the file is. (You haven't done file referencing yet, so don't worry about HREF for
the moment.)
External stylesheets have a big advantage over embedded ones because they can be used for all the pages in
your web site. All you need do is insert the LINK tag in the HEAD section of your website's pages. With
Embedded stylesheets, you would have to have the same STYLE code in the HEAD section of every page.
External Stylesheets can save you a heck of a lot of typing (or copying and pasting).
External stylesheets are just text files, so you can write them in any text editor. Something like Windows
Notepad is ideal. Here's a screenshot of an external stylesheet written with Notepad:
Note that no TAGS are used in the external stylesheet. There are no <STYLE> tags or HTML tags, just the
Selectors and their Properties and Values.
Note, too, that three styles have been set up. You can do this with embedded STYLE tags as well. You can
have as many different styles as you want between one pair of <STYLE> </STYLE> tags.
If you are using external stylesheets, you are not limited to only one. You can use as many external
stylesheets as you need. All that is required is a different LINK tag for each stylesheet.
When saving your external stylesheets, you don't have to save it with the extension .css. You can save it with
the extension .txt. In the HREF part of your LINK tag, you would then have this:
HREF = style1.txt
instead of
HREF = style1.css
How to use CSS Class and ID Selectors
You have seen how to set up a stylesheet. And you know that if you set up a HTML selector, then all the
HTML tags will have their values reset with the new values you specified. For example if you had this:
Then all the H1 headings you used between the two BODY tags would have the text between the two <H1>
tags coloured red.
In other words, to use your new HTML selector, you don't have to add anything else to your HTML code.
Just use the tag in the normal way.
However, Class and ID selectors are slightly different.
Using Class Selectors

To set up a Class Selector, the code was this:
.ClassSelector {Property: Value}
First, you type a full stop (period). Then you type the name of your Class Selector (which can be anything
you want). The Property and Value are then as normal. An example is this:
The .FontOne is the Class Selector, a name we made up ourselves. In between the curly brackets, we're then
saying 'Every time this Rule is applied, the colour of the text will be red".
You can use this new Rule inside a normal HTML tag. Like this:
<H1 Class = "FontOne">My Heading</H1>
When applying your new Class Selector Rule, the word 'Class' is used. You then type an equals sign ( = ),
followed by the name you gave your Class Selector. In our case, this was FontOne. But note that the full stop
(period) is now missing from the start of the selector name. If you put the full stop in, your Rule won't work.
Note that although we've used quote marks around the Class name, this is not strictly necessary. It is
recommended, though.
Using ID Selectors
You use an ID selector in exactly the same way that you use the Class selectors. The only difference is in the
word used when applying the Rule. Instead of Class you use ID:
This is what the above code would look like in a web page:
But that's enough of the theory for now. Let's get some practical work done. We'll go through the various
ways you can add a STYLE to your web pages using your text editor. The first code we're going to write will
centre a heading on a page. You can then use the same code to centre anything on your page.
Inline and Embedded Styles
Inline Styles
Open up the HTML template text file you created at the start of the course. Click File > Save As in Notepad.
Save the file with the name newpage.html. Don't forget to change the Save as type box toAll Files before
clicking the Save button, if you're using Windows.
Add some text for the TITLE tag. Add an H1 heading, with some text between the two H1 tags. Now add a
paragraph of text below the H1 heading. To create an Inline Style, click after the first H1. Tap the space bar
on your keyboard. Type the following:
<H1 style=text-align:center>
Make sure there is no space after the colon and before the word 'center'.
Your HTML code should look something like ours below:
(One thing British English users should note is the two different spelling of the word 'centre'. American
English is used in HTML, so it's 'er' rather than 're'.)
When you have finished typing the code, view the results in your browser. You should see that the heading is
centred on your page:
So if you want to centre things on a page, you need to use the text-align property. After a colon, you add the
value. In this case center.
(In previous versions of HTML you could use the HTML tags <CENTER> to centre things on a page.
However, in the new version of HTML, version 5, this tag is now withdrawn (deprecated).
Exercise
As well as using center after the text-align: property you can use the following: left, right. Try them out for
yourself. Simply replace the word center with one of the other text-align options.
Embedded Styles
As was mentioned, Embedded Styles go in the HEAD section of your code. To try them out, add the
following highlighted CSS to your code:
So the text alignment we've added is to align right. However, the Inline Style is for centre alignment. So
which one gets executed?
Save your work and refresh your browser page. You won't see any changes. That's because the Inline Style
will override the embedded one in the HEAD section.
Delete the Inline Style for the H1 heading. You should then just have this for the H1 heading:
<H1>Centred Heading</H1>
Save your work and refresh the web page in your browser. It should look like this, now:
The heading is right-aligned.
Exercise
Change the value of the text-align property to Center. Save your work and Refresh the page in your browser.
CSS and Fonts
In HTML versions prior to the new version, which is HTML 5, you could specify a Font with HTML tags. If
you wanted Arial, for example, you could do this:
<FONT face="Arial, Helvetica, san-serif">Some text here</FONT>
However, In HTML 5 the FONT tag is deprecated. That doesn't mean you can't use it anymore, as browsers
are backward compatible, meaning that older code will work with all browsers. But if you want to go with the
modern way of doing things then fonts, font sizes, and font colours should be done with a Stylesheet.
To change the font on your page, the font-family CSS property is used:
font-family: arial, helvetica, sans-serif;
You specify the family because the person viewing your page might not have the first font on your list. In
which case, the second font is tried, then the third. (You can have more than three, if you want. Or less than
three.)
You can specify a single font instead, but not everybody has that fancy font you like so much. In which case,
they would get the default, which is usually a serif font.
NOTE: A serif is mark or embellishment on the vertical or horizontal line of text. Here's an example of the
serif font Times New Roman:
A sans-serif font is one without marks or embellishment. Just straight lines, in other words. Here's the sansserif font Arial:
And here are some default font families you can use quite safely:
Times New Roman, Times, Serif
Courier New, Courier, Mono
Georgia, Times New Roman, Times, Serif
Verdana, Arial, Helvetica, Sans-Serif
Geneva, Arial, Helvetica, San-Serif
Try them out for yourself with the following font-family style added to your H1 code:
Save and refresh your browser. The heading should change from a default serif font to one of the sans-serif
fonts: Arial, Helvetica, sans-serif.
But your browser should look like this:
Now try one of the other font-families on the list. Here's what your browser will look like if your tryCourier
New, Courier, Mono:
Font Colors
The video is here:
Web Color Values
There are quite a lot of other font styles you can use in your CSS. We'll start with font colours. (Strictly
speaking, though, COLOR is not a font style - it can be used just about anywhere to colour lots of different
things.):
You can have just about any font colour you want for your text (British English users, note the missing "u"
after the second "o". The American spelling is used in HTML and CSS). To specify a colour, you can use one
of three formats:
The name of a colour spelled out

The name of a colour as a Hexadecimal value
The name of a colour as a RGB value
There is a rather long and exotic list of colour names you can use, things like Cadet Blue, Ghost White,
Lemon Chiffon. But you can also use a simple colour name like red or blue. The CSS code is this:
H1 {
text-align: center;
font-family: Courier New, Courier, Mono;
color: red;
}
So you type the word "color" followed by a colon. You then type the name of your colour.
There are 17 common colours, and 130 not so common. The common colours you can use are: aqua, black,
blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
For a full list of all the colour names you can use, see this Wikipedia page:
Wikipedia - Web Colors
Hexadecimal values
Hexadecimal values are used quite a lot in web design. If you've never heard of them before they use the
number 0 to 9, and the letters A to F (Base 16). In Base 16, the letters are used instead of the numbers 10, 11,
12, 13, 14 and 15. So A = 10, B=11, C=12, etc. If you want to represent the number 256 in Hexadecimal then
it's FF.
Three colour values are used, one for Red, one for Green, and one for Blue. Each colour value has two
Hexadecimal place-holders. For example, here's the colour Red:
#FF0000
Here's the colour Green:
#00FF00
And here's the colour Blue:
#0000FF
So red has two letter F's in the Red position, two zeros in the green position, and two zeros in the blue
position. In other words, switch the red value full on, and switch the green and blue values off.
Green has two zeros, two F's, then two zeros again. Blue has four zeros then two F's.
Black just has 6 zeros, meaning switch Red, Green and Blue off.
Note that you need to use the hash/pound symbol ( # ) before the six place-holder values.
You can combine the Hexadecimal number and letter values:
#2F0B99
Try them out for yourself in your code:
H1 {
text-align: center;
font-family: Courier New, Courier, Mono;
color: #2F0B99;
}
Exercise
Change the values in the six positions, using the numbers 0 to 9, and the letters A to F. What are the following
colours?
color: #1BAA12;
color: #1087AC;
color: #451DE2;
RGB values
You can use RGB values in your CSS, if you prefer. (RGB stands for Red, Green, Blue.) Again, place-holders
are used for the different colour values. This time, you use the number 0 to 255. You use them like this:
color: RGB(255, 0, 0);
Note that the number are typed between a pair of round brackets, and are separated by comas.
Exercise
Play around with the RGB values. What are the following colours?
color: RGB(0, 255, 0);
color: RGB(125, 125, 0);
color: RGB(255, 255, 10);
Instead of experimenting to get the colour you want, an easy way to get the correct Hexadecimal or RGB
colour is to type the words "color picker" into a search engine like Google. You'll then have plenty of web
sites that give you're the correct values to type simply by playing around with colour sliders.
Font Size with CSS
There are plenty of ways to change the font size with CCS.
You can change the size of your page fonts with the font-size property. The values for the property, however,
can be a bit tricky. Take a look at these values for font-size:
font-size: 200%;
font-size: 32px;
font-size: 2em;
font-size: xx-large;
They are actually the same size! Try them out in your code. Add the following highlighted CSS Style:
Save your changes and refresh the page in your browser. You should see the paragraph of text change size.
Now try the other three sizes: 200%, 32px, and 2em. You should find that they are all the same size (or near
enough).
Which one you use is up to you. In older browsers, however, using the fixed sizes values of px and emmeans
your users may not be able to increase the size of your fonts. This matters to those whose eyesight may not be
perfect, and therefore need a bigger font when reading your text. But browsers allow you to zoom in and out
by holding down the CTRL key and pressing + or -. (You reset by pressing CTRL then 0.) So font-size values
are not that important. A lot of professionals, though, will set the BODY tag's font-size to 100%, then
use em as the value. Like this:
This means that all the font sizes between the two BODY tags are set to the browser's default size of 100%.
In pixels, the default size in browsers is 16px. This is equal to 1em. The P tag above is setting the font-size to
one and half times the default, while the class ChangeFontSize is setting the font-size to two times the
default.
The other sizes are seldom used. But here they are:
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
Try them out and see what happens.
Font Style, Font Weight, Font Variant
Font-Style
There are only three font styles to choose from: normal, italic, and oblique. Of course, the default is normal,
so you don't have to use font-style unless you want italic or oblique text. You use them like this:
There's not a great deal of difference between italic and oblique, though. If you want to see the difference, use
a sans-serif font, with a large font size.
Font-Variant
Font-Variant is used when you want small caps for text:
And here's what it looks like in a browser:
Font-Weight
The weight of a font is how thick it is. There are lots of values you can use here. The most common one is
Bold. But you can also have Bolder and Lighter. As well as the named weight you can also use a number
from 100 to 900. It's better to stick with round numbers, though, as the difference between 100 and 150 is
practically impossible to see. Here's how to use font-weight:
Add a second paragraph of text between your BODY tags and try it out:
Here, we've set all paragraph tags to have bold text. Then we've added a Class Selector
calledChange_Font_Weight, which we've set to lighter. We've then used this class on the second paragraph.
Save your work and refresh your browser to see what effect it has.
Exercise
Try some of the number font weights to see how they work. How different is 100 from 900?
Image Types
You remember at the start of this course we talked about file extensions, and you learnt what the .htmlfile
extension was? You're now going to learn about two new file extensions: JPEG and GIF.
Just like web pages and word process documents have file extensions, so too do images have file extensions.
There are a wide range of file extensions used for images. The two most popular file extensions used on web
pages are JPEG and GIF. (PNG is another popular image format. It's similar to GIF, so we won't discuss it.)
GIF Images
GIF stands for Graphics Interchange Format, and was developed by Compuserve. It uses something called a
LZW compression algorithm to reduce the size of the file. The size of your images on web pages is a crucial
factor for people using slower connections. If you have an image that is 1 megabyte in size, and I only have a
2 megabit connection speed then it's going to take about 4 seconds to load the image on the page. That may
not seem a long time, but if my speed drops to 500 kilobits per second then it will take 16 seconds to appear.
I'm not likely to wait that long for your image to load!
So compressing the size of an image makes sense on the internet. If you've taken a photo and then saved it to
your computer, take note of the file extension used. The software package you use to view the image will
probably give you the opportunity to save the file in another format. Saving the file as a GIF image will
greatly reduce the size of the file.
There is a down side, however, in converting to a GIF. The number of colours in your image is capped at 256
colours. For realistic photos, this is not nearly enough. And although your file size is greatly reduced so too
could be the quality of your image.
JPEG
JPEG is the other popular image format used on web pages. It stands for Joint Photographic Experts Group,
and allows you to have images with more than 256 colours. In fact, millions more. Again, your original image
is compressed when you convert to a JPEG image, so some loss of quality is inevitable. If you want to show
off your photos in their best light, converting to JPEG rather than GIF is the best option for the internet. The
size of the file might be slightly higher, but then so will the quality.
The downside to JPEG images is that jpeg is a Loss Compression format. This means that image quality goes
down (rapidly) the more times you compress and uncompress the image. This happens when you save the file
over and over again. GIF on the other hand is a Lossless Compression format, meaning there will be no loss
of quality when you compress and uncompress the image.
Another thing you can't do with JPEG images is have a transparent background. So if your image was this:
and you wanted to get rid of that black background, you could set the black colour as a transparent colour, if
you save as a GIF. With a JPEG, you're stuck with the black background. (You can also animate GIF images,
which you can't do with JPEG images.)
In general, if your image is less than 256 colours, then save the image as a GIF; if the image is more than 256
colours, and quality is important, then save the image as a JPEG. (Modern digital cameras and mobile phones
usually save your pictures in the JPEG format.)
Inserting images into a web page
So you have your image file, either a GIF file or a JPEG. How do you get it into a web page? You do so with
the IMG tag in HTML. The basic IMG tag looks like this:
<IMG SRC="some_image.gif">
There are no closing tags for the IMG tag. So you don't do this:
<IMG SRC="some_image.gif"></IMG>
In between a pair of angle brackets, you type the letters IMG (short for image, of course). After a space, you
type SRC. This stands for Source and means the location of your image. After an equals sign, you type the
name of your image between a pair of double quotes.
It's essential that you get the SRC part right, though. To do that, you need to know about Absolute versus
Relative file referencing.
Absolute Referencing
Take a look at this file reference:
C:\Users\Owner\Documents\HTML\some_image.gif
Starting from the right-hand side, this says that there is an image called some_image.gif. This has been saved
into a folder called HTML. The HTML folder is in the Documents folder. The Documents folder is in a folder
called Owner. The Owner folder is in a folder called Users, which is on the C drive. This is an Absolute file
reference. It points to a specific location on your C drive.
This would be no good on the internet, however. Although you will have all these folders on your C drive,
somebody else viewing your web page won't. But that person's browser will try to look for all these folders.
Of course it won't be able to find them, because all the folders are on your computer, and not theirs. So the
image you specified to use in your web page won't be displayed to anybody else but you.
Another example of an Absolute References is this:
http://www.homeandlearn.co.uk
That's an absolute reference to a web page on the internet. Perfectly OK, and you'll see how to add links to
web pages later. But Absolute References and not terribly practical when it comes to you own images and
your own html pages. Relative References are much better.
Relative Referencing
With Relative Referencing, the starting point is not your own computer, but the image file or HTML file
itself. With Absolute Referencing, the browser starts the search for the image on the left hand side:
With Relative Referencing, the browser starts the search for the image on the right hand side:
So with a Relative reference, the browser starts looking for a file called "some_image.gif". If you just put
this:
the browser will look for the file in the same folder where you saved your web page. If it's there, no problem;
the browser will display the image. You don't need to add anything else, because the browser will stop
searching when the image has been found. In fact, the ONLY place the browser will look is in the same folder
where you saved your web page.
So with Relative Referencing, if you put all your images and web pages in the same folder, the browser will
know where to find everything. And when you're asking the browser to display an image or another web
page, you only need the name of the image or web page. You don't need to do this:
<IMG SRC=" C:\Users\Owner\Documents\HTML\some_image.gif">
You can just do this:
On a professional level, though, dumping everything into one folder is frowned upon. If you created a folder
called "web_site" you would be expected to create other folders inside this one. A folder called "images" to
store all your image files; a folder called "scripts" to store any external code; and a few other folders as well.
If you do that, Relative Referencing gets a little bit trickier. For example, suppose you have a web page
called index.html. You've place this web page inside of a folder called web_site. You've created another
folder inside of your web_site folder. You've called this new folder images. So your file and folder structure
looks like this:
Of course, you will have placed all of your images in the images folder. Now, if you want one of those
images on the index.html page, you couldn't do this:
If you tried that, the image wouldn't display. That's because you haven't told the browser about that folder
called images. You would have to do this:
<IMG SRC="images/some_image.gif">
The forward slash means "look for a folder called . . . that is in the same folder as the current file." In this
case, look for a folder called "images". (The current file is index.html, which is where you want the image to
appear.)
If you wanted to point to an image that was outside the "web_site" folder, then life just got even trickier still.
(You'll see how to solve this later). But as a beginner, if you keep everything in the same folder - images and
web pages - then this sort of relative referencing should work:
In case all this file referencing is not too clear, we'll do some practical work in the next section. (We've
produced a video about file referencing, here: File Referencing Video.)
More on Inserting Images
In the previous section, you learnt about relative file referencing. In this section, we'll continue the lesson
with some practical work.
Navigate to where on your hard drive you saved your HTML pages. For us, this was a folder called HTML.
Inside of the HTML folder, create two more. Call one of the folders images and the otherpages. If you're
using a Windows computer, your Explorer window will then look like this (Windows 7):
Double click your template text file and add the following HTML image code:
Click File > Save As and save your template as a HTML file. But save it in your new pages folder, and call
it images.html. Don't forget to change the Save as type box to All Files, if you're using Windows:
Once you have saved your template as a HTML web page, double click it to open it up in your browser. You
should see this, if you are using Firefox:
If you are using Internet Explorer, however, you should see this:
In both cases, the image has not displayed. Firefox displays a broken file icon, and Internet Explorer displays
a red X icon. The reason is that the browser can't find the file. So if you see either of those icons in future,
just remember that the browser is telling you "Image File Not Found".
To solve this problem, we have some files for you. The file you need is in the extra_files folder that came
with this course. (If you haven't got the extra files yet, the download location is here, under the heading Web
Design - New Course : Download the Extra Files needed for this course (You don't need the downloads for
the old course.)
Double click the extra_files folder, and then double click the york_images folder. Copy
theyork_minster.jpg file and paste it into your HTML/pages folder. Your pages folder will then look like
this:
The image and the web page are in the same folder, the pages folder. Notice the file size of the image - 747
kilobytes. Could be a bit big on the internet, and we'd want to look into this.
Once you've copied the image over, refresh your HTML page in your browser. You should see the image
appear:
If you don't see an image, but still have the "Image File Not Found" icon, make sure the SRC part of the
HTML is correct:
SRC="york_minster.jpg"
Note the lowercase spelling, and the two double quote marks. A common error is to spell SRC as SCR. Make
sure, too, that the image and the web page are in the same folder.
Once you get the image displayed in the browser, create another folder inside the pages folder. Call this
one york_images. Your explorer window should then look like this:
Now move the york_minster.jpg image to the york_images folder. Your explorer window will then look like
this:
Reload your web page in your browser. You should see the "Image Not Found" icon again.
Go back to your HTML code and change the IMG line to this:
<IMG SRC="york_images/york_minster.jpg">
So we've added the folder name, then a forward slash. This denotes a folder in the same directory as the
HTML page. After the forward slash, we have the image name. What we're saying here is, "In the same folder
as the images.html page, look for a folder called york_images. In this folder there is an image
called york_minster.jpg".
Save your work and reload the images.html web page in your browser. You should see the image reappear.
Advanced file referencing
Previously, you created an images folder and a pages folder. This:
For neatness sake, this is a good idea: you can have most of your html pages in the pages folder, and all your
pictures in the images folder. (We say most of your html pages because there is an exception called
the index.html page. You'll learn about this a bit later.)
One difficulty about this approach is that file referencing becomes a lot harder. Suppose we moved
the york_images folder inside of the images folder. If we did, the code we wrote before would no longer
work. This line:
That's because there would no longer be a folder called york_images in the same location as
theimages.html file. The image is now one folder up from the pages folder. The code would therefore be
this:
<IMG SRC="../images/york_images/york_minster.jpg">
After SRC we now have two dots and a forward slash. Two dots and a forward slash mean "go up one folder
from where you are". (Remember, this is all relative to the images.html page, where the code is.) The
browser will then look for a folder called images. It will search this folder for one calledyork_images. Then
it will look for the image specified.
Don't worry if all that is not too clear: we'll keep images and image folders together, just for simplicity's sake.
But if you're still not sure about file referencing, we've produced a video for you here: File Referencing
Video.
Image Attributes
When you use IMG you are using a HTML tag. The SRC part is called an attribute. There are lots of other
attributes you can add to the IMG tag. Here are the image attributes in HTML 5:
ALT
SRC
HEIGHT
WIDTH
USEMAP
ISMAP
In previous versions of HTML, you also had these:
ALIGN
BORDER
HSPACE
VSPACE
However, these have now been deprecated (no longer valid). You can still use them, though. But the HTML 5
way is to apply these with CSS. You'll see how to do that shortly.
The ALT Attribute

The first attribute is ALT. You use it like this:
<IMG SRC="york_images/york_minster.jpg" ALT="York Minster">
ALT means "alternative text". If the image does not display then users will see the text between the double
quotes of ALT. Try it out. Change your HTML code to this:
<IMG SRC="york_images/york_min.jpg" ALT="York Minster">
Here, we've changed the name of the image. Now save your work and refresh your page in the browser. You
should see this (Internet Explorer):
Internet Explorer has added the ALT text after the red X.
You should always add some ALT text to your IMG tags as it is helpful to blind and partially sighted users:
the ALT text will be read out. ALT text is also useful for search engines, especially Google's image search.
Height and Width Attributes

Another thing you can do with the Image tag is specify a new height and width. This one is quite easy.
Change your image tag to this (we've left the ALT tag off):
<IMG SRC="york_images/york_minster.jpg" HEIGHT="512" WIDTH="384">
The original image was 2048 pixels high by 1536 pixels wide. By changing the Height and Width, we can
decrease the size of the image. The image itself will still take the same amount of time to load into a browser
because we haven't changed the size of the JPEG file. All we've done is to change the height and width
attributes of the IMG tag.
This, however, would not be practical on the internet, because the size of the JPEG file wouldn't change. All
you'll do is use up more download time to get a smaller image. So when changing image size with the Height
and Width attributes, go up in size and not down, as we have done here. If your images are too big, use image
editing software to reduce the height and width.
The USEMAP Attribute
The USEMAP attribute is used to turn specific areas of an image into clickable links. Take the image below,
for example. We don't want the whole of the image to be a hyperlink, just the coloured shapes.
If you hold your mouse over the grey areas then nothing happens - your mouse pointer won't change. Hold
your mouse over a shape, however, and the mouse pointer changes to indicate that it's a link. This is all done
with the USEMAP attribute. The HTML code with a USEMAP attribute looks like this:
<IMG SRC="images/shapes.gif" USEMAP="#shapes_1">
After the attribute USEMAP comes an equal sign, then the name of your map, preceded by a hash/pound
symbol. The name of the map can be anything you like.
Once you have a map name, you need a map to go with it. Take a look at this code, which is the map for our
shapes image above:
<MAP NAME="shapes_1">
<AREA SHAPE="Rect" coords="37, 25, 137, 72" href="#">
<AREA SHAPE="Circle" coords="205 49, 29" href="#">
<AREA SHAPE="Poly" coords="317, 23, 349, 76, 284, 76" href="#">
</MAP>
So you have two MAP tags, a start and an end one. The first MAP tag takes a NAME attribute. This is the
USEMAP name from your IMG code. In between the two MAP tags you need at least one AREA tag. The
AREA tag takes attributes of its own: SHAPE, COORDS, and HREF. The shapes you can have are RECT
(short for rectangle), CIRCLE, and POLY (short for polygon). Each shape needs some coordinates (the
COORDS attribute). For any rectangular area of your image you need the coordinates of the top left corner in
pixels. Ours was 37 and 25. This means 37 pixels from the left edge of the image itself (the X direction), and
25 pixels down from the top of your image (the Y direction). The bottom right of our rectangle was 137
pixels in the X direction and 72 in the Y direction.
For a circle, you need the X and Y values for the centre of your circle. You measure from the left of the whole
image, not the left edge of the circle. For the Y direction, you measure from the top of your image. The third
coordinate you need for a circle is the radius (half the diameter).
For a Polygon, you need X and Y coordinates for each point. Our polygon is a triangle, so has an X and Y
value for each of the three points.
The HREF attribute is the web page a visitor is taken to when an area on the map is clicked. We've typed a #
symbol. This means "don't go anywhere - stay on the same page".
Images and CSS
Before we start, make sure to copy our smaller images over to your york_images images folder, asexplained
earlier. There should be 5 of these in the files you downloaded for this course: (If you haven't got the extra
files yet, the download location is here, under the heading Web Design - New Course :Download the Extra
Files needed for this course (You don't need the downloads for the old course.)
york_minster.jpg
york_minster_2.gif
york_minster_3.gif
york_minster_4.gif
york_minster_5.gif
The smaller ones are all GIF images.
In HTML5, image alignment is done using CSS. However, if you just want basic left, right or centre
alignment then the DIV tag is quite useful. The DIV tag is an all-purpose tag. It's somewhat like the P tag in
that you get a line break after you use it.
To see the DIV tag in action, amend your HTML code to this (we've missed out the DOCTYPE tag at the
top):
Here, we're using a pair of DIV tags: <DIV></DIV>. After a space, we've added the attribute
ALIGN="right". This will apply to anything between the opening and closing DIV tags. For us, this is the
second of the York Minster GIF images.
Save your work and reload the web page in your browser. You should see this:
The other two horizontal values for the ALIGN attribute are left and center (American spelling). Try them out
by deleting "right" and replacing it with first <DIV ALIGN="left"> then <DIV ALIGN="center">. Save your
work and see what the results are in your browser. (If you just want left alignment then you don't need the
DIV tags at all, because left is the default alignment.)
The ALIGN attribute can also be used with the P tag:
<P ALIGN ="center">
</P>
Again, this will apply to anything between the two tags, including text.
Now add some text above and below the two DIV tags:
When you save your work and view the results, you should see this with a left aligned image:
Notice that the DIV tags has put some space above and below itself: you don't need to add a P tag for the text.
But you can if you want - it's always good practice to have your text between P tags.
Wrap text around an image with CSS
A few of the IMG Attributes from previous version of HTML have been deprecated in HTML5. One of the
most-used was the image alignment attributes. You had quite a few to choose from:
Absbottom
Absmiddle
Bottom
Middle
Left
Right
Texttop
Top
So you could do this:
<IMG SRC="york_images/york_minster.jpg" ALIGN="Top">
What you were doing here was wrapping text around an image. You were not aligning an image independent
of text. You were saying, "wrap the text to the top of the image".
In HTML5 text wrapping is done with CSS. Let's see how to get the following style:
As you can see, the image is on the right and the text flows around it. There is also space between the image
and the text.
The first thing to do is to set up a STYLE in the HEAD section of the HTML. Add the highlighted code to
your own HTML:
The style we've set up is called TextWrap. In between the two curly brackets we have this:
float: right;
margin: 10px;
The CSS property we need in order to move the image is called float. The float property can take three
values: left, right and none. To get some space between the image and the text we can use
themargin property. We've set it to 10 pixels. This will give you space around the entire image. If you only
want space on specific sides of the image you can use these:
margin-left
margin-right
margin-top
margin-bottom
So we could have done this:

margin-left: 10px;
margin-bottom: 10px;
That would get us a 10 pixels margin on the left of the image and 10 pixels at the bottom.
To apply the style to the image, you need to add the CLASS attribute to the IMG tag:
<IMG SRC="york_images/york_minster_2.gif" CLASS="TextWrap">
The CLASS attribute doesn't have to go at the end. If you prefer, you can put it after the IMG tag:
<IMG CLASS="TextWrap" SRC="york_images/york_minster_2.gif" >
Just take note of where all the spaces are in the code above.
Amend your own IMG tag and add CLASS="TextWrap" to your own IMG code. Before you try it out, add a
paragraph of text below the image:
<IMG class="TextWrap" SRC="york_images/york_minster_2.gif">
<P>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend,
quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In
fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam
odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus
rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra.
</P>
You can, of course, use your own text, and not just the Lorem ipsum text. Make sure your IMG code is above
the first P tag, however.
Save your work and view the results in your browser.
There is, however, a problem with the above code. Suppose we want a second paragraph of text with another
image floated on the left. We want to do this:
Here, the second image is nicely aligned below and to the left of the first image. The text is in the right place,
too.
To achieve this, you might think of adding a second style and then applying it to the second image. Like this:
In the second style, we've used float: left and added a 10 pixel margin as before. In the second IMG tag,
we've used the new TextWrapLeft class.
However, saving the work and refreshing gives you this in the browser:
In this version, the second image starts two thirds of the way down the first image. The text doesn't flow as
we want it, as well.
The way to correct this is to use a CSS property called clear. This clears any floating elements and gets you
back to the normal, default flow for browsers. The clear property can take four values: left, right, both, none.
Because our first image was floated to the right, we want to clear to the right. We can add this to the second
style:
If our first image had been on the left, we would have used clear: left.
CSS Image Borders
You can have a nice border around your images. There are quite a lot of CSS borders to choose from. But not
all are supported in every browser. For example, the border style inset might work OK with a black border in
Firefox but not Internet Explorer. (Most border styles should work OK, though.)
The border properties you'll use the most are these:
border-style
border-width
border-color
The border style values you can use are these (you can also use outset, hidden, and none, but we won't):
dotted
dashed
solid
double
groove
ridge
inset
Border width comes in three flavours: thin, medium and thick. But you can also specify a width in pixels.
The Border colour can be something like "red" or a hexadecimal/rgb value.
Exercise
Add the following to your TextWrap style:
Here, we've set a solid border with a width of 2 pixels. We've also set a colour.
Save and refresh in your browser to see what it looks like.
Exercise
Try the other border styles mentioned above. Experiment with the width and colour values to see how they
work.
You can add a CSS border to other HTML elements. For example, if you wanted a border around a paragraph
of text, set up a style and add it to the P tag. Like this:
(The padding property above will get you some space between the border and the text.)
The Background CSS Property
HTML elements can have a Background property set. (By elements we mean just about anything between the
two BODY tags.) The BODY tag itself can take the Background property. For example, if you wanted a light
cream page instead of plain white, you can use the background-color property. Like this:
With this style, the whole of the page will be a different colour. That's because we applied it to the BODY tag
itself.
You can also set up a CSS class and just colour a paragraph, with perhaps a border around it:
The result would look like this:
Here, we have a green colour for the text background. The border has 20 pixels of padding between the
border and the text. This kind of styling is good for things like callout boxes, when you want to emphasise a
particular point. You could even have a fancy callout box, if you experiment with the CSS border properties:
The result of the above code would be this:
Notice how we've used three CSS values with one property:
border-top: 2px #159648 dotted;
border-bottom: 2px #159648 dotted;
We've set a border width, then a colour, then a border style. Each value is separated by a space.
Background Images and Background Positions
You can set your backgrounds to be images, if you prefer. The CSS property to use is background-image.
For the value, you specify the location of your image. This goes between round brackets and after the word
url. The image name is surrounded with single quote marks:
BODY {
background-image: url('my_image.gif');
}
The same rules on image referencing you learned earlier apply here. The above code, therefore, references an
image in the same folder as the current web page. You could place your background images in a folder
called backgrounds. The code would then be:
BODY {
background-image: url('backgrounds/my_image.gif');
}
The default for background images is for them to be repeated. For example, if your background image is 100
pixels by 100 pixels this image will be copied until the whole of the screen is filled. This tiling can look
awful. The image below shows this:
The background image we used above was a 200 by 200 gradient. It looks OK going from left to right (the X
direction). But going down (in the Y direction) the tiling looks terrible!
To give you more control of background tiling, the CSS property background-repeat is used. The property
can take four values: repeat, repeat-x, repeat-y, and no-repeat. For our gradient above, we want it to only
tile from left to right, in the X direction. So we need repeat-x:
BODY {
background-image: url('backgrounds/my_image.gif');
background-repeat: repeat-x;
}
Our background would then look like this:
Which is far superior!

Background Position
You can specify a position for background images. For that the CSS property background-position is used.
This property takes the following values:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
But you can also use pixels with X and Y values. It's also possible to use a page percentage. As a practical
example, suppose you wanted a logo in the top right of your page. You could do it like this:
BODY {
background-image: url('backgrounds/logo_brolly.gif');
background-position: top right;
background-repeat: no-repeat;
}
The effect would be this:
Notice that we've used background-repeat with a value of no-repeat, otherwise we'd get a page full of
brollies!
Here are some examples of the other values you can use:
background-position: 300px 100px;
background-position: 80% 0%;
With the pixel values (px) the X direction comes first, followed by the Y direction. A space separates the two.
The same is true of the percentage values: X direction first, then Y direction, a space as the separator.
Try them out for yourself. You'll find the background images in the extra files that came with this course, in
the extra_files/backgrounds folder. (If you haven't got the extra files yet, the download location is here,
under the heading Web Design - New Course : Download the Extra Files needed for this course (You don't
need the downloads for the old course.)
Adding captions to images
Two new elements are the HTML5 tags FIGURE and FIGCAPTION. The first one, FIGURE, is good for
things like images and other graphics, while FIGCAPTION is used to tell people what they are looking at. As
an example, take a look at the following code:
<FIGURE>
<FIGCAPTION>A view of York Minster from a side street.</FIGCAPTION>
</FIGURE>
Here, we've surrounded the IMG code with two FIGURE tags. FIGCAPTION tags are then place under the
image. This is what the above code looks like in a browser:
You can have the FIGCAPTION tags above the image, if you prefer:
<FIGURE>
<FIGCAPTION>A view of York Minster from a side street.</FIGCAPTION>
</FIGURE>
Notice, though, that the FIGURE and FIGCAPTIONS tags don't get formatted for you - you have to do that
yourself with some CSS:
FIGCAPTION {
font-style: italic;
font-variant: small-caps;
}
Because FIGURE and FIGCAPTION are new HTML5 tags, older browsers won't know what they are. So
they get rendered on the page as inline tags. What this means is you won't get an automatic line break for
your figure captions: they will just be side-by-side with the images. The solution is to use the CSS property
display with a value of block. Like this:
FIGURE, FIGCAPTION {
display: block;
font-style: italic;
font-variant: small-caps;
}
The CSS above tells the browser to render FIGURE and FIGCAPTION tags as block-level elements. Because
block level elements are stacked one on top of the other, your caption will then be in the right place - above
or below your images. (You'll learn more about block-level elements in the CSS positioning chapter later in
the course.)
HTML Hyperlinks
Hyperlinks are the backbone of the Web. They provide a means to connect one piece of information (a web
page, for example) to another piece of information. If you have designed two web pages, a hyperlink will
provide a way to jump from one page to the other. If you have one long web page, a hyperlink can be used as
a bookmark to help people jump from one part of the page to another, and back again. This is what a
hyperlink looks like (the blue underlined text):
But let's discuss what happens when the link is clicked on.
What is a Hyperlink?
When you click a hyperlink to another website (assuming you are connected to the internet), this is what
happens.
Your browser gathers the information about the link and sends the request to something called a naming
server. The naming server translates the link text (www.homeandlearn.co.uk, for example) into a series of
numbers. These numbers are called the IP address. These are needed because computers don't speak in a
written language. So the computer needs something it can understand. An IP address is a set of four numbers
separated by full stops (IP version 4). Each set of numbers is between 0 and 255. So when you click the link,
the text address will be translated into an IP address, something like 213.209.156.97.
The IP address will be used to identify a particular computer. If the computer, usually the naming server,
doesn't have the address in its database, it will pass the address further up the naming server food chain. If no
naming server can find the IP address, the failure is passed back down to your browser. At this stage you'll
probably see a 404 error message.
If the address is found, however, the IP address is sent to your browser. The browser then contacts the web
server that has the web page you requested. The page is then sent to your browser. However, that's not the end
because requests are done one at a time. If the web page has images, the browser will see this and then
request that the images be brought back to the web page as well. One image at a time.
Uniform Resource Locator
A uniform resource locator, or URL, is commonly called an address. The URL of our web Page is
http://www.homeandlearn.co.uk/. Let's break this down a bit.
http://
http stands for hypertext transfer protocol. A protocol is a set of standards that one computer uses to speak to
another. There are quite a lot of different protocols. For web communications, the two most common
protocols are hypertext transfer protocol and file transfer protocol (FTP). Theres another layer of
protocols underneath this called Transmission Control Protocol/Internet Protocol (TCP/IP). The http in a web
address is followed by a colon and two forward slashes.
www.homeandlearn.co.uk
This is the Domain Name, the part that gets translated into an IP address. The domain name is split into three
parts, separated by full stops:
www The host name
homeandlearn The enterprise domain name
co.uk The top-level internet domain name. Others are .com (commercial), .org (organisation),
.gov (government)
/
If no html page is specified, the forward slash tells the server to look for the default web page. This is usually
index.html. The index.html page is one that you have created. Thats why naming the first page of your
internet site index.html is so important.
The index.html Page
Your web site will probably have lots of individual web pages. Suppose somebody comes to your site for the
first time. How does the browser know which of your many pages to load first? After all, your visitor may
well have just typed this in the address bar:
www.homeandlearn.co.uk
The answer to the question is - "default page". When you buy web space with a web hosting company, you
are given a folder to upload all your files. The hosting company will have already specified a default web
page for that folder. This is usually index.html. So if somebody types the above address, the browser will
look for the default page. You don't have to type this:
www.homeandlearn.co.uk/index.html
The browser already knows to serve up the default page. If you haven't uploaded a page called index.html
then your visitors may well get an error page when going to your site. So it's important that you have a web
page called index.html, as this is the first page on your site your visitors will see when typing your domain
name into the browser's address bar.
Linking to other Web Pages
Linking in HTML code is done with the anchor tag, the <A> tag. The letter "A" in the tag is then followed by
an attribute. For a link to another web page, the "A" is followed by "HREF". To set a bookmark in the same
page, the "A" is followed by "NAME", which you'll see how to do later.
Take a look at this example, which is a link to the popular search engine Google:
<A HREF = "http://www.google.com/">Google Search Engine</A>
Notice where all the angle brackets (< >) are in the link. After the first one, we have the "A" part of the tag.
Then we have the HREF part, signifying a link to another web page. After that comes an equals sign (=).
After the equals sign comes the address of the web page itself. The address is case sensitive, so if there is a
capital letter in the address, make sure to include it. This addresswww.google.com is different from this
address www.gOOgle.com.
After the address comes the right angle bracket ( > ). Next comes the text that people see, the text you want
them to click on. To close an anchor link, you use the end anchor tag. Which is this: </A>
But let's get some practical work done.
Open up your template text file. Click File > Save As from the menu in Notepad (or whatever text editor you
are using). When the Save As dialogue box appears navigate to your HTML folder:
So we are going to save the new web page outside of the pages folder.
In the file name box, type index.html. Make sure the Save As Type area says All Files, if you use Windows.
Before you click the Save button your Explorer window should look like this:
When the Save button is clicked, you should then have a web page called index.html in the HTML folder:
What we're going to do is to place a hyperlink on our index page. When this hyperlink is clicked we'll tell the
browser to load a page called about.html. We'll save this new about page in our pages folder.
So, use your template text file to create a new web page. When you save the page, double click the pages
folder to move inside it. In the file name box, type about.html. Then save your page:
So, we have a web page in the HTML folder and a web page in the pages folder. We now need to link them
together.
Open up you code for the index.html page. Insert the following line between the two BODY tags:
<A HREF="pages/about.html">About this site</A>
Your code should look like this (we've added a TITLE):
Save your work and load the page in your browser. You should see this:
And that's a hyperlink! Notice that the only thing on the page viewable to the visitor is the text "About this
site". The code we wrote turns it from normal text into a link that people can click on. The code itself was
this:
<A HREF="pages/about.html">About this site</A>
So to turn text into a link you start with an angle bracket followed by the letter A. After a space, type HREF.
An equal sign comes next. The page you want to link to goes between quotation marks. But notice we started
with the folder name: pages/about.html. This says, "Look for a page calledabout.html. This page is in the
pages folder".
Type a right-pointing angle bracket to end the first part of the link code. The text you want people to see
comes next "About this site". To wrap it all up, you need the closing hyperlinks tag : </A>.
When you click your link, you should find a blank page loads in the browser. If you look at the address bar,
you should see it says about.html on the end. You have successfully linked to a new page!
To get back to the index page, you need another link.
Open up your code for the about.html page. For the about page, we need to construct the correct HREF. We
can't do this:
<A HREF="pages/index.html">Go to the Home Page</A>
The above HREF is pointing to an index page in the pages folder. But our index page is not in this folder. It is
in the HTML folder, which is one folder up from pages. Just like we did for images, we can use two dots and
a forward slash:
<A HREF="../index.html">
Two dots and a forward slash, remember, mean "Go up one folder".
So insert the following code in your about.html page:
<A HREF="../index.html">Go to the Home Page</A>
Save your work and refresh the page in your browser. Click your hyperlink on the about.html page. You
should find that the index page will load. When you click the link on the index page, the about page will load.
Exercise
Create a third web page. Save it in your pages folder and call it contact.html. Create a link from
theindex page to this new page. Create a link back from the contact page to the index page.
When you complete the above exercise, you will have two links on the index page. They might look like this:
You can use the HTML techniques you've learned so far to improve the look of these links. For example, you
may want the links going vertically instead of horizontally. In which case, surround you hyperlinks code with
P tags. Here's the code for two vertical links on the index page:
The result would look like this:
However, don't worry too much about the presentation for now as you'll see how to improve navigation links
with CSS and HTML Lists a little later. But try this exercise.
Exercise
Have two links on each of your three pages. The about.html page should have links that lead to the index
page and the contact page. The conact.html page should have links to the index page and the about page.
The tricky part about the exercise above is getting the HREF part right. Just remember that when the html
pages are in the same folder you only need to type the name of the page you're linking to. So this:
HREF="page_name_here.html"
instead of this:
HREF="../page_name_here.html"
or this:
HREF="pages/page_name_here.html"
You're just using the same file referencing rules that you learned in the images section.
The Target Attribute
Just like the IMG tag, the A HREF tag can take attributes. One of these is called TARGET. The TARGET
attribute is used to tell the browser where you want to open the link. For example, you can tell the browser to
open the linked page in a new browser window. There are several values to choose from:
_blank
_parent
_self
_top
However, the only really useful one in HTML version 5 is BLANK. The default is SELF, so you don't need to
specify a TARGET attribute most of the time. If you want the link to open up in a new window, the code is
this:
<A HREF="pages/about.html" TARGET="_blank">About this site</A>
Notice the underscore character before the word "blank". Miss this out and your TARGET attribute won't
work.
The other two TARGET attributes are for when your website uses something called FRAMES. Frames are
going out of use, though, and are not recommended for HTML5.
Hyperlink Colours
You can set up your own colours for hyperlinks. The default is whatever the user has set in the browser,
usually blue, with a blue underline. But you don't have to have blue. The A tag comes with three attributes
that can help you to override the browser default:
LINK
Set the colour of a link before it has been clicked on
ALINK
Set the colour of a link when the link is clicked on
VLINK
Set the colour of a link after it has been clicked on
The A and the V above stand for Active and Visited. You use them like this:
<A HREF="pages/about.html" LINK="red">About this site</A>
So you select the attribute you want to use, and then choose a colour for your links. This can also be a
hexadecimal or RGB value.
Try them out for yourself with the links in any of your three web pages. Bear in mind, though, that people
expect a hyperlink to be blue with an underline - it's a visual clue that you're linking to some extra content.
Also, link colours used this way are now out of fashion. It's better to use CSS styles for your hyperlinks.
You'll see how to do this in a later lesson.
Other Types of Hyperlinks
Bookmark Hyperlinks
A bookmark link (commonly called an Anchor link) is useful when your web page is rather long, and users
have to scroll down to read it all. You can insert Bookmark links to aid navigation. When users click on your
links, they will jump to different section of your web pages. You can even use a bookmark link to jump to a
different web page, and back to the same spot where they left.
There are two parts to the bookmark: The clickable link itself, and the place where you want to jump to.
The place where you want to jump to, the destination for the click, again uses the <A> tag. This time, the
added attribute is not HREF but ID (it used to be NAME in previous versions of HTML). You then surround
some text or image with the tag. Like this:
<A ID = "section1">In</a> this first section, we'll discuss Links
We've surrounded the word "In" with our destination bookmark. The name of the ID itself, the part after the
equal sign, can be anything you like. But you'll use that ID in the Link part of the bookmark. Here's the actual
link, the part people see and click on.
<A HREF = "#section1">Click here for Section One</A>
Note that we're back to the HREF attribute. This time, after the equal sign, there is a hash/pound symbol ( # ).
After the hash symbol you type the ID you used in step one. You then type the text that people will click on.
Finally, you close the tag with </A>.
You can add a bookmark to another web page, if you like. In which case, the link would be this:
<A HREF = "page2.html#section2">Click here for Section Two</A>
Note where the hash symbol is now - after the name of a web page. The ID of the destination bookmark
follows the hash symbol. There is no space between the two.
The destination link itself would then go somewhere on page2.html. If you had another bookmark on page
two, you could have the user jump back to the same spot where they left.
Email Links
An email link can be added to web pages, too. When people click on this email link, their Email software will
start up. In the "To" box of the email software, your email address will appear. The code for an email link is
this:
<A HREF = "MailTo:online@homeandlearn.co.uk">Email us</A>
Notice that the link is the HREF type. After the equals sign you have this:
Mailto:
Mailto is all one word, and is followed by a colon. Then you put your email address after the colon, without
typing a space. You then type a right angle bracket ( > ) before typing the text you want people to click on to
send you an email. The Anchor closing tag </A> finishes it all off.
And that's it for email address - quite simple!
Try the email code out in a web page, save your work and see what happens when you view the web page and
click the email link.
There is, however, a big danger to using an email link in your web pages: spammers have written
programmes called "bots" to crawl the internet looking for MailTo. If the "bot" finds it, your email address
will be harvested. In short, it's better not to use the email tag. Much better is to use scripting for your email
addresses. For example, he's some JavaScript that does the job better, as the spammers' automated "bots" can't
read it:
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
document.write("<P></P><Center><H1>Contact Me</H1></Center>")
document.write("<P align = Center>Click below to send me an email</P>")
var atSign = "@"
var firstPart = "onl"
var ispP1 = "ine"
var ispP2 = "homeand"
var ispP3 = "learn.co.uk"
var wholeAddress = firstPart + ispP1 + atSign + ispP2 + ispP3
var mToPart1 = "mai"
var mToPart2 = "lto:"
var mt = mToPart1 + mToPart2
var hrefP1 = "<a href= " + mt + wholeAddress + ">Click here to email
me</a>"
document.write("<Center>" + hrefP1 + "</Center>")
</SCRIPT>
You don't need to be able to understand all of the above code. But notice how the email address is chopped
into pieces with these lines:
var atSign = "@"

var firstPart = "onl"
var ispP1 = "ine"
var ispP2 = "homeand"
var ispP3 = "learn.co.uk"
The address is them reassembled later and written out.
Links to other files (Word documents, ZIP files, PDFs, etc)

You can place a link on your web page to files other than images and web pages. A link can be made to all
sorts of different file types. For example, if you have PDF file that you want to share with others, the code
would be this:
<A HREF = "MyPDF.pdf">Download my PDF</A>
When the link is clicked on, the browser will see the file extension .pdf and try to open it up. You can have
the document open up in a new window by adding TARGET="_blank" to the A HREF code, just like you did
above.
You don't have to add anything special to have people download files like PDFs, or Word documents, or
zipped files. Just a normal link with the name of the file after the HREF part will do it.
Images as Links
You can turn images into hyperlinks. The only thing you need to do is surround your image with an A HREF
tag. Like this:
<A HREF="pages/about.html">
<IMG SRC="nav_icon.gif"> About this site
</A>
The result would be this, in the Firefox web browser:
However, Internet Explorer will display the icon like this:
The icons now have a blue rectangle around them. This is because they are hyperlinks first and images
second. To get rid of the blue rectangle you can add this to the IMG tag:
<A HREF="pages/about.html">
<IMG SRC="nav_icon.gif" BORDER="0"> About this site
</A>
So we've set the BORDER attribute to zero. This gets rid of the blue rectangle in Internet Explorer.
CSS and Hyperlinks
If you're formatting a hyperlink, you can place all the formatting in a CSS Style. In the style below, we've
specified an Arial font for all of our links:
This style will apply to all the hyperlinks on the page. You don't need to add any CLASS attributes to the A
HREF tag because we're using the HTML selector A.
If you want to set up colours for your links, you can do it like this:
A:link {
color: red;
}
Notice that a colon follows the A this time, then the word "link". In between the curly brackets we've set the
colour to red.
If you want to use the ALINK attribute, it's this:
A:active {
color: green;
}
The VLINK is this:
A:visited {
color: blue;
}
One more style that you may be interested in is this:
A:hover {
color: red;
}
With the above style, whenever you move your mouse over a hyperlink the colour will change to red.
When we used the colon above we were using something called a Pseudo Class. These are just extensions to
the normal CSS class rules. Another way to extend classes is by inserting your own CLASS names between
the HTML selector and the property you want to change. For example, examine the following code:
A.MyHoverColor:hover {
color: red;
}
To use the above code, you apply a CLASS attribute to your hyperlink:
<A HREF="pages/about.html" CLASS=" MyHoverColor ">About this site</A>
Now, only this link will change colour when you move your mouse over it, the rest will behave normally.
You don't need to add a value at the end (the :hover bit, for example). Suppose you want the first link to be an
Arial font with no underline, and the second one to be 20 pixel Verdana. You could set up two Pseudo
Classes. Like this:
You'd then apply them like this:

<A HREF="pages/about.html" CLASS="FirstFont">About this site</A>
<A HREF="pages/contact.html" CLASS="SecondFont">Contact Us</A>
Notice how we've switched off the hyperlink's underline:
text-decoration: none;
Try out the above code and see the results in your browser. Try using a different hover colour, as well. (Make
sure the hover code comes last, as some browsers will ignore it, otherwise.)
But extending your Classes this way enables you to have more control over most of the elements on your
page, and not just hyperlinks.
External Stylesheets
The CSS you have been using so far has been placed in the HEAD section of your HTML code. A better
place to put all your CSS, however, is in an external file. (By this, we mean a separate file.)
In a new text file type the following (click File > New in Notepad, if you're using this):
This is going to be our external stylesheet. It has just one Class set up, a Pseudo Class for the hover style.
Underlines are switched off when the mouse is over the link, and the text colour turns red.
The main thing to notice here is that we don't need any opening and closing STYLE tags: you just type your
selectors and curly brackets.
Click File > Save in Notepad to save your work. When the dialogue box appears, navigate to your HTML
folder and create a new folder called css. Move inside of this folder. In the File Name box, typestyles.css.
Make sure that Save as type read All Files, if you're using Windows. After you have saved your new
document, your explorer window should look like this:
When you go one folder up to your HTML folder you should have this:
So that a web page can see our new external stylesheet, you need to add some code in the HEAD section.
Open up your about.html code. Add the following in the HEAD section:
<LINK REL = Stylesheet TYPE ="text/css" HREF ="../css/styles.css">
Your code should look like this:
To link to an external stylesheet, then, you start with the word LINK, after a left-pointy bracket. The other
three attributes are these:
REL=
TYPE=
HREF=
The REL stands for relationship, meaning the relationship between this about.html file and the document
you're going to be pointing to. REL can take many other values, but only Stylesheet is commonly used.
The TYPE refers to something called a MIME type. For stylesheets, you need the value "text/css".
The final attribute is HREF. This is the path to your CSS file. It is used in exactly the same way as for
hyperlinks. Note the path for us:
HREF ="../css/styles.css"
The link is in the about.html page. The location of the stylesheet is one folder up, hence the two dots and the
forward slash, followed by the folder name css. If our stylesheet was in the same folder as the about.html
page we could have just done this:
HREF ="styles.css"
But save your work and load up your about.html page in your browser. Move your mouse over your
hyperlink. If all went well then it should turn red, and the underline will disappear. If it doesn't, make sure
your file referencing is OK, and that you have your stylesheet in the right place.
Placing all your CSS code in an external stylesheets is much better than placing it in a particular web page, as
you can just make changes to the external stylesheet and it will affect the whole site. For example, if your H1
headings are all blue, it could take you many hours of work to change them to red, if you have placed CSS
code in all the web pages. With an external stylesheet, you only have to make one change and your site is
updated! So if you can, always use external stylesheets.
Using HTML Lists to aid Navigation
You have already seen how to create HTML lists. However, one of the most popular uses of the HTML list is
for navigation. You'll see how this works now. What we'll do is to create this type of navigation list:
When the mouse is over one of the above links, you'll see this:
The above navigation list starts out as a simple unordered list of hyperlinks:
You then use CSS to change the styling of the HTML list. Let's see how.
Open up the code for your about.html page. At the top of the page, change your stylesheet link to this:
<LINK REL=Stylesheet TYPE ="text/css" HREF="../css/nav_list.css">
We're going to be creating a stylesheet called nav_list.css, and the above code places a link to it in the
HTML.
To create the unordered list, change your code to the following:
What we have here is an unordered list with six list items. Each list item is a hyperlink. We've only got three
pages, so the HREF parts have been copied and pasted. Notice that each hyperlink is placed between two LI
tags.
The other thing to notice is the DIV tags surrounding the unordered list. We'll apply a CLASS to these DIV
tags. This will affect anything between them. As an example, take a look at the following DIV with a style
applied:
Here's what the above code will look like in a browser:
The only thing we've done here is to apply a border around some text. Notice that the border stretches right
across the page. We can apply some padding, a background colour, and float the DIV to the left:
When we do, it will look like this:
Because we floated the DIV left, the border has now shrunk. The size is the width of all the text plus the 30
pixel padding we specified.
The thing to bear in mind here is that anything between the two DIV tags is affected.
Back to lists, then. We can apply some styling to the unordered list that sits between our two DIV tags.
Create a new CSS file. Save it to your CSS folder and call it nav_list.css. Now add the following CSS to your
new file:
.navigation {
float: left;
font-family: Geneva, Arial;
border: 1px solid #000000;
}
Don't forget the full stop (period) at the start of navigation.
Go back to your about.html page. Add the CLASS information to the DIV tag (in bold below):
Save your work and reload your about.html page in your browser. Your list of hyperlinks should look like
this:
We have a border around the links, and also a change of font. The DIV has also been floated to the left.
Back to the CSS file. Add this new rule below the navigation one:
.navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
Your text file should look like this:
We're extending the navigation CLASS with this line:

.navigation ul {
By doing this, we can just home in on the UL part of the list. What we're saying is, "look for the navigation
class, and then the UL item. Apply the style between curly brackets to just this part".
The style we're applying is to have no margin and no padding. But the important part is this line:
list-style-type: none;
The list style is the bullets. We're switching them off altogether with the value none. Other values for the liststyle-type property are:
Asterisks
box
check
circle
diamond
disc
decimal
none
square
As you can see, there are lots to choose from (there's even more than shown here). However, not all are
supported in every browser.
Save your work in your CSS file and refresh the web page in your browser. The result is this:
The black border is completely surrounding the hyperlinks now. And the bullets have disappeared.
We can continue the styling of our list by specifying only the A parts of the list items. Add the following rule
to your CSS code:
.navigation li a {
}
Again, we're extending the navigation class. This time, we're drilling down even further, picking out the LI
tag then the A tag, with a space separating the three elements. (This is not case sensitive.)
Between the two curly brackets, add the following CSS properties and values:
display: block;
padding: 2px;
width: 180px;
color: #0000FF;
background-color: #D0DBF0;
text-decoration: none;
Your CSS code should look like ours below:
We'll get to the display: block part soon. But the other five properties set the padding for the hyperlinks, a
width of 180 pixels, a text colour and a background colour behind the text. The text-decoration switches off
the underlines for hyperlinks.
Save your work and refresh your browser. Your navigation links will then look like this:
With these new styles applied, we have a background colour with underlines switched off. Notice that there is
more space between each link.
Exercise
Play around with the values for your new CSS properties. Try changing the padding and the width to see what
happens. Experiment with different colours.
Exercise
In the first CSS rule, we have floated the DIV to the left. Change this so that it floats to the right. Change it
back when you're done.
To get the background colour to change when the mouse is over a hyperlink, we need to just home in on the
hover property. You do it like this:
.navigation li a:hover {
background-color: #00DBF0;
}
So we still have .navigation li a. After the a, however, we have a colon followed by the CSS property hover.
In between the curly brackets of this new rule, we've selected a different colour.
Add the new rule to your own CSS code. Save your work and refresh in the browser.
If you want to, you could also change the colour of the link when someone has clicked on them:
.navigation li a:visited {
background-color: red;
}
The only thing different is the word visited instead of hover.
Here's what your complete CSS code should look like, though:
And here's a reminder of what your browser should look like when you move your mouse over a link:
Horizontal Lists
Your navigation links don't have to be vertical. You can have horizontal links as well. The way this works is
by changing the display property from block to inline. The property block means to set out the elements one
top of the other. The property inline means keep them on the same line.
Examine the following CSS code:
It's not that different from the code you have.

With your nav_list.css open, click File > Save As. Change the file name to nav_list_horizontal.css. In the
HTML for your about.html web page, change the file reference for your CSS LINK tag:
<LINK REL=Stylesheet TYPE ="text/css" HREF="../css/nav_list_horizontal.css">
Your about page will now be getting its CSS styles from the new nav_list_horizontal page.
Exercise
Compare your old code to the new CSS code above. Most of it is the same. But change the lines that aren't.
If you complete this exercise, your browser should look like this:
Our list is now going from left to right, at the top of the page. This is all the result of display: inline, plus one
or two more tweaks.
We'll leave HTML lists and move on. For more navigation lists, check out this site:
http://css.maxdesign.com.au/listamatic/
There's some very creative use of navigation lists at the above site. Well worth a visit!
CSS Positioning - the box model
In this section, you'll learn how to lay out your web pages using CSS positioning. Before doing so, however,
it helps to learn about something called the CSS Box Model.
The CSS Box Model

An HTML page is regarded as a series of boxes stacked one on top of the other. These boxes can hold text in
paragraphs, images, form objects, etc. Each box is divided up into four areas: a margin, a border, some
padding, and finally the content itself:
The margin is transparent and goes around the border. You can't set a colour for margins. It can
be big, as in the image above, or set to zero and snuggle right up against the border.
The border goes around the padding and the content. It can take a colour, a size, and a border
type (dotted, solid, etc).
The padding is the space between the content and the border. It takes the same colour as the
background for the entire box.
The content is things like text and images - the whole point of the box.
All four areas can have their sizes set. In the code below, we've set up two paragraphs of text:
All we're doing is setting a height and width for two paragraphs of text. We're then setting the margin, the
border, and the padding. (We've also added a colour so you can see what it looks like in the browser.) Here's
the result:
Notice the size of the margins surrounding the border. The first margin is 30 pixels on all four sides. You can
set individual sides, if you want:
margin-left: 10px;
margin-right: 20px;
margin-top: 30px;
By just using margin, though, you're setting the margin for all four sides. The same is true for border and
padding: you can set all four at once, or just set individual values by adding top, right, bottom, or left.
To get the total size of the box, you add up all four parts: margin, border, padding, content. For example, in
the code above we have a width of 300 pixels for the first paragraph (the width refers to the content area).
The margin is 30 pixels on each side, giving a total margin width of 60 pixels. The border is 1 pixel on the
left and 1 pixel on the right. The padding is 20 pixels on the left and 20 pixels on the right. The total width of
the entire box is therefore:
Left margin 30
Right margin 30
Left border 1
Right border 1
Left padding 20
Right padding 20
Content width 300
Total box width = 402 pixels
So although we specified a width value of 300 pixels, the width of the box around the entire paragraph was
actually 402 pixels. You need to bear this in mind when setting values like this, especially when you float
elements left and right. For example, if you have a navigation area floated left then it's a good idea to set the
width value, and all of the others values: just remember to add up all the different sizes when calculating the
overall size.
Adding Comments to CSS Code
When you're experimenting with the CSS, you can use comments instead of replacing or deleting code.
Examine the following:
/* background-color: blue; */
background-image: url(../images/gradient_1.jpg);
The comment symbols are these:
/* */
The new symbols will turn any code into comments, meaning the browser will ignore the line. You can
comment out more lines by moving the left or right comment symbols. Like this:
In the code above, the last three lines have been commented out, so they will be ignored.
Comments are quite useful for reminding yourself what a particular rule does. For example:
Try to add comments wherever possible. When you come back to your code a few weeks down the line, it
will make more sense if you've added comments.
Positioning Elements with CSS
In HTML, elements like paragraphs, images, etc, are stacked one on top of the other, rather like boxes in a
warehouse. The image below is taken from a browser, and shows three paragraphs stacked one on top of the
other. (We've given each image a border so that you can see them better. Notice that the paragraphs stretch all
the way across the page, even though we only have a few words of text in each.)
Here's the HTML and CSS code for the above page:
You can move your elements around the page, however, with something called CSS positioning. The default
behaviour is said to be in a Static Position, like the paragraphs above - in other words, they don't move.
But you can move elements out of the normal, Static flow seen above. The first method we'll look at is called
Relative positioning.
Relative Positioning
Suppose we want to move paragraph two down the page a little. Like this:
The above effect is done using the CSS instruction position: relative. You then use the properties top,
bottom, left, and right. You can use all four at once, or just one, two, or three of them. Here's the CSS code
that moves paragraph two down the page:
P.rel {
border: 1px solid green;
position: relative;
top: 70px;
}
And here's the HTML code:

<P class="border1">Paragraph One<P>
<P class="rel">Paragraph Two<P>
<P class="border1">Paragraph Three<P>
So each paragraph has a CSS Class associated with it. The second paragraph has Class="rel". The rel class
uses position: relative, followed by the top property with a value of 70 pixels. What this does is to move the
paragraph down 70 pixels, but relative to where it was. So it's not 70 pixels down from the top of the browser
window. It's 70 pixels down from where you first positioned it: the top position of 0.
Another thing to notice here is that using position relative moves the paragraph out of its normal flow but
leaves a gap where it used to be.
Position Absolute
Another way to position elements on the page is with absolute positioning. You can use position: absolute to
place elements anywhere on the page.
Absolute positioning removes an element out of the normal, static flow. Other elements will move up to fill
its place. The element you have just removed from the normal flow is now like a free-standing element. (The
borders of the removed element shrink to fit the contents. If you want more space you have to specify it with
width and height properties.)
Items that are given an absolute position are placed in relation to their parent element. If no parent element
exists then the default is the HTML tag. To illustrate what this means, take a look at the image below:
Here, we've placed a paragraph of text at the top, followed by two images, one below the other.
Now take a look at the HTML code:
The paragraph of text has an inline style setting its border to green. We then have two sets of DIV tags. The
red ones are the outer DIV tags. Think of these as the parent tags. Inside the parent DIV tags are two inner
DIV tags, the blue ones. For each set of DIV tags we have an image.
However, if we were to set the blue rectangle to have a top position of 0, what do you think would happen?
Where would it move to? Well, take a look at the CSS code with just position: absolute:
The first thing we've done is to set values for the HTML and BODY tags. We've set the margin to 10 pixels
and the padding to 0. This is just so that you can see the images more clearly.
For the relative positioning, we've commented out position: relative. You'll see why in a moment. For the
absolute position, we've commented out the top value of zero. The question is, if we take out the comments
for top: 0px where will the blue rectangle end up? Here's what happens in the browser when we do just that:
The blue rectangle jumps right to the top of the browser window. The reason is does so is that its parent
element, the outer DIV, has no position set. In which case, the position: absolute of the inner DIV tags uses
the HTML tag as a parent. So the browser window is now top: 0px.
When we take the comments out for position: relative, however, here's what happens:
The top: 0px position is now using the outer DIV as a parent. The blue rectangle can't move up any further
than this, so it covers up the pink rectangle - it's placed on top of it.
This is all quite complicated. So just bear in mind that when using absolute positioning, you have to take the
parent element into account. If you don't set a parent element that uses the position CSS property then the
HTML tag is used.
Fixed Position
The final CSS position is position: fixed. This is similar to position: absolute in that you use it when you
want to take an element out of the normal static flow. For example, you could have a side bar on the left of
your page using position: fixed. The difference is that the position properties (top, bottom, left, right) take
the top left of the browser window as their default starting position. Also, when you scroll down the page the
fixed element, the side bar for example, will stay in place. So if you have fixed sidebar in the top left of your
page it will stay there when the users scrolls to the bottom of your page.
Z-index
When you use the position properties you also have access to something called the z-index. This is just the
stacking order for elements. So you could have images stacked one on top of the other, each one offset a few
pixels. Here are our two rectangle images with a z-index set. The pink one is on top, while the blue one is
behind it and offset using the top and left properties:
Here's the CSS code that was used:
The default z-index is called auto and has a value of 0. If you want to position something behind an element,
you can use a negative number. If you want to position something in front of other element you can use a
positive number. If you only have two elements you can just use 0 and -1. In fact, you can miss out the zindex: 0 altogether, as this will be the default position.
Try not to worry too much about z-index - it's rare that you need it.
One final thing about position properties before we move on: you can use negative number for your top,
bottom, left and right values. For example, here's our two rectangles moved off the page to the left:
This is done simply by setting a left value with a negative number:

#pos_relative {
position: relative;
left: -50px;
z-index: 0;
}
Exercise
Experiment with negative values for the other position properties to see what happens.
The CSS Float Property
Another way to manipulate the normal, static flow of your web pages is with the float property. You have
already used this property in a previous section to wrap text around images. But you can also use the float
property to have columns of text side by side. You can even use float to have navigations bars on the left and
right of your pages. (We'll use float in our page layouts, which are coming up soon.)
As an example of column floating, have a look at the image below, taken from a browser:
So we have two columns of text side-by-side. The first one has a grey background so you can see the column
better. It also has a 10 pixel margin. Here's the CSS:
And here's the HTML:
For the HTML, we've just used the DIV tags for two paragraphs of text. The first paragraph has the CSS class
applied to it.
Notice two things about the CSS code, though. The first thing to notice is that we have used float: left. The
second thing to notice is that we have set a width for the column of 200 pixels. If you don't set a width then
any text you have for your column will simply flow from left to right.
There is a problem with our approach, however. Have a look at the columns in the browser again. Although
they look nicely side-by-side, this is only because we manipulated the browser. We deliberately made it
smaller so that the text resized itself. If we make the browser bigger, here's what happens:
The text in the second column will stretch from left to right to fill the available space.
To stop it doing that, you can add the class to the second DIV, as well:
Now both paragraphs of text are floated left, and have a width of 200 pixels. The browser can now be resized
and the two columns will stay in place.
To start text on a new line underneath the columns, you can use the clear property in CSS, remember:
.clear {
clear: left;
}
This clears the float value and returns you to the normal, static flow. (You can replace left with right or both
depending on your needs.)
A Simple One Column Layout with HTML5
The easiest layout to implement with CSS is a one column layout. This is just a series of boxes stacked one
on top of the other. We'll have a Header area, a horizontal navigation menu, an area for the contents of the
page, and finally a Footer. The layout we'll design looks like this:
As you can see, it's fairly straightforward: Header area at the top, navigation bar, page content, then Footer.
The first thing to do is the HTML. The CSS can then be added on top of this.
Have a look in the templates folder that you download with this course (extra_files/templates). (If you haven't
got the extra files yet, the download location is here, under the heading Web Design - New
Course : Download the Extra Files needed for this course (You don't need the downloads for the old course.)
Open up the template called template_one_col.txt. You should see the following HTML:
There are quite a few tags here that you haven't met before. These tags are new to HTML5, and are not
present in previous versions. They are:
HEADER
NAV
SECTION
ARTICLE
FOOTER
In previous versions of HTML you just used the DIV tags in place of the ones above. The new ones are called
Semantic tags. They don't actually do anything by themselves - they are just there to make things clearer for
you (and perhaps search engines). If you use DIV tags for everything, then page code can get very messy and
confusing.
Let's have a look at our code, though.
Starting at the top, we have a HEADER tag:
<HEADER>
<H1>Top Header</H1>
</HEADER>
The HEADER tag is not just at the top of the page. If you look further down the page you can see that we
have another pair of them:
<HEADER>
<H2>Section Title</H2>
</HEADER>
The HEADER tag should be used when you want a nice heading for different sections of your page. Our first
HEADER is for some H1 text. Since it's at the very top of our page, however, we could replace the H1 tags
with, say, an image to use as a site banner.
Our second HEADER is surrounding a pair of H2 tags. This could be the title of an article that we want
people to click on.
After the top HEADER tags we have a pair of NAV tags. These are surrounding an unordered list that we
want to use as a navigation bar. Previously, we had DIV tags surrounding our unordered list. Now, it's much
clearer what this list is being used for.
The next Semantic tag is SECTION. We have two pairs of these. The first pair are at the top and bottom of
the page:
These SECTIONS tags hold the main content of the site.

In between the first pair of SECTION tags we have an ARTICLE tag. As the name suggests, these are used
for when you want to separate an article of text from the rest of your site. You may well have more than one
article, in which case you can use another pair of ARTICLE tags. Like this, for example:
Here, we have two articles on the page. Each pair of ARTICLE tags has a HEADER and a SECTION. The
HEADER tags have been turned into hyperlinks, while the SECTION tags are used for the headline of the
story.
Save your template as a HTML file. Save it in a new folder called layouts. For the file name,
typelayout_one_col.html.
When you load the page in a browser, you'll see this:
Because we used only HTML tags the page looks quite basic.
One last thing to do before we get to the CSS. Add the following ID attributes to your HTML code:
So there are five ID attributes to add, highlighted in bold above. (Incidentally, these can be CLASS selectors
rather than ID selectors, if you prefer. Using ID means that you can refer to them in a scripting language like
JavaScript, as well as using CSS.)
Styling a one column layout
<< Continued from previous section

Rather than you having to type out all the CSS for this template, have a look in the extra_files/cssfolder that
came with this course. (If you haven't got the extra files yet, the download location is here, under the
heading Web Design - New Course : Download the Extra Files needed for this course(You don't need the
downloads for the old course.)
Locate the file called one_col_style.css. Copy it to your own CSS folder. Then, in the HEAD section of your
HTML, insert the following line:
<LINK REL=Stylesheet TYPE ="text/css" HREF="../css/one_col_style.css">
This is, of course, a link to the stylesheet we're going to be using.
Once you have inserted the link, save your work and view the results in your browser. The plain HTML page
should transform into this: (The colours we have chosen are simply so you can see the various sections - they
are a bit garish!)
If it's still a plain HTML page, make sure your HREF reference is correct in the LINK code above. Did you
copy our file to the correct location?
We'll now go through the CSS and see how it works. So open up the CSS code and take a look at it.
The first thing to examine is this:
header, footer, section, nav, article {

display: block;
}
We're setting up a rule that will apply to all five items in out HTML code. Notice how all five items are
separated by commas. You can do this kind of thing for other CSS selectors as well. For example, if you
wanted to reset the CSS to browser defaults, you can do this:
body, h1, h2, h3, p, ul, li, {
border:0;
margin:0;
padding:0;
}
The reason you'd want to reset like this is because different browser have different default values. You'd then
set your own values that override the defaults. For more information on resetting, see these pages:
http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
http://meyerweb.com/eric/tools/css/reset/
http://html5doctor.com/html-5-reset-stylesheet/
But in our code, we're just making sure that older browsers deal with our newer HTML5 elements correctly.
Next in our CSS code, we set up some general rules for everything between the two BODY tags:
BODY {
margin: 0 auto;
width: 940px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
The first line deals with the margins, setting them to zero, Notice the auto part, though. What this does is to
centre everything on the page.
Exercise
Delete auto from your CSS code in the BODY selector. Save and refresh the page in your browser. Put auto
back in when you're finished.
We're doing three other things for the BODY tag: setting a width of 940 pixels, setting the font family, and
setting the font size. Play around with these values and see what happens.
Fixed Sizing versus Liquid Sizing
We've specified a fixed size of 940 pixels in our code. There is a problem with this, however. Suppose you
want your site to be viewed not only on a monitor attached to a computer but also on a mobile phone. The
fixed size means it will be too wide on the phone. The alternative is fluid sizing.
With fluid sizing, the values are not in pixels but in percentages. For example, instead of specifying a value
of 940 pixels, we could have written something like 80%. If you are targeting more than one platform then go
for percentages for your values, especially for widths (heights can stay on pixels, though).
Styling the HTML5 Tags
Styling the HTML5 HEADER Tags

The styling for our first HEADER tag is this:
HEADER#Banner {
width: 940px;
height: 100px;
margin: 5px auto;
text-align: center;
background-color: blue;
}
Notice the first line:
HEADER#Banner
This references the Banner ID in the HEADER tag. A hash/pound symbol separates the two, with no spaces
between. You can miss out the HEADER at the start of the line, though, and the code would still work.
Leaving it in, however, makes it more readable.
You'll also see that the HEADER has a background colour set:
background-color: blue;
Play around with the colour values, here. You can also experiment with images as your top banner. Just
replace color with image. The code is this:
background-image: url(../backgrounds/gradient_1.jpg);
In the code above we have a path to our image file between the round brackets of background-image. The
image itself is the same width and height as the ones in HEADER#Banner
The CSS code for the second pair of HEADER tags was this:
HEADER#Header_Article_1 {
width: 900px;
height: 60px;
background-color: #DCDCDC;
}
This second HEADER has a different ID than the first one. It's more of a subheading, really, so needs to be
styled differently.
Styling the HTML5 FOOTER Tags

For the FOOTER area, the code is similar to the HEADER:
FOOTER {
width: 940px;
height: 40px;
margin: 5px auto;
text-align: center;
background-color: yellow;
}
Notice that with both the HEADER and the FOOTER we don't have to apply an ID or CLASS attribute
they act just like a HTML selector. We only add an ID or CLASS when we want to distinguish one HEADER
from another, or one SECTION from another.
Footers are a good place to put any extra information about your site: links to site maps, return policies,
copyright info, etc.
The Nav Bar

You've met the NAV bar code before in the last section - it's just a HTML list with some CSS formatting
applied. It is slightly different, however, so compare this one from the last horizontal navigation bar you
added. Notice that this one doesn't need any DIV tags - you can just use the NAV tags in HTML5 to do the
same job.
Styling the HTML5 SECTION Tags
Our first SECTION tag is used to hold the contents of the page - it is just used as a wrapper. The only code
here is this:
SECTION#Wrapper {
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
}
Here, we're just setting a margin for the main contents of the page. But because we have more than one
SECTION tag, we use the ID attribute to specify which of the two we want to format.
The second SECTION has the following CSS:
SECTION#Section_Article_1 {
width: 850px;
height: 400px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
background-color: #F8EBEB;
}
This section sets a width and height, and will hold the contents of an article, or any contents, really. We've
also set some margins, here, to create some space. The background colour is just so that you can see that
particular section. It doesn't have to be there at all.
Styling the HTML5 ARTICLE Tags

The ARTICLE tag in our HTML code again acts as a wrapper for other contents. The idea is that you have
one pair of ARTICLE tags per article (or whatever contents you have).
ARTICLE#Article_1 {
width: 900px;
height: 500px;
background-color: #ADAAAA;
}
Again, no ID or CLASS needs to be set up the ARTICLE tag acts like a HTML selector. However, we've
added the ID to distinguish it from other ARTICLE tags that may be on the page. That way, you can format
each ARTICLE differently, if you wish. We only have one ARTICLE so the ID is not strictly necessary.
Exercise
Try out some different styles, experiment with margins, padding, borders, backgrounds, and anything else
that takes your fancy. Try adding a banner image for the top header instead of a colour.
A Two Column Layout Using HTML5 and CSS

For the two-column layout, there is a HTML page and a CSS script already created for you. The HTML page
is in the extra_files/layouts folder that came with this course, and the CSS script is in
theextra_files/css folder (two_col_style.css).
(If you haven't got the extra files yet, the download location is here, under the heading Web Design - New
Open up the HTML page first and take a look at the code. The page is called layout_two_col.html, and the
code looks like this:
The code is identical to the one column layout! (Well, accept for a second article added.)
When the page is viewed in a browser, it looks like this:
The first column holds the navigation bar. But it doesn't have to. You can still have a navigation bar at the top.
The first column can then hold anything you like: special offers, news, previous blog entries, etc.
The second column is for the main contents of the page. Here, we have two articles. Again, the background
colours are just so that you can see each section.
Open up the two_col_style CSS file and take a look at the code. Compare it to the one column layout. Again,
there's not that much difference.
The part that moves the navigation bar to the first column is the float: left in the NAV class, and thedisplay:
block in the NAV list class. You then play around with the widths and height to get the look you want.
Exercise
Play around with the various CSS values and see what happens when you reload the page. For this exercise,
it's better to copy our file into your own HTML folders, that way you'll leave the original untouched.
Exercise
Research navigation bars on the internet. You can start with this page:
http://www.maxdesign.com.au/articles/css-layouts/
It is a bit old, now, but still gives you a good idea of what CSS layouts are all about.
HTML Tables and the TABLE tags
Tables were introduced to HTML as a way to make textual data look more presentable on the screen. Things
like statistics could be presented in neat rows and columns, making them easier to read.
Tables can also be used for web pages layouts, but the practice is now frowned upon. Some people even have
a pathological hatred for layouts using tables. Don't let this put you off, however. Using tables for layouts can
actually be easier than using CSS! We won't be using tables for web page layouts, though, but simply to
present tabular data.
(NOTE: Our entire Home and Learn website uses tables for layout. This is because it was started in 2002. We
could, of course, change to CSS layouts, but as it is such a big site it would take many months of work and
costs a fortune. And very few people would notice the difference!)
First, we'll create a basic HTML table. This will work in all versions of HTML, and not just version 5. Here's
the basic table we'll design.
The table presents information about each browser's support for CSS version 3. From the table, it's easy to
see that CSS animations only work in Chrome and Safari (the latest browser versions here are Firefox 10 and
greater, Internet Explorer 9, Chrome 10, Safari 5, and Opera 11.1).
We'll create another table later that uses HTML5 and CSS3.
The Table Tags

To create a table you need to use the following basic table tags: TABLE, TR, TD. They are laid out like this:
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
The table tags come in pairs. To set up the table, the TABLE tag is used. There is a start tag and end tag. In
between these two tags are the table Row tags <TR> </TR>. For every Row in your table, you need at least
one Table Data tag <TD> </TD>. The Table Data tags represent the cells in each row. In the example picture
above, we have a table with four rows. In each row we have a CSS property followed by 5 cells for browser
information. So each Row in our table has six Cells in it. For one individual Row, the code would look like
this:
<TABLE>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
That code means set up a table with one Row, and put six cells into the Row.
The information you want people to see goes between the two TD tags:
<TABLE>
<TR>
<TD>Cell 1 Data</TD>
</TR>
</TABLE>
You can also add an optional CAPTION tag, after the pair of TABLE tags:
<CAPTION>CSS3 Browser Support (latest browser versions)</CAPTION>
Table Attributes
The TABLE tag comes with optional attributes you can use:
Align
Border
Bgcolor
Cellpadding
Cellspacing
Height
Width
(There's also Frame, Rules, and Summary, but we won't be discussing these.)
The table from our image had a border of 1 pixel. The cellpadding was 10 and the cellspacing was 2. We also
centre-aligned our table. The TABLE tag code was, therefore, this:
<TABLE Border = "1" CellPadding = "10" CellSpacing = "2" Align="center">
We didn't specify a width, as the default is the length of your text plus any borders, padding and spacing. The
default colour is none. Like all colours, though, it can take a value like "Red", or a HEX/RGB colour.
Cellpadding, incidentally, is the space between the text and the cell borders; cellspacing is how far apart each
cell is from its neighbour.
Row Height and Row Width

You can make changes to the Height and Width of not only the entire table, but to each individual cell, or row
of cells. Just add Width and Height attributes to the TR or TD cell. Like this:
<TABLE>
<TR Height = 50 Width = 100>
</TR>
</TABLE>
You can add the Height and Width attributes to individual TD cells, too, but the results are often erratic. If
you want one big cell next to smaller cells, the ROWSPAN and COLSPAN tags are used.
The ROWSPAN and COLSPAN Attributes
Suppose you wanted a table like this one:
Here, the two cells at the top stretch across the two cells below it. For a complex table of different cell size
like this, you can use ROWSPAN and COLSPAN. This can get quite complex. But remember that Columns
go down, and Rows go across. To have one big cell stretch horizontally across two smaller cells, the code
would be this:
<TR>
<TD COLSPAN = 2>Home Team</TD>
<TD COLSPAN = 2>Away Team<BR></TD>
</TR>
The attribute COLSPAN has the value of two because one TD cell is going to stretch across two columns. We
have 4 columns in our table above, so the first TD tag will span two columns, and so will the second one.
If we add some of the other table tags, you might get a better idea of what's going on.
<CAPTION><B>Football Scores</B></CAPTION>
<TR>
<TD COLSPAN = 2>Home Team</TD>
<TD COLSPAN = 2>Away Team<BR></TD>
</TR>
<TR >
<TD>Arsenal</TD>
<TD>2</TD>
<TD>Leeds</TD>
<TD>1</TD>
</TR>
If we wanted one big cell to stretch over all our rows, running down the left side, we would use ROWSPAN.
The code would be this (the <BR> tag gets you a blank cell):
<TR>
<TD ROWSPAN = 6><BR></TD>
</TR>
And this would be the effect:
You might have noticed that although the code was this:
<TR>
<TD ROWSPAN = 6><BR></TD>
</TR>
The number of rows in the table was actually only five. So why set the ROWSPAN to 6? Well, it's because
we had 5 sets of TR tags in our table, plus the one TR tag we added for the ROWSPAN making 6 in total.
The code for the whole table above looks like this:
There's no doubt about it, though - setting up a complex table with cells spanning across other cells can be a
tricky business when you're coding by hand!
HTML tables: cell alignment, colours, images
Aligning contents in a cell

You can align the contents in a cell, so they look more presentable. To align a cells contents, the ALIGN
attribute is used in the TD part of the tag. To centre-align our headings, the code would be this:
<TR>
<TD align="center">CSS Property</TD>
<TD align="center">Internet Explorer</TD>
<TD align="center">FireFox</TD>
<TD align="center"> Chrome</TD>
<TD align="center">Safari</TD>
<TD align="center">Opera</TD>
</TR>
The other two Horizontal alignment options are "Left" and "Right".
Alignment can also be vertical. You use the VALIGN tag for vertical alignment. The positions for vertical
alignment are: TOP, MIDDLE and BOTTOM.
<TD VALIGN = Top>
<TD VALIGN = Middle>
<TD VALIGN = Bottom>
You can combine horizontal and vertical alignment to give nine positions in all:
<TD VALIGN = Top Align = Left>
<TD VALIGN = Top Align = Center>
<TD VALIGN = Top Align = Right>
<TD VALIGN = Middle Align = Left>
<TD VALIGN = Middle Align = Center>
<TD VALIGN = Middle Align = Right>
<TD VALIGN = Bottom Align = Left>
<TD VALIGN = Bottom Align = Center>
<TD VALIGN = Bottom Align = Right>
In a browser, here's what a table of all nine positions would do to text:
Changing the Background Colour of Tables and Cells
Individual cells can have their background colour changed. The background colour of the entire table can be
changed, too. To change the colour of the entire table, just add the BGCOLOR tag to the TABLE tag. Like
this:
<TABLE Bgcolor = "Blue">
You can add a splash of colour to individual cells. The BGCOLOR attribute is just added to the TD tag whose
colour you want to change. Like this:
<TD Bgcolor= "Yellow">Safari</TD>
Using Images in Tables

Images can be used in tables, either as the background image of the table, or in individual cells.
<TABLE Background = "image_name.jpg">
<TD Background = "image_name.jpg">
Note that the attribute is BACKGROUND. After an equal sign you type the name of the image you want to
use.
HTML5 Tables
With HTML5, tables got a bit of a makeover in terms of structure. Take a look at the following code:
If you want to play around with the code, open up the file called table_html5.html which is in
theextra_files/tables folder that came with this course. (If you haven't got the extra files yet, the download
location is here, under the heading Web Design - New Course : Download the Extra Files needed for this
course (You don't need the downloads for the old course.)
The table data itself is the same as the previous one. But notice the new table tags we've used:
THEAD
TFOOT
TBODY
THEAD is where you put the data for the first row of your table. You then add the TR and TD tags. Bizarrely,
the TFOOT tags come after THEAD and before TBODY. If you put the TFOOT tags after TBODY your table
may not work in some browsers.
The TFOOT has no TR tags, just a TD. We've added a COLSPAN attribute here, as CSS doesn't do column or
row spanning very well, or at all.
The TBODY tags contain most of the TR and TD tags.

If you have a look at the TABLE tag at the top you'll see that it no longer has any attributes. It's just this:
<TABLE>
Previously, we had this:
<TABLE Border = "1" CellPadding = "10" CellSpacing = "2" align="center">
These were all formatting attributes we added to the TABLE tag. Now, we can do this with CSS.
Open up the file called html5_tables.css which is in the extra_files/css folder. Take a look at the CSS code:
With the new structure of our table, we can use the HTML selectors (TABLE, THEAD, TFOOT, etc). The
TABLE selector is used to set up the border, the border spacing, background colour, text alignment, and font
family. This allows us to get rid of all those attributes from the previous table.
Notice, too, that we have separate THEAD and TD selectors, and a joint one: THEAD, TD. We could have
put the padding in the TABLE selector, but we've done it like this just to show you that you can set up rules
for more than one HTML tag on the same line. Separate each one with a comma.
The only class selector is at the bottom, LeftCol. This is applied to only those cells that need to be left aligned
and made bold.
Exercise
Play around with the CSS and see what happens to the table when you reload it.
HTML Form Elements - The Form Tags
HTML forms are a way of gathering data from visitors to your page. Forms typically have text boxes for data
input, radio buttons, drop down boxes, and buttons so that users can submit the form. A reset button is also
handy, just in case mistakes are made filling out the form.
For this section, create a new web page in your text editor. Save the file as forms.html. We'll add the
different form elements as we go along.
The Form Tag

You don't have to tell your browser about any form elements on your web page. If you just want a simple
form element like a text box, you can insert the text box tag by itself. But if you want to do something with
the information on your form, like send it somewhere or to someone, you have to "tell" your browser about
the form elements on your page. You do this with the Form tag:
<FORM>
</FORM>
Like most HTML tags, the FORM tag comes as a pair, the forward slash preceding the second FORM tag to
indicate that the form tag ends. Any form elements you need then go between these two FORM tags.
A NAME attribute is a useful addition to the FORM tag. When the form has a name, you can then refer to it
in scripts.
<FORM NAME = "frmTest">
</FORM>
To give your form a name, type a space after FORM then type the word NAME, followed by an equals sign.
Finally, add a name for your form. You can call it anything you like. Here, we've called the formfrmTest.
If you want your form to go somewhere or to someone, two other attributes are needed in the FORM tag:
METHOD and ACTION. Like this:
<FORM NAME = "frmTest" METHOD = "post" Action ="mailto:me@me.com">
</FORM>
METHOD is way to send the data. There are two options, Post and Get. Post sends the data in single lines of
text; Get squashes all the data in a single line and adds it to the URL in the Action part. If the URL was an
internet address, you'd see all the data you're sending in the address bar of your browser. This sort of thing:
ProcessSurvey.html?text1=John&text2=Smith
The first name John was typed into the text box called "text1" and the surname Smith went into the text box
called "text2". Form elements are separated by an ampersand ( & ). That is a direct result of using the Get
method to send data. The Post method doesn't add all that code to the address bar of your browser.
You should use Post to send your data, rather than Get.
ACTION is used to specify the address where you want to send the data. Here, we're using an Email link to
send the data straight to an email address:
ACTION = mailto:me@me.com
But the form can be processed by a scripting language like CGI, ASP .NET, PHP, etc. In which case you'd
specify the address of the script in question:
ACTION = "ProcessSurvey.php"
To ensure that data in your forms is not sent anywhere, you can just add a pair of double quotes to the
ACTION attribute:
ACTION = ""
This is good for testing purposes.
Form Elements
There are quite a few different form elements you can add to a form:
Text Boxes
Text Areas
Option Buttons
Check Boxes
Drop down List/Fixed Lists
Password Boxes
Command Buttons
Submit Buttons
Reset Buttons
Labels
Image Command Buttons
Hidden Form Values
HTML5, however, adds even more. There's even a very handy attribute called placeholder:
Placeholder
Email
Url
Number
Range
Date/Time
Search
Color
Some of these new form elements are only supported in certain browsers, however. For example, Color refers
to a popup colour picker. Only the Opera web browser supports this, at the time of writing.
Text boxes, Submit and Reset Buttons
The INPUT Tag and Text Boxes
For most form elements, the word INPUT is used to set up the element. Next, you type a space followed by
the word TYPE. This tells the browser what type of form elements to draw on your page. If you want a text
box, the TYPE to use is "Text":
<INPUT TYPE = "Text">
(Notice that there is no end tag for INPUT.)
Next, you add the attributes you want. There are quite a lot of attributes for text boxes. The three most
common ones are Size, Value, and Name. Size refers to how long the text box is in pixels rather than the
number of characters it can contain. It's a good idea to limit how many text characters can fit into your text
box, and for this the Maxlength attribute is used:
<INPUT TYPE = "Text" Size = 20 Value = "" Name = "text1" Maxlength="15">
The Value attribute means the text that will be typed in your text box. You can set some default text, if you
like:
<INPUT TYPE = "Text" Size = 20 Value = "Default Text Here" Name = "text1">
Whatever is between the two quote marks of VALUE is what you get back when the form is sent somewhere.
A Name attribute should be added so that you can refer to it in scripts. It distinguishes it from any other text
box you may have on your form.
Some other text box attributes are:
Accesskey
Height
TabIndex
Width
Height and Width are self-explanatory. Accesskey refers to a keyboard shortcut you can add, while TabIndex
is a number value and refers to where the cursor will end up when you press the Tab key on your keyboard.
As an example, take a look at the following three text boxes:
<INPUT TYPE = "Text" TabIndex="2">
The third of the three text boxes above will be activated first when the tab key is pressed. Press the tab key
again and the cursor will appear in the top text box, followed by the middle one. You can really annoy your
visitors if you get the tab index wrong!
The Submit Button

If you want your form to be sent somewhere, a Submit button is needed (though you can write code for your
own submit button). When the Submit button is clicked, the browser will check the ACTION attribute of the
FORM tag to see where you want the data sent. It then checks the METHOD attribute to see what method
you want to use, Post or Get. The browser will then try to send the form's data for you.
The code for a Submit button is this:
<INPUT TYPE = "Submit" Value = "Submit">
This time, the TYPE is set to "Submit". The VALUE attribute is the text that will appear on the button itself.
The width of the button is determined by the width of the text for the VALUE attribute. If you wanted a really
wide button, you can use this old trick:
Value = " Submit ">
Here, spaces are added to the left and right of the text. The browser will see the spaces as text and adapt the
width accordingly.
The Reset Button

The Reset button returns the form to the state it was originally in when it was loaded. Any default values you
added will be retained. The code for a rest button is this:
<INPUT TYPE = "Reset" Value = "Clear">
Note the TYPE is now "Reset". The value attribute works in the same way that the Submit button does - it's
the text that will appear on the button.
To test out the text box element and the buttons, add the following between the BODY tags of your HTML
code:
<FORM>
<INPUT TYPE="Text">
<P>
<INPUT TYPE="Submit" Value="Submit">
</FORM>
The form is just a text box and a button. Notice that the two are separated by a P tag, otherwise they'd be sideby-side.
Save your work and view the results in your browser. You should see this:
Type something into your text box and click the button. What you'll find is that the text will disappear. If you
had added Method and Action attributes to the FORM tag then the text box data would be sent to a location
of your choice (email address, script, etc).
Now amend your INPUT TYPE="Text" line and add SIZE and VALUE attributes:
<INPUT TYPE="Text" Size="25" Value="Enter your first name">
When you save and reload, the browser will look like this:
The text box will be longer and your default text will display.
Styling Form Buttons
Buttons, like any form element can have a CSS style applied. In the code below, we've applied various styles
to our form button:
#Button1 {
Height: 30px;
Width: 180px;
background-color: #820404;
font-size: 18px;
color: #FFFFFF;
}
#Button1:hover {
background-color: #CCCCCC;
}
Add an ID attribute to your button:
<INPUT TYPE="Submit" Value="Submit" ID="Button1">
Then try some CSS styles in your own code to see how they work. Try the padding and border properties to
see what happens. The border-color property is also worth trying out.
Before implementing any button styles, though, it's worth checking out the results in more than one browser,
especially when it comes to borders.
You can actually use images as buttons, if you like. But they need Javascript switched on in the browser to
make them work. The TYPE to use is IMAGE:
<INPUT TYPE="image" SRC="image_name.gif" ALT="alt text" onClick="submit_function()">
If you're selling things on your site then image buttons may not be a good idea as some of your users won't
see them.
Formatting Textboxes with CSS
You can use some CSS to format your text boxes. Add the following LINK to the HEAD section of your
HTML code:
<LINK REL=Stylesheet TYPE ="text/css" HREF="../css/forms_1.css">
Create a new CSS page and save it to the correct folder. For the file name type forms_1.css. We saved our
HTML page in a folder called pages. We have a CSS folder that is one folder up from this, and so saved our
CSS file there. That's why our HREF reads "../css/forms_1.css". This means, "Move one folder up from
where the HTML page is, and look for a folder called css. Then use the CSS script called forms_1.css."
For the CSS, type the following:
You now need to amend your text box code slightly. Change it to this:
<INPUT ID="tb1" TYPE="Text" Value="Enter your first name">
The first line of the CSS code sets the style for an INPUT with the ID tb1. That's why we've added an ID
attribute with that name to the code.
The SIZE attribute has been removed because we're setting the size of the text box using CSS:
Height: 30px;
Width: 300px;
You can leave the SIZE attribute in, though, if you like - it won't affect the results.
The other four CSS properties for the text box set the background colour, the font family and size, and the
text colour.
We've also added two pseudo classes for the INPUT elements. The first one is focus. When you click inside
the text box the border changes colour. Adding visual cues like this helps users when filling out your forms.
The other pseudo class is for the invalid event. You'll see how this works when we get to the HTML5 form
elements. But it will put a red border around an INPUT if the user has made a mistake.
Refresh the web page in your browser. With the new CSS styles applied, it should look like this:
When you click inside of the text box, it will look like this:
With just a few CSS styles, then, you can really improve the appearance of your form elements.
JavaScript Alert Boxes

So that you can see that something is actually happening here, we can add some simple JavaScript to get at
our form values.
Add a NAME attribute to your text box code, highlighted in bold below:
<INPUT ID="tb1" TYPE="Text" Value="Enter your first name" NAME="textBox1">
Once a form element has a NAME attribute you can refer to it in code. (You can also use a form's ID attribute
in code.)
The form itself needs a NAME attribute as well. So add this to your FORM tag:
<FORM NAME="frmOne">
So we've given the form the NAME frmOne.
For your form button, amend the code to this:
<INPUT TYPE="Button" Value="Submit" onClick="textBoxValue( )">
Notice that the TYPE is now "Button" instead of "Submit". This allows you to write your own submit code,
which you'd want to do to check that form values have been filled in correctly.
The part that's going to do all the action, though, is this:
onClick="textBoxValue( )"
onClick is something called an event. It just means when the button is clicked perform some action. The
action for us is a piece of code we're going to add in the HEAD section. We've called this piece of
code textBoxValue( ).
In the HEAD section of your HTML code, add the following JavaScript:
<SCRIPT>
function textBoxValue() {
alert( document.frmOne.tb1.value );
}
</SCRIPT>
Your HTML code should now look like this:
All this script does is to display a popup alert box. The text between the round brackets of alert is this:
document.frmOne.textBox1.value
It starts with the word document, which refers to the current web page displayed in your browser window.
You next type the name of the form (frmOne), followed by the name of the form element (textBox1). Finally,
you type the attribute you're trying to access. For us, this is the VALUE that is typed into the text box
called textBox1.
Save your work, and refresh the page in your browser. Click your new button (which will look exactly like
the old one). Whatever you have in the text box should appear in an alert box. Here are the results in Internet
Explorer:
The Firefox web browser displays the following alert box:
Exercise
Delete your default text. Type something else into your text box, then press the Submit button. You should
find the new text displays in your alert box.
Labels, Textareas
Labels
You can add labels to your form, and attach them to a specific text box or other form element. They are good
when you have small elements like check boxes, as you can click on the label to select the check box.
To add a label a pair of LABEL tags are used:
<LABEL>Label Text Here</LABEL>
The text you want to go on the label goes between the two tags.
To attach a label to a particular form element the FOR attribute is used, followed by the ID of the form
element you want to attach it to. For example, examine the code below:
<LABEL FOR="tb1">First Name: </LABEL>
<INPUT ID="tb1" TYPE="Text" Value="Enter your first name" NAME="textBox1">
In the code above, the LABEL is FOR a form element with the ID "tb1". Here's what it looks like in the
In the image above, we have clicked on the label. This highlights the text in the text box. A user can then just
type a first name, without having to click inside of the text box. The label does this because it knows which
text box it is "FOR".
TEXTAREA
If you want a bigger text box, for people to leave comments for example, then you can use the TEXTAREA
tag.
Textarea doesn't use the INPUT tag. And you need an end Textarea tag, as well. After typing a space, you
specify how big your Textarea is going to be. You do this with the ROWS and COLS attributes. The Height
equates to Rows, and the Width to Cols (not Columns):
<TEXTAREA ROWS="7" COLS="30" NAME="TextArea1" ID="TA1">
</TEXTAREA>
If you want some default text to appear in the Textarea then you can type it between the two tags:
Default text area
</TEXTAREA>
The text area above would then look like this in Firefox version 4 and later:
Notice the little triangle in the bottom right. Hold your mouse down over the triangle and you can drag to
resize it. (Only Firefox has this, at the time of writing.)
You can also attach a label to the Textarea. You do it in exactly the same way as for text boxes:
<LABEL FOR="TA1">Comments:</LABEL>
Default text area

</TEXTAREA>
Exercise
Add a Textarea to your own form. Apply some CSS styling to liven it up a little.
Option Buttons, Check Boxes, List Boxes
Option Buttons
Option buttons are sometimes called Radio Buttons, and they force the user into choosing only one item in a
list, such as a Male/Female option, or selecting a payment method.
The Option button HTML look like this:
<INPUT TYPE="Radio" Name="Gender" Value="Male">Male
<INPUT TYPE="Radio" Name="Gender" Value="Female">Female
After typing the INPUT tag, the word TYPE comes next. For Option Buttons, the type is "Radio". The
NAME is definitely needed here, and note that the NAME for both in our code above is "Gender". You use
the same name for each group of option buttons you are adding to your form. So if you wanted payment
option buttons, the code might be this:
<INPUT TYPE="Radio" Name="payment" Value="CC">Credit Card
<INPUT TYPE="Radio" Name="payment" Value="DC">Debit Card
<INPUT TYPE="Radio" Name="payment" Value="PP">PayPal
This time, each radio button has the name "payment". The reason you keep the same name for each group of
option buttons is simply to distinguish one group of option buttons from another.
The VALUE attribute is quite useful. When the user submits the form to you using the Submit button, these
VALUES are going to be returned. If you've just got Radio1 and Radio2, you won't know (or won't
remember, more likely) which option the user has selected. Manipulating values with scripts is also a lot
easier if the Value is the same as the text the user sees.
If you want to have a default option button selected, use the word "Checked":
<INPUT TYPE="Radio" Name="payment" Value="CC">Credit Card
<INPUT TYPE="Radio" Name="payment" Value="DC">Debit Card
<INPUT TYPE="Radio" Name="payment" Value="PP" Checked>PayPal
Attaching a label to each button is very useful for your visitors. When the label is clicked it will select the
option button it is named for:
<LABEL FOR="R1">Male</LABEL>
<INPUT TYPE="Radio" Name="Gender" ID="R1" Value="Male">
<LABEL FOR="R2">Female</LABEL>
<INPUT TYPE="Radio" Name="Gender" ID="R2" Value="Female">
In the code above, the labels are FOR the form elements called R1 and R2. We have added a corresponding
ID to each option button. Notice, too, that we've deleted the text from after the > of each option button. The
"Male" and "Female" text is now between the two label tags.
Check Boxes
Check boxes are used to give your users the opportunity to select more than one option from a range of
options. With the Radio Buttons, you could only select one item; with check boxes, you can select them all.
The HTML for check boxes looks like this:
<INPUT TYPE="Checkbox" Name="Browser" Value ="Firefox">Firefox
<INPUT TYPE="Checkbox" Name= "Browser" Value ="Opera ">Opera
Again, you can add a label to aid in selection:
<LABEL FOR="C1">Firefox</LABEL>
<INPUT TYPE="Checkbox" Name="Browser" ID="C1" Value="Firefox">
<LABEL FOR="C2"> Opera </LABEL>
<INPUT TYPE="Checkbox" Name="Browser" ID="C2" Value="Opera">
Check boxes and Radio buttons work in a similar way, and the HTML code is similar, too. The same points
made about Radio buttons apply to check boxes. Note the TYPE used, though: Checkbox.
The above code for option buttons and checkboxes would look like this in the browser:
List Boxes
You can have a list box of items on your forms, either in a drop down format or as a fixed list. Here's what
the two look like on a web page:
The HTML code for a dropdown list, the default, is this:

<SELECT>
<OPTION Value="Under 16">Under 16</OPTION>
<OPTION Value="16 to 25">16 to 25</OPTION>
<OPTION Value="Over 60">Over 60</OPTION>
</SELECT>
List boxes are called Select boxes in HTML and use the <SELECT> tag to set them up.
Each item in your list needs an OPTION tag.
<OPTION Value="Under 16">Under 16</OPTION>
You don't need the closing OPTION tag, if you don't want it, but it is here for the sake of neatness. The text
you want to appear in the list, the text that people see and click on, goes after the first right pointy bracket
(>). The Value is not strictly needed, either. When the form is submitted, the option the user selected will be
returned to you. If the Value attribute is missing, the text itself will be returned.
If you want one of the items in your list selected by default, just choose the item and add SELECTED as an
attribute. Like this:
<OPTION Value="Under 16" SELECTED>Under 16
The only difference between the drop down list and the Fixed list is one attribute in the <SELECT> tag:
SIZE.
<SELECT SIZE="5">
The SIZE is the number of item in your list. If you add this attribute, you'll get a Fixed list instead of a drop
down list.
If you want your users to be able to choose more than one item from the list, the attribute to add to the
SELECT tag is MULTIPLE
<SELECT SIZE="5" MULTIPLE>
A user can then hold down the CTRL key and click to select more than one item.
You can add CSS styles to your list boxes, of course. Here's a style that sets font properties using the HTML
selector:
SELECT {
font-size: 18px;
}
Now everything with the HTML SELECT tag will have its font and font size changed.
Password Boxes, The Hidden Element
Password Boxes
You can add a password box to your form. This is identical to a text box in its appearance. The only
difference is that when you type in the box the characters are replaced by asterisks ( * ). It's important to
remember that although a password box hides the text from prying eyes, the data is not encrypted in any way.
If you use METHOD=Get instead of Post, the password would show up in the address line of the browser.
The code for a password box is this:
<INPUT TYPE="Password" SIZE="20" MAXLENGTH="8">
The MAXLEGTH attribute is the maximum number of characters that can be entered into the password text
box. SIZE is how wide you want the password box to be.
Hidden Elements
You can have something called a Hidden Element on your form. Hidden elements are for your benefit, not
your users. You can store information in a hidden element, and then pass the information to a second web
page or form.
The Code for a hidden element is this:
<INPUT TYPE="Hidden" NAME="H1" VALUE="Some value">
As the name of the element implies, any data stored in the VALUE attribute does not show up on the page.
However, if a viewer clicks View > Source in a browser, your code can be seen, and that includes any values
you've hard-coded into the Value attribute of the Hidden element. So you wouldn't use the Hidden element to
store sensitive data.
HTML 5 Form Elements
Now that you have learnt about HTML form elements in versions prior to HTML5, it's time to learn what's
new. And there are quite a lot of exciting new features you can implement. It doesn't make sense not to
implement them right now, as in most cases you'll just get a plain old text box if a browser doesn't support the
new element. The HTML 5 elements and attributes we'll explore are:
Placeholder
Required
Email
Url
Number
Range
Date/Time
Search
Color
In the examples that follow, it's better to create a new HTML page, rather than use the one you have. Save it
with the name html5_forms.html. The best browser to use for these examples is Opera, as the latest version of
this browser supports most of the new form elements. Internet Explorer is probably the worst, in terms of
support for HTML 5 form elements (we tested with version 9 of IE). But the HTML 5 form elements were
tested on the following browsers (or later versions):
Google's Chrome Version 12
Firefox Version 10
Internet Explorer Version 9
Opera Version 11
Safari Version 5
The first HTML 5 form elements we'll take a look at are Placeholder and Required, which are attributes rather
than a real form element.
The Placeholder and Required Attributes
The PLACEHOLDER attribute

There's quite a neat new attribute you can add to your text boxes called PLACEHOLDER. This is default text
that disappears when you click inside a text box. Try the following:
<FORM>
<INPUT TYPE="Text" PLACEHOLDER="Enter your first name">
<P>
<INPUT TYPE="Submit" VALUE="Contact Us">
</FORM>
The word PLACEHOLDER does not have to be in capitals, as like just about every HTML element it is not
case sensitive. After an equal sign, you type the text you want to appear in your text box, surrounded by
quotation marks.
Save your work and test the form out in a browser (preferably Opera). When the form first loads you'll see
this:
Click inside the text box and the placeholder text immediately disappears:
The PLACEHOLDER attribute works on all the new text boxes you are about to see. If your user has an
older browser they either won't see the placeholder text at all, or it just won't disappear when they click inside
the box.
The REQUIRED attribute

If you want a text box to be filled in, you can use the REQUIRED attribute:
<FORM>
<INPUT TYPE="Text" PLACEHOLDER="Enter your first name"
REQUIRED>
<P>
<INPUT TYPE="Submit" VALUE="Contact Us">
</FORM>
You just type the word REQUIRED, with no equal sign or text after it.
Test it out in your browser. Don't click inside of your text box, but just click your submit button. In the latest
editions of Firefox, you should see something like this:
In Google's Chrome, you'll see this:
So the browser has not submitted the form, but displayed a popup box asking the user to fill out the text box.
Opera, Internet Explorer and Safari don't recognize the REQUIRED attribute, however, and just submit the
form. So you shouldn't rely on it. Internet Explorer versions 9 and lower don't even recognise the
PLACEHOLDER attribute, the only one of the big five browsers not to do so!
The Email, URL, and Search text boxes
The Email Text Box

HTML5 introduces an email text box. This text box checks for a valid email address. Instead of
TYPE="Text" you use TYPE="Email". Here's the code to try:
<FORM>
<INPUT TYPE="Email" PLACEHOLDER="Enter your email address">
<P>
<INPUT TYPE="Submit" VALUE="Submit">
</FORM>
An older browser that doesn't recognise TYPE="Email" will just display a normal text box. So you may as
well use the new email TYPE right now, if you need to.
Again, though, browser support is patchy. Only Google Chrome and Firefox support the Email text box. Even
then, Firefox lets meme@memecom through, when it should be .com on the end. (Chrome picks this error up
and doesn't submit the form.)
The URL Text Box

A URL is a website address, usually with http:// at the front of www. HTML 5 introduced a text box for a
URL. Here is the code to try. Notice the type is now URL:
<FORM>
<INPUT TYPE="URL" PLACEHOLDER="Enter a website">
<P>
<INPUT TYPE="Submit" VALUE="Submit">
</FORM>
At the time of writing, only Firefox and Chrome support the URL text box, popping up a message when you
don't type the full address (complete with http:// at the front).
Search Boxes
The search box, despite its name, doesn't actually search for anything. All it does is to put an X on the right
hand side of a text box. You click on the X and the text in the text box disappears. It's for when you make a
mistake and want to start again. The search box only works in Chrome and Safari, at the time of writing. The
HTML code is this:
SEARCH: <INPUT TYPE="Search">
In Safari on a windows machine, you'll see this when you type in the text box:
For OS X users the above box will have rounded corners. Browsers that don't support the search box are just
normal text boxes without the X. So you can TYPE="Search" instead of TYPE="Text", if you like. At least
your Chrome and Safari users will be happy!
Spinners and Sliders
Two other HTML5 controls you can add to forms are spinners and sliders. Sadly, though, only Opera and
Chrome support the spinner. A spinner allows you to increase or decrease a number in a box by clicking little
up and down arrows. They look like this in the Opera browser:
The HTML code for the spinner box looks like this:
<INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="2" VALUE="6" SIZE="6">
The TYPE is "Number". The MIN and MAX are the start and end values you want for the box. In other
words, a user can't go higher than 10 or lower than 0. The STEP attribute is the increase or decrease in value
when you click on the arrows. In our code above, we go up in steps of 2 (2, 4, 6, 8, 10). The VALUE is the
default that appears in the box when the page loads, and also the value that is returned when the form is sent.
SIZE refers to how wide you want the box.
Sliders work in the Opera, Chrome and Safari browsers. They look like this:
You can move the slider left or right to change the value. The HTML code is this:
<INPUT TYPE="RANGE" MIN="0" MAX="10" STEP="2" VALUE="4">

The TYPE is "Range". The other attributes are the same as for the spin box.
Dates, Times, Color Picker
Dates and Times

You can have a calendar appear when a user clicks inside of a text box. Unfortunately, only the Opera
browser does this. Here's what it looks like:
Being able to select a date like this is a terrific innovation that hopefully other browsers will implement in the
future. The HTML for the above calendar is this:
<INPUT TYPE="date" value="">
The TYPE is "Date", but you can have other TYPES:
TYPE="Date"
TYPE="Month"
TYPE="Week"
TYPE="Time"
TYPE="Datetime"
TYPE="Datetime-local"
All the other browsers will just show you a blank text box in place of the TYPEs above.
Colour Picker
Another form element you can add is a Colour Picker. This will be of limited use, and only the Opera browser
has implement it. The HTML code is this:
<INPUT TYPE="Color">
In the browser, it looks like this:
Again, it will just end up as a plain text box, if a browser doesn't support it.
Data Lists in HTML 5
Another type of list you can use is a Data List. This is new in HTML5. The Data List is like a drop down list
of options, only the dropdown part doesn't appear until you start typing. The items on your list then appear,
allowing the user to select an item. It is only supported in Firefox and Opera, at the time of writing. Here's
what it looks like before you start typing:
So it looks like just a normal text box.

However, when you click inside of the text box and type a letter, you'll see this in Firefox:
The items on your list will appear.

When you select an item, you change the value:
The HTML5 code for the above Data List is this:

<INPUT TYPE="Text" LIST="zip_codes">
<DATALIST ID="zip_codes">
<OPTION VALUE="AL" LABEL="ALABAMA">
<OPTION VALUE="AK" LABEL="ALASKA">
<OPTION VALUE="AS" LABEL="AMERICAN SAMOA">

<OPTION VALUE="AZ" LABEL="ARIZONA">
<OPTION VALUE="AR" LABEL="ARKANSAS">
<OPTION VALUE="CA" LABEL="CALIFORNIA">
<OPTION VALUE="CO" LABEL="COLORADO">
<OPTION VALUE="CT" LABEL="CONNECTICUT">
</DATALIST>
You still have an INPUT TYPE. This one is Text. Notice the LIST attribute, though. You need this to match
the ID of the DATALIST tag.
DATALIST comes after the INPUT code, and has a closing DATLIST tag. For each item on your list you
have a VALUE and a LABEL. The LABEL is the text that appears on the list. The VALUE is what it changes
to when an item is selected. It is also the value that gets sent when the form is processed.
Note that in the Opera browser, you'll see this as soon as you click inside of the Data List:
So the VALUE and LABEL are displayed, which could be helpful.

What is not helpful is Safari's treatment of Data Lists - everything after your Data List tags will be hidden. So
if you have a Submit button after a Data List, Safari users won't see it! One workaround is to put an end tag
for all your OPTIONS:
<OPTION VALUE="AL" LABEL="ALABAMA"></OPTION>
The Submit button will then reappear. The Data List won't, though.
And that's it for HTML5 form elements. Try them out in different browsers, and see what works and what
doesn't. Don't forget to add some CSS to liven up your form elements!
Laying out your HTML Forms
Aligning form elements can be very tricky. You might think CSS would make life easier, but it doesn't. You
can use the CSS position property with the values static, relative, absolute, and fixed. But even then, after
long hours of frustration, you'd find that not all browsers render your form correctly.
To position form elements, then, a Table is often used. Take a look at the web page we've created
called form_layout.html. This is in the extra_files/layouts folder that came with this book. (If you haven't
got the extra files yet, the download location is here, under the heading Web Design - New
When you open up the above page, you'll see a form that looks like this:
The form elements are nicely lined up on the left, and the right (except for the last name text box).
Open up the HTML code for the page and you'll see this:
The TABLE tags are the ones to concentrate on. We've used COLSPAN a lot, here, to get the layout we
wanted. We've also added CSS style with class name like "R1C1". (This just means Row 1, Column1.)
Essentially, though, we had a table that had 4 columns and 5 rows. To get the Email row we have two TD tags
inside a pair of TR tags. The first TD is just the text "EMAIL", with some styling applied. The second one
uses COLSPAN=3. If we didn't do this then the email text box would be squashed into the second cell of the
second row. So we "SPAN" this cell across 3 columns. The rest of the table uses the same COLSPAN
manipulation.
The Stylesheet for the HTML is called form_layout_1.css. Take a look at the CSS code and see if you can
figure out what's going on (it's in the extra_files/css folder. It might help to make a copy of this file, and the
experiment with it by changing the values to see what happens.
For some more ideas and help with your form design, these pages are worth a look:
http://designshack.co.uk/articles/10-css-form-examples
http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
http://skyje.com/2010/05/web-form-design/
HTML 5 Video and Audio
HTML5 introduced a new tag for videos. To insert a video into your web page you can now do this:
<VIDEO SRC="your_video.mp4"></VIDEO>
This simplifies things greatly, as previously you had to use the OBJECT and PARAM tags. Even with a
YouTube video that code would look messy:
<object width="" height="">
<param name="movie" value="http://www.youtube.com/v/your_ref"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/your_ref_here" type="application/x-shockwaveflash" allowscriptaccess="always" allowfullscreen="true" width=""
height=""></embed>
</object>
However, Google does produce the code for you, and all you need to do is copy and paste it.
Another alternative for video is Flash. Unfortunately, not all browsers support Flash (Apple's Safari in
particular.) Even for those that do, you need a plugin to watch the video.
So the VIDEO tag in HTML5 was meant to allow all browsers to display your videos. At the time of writing,
though, different browsers support different video formats. Older browsers won't recognize the VIDEO tag at
all. With those caveats in place, let's take a further look at the video tag.
Video Formats and Codecs

The most popular video formats are MP4 (MPEG4), FLV (Flash), OGG and AVI. A newer format is WebM.
But these file endings, .mp4, .flv, .ogv, .avi, and WebM, are not actually a single file. They are known as
container files. That's because a video is a combination of separate files, such as the video itself and sound
tracks. There will also be files for synchronising the video with the sound, the aspect ratio, the language,
video title, and a whole lot more.
The moving images part of the video will be encoded using programming code known as an algorithm. This
algorithm is called the video codec. A video player decodes this algorithm (codec) and displays the moving
images on your screen. There are quite a lot of video codecs out there, but the most popular are H.264,
Theora, and Google's VP8.
As well as video codecs there are also separate audio codecs. The audio codec that just about everybody has
heard of is MP3 (short for MPEG 1, Audio Layer 3). Others are Apple's AAC, and Vorbis.
(It must be pointed out that MP4 and MP3 are patent protected. You are usually allowed to produce video and
audio files in these formats because a vendor (Microsoft, Apple, etc) has already paid for the right to use the
encoder and decoder software.)
With all these different video and audio combinations, you won't be surprised to learn that browser support is
patchy. For example, if you wanted to show a Flash video then people who have Macs, iPhones, and iPads
won't be able to see it.
Browser patchiness is the reason why the new VIDEO tag takes a sub-tag called SOURCE. The SOURCE
sub-tag lets you specify more than one container format. Take a look at this example:
<VIDEO>
<SOURCE SRC="my_video.mp4" TYPE='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'>
<SOURCE SRC="my_video.webm" TYPE='video/webm; codecs="vp8,
vorbis"'>
<SOURCE SRC="my_video.ogv" TYPE='video/ogg; codecs="theora,
vorbis"'>
</VIDEO>
The VIDEO tag is now by itself. Between the two VIDEO tags, however, we have three SOURCE tags. After
the word SOURCE you need a SRC attribute. This is the name and location of your video. Notice that the
MP4 format comes first. This is to cater to your iPad users. If it's not top of the list then iPad just bails out - it
only recognises one SOURCE tag. Newer version of the iPad may well correct this bug.
Notice the TYPE attribute above, though. It is split in to three parts:
TYPE='video/mp4; codecs="avc1.42E01E, mp4a.40.2" '
You need the type of video it is (video/mp4, in this case). After a semi colon you then specify the codecs. The
video codec comes first, followed by the audio codec. The two are separated by a comma. The quotation
marks are need. The TYPE above is surrounded by single quotes, one at the start and one at the end. The
codecs need their own quote marks, which are double quotes above. You can do it the other way round,
though:
TYPE="video/mp4; codecs='avc1.42E01E, mp4a.40.2' "
In the line above double quotes are on the outside and single quotes on the inside.
For more information on the VIDEO tag, see this page:
http://diveintohtml5.info/video.html
Video can be a very complicated subject. If you don't want to go to all the trouble, then YouTube can convert
your videos and provide the code to copy and paste into your web page.
HTML 5 AUDIO
If you only want sound, and no video, then the new AUDIO tag is the one to use. The HTML is similar to the
VIDEO tags, in that you specify a list of audio file formats. For example, take a look at the following code:
<AUDIO>
<SOURCE SRC="your_audio.mp3">
<SOURCE SRC="your_audio.ogg">
<SOURCE SRC="your_audio.wav">
</AUDIO>
Between the two AUDIO tags we have three SOURCE tags like before. This time, however, you don't need
any codec information. The browser will try to play the first song on the list above. If the format is not
supported, then it will try to play the second song.
You can add some attributes to the AUDIO tag:
AUTOPLAY
LOOP
CONTROLS
PRELOAD
AUTOPLAY takes the value true or false. Setting AUTOPLAY to true means the song would start playing by
itself in the browser, which can be annoying. LOOP means that the song will start all over again after it has
finished. Again, the values true and false can be used. Using the CONTROLS attribute with a value of true
will get you the browser's in-built audio controls. They look like this in Internet Explorer 9:
The PRELOAD attribute takes three values: none, auto, and metadata. PRELOAD refers to the audio file
itself. When you set it to none the browser won't preload the file at all. Set it to auto and the browser will
decide for you, whereas a setting of metadata will load things like song title, album, artist, etc.
Here's an example of the AUDIO attributes:
<AUDIO AUTOPLAY ="false" LOOP="false" CONTROLS="true"
PRELOAD="auto">
</AUDIO>
If you tried the above code in Firefox then the Ogg file format would play, because Firefox doesn't support
the MP3 format, due to licensing issues.
For browsers that don't support the AUDIO tag at all, then you can add some text to the above code:
<AUDIO AUTOPLAY ="false" LOOP="false" CONTROLS="true" PRELOAD="auto">
YOUR BROWSER DOESN'T SUPPORT THE AUDIO TAG.
</AUDIO>
The point about the AUDIO and VIDEO tags, however, is that they work in the browser and don't need the
end-user to download any third-party plugins. Here's a summary of the new tags used in this chapter.
The HTML 5 Canvas Tag
One tag new to HTML5 is the Canvas tag. The Canvas tag is a blank space on which you can draw anything
you like. You can add images to a Canvas, animate your shapes, add text, and a whole lot more besides.
To get the most out of the Canvas tag, however, you need to be able to code using Javascript. Another
disadvantage is that not all browsers support the Canvas tag, especially versions of Internet Explorer below
version 9. You can, however, write some quite sophisticated browser apps and games using just the Canvas
tag and Javascript, and all without plug-ins like Adobe's Flash. To get an idea of the things you can do, take a
look at these pages:
http://www.html5canvastutorials.com/category/showcase/
http://developers.facebook.com/html5/showcase/
To draw a Canvas, all you need is these two tags in the BODY of your HTML pages:
<CANVAS>
</CANVAS>
You can specify a height and width for your canvas:
<CANVAS HEIGHT="400" WIDTH="400">
</CANVAS>
If you don't specify a height and width, the canvas will be 300 pixels in width and 150 pixels in height.
The canvas is entirely transparent. If you want it to have, say, a border, you can use some CSS:
<STYLE>
CANVAS {
}
</STYLE>
To do something useful with your canvas, you need to give it an ID. Once it has an ID, you can get a
reference to it with Javascript.
<CANVAS HEIGHT="400" WIDTH="400" ID="MyCanvas">
</CANVAS>
In the code below, we use "MyCanvas" to place the canvas ID into a variable (memory storage area):
<SCRIPT LANGUAGE="JavaScript">
var canvasID = document.getElementById("MyCanvas");
</SCRIPT>
You then to specify how you're going to be using your canvas, 2D or 3D:
var canvas = canvas.getContext("2d");

Once you have a reference to your canvas, and a context, you're ready to begin drawing on it. Obviously, this
is a complex subject, and a whole book in itself. If you want to explore further, try this page on Mozilla's site:
https://developer.mozilla.org/en/Canvas_tutorial
The Details, Aside, and Mark tags
The HTML 5 Details Tag

The details tag allows you to add extra information that can be viewed or hidden. For example, take a look at
the image below:
When a user clicks the above message, the following information is revealed:
Clicking the summary will hide the above message.
The Details tag is used like this:

<DETAILS>
<SUMMARY>Click here for further information</ SUMMARY >
<P>
Further information is revealed when a user clicks the summary
<BR>
Click the summary again to hide this message.
</ DETAILS >
In between two Details tags, you add a pair of Summary tags. The summary is the part that is shown to the
user. Details can then be added below the Summary tags.
Sadly, only the Chrome browser supports the Details tag at the time of writing. Browsers that don't support
the Details tag will simply display the whole of the information you added between the two tags, including
the summary.
The HTML 5 ASIDE Tag

The Aside tag is used for material related to the text of your article, but doesn't quite fit in. Think of it as
additional material you would like to relay to your readers. You can format an ASIDE tag with CSS, so that it
stands out from the main text. Here's an example:
<ARTICLE>
<P>
Main article text here
</P>
<ASIDE>We've missed out other ARTICLE tags</ASIDE>
</ ARTICLE>
The code above shows that we have a main article. We've some HTML5 tags out, however, and want to
convey that to our readers. Hence the pair of ASIDE tags.
The HTML 5 MARK Tag

The Mark tag is used to mark out text that you want to highlight. The marked text is then formatted with a
yellow background. The Mark tag is used like this:
The discount for this item is <MARK>20%</MARK>, not 10%.
When the above line is formatted, it might look like this in a browser:
Note the yellow background behind the text we have marked out.
Websites and Domain Names
To get your site on the internet you're going to need some web space. For most people, and certainly
beginners, this means something called Shared Hosting. What you're basically doing here is renting a folder
on somebody else's server. That "somebody else" will be a Web Hosting company who either own the servers
themselves or are acting as a middleman for the company that owns the server (called a reseller).
The size of the folder you get on the server will vary, but is typically between 500 megabytes to a Gigabyte.
This is usually more than enough. In fact, 100 megabytes is usually more than enough. If, for example, each
web page on your site is 10 kilobytes, a 100 megabytes means that you will have room for about 10, 000
pages.
In this section, we'll take a look at some for the things you need to look out for when signing up for Shared
Web Hosing. First, we'll take a look at domain names.
Domain Names
As far as web sites go, a Domain Name is the bit after the www in your address bar, followed by an ending,
such as .com, .co.uk, etc. When signing up with a Web Host they'll usually let you register a domain name
with them. It's up to you to come up with a name, though. You can register any name you like, unless
someone else has already taken it. It's pretty much "first come first served". You have to be careful not to
tread on someone's trademark, though, as you'll quickly find yourself in hot water if you register something
like www.megcorp-helplines4u.com, where megacorp is the name of a giant company like Apple or
Microsoft.
Whether to go for a .com or a .co.uk ending (or any other country ending) is something you'll also need to
decide. If your business is international in nature, or your site can be used by anyone in the world, go for a
.com ending to your domain name. If your customers are going to be local to your own country, then get a
country domain ending (.co.uk, for example). One thing to be aware of, though, is that the .com domain is to
all intents and purposes an American domain. This means the authorities can and will shut your web site
down if you break laws in the USA. (This also applies to domains ending in .org and .net.)
Other common domain ending to consider are .org, .net, .eu, and a whole host of others. (To confuse the
situation even more, though, there will be a lot more domain endings to choose from. This is because an
organisation called ICANN is allowing people to register their own domain endings, such as .learn,
.learning, .learner. You'd need deep pockets, however, as the price is $150, 000 per ending.) To save yourself
from bankruptcy, however, it's probably better to just buy a few endings. For example, if you were selling
black widgets, you could go for blackwidgets.com and blackwidgets.co.uk. The fees involved vary, but
shouldn't set you back too much. But remember: you have to renew your domain names every year or two,
which means paying again. If you forget to renew a domain name then it goes on the open market and anyone
can buy it.
One more thing to consider is singular and plurals. In our example above, if we register the domain name
blackwidgets.com somebody else can come along and register the singular version, blackwidget.com. You
can complain to an organisation called ICANN, who oversee the .com ending, but it would take a while to
resolve, and your business could be damaged before a decision is reached. To defend against this, you'd need
to register the singular as well as the plural for your domain name, if this applies.
What to look for when buying Web Space
The websites of Web Hosting companies can be a minefield of jargon. Here are some of the things to look out
for.
Disk Space
This is how much space you get on the hosting company's server. Obviously, the more the merrier, here. But
it's highly unlikely that you'll need a Gigabyte of disk space, unless your web site contains lots of large
images or videos. But the average site won't even be 50 megabyte in size never mind 500 megabytes. So don't
just base your decision on Disk Space.
Data Transfer
This refers to how much download activity occurs on your site each month. (Data Transfer is also known as
Bandwidth.) Say, for example, that each page on your site is 10 kilobytes in size (pretty small, these days). If
1000 visitors come to your site each day they will be downloading 10, 000 kilobytes of data, or 10
megabytes. Multiply that by the number of days in a month and the data transfer will be about 300 megabytes
a month. If the Web Hosting company you sign up for only allows 100 megabytes of traffic each month then
they will cut you off when that limit is reached. Your site will then be down until next month.
It's a pretty rare Web Hosting company that does this, though. And a 100 megabytes data transfer limit is
fairly puny. What you'll normally see here is the dreaded word "unlimited". A lot of hosts put an asterisk next
to "unlimited" which leads to a fair use policy. Which, of course, means it's not really unlimited. Your site
would really need to take off, though, for the fair use policy to kick in. But pay attention to when this is.
Resellers
Not every hosting company has their own servers. Some will rent server space from another company. They
will then resell some server space to you. So when you sign up for a reseller just remember that they don't
own their own servers. If something goes wrong they will have to get in touch with the parent company and
find out what's going on, and how long it will take to fix the problem. In the meantime, your site will be
down. There's not much the reseller can do about it, though, other than to nag their parent company.
Most resellers are decent small businesses, who will go out of their way to help you. In fact, one of the
advantages of a reseller is that personal touch you just don't get with "big boys" of the web hosting business.
So don't be afraid of signing up with a reseller, especially the ones that are up-front about it. But be wary of
those resellers who hide the fact in the small print, and whose contact details are minimal or absent. A good
trick is to try to phone up your prospective hosting company just to find out how fast they answer. If they
only do email support don't be put off, as telephone support is quite expensive. But do check to see how fast
you get a response to a sign-up query.
Linux, Windows, Apache, IIS
The server software that a hosting company runs is usually Apache. This will be running on a Linux operating
system. IIS stands for Internet Information Services and is server software by Microsoft running on
Windows. If you want an ASP NET web site then you'll need to go with IIS/Windows. However, most
hosting companies will offer the cheaper Linux/Apache solution rather than IIS/Windows. (You can run PHP
scripts on both Windows and Linux servers.)
If you don't really care about any of this then go for the Linux/Apache solution.
mySQL database
If you need to store information in a database then on Linux hosting this is called mySQL, which is a
database owned by Sun, just like the Access database is owned by Microsoft. You'll normally only get 1
mySQL database. Hosting companies that have their own servers, however, usually offer you more.
Email
It's very handy to be able to send and receive email with your own domain name. For our example domain
name, it would be handy of we could contact our customers using orders@blackwidgets.com rather than, say,
orders@gmail.com. Most Hosting companies offer POP3 or IMAP email. These are ways to receive email. If
you want to be able to send email with your domain name then look out for SMTP. This would mean that the
emails will be going through their servers, rather than your ISP's servers. What this means is that if you are
not reliant on your Internet Service Provider to forward emails, if indeed they would let you.
If being able to send as well as receive emails with your domain name is important then don't forget to ask
about both. Resellers tend to let you receive but not send, so POP3 but not SMTP.
Templates
If you haven't got the time to create a web site, then some Web Hosting companies let you use their in-built
templates to create a site. This will be via a simple wizard system. Other templates to look out for are
WordPress, if you're going to be blogging, and Joomla, if you need a Content Management System.
cPanel login
cPanel is a piece of server software that handles the administration side of things, such as setting up email
accounts, managing databases, checking diskspace, and a whole lot more besides. If you sign up for a reseller
you'll more than likely have a cPanel login.
SSL
SSL stands for Secure Socket Layer. It's a way to encrypt connections between a server and a client. If you
need files to be securely transferred and not just available to everyone then look out for a SSL option. You
may also need SSL if you have an area on your site where people need to log in. You can tell if SSL is being
used because the address in the address bar of your browser will say https://www.blackwidgets.com and not
just http://www.blackwidgets.com (the difference is the "s" after "http").
FTP
FTP stands for File Transfer Protocol. This is used to transfer the files and web pages from your computer to
your web space. You can get FTP software that simplifies the job. You enter the details provided by your web
hosting company and then connect. After that it will be a matter of dragging and dropping files from your
computer to theirs. Here's an example of setting up your FTP software:
For the Host/IP/URL section this is usually your domain name with FTP in front of it. But your Web Hosting
company will send you an email with these details. When you click Connect the software will attempt to log
in using your username and password. If you're successful, you'll see folders like these for Linux hosting:
Double-click the public_html folder and uploaded all your web pages into there. Windows hosting will be
very similar but may just say public instead of public_html.
Some Web Hosts
If you're in the UK then the big players in Web Hosting business are www.123-reg.co.uk and
www.fasthosts.co.uk. 123-reg is owned by Webfusion, which has its own hosting here:
www.webfusion.co.uk/web-hosting/.
All three of these sites are worth a visit. Look out for all the items we've discussed above, and make note of
what other extras they offer. Most of these extras you won't need, so don't be bamboozled by them!
Another Web Hosting company to consider is Netweaver (www.netweaver.co.uk). Although they don't offer
as many frills as the big players, they are very reliable. They have their own servers, too.
Search Engine Optimisation
In this section we'll take a look at what you should do to get your web site recognised by search engines.
However, bear in mind that the goal of a good web page is quality. You should not be writing your articles for
search engines but for people. If you care about what you're saying and care about your audience then this
will be far superior to someone just trying to make a fast buck.
META tags
A category of HTML tags that you can add to the HEAD section of your web pages are META tags. META is
short for METADATA, which means information about the data on your web page. An example is this:
<META NAME="description" CONTENT="Widgets for all occasions.">
This META tag has the attributes NAME and CONTENT. The NAME attribute can take a lot of values, but it
is used in conjunction with the CONTENT attribute. In the example above, the CONTENT is describing what
the web page is about. Because the CONTENT is a description of the page, the NAME value is "description".
Some other NAME values are:
Author
Copyright
Doc-type
Expires
Keywords
Refresh
Robots
So, for example, if you want to declare yourself to be the author of a particular piece of work you would add
the following META tag:
<META NAME="Author" CONTENT="your_name_here">
But there are lots more NAME values. You can even create your own.
In the list above, the most used (and abused) is the Keywords value. Here's an example of its use:
<META NAME="Keywords" CONTENT="Red Widgets, Black Widgets, Green Widgets">
The idea here is that you provide some keywords which sum-up the contents of the page. However, the
keywords NAME was abused by a lot of people trying fiddle the outcome of search engine results. They
thought they could get to the top of the likes of Google and Yahoo by stuffing the CONTENT attribute with
as many keywords as possible. Google will just ignore the keywords NAME now. So it's not really worth
bothering with. Unless you use only a few relevant keywords.
The description NAME tag above, though, is well worth adding. Although it won't bump you up the search
engine ranks, sites like Google may display your description in its search engine results. So it's worth writing
a good description for the CONTENT attribute of the META tag when using NAME="description".
If you don't want search engines crawling a page then the ROBOTS value is the one to use. Like this:
<META NAME="Robots" CONTENT="NONE">
The NONE value instructs reputable search engine bots to move along and not bother crawling the page.
Keywords in your page text

Search engines work by scanning the text and images on your web page. They then try to work out what the
page is all about. To make sure that a search engine gets it right, you can tweak your text to remove any
ambiguity. For example, suppose your page is about black widgets. If you have discussed widgets but not
black widgets then a search engine won't know that this page is about a specific type of widget. So your
keywords here are "black widgets". In an article that's 300 to 500 words, you should mention the phrase
"black widgets" about once every 100 words. Don't overdo it, though. A search engine may penalise you for
"keyword spamming" if you mention "black widgets" too much.
Keywords can also be placed in the ALT attribute for images. For example:
<IMG SRC="black_widget.jpg" ALT="A black widget running on a Mac">
The ALT attribute above is describing what the image portrays. This not only helps a search engine to
categorise your page, but it also helps those who are not able to see your image.
Try to aim your keywords not at search engines, however, but at your readers. You want people to genuinely
like your article or product. They won't if you spam them to death!
A search engine will not only file away your text but also your hyperlinks, and where they are pointing to.
So another thing you can do is to include your keywords in the link to the page. For example, a hyperlink
could be constructed like this:
>> See our full range of Black Widgets here <<
When a user clicks the link, they should be taken to your black widget page.
The TITLE of a web page is another place to insert your keywords. For the black widgets page itself, then,
you could have this for the TITLE tag:
<TITLE>Black Widgets in all shapes and sizes</TITLE>
The TITLE, remember, will appear at the very top of the browser window. So it's an area that can be of help
to your visitors, a visual clue that they are on the right page.
But don't obsess over keywords. The advice, again, is to aim your web site at people, and not at search
engines.
Submitting your site to search engines
You don't really need to submit your site to a search engine anymore. They all have bots that crawl the entire
internet, 365 days a year, 24 hours a day, analysing your contents. Google, it is said, will find and crawl your
site in about a month, and then crawl it again every month. If you can't wait, then Google allows you to
submit the first page in your site here:
http://www.google.com/addurl/?continue=/addurl
To submit your site to Microsoft's Bing search engine, the page is here at the time of writing:
http://www.bing.com/webmaster/SubmitSitePage.aspx
Yahoo's site submitting process is a little more complicated. But the page is here:
http://search.yahoo.com/info/submit.html
If you have an offline business, one really useful addition to your marketing is the free Google Places. This is
a part of Google maps, and gets you a little pin on a map. When users click on your pin they get a popup box
with the details of your business on it.
The search engine Bing (from Microsoft) also allows you to add business information. The link is here:
http://www.bing.com/businessportal/
Links back to your site

One thing that search engines do count is how many other sites are linking to yours. When you are just
starting out the answer will be "none". The problem is that it has become really difficult to get a link back to
your site. The traditional way to get a link is to email an owner of a web site and ask if they will link to yours.
Expect such emails to be deleted immediately!
You can ask for something called a reciprocal link. This is when you link to their site and they link to yours.
The value of such links is debatable, and may even do more harm than good these days. Just make sure the
links you do get are relevant to your own site. After all, why would you link to a shoe shop if you're selling
computer components? The link would be worthless.
Getting links is very time consuming. You can make a start by typing, say, "Black Widgets" into a search
engine. You then send an email to all those websites who, like your own, offer black widgets.
To save you time, type "Add your link" "Black Widgets" into a search engine (Obviously you should
substitute your own keywords in place of black widgets. Add the quotes, though.) You'll then get back sites
that actively encourage you to add your link to their website.
For more information on getting backlinks (links back to your site) see the site Lori's Web Design:
http://www.loriswebs.com/linkemup.html
There is some excellent advice here.
Social Media
Rather than spending all your time trying to get links from other sites it's probably better to promote your site
via social media. This means sites like Facebook, Twitter, LinkedIn, Google+, etc. The idea is that you create
a social page on these sites and let everyone know about your site, what they can find there, and why they
should bother visiting. On your website, you then add links back to your social media pages. These links are
ones visitors can click on if they "Like" your site. The more "Likes" you get the more popular your site will
be. For more information on using social media to promote your site, see these pages:
http://www.sitepronews.com/2012/03/08/the-10-best-social-sites-and-how-to-use-them/
http://www.sitepronews.com/2012/03/12/use-social-media-marketing-to-grow-your-business/
http://forums.digitalpoint.com/
Pay Per Click Advertising
If you can't wait for the search engines to crawl and rank your site, then you can sign up for something called
pay-per-click advertising. As its name implies, this is when you pay for somebody clicking on your advert
and then coming to your site. The market leader here is Google's Adwords. When you sign up for an Adwords
account, you get to bid on keywords and phrases. You decide how much you are willing to pay per click, say
20 cents. You then write a few words of copy for your ad ("Thousand of Black Widgets on Sale"). Your ad
will appear on the right of the search engine results in Google. You can also pay a premium and have your
ads appear at the top of the page, inside a coloured background.
Google is not the only game in town, here. Microsoft's Bing and the Yahoo search engine have teamed up to
run a pay-per-click campaign called AdCenter. This is more-or-less the same as Google's Adwords, except
your ad will appear on Bing and Yahoo's search results.
You have to take care with pay-per-click advertising, however, as your budget can quickly run out of control.
The trick is to create a great landing page (the page where visitors end up after clicking your ad). The more
convincing your landing page is the greater the chance is that visitors will buy your products. Something
called ROI (Return On Investment) is important here. This is how much you've spent on advertising to get a
sale. So if 100 people click on your ad and you've bid 20 cents per click then you've spent twenty dollars in
advertising. If your product costs 30 dollars then your ROI is 10 dollars. Get your landing page wrong,
though, and you might need 200 visitors to make a sale, making a total outlay of 40 dollars - a 10 dollar loss!
It's well worth reading up on pay-per-click advertising before you spend any money. A good place to start is
the well-known and respected SitePoint Forums. The Internet Marketing section is here:
http://www.sitepoint.com/forums/internet-marketing-2/
Sitemaps
A sitemap is a list of all the pages on your web site. In addition, a sitemap can list other resources on a page,
such as images and videos. You can also add information about how often a page is updated and when it was
last changed. A site map can be submitted to search engines, and ensures that all the pages are referenced and
crawled.
You can create a sitemap yourself using XML, but this is very complex and time consuming. The easiest way
to create one is via free sitemap generators. Here are two such sites:
http://www.xml-sitemaps.com/
http://www.auditmypc.com/free-sitemap-generator.asp
Once your sitemap is generated you'll have an XML file that you can upload to your web space. Place it in
the same folder as your index.html web page - the root folder, in other words.
Your sitemap can be submitted to all the main search engines. For Google, you need to sign up for Google
Webmaster Tools. The details are here:
http://www.google.com/support/webmasters/bin/answer.py?answer=183669
To submit your sitemap to Bing, this page is quite useful:
http://webdesign.about.com/od/sitemaps/ht/submit_sitemap_bing.htm
Information on how to submit a sitemap to Yahoo can be found here:
http://webdesign.about.com/od/sitemaps/ht/submit_sitemap_yahoo.htm

HTML Lessons

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML Lessons

Cargado por

Copyright:

Formatos disponibles

HTML is written in something called tags. Tags come in pairs, an opening one and a closing one.

Saving Web Pages

In the File Name box, type firstwebpage.html

Viewing your web pages in a browser

And here's the same page in Internet Explorer:

Basic HTML - Heading Tags

Note the P tags:

Without the P tags the text just runs on.

Bold and Italics

Save and view the results in your browser:

There is also an underline tag you can use:

An Unordered List is one that uses bullets. Like this:

To get a list with numbers or letters, this tag is used:

(Strictly speaking, you don't need the end LI tags.)

You use the Types like this:

And here are the results in a browser:

Property and Value

The multiple lines version is easier to read.

A CSS rule has three parts, a Selector, a Property, and a Value

Where to put your styles

Inline Style Sheets

Type the Tag you want to change

Embedded Style Sheets

Using Class Selectors

The heading is right-aligned.

The name of a colour spelled out

And here's what it looks like in a browser:

The ALT Attribute

Height and Width Attributes

So we could have done this:

The result would look like this:

The result of the above code would be this:

Which is far superior!

Uniform Resource Locator

The result would look like this:

var atSign = "@"

Links to other files (Word documents, ZIP files, PDFs, etc)

However, Internet Explorer will display the icon like this:

You'd then apply them like this:

Here's what the above code will look like in a browser:

When we do, it will look like this:

We're extending the navigation CLASS with this line:

It's not that different from the code you have.

The CSS Box Model

And here's the HTML code:

Here's the CSS code that was used:

This is done simply by setting a left value with a negative number:

And here's the HTML:

These SECTIONS tags hold the main content of the site.

Styling a one column layout

<< Continued from previous section

header, footer, section, nav, article {

Styling the HTML5 HEADER Tags

Styling the HTML5 FOOTER Tags

The Nav Bar

Styling the HTML5 ARTICLE Tags

<< Continued from previous section

HTML Tables and the TABLE tags

The Table Tags

Row Height and Row Width

Suppose you wanted a table like this one:

Aligning contents in a cell

Changing the Background Colour of Tables and Cells

Using Images in Tables