HTML, XHTML and CSS
Archived posts from this Category
Are keywords or description meta tags any use for SEO?
Posted by Martin| Tagged as: HTML, XHTML and CSS
Do meta tags in your web pages give you SEO advantages?
Is it true that keywords and description metatags are a joke and that anyone bothering to put them on their web pages is wasting their time?
In Internet marketing, and particularly SEO, you should be very wary of anyone who makes categorical statements. Especially when those statements are about Google.
The fact is that nobody really knows.
What IS ‘known’ is that Google SAY they don’t take any notice of the keywords meta tag. I emphasize SAY because Google have a track record of saying one thing and meaning another. It really isn’t in their interest to tell you what they really take notice of in ranking web pages.
Having said that, there is probably little or no actual Search Engine Optimization benefit to spending a long time crafting a keyword-stuffed meta tag. There MAY be a benefit, however, in simply putting one or two primary keywords in there. Why? Because even if none of the search engines use the data today, who is to say that they won’t use it tomorrow. Algorithms change all the time and we generally have no idea what is making a difference at the margin.
And if someone comes up with real proof in two years time that pages with keyword meta tags on them rank better you would kick yourself if you’d assumed that putting it on the thousands of pages you may have built by then was ‘a joke’. Especially as that joke takes such little time and effort to tell.
A search on the term ‘keyword meta tag’ will find you all kinds of ‘experts’ who suggest that both the keywords and the description meta tags are a waste of time. That is patently false because you can prove that Google are reading the description tag – that’s where they prefer to get the snippet they use to describe your page in their listings.
There is no evidence that the description tag gives you any ranking advantage, but it sure as anything helps to draw attention to your page wherever it does get ranked.
It seems that Google prefer to use the description meta IF it includes the primary keyword for the page. If not, they will pick a random snippet from you page text that does include the keyword or phrase – as far as possible.
This can lead to some weird listings – as we all know.
To some extent you can control that by crafting a good description meta – one that includes your primary keyphrase and, in a natural writing style, common derivations of it.
As I said at the beginning, anyone claiming to be an ‘expert’ on what Google do or don’t do, and who gives you concrete, black & white instructions about what will or won’t rank your pages is stretching their own reputation thinly and quite probably is looking to sell you something.
And, although I’m not trying to sell you anything, I include my own observations in that disclaimer as well.
XHTML and Basic CSS for Beginners [#2]
Posted by Martin| Tagged as: HTML, XHTML and CSS, The Kickstart Guide to Making Money Online
Part 22: HTML for Beginners [#2]
We ended the last lesson having seen how headlines can be created with <h1>, <h2> (and so on) tags; how paragraphs can be kept apart with <p> tags; how the basic structure of an HTML page is built up from a <head> section and a <body> section, and how all of that can be made to look how we want it to by styling.
That was quite a start, but it hopefully showed you that writing web pages isn’t complicated once you know a few tags and understand how they fit together.
By the end of today’s lesson you should know how to build a simple sales page.
Firstly, let’s learn a new tag.
Because of the way that CSS allows us to style elements on the page, it is useful to have a way to keep things divided up into discrete chunks. We do that by grouping things together inside a divider tag – called, unsurprisingly, <div></div>.
We’ll start with the code we wrote in the last lesson:
<html>
<head>
<style>
p {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
color: red;
}
h1 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 18pt;
color: navy;
font-weight: bold;
}
h2 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 14pt;
color: blue;
font-style: italic;
}
</style>
</head><body>
<h1>Main headline</h1>
<p>Here is some text in the body section.</p>
<h2>Secondary headline</h2>
<p>Here is a second paragraph.</p>
</body>
</html>
Now, let’s think for a minute about what a sales page needs (it is always useful to plan your pages on paper, so when you come to write your code, you know where everything has to go).
My simple sales page will have the following parts:
1. Headline
2. Subhead
3. Product image to appear to the left
4. 4-5 paragraphs of body text wrapped around the image
5. A testimonial
6. A guarantee
7. Some call-to-action text
8. A buy now link
The page itself will be 750 pixels wide, centered on screen, with a white background. The page that it will rest on will be silver.
Okay, let’s start to build the structure – I’ll only show the <body> part of the code for now to keep it as easy to read as I can.
<body>
<!– The top of page div –>
<div>
<h1><h1>
<h2></h2>
</div>
<!– The body text div –>
<div>
<img />
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<!– The testimonial div –>
<div>
<p></p>
</div>
<!– The guarantee div –>
<div>
<p></p>
</div>
<!– The call-to-action div –>
<div>
<p></p>
</div>
<!– The buy button div –>
<div>
<a></a>
</div>
</body>
</html>
There are a few new things in there, so I’ll explain them for you.
The <div> tags, as explained earlier are used to divide the code up into sections. This gives us a lot of control over how the page will end up looking and although divs are not always absolutely necessary – the top of page div here only contains headline text, which needn’t have gone into a div at all – they do give us freedom to do all kinds of things to the look of the page later.
Note that I’ve commented the code by using <!– and –> to surround each comment. When a browser encounters <!– on an HTML page it knows to ignore everything that follows until it reaches the closing –> part of the tag. The words inside the tag are purely intended to be read by someone who is working on the code – and is very useful when the code gets quite long.
Comments are an important part of writing code because it can be very easy to forget what you were intending to do and get muddled. The comments act as useful reminders.
Next, we have an image tag: <img />
The <img> tag is one of the few HTML tags that don’t have a closing half. In the form of HTML that we are learning here, XHTML, you put a forward slash at the end of the tag, just before the angle bracket to show that the end of the tag has been reached.
Finally, we see an anchor tag: <a></a>. This tag is the workhorse of HTML and is what makes the World Wide Web possible. It is the tag that creates links.
Now, what we have in the code example is a bunch of place holders, nothing more. There is no content
and no styling yet.
Next, we’ll fill in the blanks and create a very simple sales page for my popular script Keyword LSI Spy.
First the headlines:
<body>
<!– The top of page div –>
<div>
<h1>Keyword LSI Spy: Uncovers the Secret Words the Search Engines Love<h1>
<h2>Discovers the hidden on-page SEO of top-ranked sites – ANY keyword, ANY niche</h2>
</div>
Then the pack shot image. I have saved the image to my server in the same directory as the sales page, as a file called packshot.jpg.
<!– The body text div –>
<div>
<img src=”packshot.jpg” align=”left” />
Whenever you display an image with the <img> tag, you have to specify where the image is to be found. The ‘src’ element of the tag means source. In their default state, browsers place an image tight up against the left-hand side and then start any text that appears around them from the bottom right-hand corner of the picture. That just looks silly, so we add the ‘align=”left”‘ instruction to tell the browser to wrap the text starting from the top right-hand corner.
If we wanted the image to appear on the right-hand side of the page, we’d use ‘align=”right”‘
Now we can add the body text:
<p>Latent Semantic Indexing is a very sophisticated system that the search engines have started to use that assesses the importance of a webpage according to the words that are used on it. At its simplest, a page about ‘horse riding’ would be expected to use horse-related words like: horseback; horses; ride; equine; trail; rides; stables; equestrian; ranch; rider; mountain; lessons; saddle; horseback riding; trail rides.</p>
<p>Using such associated LSI words will make your articles and websites more three-dimensional in the search engines’ eyes. They’ll be seen as better authorities on their subjects.</p>
<p>Keyword LSI Spy looks at what the search engines actually do, rather than what they may say they do. It analyzes the web pages that the SEs actually rank highest for any given keyword or key phrase and reports back to you the words that appear on those pages most frequently.</p>
<p>This different approach makes sure that you know the words that the SEs really want to see – and uncovers far more of them to make your website and articles as good as they can be.</p>
<p>Keyword LSI Spy does a whole lot more too. it also tells you whether you niche demands long, wordy web pages, or short, pithy ones. It uncovers the primary keyword density that the search engines prefer for your niche – yes, every niche is different, and this is information you need to know. And it reports back to you all the keywords that the top-ranked sites consider important that are related to your keyword or phrase.</p>
<p>This is incredibly valuable market intelligence that has been difficult or impossible to find out – before Keyword LSI Spy came along!</p>
</div>
I’m not aiming for any copywriting prizes here – this is an example only. A real sales page would build up a much more compelling story and would expound on the benefits of the product for the reader. But hopefully you get the idea.
The testimonial goes in in the same way:
<!– The testimonial div –>
<div>
<p>”I knew from past experience that a product from you would be both useful and top quality, but I was still really impressed with your Keyword LSI Spy script. Not only does it dig nicely into new niches based on nothing but a generic keyword, it also gives you everything you need to know to beat all of the competition. The intelligent representation of the keywords is enough to get a PPC campaign running quickly, or know exactly what terms to use to build content that will get visitors.<br /><br />Great Job!<br />Andy Henry</p>
</div>
There is a new tag embedded in that testimonial text. Look closely near the end and you’ll see some ‘break’ tags – written as <br />. These force the browser to start a new line.
Note that the <br /> tag, like the <img /> one doesn’t have a specific closing part, it is complete in itself (with the trailing slash).
<!– The guarantee div –>
<div>
<h3>Guarantee?</h3>
<p>Of course!</p>
<p>You are free to return Keyword LSI Spy 2 at any time, for any reason, up to 8 weeks (56 days) from purchase for a full, no questions asked refund.</p>
</div>
No surprises in the guarantee section. In a real sales page you can make this part as long or short as you like – but if you sell through ClickBank, as I do with Keyword LSI Spy, you must have some kind of guarantee statement that conforms with ClickBank’s terms and conditions (as my one does).
<!– The call-to-action div –>
<div>
<p>Find out how amazingly useful Keyword LSI Spy can be for you by taking our unique free trial right now. There is no obligation to buy and you can run the program completely free three times. I won’t even ask for your email address.</p>
</div>
Here I’ve explained that the reader can trial the software free of charge without obligation. I could equally have just reiterated the offer and told them the price, but I’ve found the free trial to be very effective in generating the sale.
Finally, we come to the buy button – the take action part of the page.
In this case, I’ll create a simple text link so you can see how a hyperlink is created for a web page, but you can make this an image link just as easily.
<!– The buy button div –>
<div>
<a href=”http://www.keywordlsispy.com/kls2trial.htm”> Click here for your free no-obligation trial of Keyword LSI Spy</a>
</div>
</body>
</html>
The <a> tag is very simple. It requires the ‘href’ part (href means hypertext reference) to tell it where the link should lead to. Then, between the <a href=”" mce_href=”"> and the closing </a> parts goes any text that we want to turn into a link. By default, that text will always show up in blue.
That’s it – a whole sales page created with just a handful of new HTML tags.
You can see it online at http://www.imkickstart.com/course/html/mypage4.htm
… and it looks ghastly! Although we’ve created the content for the page and divided it up into sensible sections, we haven’t yet done anything to style it (apart from the odd bit of styling that has carried over from the last lesson).
Let’s put that right.
Here is the HTML for the header again:
<html>
<head>
<style>
p {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
color: red;
}
h1 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 18pt;
color: navy;
font-weight: bold;
}
h2 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 14pt;
color: blue;
font-style: italic;
}
</style>
</head>
I’m happy enough with the headline styling, but the paragraph text needs to be black, and both the h1 and h2 headlines need to be centered.
p {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
color: black;
font-weight: normal;
text-align: left;
}
h1 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 18pt;
color: navy;
font-weight: bold;
text-align: center;
}
h2 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 14pt;
color: blue;
font-style: italic;
text-align: center;
}
Now we need to define the width of the page itself to 750 pixels. We can do that by adding a new <div> tag that surrounds all the visible page contents.
<body>
<div id=”main”>
<!– The top of page div –>
<div>
<h1>Keyword LSI Spy: Uncovers the Secret Words the Search Engines Love<h1>
.
.
.
<a href=”http://www.keywordlsispy.com/kls2trial.htm”>Click here for your free no-obligation trial of Keyword LSI Spy</a>
</div>
</div>
</body>
</html>
I’ve given this new <div> a name – the id=”main” bit. By calling it ‘main’ I can now style it to differentiate it from the other divs.
In the style section I’ll add an entry for main:
#main {
width: 750px;
}
Now take a look at the page:
http://www.imkickstart.com/course/html/mypage5.htm
Better, but still no cigar.
Now I will make the page background silver (a kind of grey) and the page itself white with a navy blue border. I will also ensure that the text doesn’t cram right up against the edges by padding the page with 5 pixels all round.:
body {
background-color: silver;
}
#main {
width: 750px;
background-color: white;
border: 1px solid navy;
padding: 5px
}
http://www.imkickstart.com/course/html/mypage6.htm
Now I want to make the testimonial stand out by enclosing it in a box, giving it a nice background color and italicising the text. I’ll do all that by naming its div ‘testimonial’ and styling that:
#testimonial {
width: 500px;
margin-left: auto;
margin-right: auto;
font-style: italic;
padding: 5px;
background-color: yellow;
}
http://www.imkickstart.com/course/html/mypage7.htm
Just a few more things to tidy up and we can finish for today.
We have an h3 tag in the guarantee section that hasn’t yet been specifically styled. Let’s do so:
h3 {
font-family: verdana, helvetica, sans-serif;
font-size: 12pt;
color: navy;
text-align: left;
font-weight: bold;
}
I’d like the text in the call-to-action section to be in bold and italic so I’ll name its div ‘call’ and add some styling to that:
#call {
font-family: verdana, helvetica, sans-serif;
font-size: 10pt;
color: black;
font-weight: bold;
font-style: italic;
}
And finally, the link is way too big because the <a> tag has picked up its styling from elsewhere so I’ll make it look nicer:
a {
font-family: verdana, helvetica, sans-serif;
font-size: 10pt;
color: blue;
font-weight: bold;
text-align: center;
}
http://www.imkickstart.com/course/html/mypage8.htm
That’s better. There are still a few things we can tinker with, but by and large we have a perfectly acceptable looking sales page.
You can view the souce code in your browser to see how it all fits together.
This lesson has been unavoidably long again. We’ll come back to HTML in the future to see how we can add some more advanced features to our pages.
Meanwhile the next lesson in the Foolproof, No-Nonsense, Kickstart Guide to Making Money Online will be a lot less technical!
XHTML and Basic CSS for Beginners [#1]
Posted by Martin| Tagged as: HTML, XHTML and CSS, The Kickstart Guide to Making Money Online
Part 21: HTML for Beginners [#1]
You certainly don’t need to know how to build websites by hand in order to make money online. There are all kinds of programs available that will build a website for you – from point-and-click general sitebuilding programs like Dreamweaver or Frontpage to the excellent XSitePro, which has been designed with Internet marketers in mind. There is even a very good open source program called Nvu, that I’m told works very well.
All that HTML and CSS stuff is very much an optional extra.
So why is it then, that so many people learn at least a smattering of HTML?
Because there are times when your site isn’t displaying quite how you’d like, or when you want it to do something that isn’t immediately obvious how to achieve in your site builder software. Those times, it is really, really useful to be able to roll up your sleeves and wade into the site’s source code.
HTML is quite straightforward. It isn’t like a scripting language that forces you to learn all kinds of functions and expressions just to get a display online. HTML has a very simple syntax and a remarkably small list of commands to learn. And many of those are never needed.
In the next couple of instalments of the course I’ll take you by the hand and show you how to write a real working web page from scratch – using nothing more than the Notepad text editor.
You see, text is all that a web page is. You may see a graphical interface on your monitor, but all that eye-catching display is written in easy to follow text.
HTML stands for HyperText Markup Language and it was the single invention that turned the Internet into the World Wide Web.
There have been many versions of HTML over the years and people have added features and functions as the Internet has developed and needs have changed. The version that I’ll be teaching you here is, technically speaking, called ‘XHTML transitional’ with CSS styling. But you really don’t need to know why – just follow the rules and you won’t go far wrong!
What is a web page?
A web page is made up of two sections – the head section, where information about the page is passed to the browser so it knows what it is looking at, and the body section, where all the stuff you see on your monitor lives.
Everything in a webpage is wrapped up in things called ‘tags’ that tell the browser what sort of information is coming up and how to display it.
The first tag is the one that tells the browser that the document it is looking at is an html page, so naturally it is called the html tag.
Almost all tags come in pairs, an opening tag and a closing one (there are a few exceptions which we’ll cover later) and are always enclosed in angle brackets – there will be one at the front of the information they define and one at the end – so a basic web page will start with <html> and will end with </html> (closing tags are the same as opening ones, but with a forward slash at the front.
As I said, the document that makes up the webpage has a head section and a body section and they are defined by their own tags:
<html>
<head></head><body></body>
</html>
That’s it – a complete, webpage. If you were to put those few lines into Notepad and save them with a filename something like mypage.htm, you could upload it to your hosting space and it would be valid. Wasn’t hard, was it!
Note that HTML webpages can be saved with a file name that ends with either .htm or .html. Both work equally well.
Of course, the example is a web page that displays nothing and does nothing, so it is pretty useless, but fundamentally all web pages are just expansions on that basic model.
Let’s add some text so our new web page has something to display:
<html>
<head></head><body>
Here is some text in the body section
</body>
</html>
If I now save that as mypage.htm and upload it, what do you think will show up when I point my browser at mypage.htm?
That’s right – the browser displays ‘Here is some text in the body section’.
Take a look – http://www.imkickstart.com/course/html/mypage.htm
Boring, but one step up from a blank screen!
Now, the first thing to see here is that we have done nothing to tell the browser how we want that text to be displayed, so it just puts it on screen using its standard default settings. The default settings in the various browsers that people use may or may not be the same, so essentially we have no control over how people will view our words.
We can impose control – so that all browsers will show it the same way, by wrapping the text in a tag of its own and applying some styling to it.
The text is a new paragraph, so it makes sense to wrap it in a paragraph tag: <p>Here is some text in the body section</p>.
So that you can see one of the main effects of <p> tagged text, I’ll add another paragraph below it (see the code example below).
We still don’t know how any individual browser will be set up to display text within paragraph tags, and that is where CSS styling comes in.
In the head section, we add a <style></style> tag (remember, the head section is the place we pass messages to the browser).
Inside the style tag we define how we would like the <p> tag to be displayed:
<html>
<head>
<style>
p {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
color: red;
}
</style>
</head><body>
<p>Here is some text in the body section.</p>
<p>Here is a second paragraph.</p>
</body>
</html>
Oooh – is it getting complicated? Not if I break it down and explain what is going on here.
The <style></style> tag tells the browser that everything inside is to be taken as an instruction for how to display something.
In this case, the ‘something’ is whatever is put inside of a <p></p> tag.
The syntax of the styling block is straightforward:
1. First we say what we want to style – in this case the p tag (we don’t type the angle brackets because the browser knows that is what we are referring to.
2. After we’ve said what to style, we type an open curly bracket to hold all the different styling elements for that tag together.
3. Then we say what about the tags contents we want to style and how we want it to appear on screen. Each element has a name followed by a colon, the styling itself, and then a semi-colon to show that the element is complete.
4. It is usual to place each element on a new line, for ease of reading, but so long as the semi-colons are there to tell the browser which bit is which, you could put them all on one line if you prefer. It would be very messy to debug later though!
5. A closing curly bracket completes the styled section.
Here, I’ve told any browser that reads the page to show anything inside of a <p></p> tag using the verdana font if it exists on the viewer’s computer, otherwise to use the arial font. If the viewer is using a Mac, then I’ve specified helvetica (it is the arial equivalent for Macs) – and if none of those are on the viewer’s computer, to use whatever standard sans-serif font does exist. We can define as many fonts as we like, or have the patience to type out.
Next I’ve told the browser to display as 10-point text.
Finally, I’ve told it to display the text in red.
Here it is: http://www.imkickstart.com/course/html/mypage1.htm
See that gap between the two paragraphs? That’s the main effect of the <p> tag that is built in to all browsers that I alluded to above.
The <p> tag is the workhorse of web pages. You’ll use it a lot. But it are not the only tag you can use to determine the look of lines of text.
We can also use headline tags – there are 6 built in to the HTML standard – <h1>, <h2>, <h3> and so on, up to <h6>. All closed in the usual way.
Let’s see what they look like by adding some headlines to our page:
<html>
<head>
<style>
p {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
color: red;
}
</style>
</head><body>
<h1>Main headline</h1>
<h2>Secondary headline</h2>
<h3>Sub headline</h3>
<h4>Headine 4</h4>
<h5>Headline 5</h5>
<h6>Headline 6</h6>
<p>Here is some text in the body section.</p>
<p>Here is a second paragraph.</p>
</body>
</html>
Take a look here: http://www.imkickstart.com/course/html/mypage2.htm
Personally, I’ve never needed to use more than <h1>, <h2> and <h3> – I suspect that the others were originally included in the HTML standard so that official documents and scientific papers could be displayed online.
Of course, I don’t know which browser you are using, and so can’t be sure that you are seeing each of the headlines in the same way that I am. Hence we can – and usually should – fix the way they look by styling them with some CSS.
I would like the main headline of the page to be in bold and navy blue and the subhead (I’ll use <h2>, to be in blue and italic. Both will still be shown in verdana font for those who have it.
Here, then is the new code:
<html>
<head>
<style>
p {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
color: red;
}
h1 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 18pt;
color: navy;
font-weight: bold;
}
h2 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 14pt;
color: blue;
font-style: italic;
}
</style>
</head><body>
<h1>Main headline</h1>
<p>Here is some text in the body section.</p>
<h2>Secondary headline</h2>
<p>Here is a second paragraph.</p>
</body>
</html>
http://www.imkickstart.com/course/html/mypage3.htm
Note that the <h> tags all automatically put a gap below their text, just like <p> tags do.
Modern HTML – this thing I’ve called ‘XHTML Transitional with CSS Styling’ differs from the original HTML in one major way – in the past, HTML didn’t have the <style> tag to allow all the ‘presentation’ instructions (the bits that don’t affect WHAT is being displayed, but do affect HOW it is displayed) to be kept separate. They had to be written into the flow of the text. So, for example, the main headline of our little example page would have had to be written like this:
<h1>
<font face=”Verdana,Arial,Helvetica,Sans-Serif”>
<font color=”Navy”>
<font size=”18pt”>
<b>Main headline</b>
</font></font></font>
</h1>
Quite a lot of extra code – and when you consider that all that has to be retyped for each headline and for each paragraph, you can see why writing web pages was quite tedious and resulted in bloated files sizes.
Old-style HTML had no memory. If you told it to display one paragraph in 10-point Verdana it wouldn’t remember that for the next paragraph – you’d have to tell it all over again – and again.
With the new way of doing things we can determine the ‘presentation’ data once – as we’ve done in the style tag in our example code, and then be comfortable that our display choices will be used throughout the entire web page.
And if we change our mind and want to have each paragraph display in a different font or size, we don’t have to change endless <font> tags throughout the script – all it takes is changing one line in the <style> section and the change is actioned everywhere.
Keeping presentation separate from content is wonderful thing and is the whole driving force behind the move to XHTML and CSS.
I think that’s probably enough for this lesson – we have learned about 11 tags already: html, head, style, body, h1, h2, h3, h4, h5, h6 and p. Also we’ve seen how CSS is written and looked at a few simple examples. When you consider that even the most adventurous website builders rarely use more than 30 or 40 HTML tags, you can see that this isn’t brain surgery – in fact you are already on the road to becoming an expert!
