How to Optimise Your Site

07:16
Search engine optimisation is a marketing discipline. It is not a stand alone function.
Before any specific optimisation activity is undertaken it is essential that two areas are
non-search areas are appraised:
Understanding your Organisation’s Online Business Strategy
Good SEO requires a through understanding of your organisation’s overall business
strategy. How does search fit in with activities such as advertising, e-mail and direct
marketing? Is there a marketing plan? What does it say about objectives, strategy and
budgets? What is the overall direction of the business and what can search contribute?

Researching your Market Category, Customers and Competitors
Good SEO also requires a thorough understanding of the market category within which
the search project and web site will compete. What is the category size and how is it
developing. What other channels to market are there? What information is available
regarding their behaviour and attitude of customers? What role in the buying process is
played by the search marketing? Who are current and likely competitors? Once the above
is fully grasped you can proceed to the first real activity of SEO; Keyword selection.

Keyword Selection - Factors
Keyword selection is the first search specific discipline. Having explained that spiders
read and index text, we find that some text is more important than others. That text is
keywords. Valuable keywords are the words or phrases that prospective customers use
when searching in your market category. Keyword selection is therefore crucial and has
implications for so much else within search. I have drawn up a list of factors that should
be taken into account when selecting keywords.
Category Priorities
The first thing to remember is that the number of keywords you can use on any one site
or page has a finite limit. A general recommendation is that there is an overall limit of 20
Read More

Table basics in HTML

06:32
It’s reasonably straightforward to create a simple table when hand-coding markup. The
bare essentials of a single table is an opening <table> tag, followed by at least one table
row (a <tr>), followed by at least one table cell (a <td>, meaning “table data”). Here’s an
example:
<table>
<tr>
<td>Some data</td>
</tr>
</table>

That’s about as minimalist as you can get when it comes to creating tables, but you’re
unlikely to create a table with only one item of data, so let’s make things a touch more
interesting. The following markup is for a two-column table with four rows of data (the
presentational border attribute is just here as a visual aid to better distinguish the layout
of the table, and its effect should be replicated with CSS in a production environment):
<table border="1">
<tr>
<td>Name</td>
<td>Place of residence</td>
</tr>
<tr>
<td>Paul Haine</td>
<td>Oxford</td>
</tr>
<tr>
<td>Vikki Roberts</td>
<td>Bracknell</td>
</tr>
<tr>
<td>Leon Boardman</td>
<td>London</td>
</tr>
<tr>
<td>Emma Sax</td>
<td>Peaslake</td>
</tr>
</table>
Read More

Anatomy of an XHTML document

06:24
Finally, let’s look at how a strict XHTML 1.0 document is laid out:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Our title</title>
</head>
<body>
<p>Our content</p>
</body>
</html>
Let’s now go through this markup one line at a time.
Doctype declaration
First we see a doctype declaration. A doctype declaration provides an indication as to
what Document Type Definition (DTD) you’re going to be writing your markup to. A
DTD is basically a page detailing the rules and grammar of the markup. It can look a little
daunting, but let’s break it down and examine each piece. The doctype starts off like this:
<!DOCTYPE
Nothing much more to say here; this is just how a doctype begins. The root element of the
document that will appear after the doctype declaration—the <html> element—needs to
be specified immediately after the opening of the declaration:
<!DOCTYPE html
Note that we can use html or HTML, depending on the version of (X)HTML we’re writing to
and how we’re writing it. For all XHTML doctypes, the root element should be in lowercase,
but for HTML doctypes the root element may be uppercase if the rest of your tags
are written so.
Following that, we have the word PUBLIC:
<!DOCTYPE html PUBLIC
This indicates that the DTD we’re about to reference is publicly available. If the DTD was
private, then we would use SYSTEM instead (as in “a system resource,” probably a locally
held resource somewhere on your network).
Next we have the Formal Public Identifier (FPI), which describes details about both the DTD
and the organization behind the DTD.
Read More

XHTML vs. HTML

05:06
The question of whether to use XHTML or HTML will often not even come up in an average
web project; most web designers these days will naturally gravitate toward XHTML, as
it is perceived as being new, advanced, and the “X” makes it sound cool. The truth is,
XHTML isn’t as different from HTML as people think, and the purpose of this section of the
chapter is to discuss exactly how XHTML differs from earlier versions of HTML, debunk
some myths and misconceptions about XHTML and HTML, examine the issues behind
MIME types, and cover when it is (and isn’t) appropriate to use XHTML over HTML.

Differences between XHTML and HTML

There are several rules that apply to XHTML that do not apply to HTML. These are fairly
straightforward and you may know some (or all) of them already, but to reiterate:

The <html>, <head>, and <body> tags are all required in XHTML.

The <html> tag must have an xmlns attribute with a value of http://www.w3.org/
1999/xhtml.

All elements must be closed. I touched upon this earlier, but just remember that an
opening tag must have either an equal closing tag (if it’s a container tag) or a selfclosing
space-plus-slash.

All tags must be written in lowercase.

All attribute values must be quoted with either single quotes or double quotes.
Thus, class=page is invalid but class="page" and class='page' are both fine.

All attributes must have values. Some attributes, such as the selected attribute
used with the <option> tag, could be written in a shortened form in HTML—that is,
<option selected>data</option> would be valid. In XHTML, however, you must
write <option selected="selected">data</option>.

Ampersands should be encoded. That is, you should write &amp; instead of just &.
This is true wherever the ampersand is: in your content or in a URL.
Read More

id and class attributes

05:03
The id attribute is used to identify elements and mark up specific functional areas of a
website, and the class attribute is used to classify one or more elements. These important
attributes help you target elements when it comes to styling or scripting. I refer to both of
these attributes throughout the book, but for now all you need to know is that a specific
id attribute value can be used just once per page, whereas a class attribute value can be
used multiple times (the attributes themselves can be used multiple times per page). For

example, say you begin a document with this:
<body id="homepage">

You would then not be able to use an id attribute value of homepage anywhere else on the
same page. However, if you do this:
<body class="homepage">

then you are free to use the class attribute value of homepage as many times as you like
throughout the same page, but bear in mind that it still applies the same CSS, no matter
what tag you apply it to.

<div id="rightColumn">
<strong class="redText">
<p class="big">
Read More

Divs and spans

05:02
Divs and spans are two tags that, when used well, can help give your page a logical structure
and some extra hooks to apply any CSS or DOM scripting that you might need later. When
used badly, they can litter your document unnecessarily and make your markup, styling, and
scripting needlessly complicated.


<div id="header">
...
</div>
<div id="mainContent">
...
</div>
<div id="secondaryContent">
...
</div>
<div id="footer">
...
</div>

A span is used for marking out sections within a block element and sometimes inside
another inline element. It is an inline element, just the same as <em>, <strong>, or <a>,
except without any semantic meaning—it is simply a generic container. It can itself contain
further inline elements, including more spans. For example, say you wish to color the first
two words of a paragraph red, keeping the rest of the paragraph black. You can use a
<span> for this:
<p><span class="leadingWords">The first</span> two words of this å
paragraph can now be styled differently.</p>
A span cannot contain a block element—that is, you cannot place a <div> within a <span>
and expect it to work the way you want.
Read More

CSS and Canvas HTML5

03:39
As with most HTML elements, CSS can be applied to the canvas element itself to add borders, padding,
margins, etc. Additionally, some CSS values are inherited by the contents of the canvas; fonts are a good
example, as fonts drawn into a canvas default to the settings of the canvas element itself.
Furthermore, properties set on the context used in canvas operations follow the syntax you may
already be familiar with from CSS. Colors and fonts, for example, use the same notation on the context
that they use throughout any HTML or CSS document.
Browser Support for HTML5 Canvas
With the arrival of Internet Explorer 9, all browser vendors now provide support for HTML5 Canvas, and
it is already in the hands of a majority of users. This is a major milestone in web development, allowing
2D drawing to thrive on the modern Web.
In spite of the dwindling market share of previous versions of Internet Explorer, it is still a good idea
to first test whether HTML5 Canvas is supported before you use the APIs. The section “Checking for
Browser Support” later in this chapter will show you how you can programmatically check for browser
support.
Read More

Overview of HTML5 Canvas

03:37
When you use a canvas element in your web page, it creates a rectangular area on the page. By default,
this rectangular area is 300 pixels wide and 150 pixels high, but you can specify the exact size and set
other attributes for your canvas element.  A Basic Canvas Element
<canvas></canvas>
Once you have added a canvas element to your page, you can use JavaScript to manipulate it any
way you want. You can add graphics, lines, and text to it; you can draw on it; and you can even add
advanced animations to it.
The Canvas API supports the same two-dimensional drawing operations that most modern
operating systems and frameworks support. If you have ever programmed two-dimensional graphics in
recent years, you will probably feel right at home with the Canvas API because it is designed to be similar
to existing systems. If you haven’t, you’re about to discover how much more powerful a rendering
system can be than the previous images and CSS tricks developers have used for years to create web
graphics.
To programmatically use a canvas, you have to first get its context. You can then perform actions on
the context and finally apply those actions to the context. You can think of making canvas modifications
as similar to database transactions: you start a transaction, perform certain actions, and then commit
the transaction.
Read More

Using the Selectors API HTML5

03:32
getElementById() -Returns the element with the specified id attribute value
<div id="foo">
getElementById("foo");

getElementsByName() -Returns all elements whose name
attribute has the specified value
<input type="text" name="foo">
getElementsByName("foo");

getElementsByTagName() Return all elements whose tag name
matches the specified value
<input type="text">
getElementsByTagName("input");

With the new Selectors API, there are now more precise ways to specify which elements you would
like to retrieve without resorting to looping and iterating through a document using standard DOM. The
Selectors API exposes the same selector rules present in CSS as a means to find one or more elements in
the page. For example, CSS already has handy rules for selecting elements based on their nesting,
sibling, and child patterns.
Read More

CSS File for the HTML5 Page

03:29
body {
background-color:#CCCCCC;
font-family:Geneva,Arial,Helvetica,sans-serif;
margin: 0px auto;
max-width:900px;
border:solid;
border-color:#FFFFFF;
}
header {
background-color: #F47D31;
display:block;
color:#FFFFFF;
text-align:center;
13
}
header h2 {
margin: 0px;
}
h1 {
font-size: 72px;
margin: 0px;
}
h2 {
font-size: 24px;
margin: 0px;
text-align:center;
color: #F47D31;
}
h3 {
font-size: 18px;
margin: 0px;
text-align:center;
color: #F47D31;
}
h4 {
color: #F47D31;
background-color: #fff;
-webkit-box-shadow: 2px 2px 20px #888;
-webkit-transform: rotate(-45deg);
-moz-box-shadow: 2px 2px 20px #888;
-moz-transform: rotate(-45deg);
position: absolute;
padding: 0px 150px;
top: 50px;
left: -120px;
text-align:center;
}
One last thing to keep in mind is that browsers may seem to render things as if they actually
understand these new elements. The truth is, however, that these elements could have been renamed
foo and bar and then styled, and they would have been rendered the same way (but of course, they
would not have any benefits in search engine optimization). The one exception to this is Internet
Explorer, which requires that elements be part of the DOM. So, if you want to see these elements in IE,
you must programmatically insert them into the DOM and display them as block elements.
Read More