Introduction to the Web Design Course

Hello, and a very warm welcome to the Home and Learn computer course for Web Design. The
software you need is set out below. We assume that you have absolutely no knowledge of
designing web pages. Throughout the course of this book you will learn the fundamentals of
Web Design. And, of course, you will start creating your own pages. By the end of the book, you
will have acquired a good understanding of what web design is all about, and have the ability to
take it further, if you so wish.

What you will learn

The aim of this course is to get you started designing web pages. It is assumed that you have
little or no experience of the subject. During our time together, you'll learn some new concepts
and ideas, most of which will not be difficult. After all, there are billions of pages on the internet,
designed by the whole spectrum of humanity: children, adults, pensioners, people from all walks
of life have sites out there. And if they can do it, so can you. In fact, follow the lessons carefully
and you WILL do it. Before long, you'll have your own pages designed and ready to be
uploaded, there for all the world to see.

The technologies you will learn are HTML, HTML5, and Cascading Style Sheets. (HTML5 is
the newest version of the of the language.)

At the heart of every web page is something called HTML. You will learn what this is, and how
to code it. You will also learn the newest version of HTML, which is called HTML5. Both
versions are included in this course. As well as HTML, you will learn about Cascading Style
Sheets, and will be able to improve the look of your web pages by adding CSS to enhance them.

At the end of most chapters in this book you will see a summary table of what you have learnt.
The summary tables are also included in a separate document, called quick_reference.pdf. This is
one of the files that come with this book. All the files you should have are detailed below.

What you need to do the course

The only thing you really need to do the course is a simple text editor. We explain all about this
in the first chapter, Anatomy of a Web Page, in the section Software for Writing Web Pages. But
the operating system you have is not important. So you can do this course on a PC or an Apple
Mac.

Web Design Course Files

There are a number of files that you will need in order to complete certain sections. Whenever
you need a file for a section of your course, it will be explained in the relevant section. The
download location is here, under the heading Web Design - New Course (you don't need the
downloads for the old course.):

Once you have all the necessary files, you can begin. The first part is all about the software you
need for this course. Don't worry - you'll already have all you need, so there's nothing to buy.
Click the link below for the first section.

Good luck!
 Software for Writing Web Pages
To start writing web pages, we'll use a simple text editor. That way, you'll be able to focus on the
code, without getting distracted by the menus and buttons of a complex piece of Web Design
software.

If you use Windows, then Notepad is an excellent text editor to use. To launch it, click on your
Start menu in the bottom left of your screen. Click on All Programs, then Accessories. From the
Accessories folder, select Notepad:

The software should look like this, when it launches:

Another good piece of software is the free Notepad++. You can get a copy here:

Notepad Plus

Mac and Linux users have a number of text editors available, but finding a free one that is as
good as Notepad++ is quite difficult. Bluefish is OK, but looks a bit dated, especially for HTML.
You can check it out here:

Bluefish

The free Smultron is worth downloading, if you have a Mac. You can grab a copy here:

Smultron

For a basic text editor like Notepad, Macs come with TextEdit, which you can find in your
Applications folder. You might want to play around with the Preferences, though, or you'll end
up with Rich Text rather than Plain Text.

Another good free editor for the Mac is TextWrangler. You can get a copy here:

Text Wrangler

In the next lesson, we'll take a look at just what is HTML and HTML 5.
 What is a web page?

In this section, you're going to learn just what a web page is and how it can be read by a browser
like Internet Explorer or Firefox. You'll also construct your very first web page. Let's make a
start.

Files on your computer come with extensions. If you wrote a letter using Microsoft Word and
saved it with the name 'MyLetter', the software would add four letters to the file name (three in
older versions). Because it was typed using Word, the four letters that get added to your filename
are.docx. So your file name will be 'MyLetter.docx' and not just 'MyLetter'. If you created a
spreadsheet in Microsoft Excel and called it 'Accounts' the Excel software will add its own four
letter extension to your file name. It will add .xlsx. So you file name will be 'Accounts.xlsx' and
not just 'Accounts'. So you get a different four letter extension depending on the software you
used.

These extensions are very important to computers. They are used to identify the type of file it is.
With a file extension, Word can recognise its own documents. It sees the letters docx and says
'Ah yes, that's one of mine. I can open it.' If it sees a different extension, xlsx for example, it says
'What the heck is that?' You may then get an error message telling you that the file type is not
recognised.

Web pages have their own file extensions. Oddly there are two different extensions, a three letter
file extension and a four letter extension. Web pages come with the extension .htm or .html. A
browser can recognise either extension.

When you open up a web page with your browser, Internet Explorer for example, the browser
software checks the file extension, the same check that Word and Excel make. If it sees
the .htmor .html extension it knows it's a web page and then tries to open it. (Modern browsers,
though, can open up other types of files. Internet Explorer can open up your Word documents
and PDF files.)

Behind the scenes, however, the thing that Internet Explorer is trying to open is really a text file
that has had its extension changed from .txt to .htm. The text file though will have special
symbols and words, called Tags. When the browser sees these Tags it goes to work, displaying
whatever you typed and hiding the Tags from your viewers.

Most web pages on the internet are written in code called HTML. HTML stands for HyperText
Markup Language, and is fairly easy to get the hang of. That's because HTML is not a
programming language: it is a language designed to improve the presentation of text. For
example, in Microsoft Word, if you want a nice big heading, you can select a font size from a
menu. HTML has an easy way to change the size of text of headings, too, which you'll see in a
moment. But that's basically all you are doing with HTML ' presenting text and images on a
page. The way you do this is with things called TAGS.
What is HTML 5?

HTML comes in different versions. When people talk about HTML 5 they are talking about the
updates to the mark up language. These updates were agreed (mostly) by a whole host of
different parties, all members of an organisation called W3C. W3C was founded in 1994 by Tim
Berners-Lee, who also created the first version of HTML and invented the World Wide Web.
They now oversee the defining of new Web technologies. Comapnies who make browser like
Microsoft (Internet Explorer), Mozilla (FireFox), and Apple (Safari) can then decide which of
the new Web technoligies they wish to implement.

Most of the big names in browser technology decided to implement quite a lot of the new
suggested updates (specifications) put forward by the W3C. These specifications are commonly
known as HTML 5. In practice, this means implementing features like HTML Video and audio
directly into the browser, as opposed to needing a 3rd party plugin like Adobe's Flash. Another
exciting update is something called the Canvas tag. This allows you to create quite sophisticated
animations and graphics using Javascipt, again without needing a 3rd-party plugin.

There are a whole lot of new HTML tags that take browser technology forward into the 21st
century. Throughout this course, we'll introduce you to the essential HTML 5 tags that you need
in order to create a modern web page.

HTML Tags
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.
So add those two tags to your text editor and it will look like this:

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.

In your text editor, then, add the following:

Notice that we've added some text between the two TITLE tags: My First Page. We've also used
indenting, but this is only for readability: the indenting doesn't have any effect on the results.

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:
Coming up next, we'll take a look at how to save your web pages.

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.

In the next lesson, you'll see how to view your web pages.

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.

In the next section, you'll learn how to create a HTML template

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 As again. 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
anOpen 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.

In the next section, you'll see some more basic tags.

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 click File > 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.

In the next lesson, we'll take a look at paragraph breaks

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.

In the next lesson, we'll take a look at bold and italic text.

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.)

In the next lesson, we'll take a look at HTML lists.

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.

In the next section, you'll get an introduction to Cascading Stylesheets.

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.

In the next lesson, you'll learn about CSS Rules.

 Cascading Style Sheet Rules
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:

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 ( ; )

In the next lesson, you'll see where to put your styles.

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

In the next part, you'll learn how to use your CSS selectors.

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. Click below to get started.

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 to All 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.

In the next lesson, you'll learn about how to handle fonts with CSS.

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 sans-serif 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:
In the next lesson, you'll learn about font colours.

Font Colors
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:

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.
In the next lesson, you'll learn about font sizes.

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 andem means 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.

In the next part, you'll learn about styling fonts.

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?

We'll take a break from CSS, now, but come back to it later. In the next section, you'll learn how
to insert images into a web page.

Image Types

You remember at the start of this course we talked about file extensions, and you learnt what
the.html file 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.)

In the next lesson, you'll learn how to insert images into your web pages

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:

<IMG SRC="some_image.gif">

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:

<IMG SRC="some_image.gif">

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:

<IMG SRC="some_image.gif">

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:

<IMG SRC="some_image.gif">

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:

<IMG SRC="york_images/york_minster.jpg">

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 called york_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.

In the next lesson, you'll learn about Image Attributes.

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".

In the next section, you'l learn how to manipulate images with CSS.

Images and CSS

Before we start, make sure to copy our smaller images over to your york_images images folder,
as explained 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">

<IMG SRC="york_images/york_minster.jpg">

</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.

In the next lesson, you'll see how to wrap text around an image with CSS.

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
the margin 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.

In the lext lesson, you'll learn about adding borders to your images with CSS.

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.

In the next lesson, you'll learn about CSS and background images.

Background Images and Background Positions

You can set your backgrounds to be images, if you prefer. The CSS property to use
isbackground-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.)

In the next lesson, you'll learn about image captions.

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>

<IMG SRC="york_images/york_minster.jpg">
<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>
<IMG SRC="york_images/york_minster.jpg">

</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.)

But we'll leave images there. In the next section, we'll take a look at hyperlinks.

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).
There�s 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. That�s 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.

OK, we've learnt what a link is, and what happens when you click one, but let's see how to create
them.

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 called about.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
the index 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.

In the next lesson, you'll learn about other types of hyperlinks.

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.

In the next lesson, you'll learn about CSS and hyperlinks.

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.

In the next lesson, you'll learn how to add external style sheets to your web pages.

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, type styles.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.

In the next section, you'll learn how to turn a HTML list into a navigation bar.

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 list-style-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
tonav_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!

In the next section, you'll learn how to position elements with CSS.

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;
margin-bottom: 40px;

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.

In the next lesson, you'll learn how to a add comments to your CSS code.

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.

In the next lesson, you'll learn how to position things with CSS.

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 z-index: 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.

In the next lesson, you'll see how to use the CSS property float.

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.)

In the next lesson, you'll see how to create a simple one column layout.This will introduce you to
the new HTML5 elements.

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.)

In the next part, you'll learn how to style your HTML 5 layout.

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).

In the next lesson, we'll look at the styling for the HTML5 tags.

Styling the HTML5 Tags

<< Continued from previous section

Styling the HTML5 HEADER Tags

The styling for our first HEADER tag is this:

HEADER#Banner {

width: 940px;
height: 100px;
margin: 5px auto;
border: 1px solid #000000;
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;
border: 1px solid #000000;
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;
margin-bottom: 50px;

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;
margin-bottom: 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.

In the next lesson, you'll learn how to create a two column layout using HTML5 and CSS.

A Two Column Layout Using HTML5 and CSS

<< Continued from previous section

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 the extra_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 Course : Download the Extra Files needed for this course (You don't need the
downloads for the old course.)

Open up the HTML page first and take a look at the code. The page is
calledlayout_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
the display: 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.

In the next section, you'll learn how to create a table using HTML and CSS.

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>
<TD>Cell 2 Data</TD>
<TD>Cell 3 Data</TD>
<TD>Cell 4 Data</TD>
<TD>Cell 5 Data</TD>
<TD>Cell 6 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>
<TD>Cell 1 Data</TD>
<TD>Cell 2 Data</TD>
<TD>Cell 3 Data</TD>
<TD>Cell 4 Data</TD>
<TD>Cell 5 Data</TD>
<TD>Cell 6 Data</TD>
</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.

In the next lesson, you'll learn about row and column spanning.

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!
In the next lesson, you'll learn about table attributes.

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.
In the next section, you'll leatn about the HTML 5 table elements.

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.

In the next section we're going to explore HTML forms.

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 form frmTest.

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.

Over the next few sections, we'll take a closer look at all the form elements above.

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">

<INPUT TYPE = "Text" TabIndex="3">
<INPUT TYPE = "Text" TabIndex="1">

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 side-by-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-family: Arial, Helvetica, sans-serif;
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.

In the next lesson, you'll see how to use CSS to format your text boxes.

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.

In the next lesson, you'll see how to add labels to text boxes, and how to style form buttons.

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:

<TEXTAREA ROWS="7" COLS="30" NAME="TextArea1" ID="TA1">

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>
<TEXTAREA ROWS="7" COLS="30" NAME="TextArea1" ID="TA1">
Default text area
</TEXTAREA>

Exercise
Add a Textarea to your own form. Apply some CSS styling to liven it up a little.

HTML5 adds some more attributes you can use with the TEXTAREA tag, and you'll see these
shortly

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="26 to 40">26 to 40</OPTION>
<OPTION Value="40 to 60">40 to 60</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-family: Arial, Helvetica, sans-serif;

font-size: 18px;

Now everything with the HTML SELECT tag will have its font and font size changed.

In the next lessons, you'll see how to add passwords, and also something called a Hidden form
element.

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.

In the next section, you'll learn about HTML 5 forms.

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!

In the next lesson, you'll learn about Email, URL and Search boxes.

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!

In the next lesson, you'll learn about spinners and sliders.

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.

In the next lesson, you'll learn about Dates and Times in HTML 5.

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.

In the next lesson, you'll learn about HTML 5 data lists.

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!

In the next section, we'll take a look at how to lay out 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 Course : Download the Extra Files needed for this course (You don't need the downloads
for the old course.)

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/

In the next section, we'll move on to the HTML 5 VIDEO tag.

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-
shockwave-flash" 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">

<SOURCE SRC="your_audio.mp3">
<SOURCE SRC="your_audio.ogg">
<SOURCE SRC="your_audio.wav">

</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">

<SOURCE SRC="your_audio.mp3">
<SOURCE SRC="your_audio.ogg">
<SOURCE SRC="your_audio.wav">
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.

In the next lesson, you'll take a brief look at the HTML 5 canvas tag.

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-
shockwave-flash" 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">

<SOURCE SRC="your_audio.mp3">
<SOURCE SRC="your_audio.ogg">
<SOURCE SRC="your_audio.wav">

</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">

<SOURCE SRC="your_audio.mp3">
<SOURCE SRC="your_audio.ogg">
<SOURCE SRC="your_audio.wav">
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.

In the next lesson, you'll take a brief look at the HTML 5 canvas tag.

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 {

border: 1px solid #000000;

</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

In the next part, we'll take a look at a few more HTML 5 tags.

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.

In the next section, we'll move on and take a look at getting your site on the internet.

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.

In the next lesson, you'll learn how to buy some web space.

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.

In the next part, we'll take a look at Search Engine Optimisation.

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/

In the next part, we'll take a look at Pay Per Click advertising.

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/
In the next part, we'll take a look at sitemaps.

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