Part 23 … Why and How to Create Name Squeeze Pages.

For as long as I’ve been active in Internet marketing, and probably for a lot longer still, the mantra has been ‘The money’s in the list!’

In other words, if you can build a good email list, that is responsive to your recommendations, you should never starve.

How you make your list responsive is beyond the scope of this report, (hint: be personal, be personable, be unique and be prompt), but one way of building your list in the first place is what this report is all about.

As an Internet marketer, your email list is your most treasured possession. It needs to be nurtured. But how do you get people onto that list in the first place?

You can set up a website with a name capture form on it – you’ve seen them many times, they usually say ‘Subscribe here’ or something similar.

You can also put a pop up on your page to remind people to subscribe.

Both are effective strategies, but there is one method that is much superior – so good in fact that from the same number of unique visitors to your site you could easily get two or three times the subscribers.

It is called a name capture, or name squeeze, page. Its purpose is to entice your visitor with the promise of great content in your website, or other lovely incentives and then block access to all that good stuff until they have given you their name and email address.

That is the key difference between name squeeze and other type of ‘requested’ email address capture: the visitor has no choice. They must hand over their details or they have to click away.
Not just about building a list.

While building an email list is the end result of a name squeeze page, email marketing isn’t necessarily the objective. For many people who successfully use this technique, the objective is to make their website more responsive.

Forcing your visitor to hand over their email address before they can read the content of your site may seem a paradoxical way to make your site more responsive, but it really does work – for a number of reasons:

1. It weeds out the tire kickers. Many people surf to websites without a clear idea of what they want. Yes, they are traffic, but traffic of a very low quality. Their true interest in what you have to offer is negligible and the likelihood of them responding to your offer is minimal. Forcing those people to actively enter your site will do one of two things – it will crystallize their thoughts sufficiently to make them more aware of your message, or it will turn them away. Either way, the people who get through to your site will be far higher quality, and your conversion rate should increase.

2. If you ‘sell’ the idea of parting with their email address effectively you can create a feeling of exclusivity that makes the visitor feel special. This is a powerful emotion which, if carried through into the website itself, creates a feeling of belonging to a special club.

3. Dr Robert Cialdini, in his book ‘Influence, Science and Practice’, makes the point that one of the strongest ‘influencers’ on people’s buying behaviour is reciprocation. In summary, that means that when you give a person a gift before you try to sell them something, they sub-consciously feel obligated. This sense of obligation can hugely increase their likelihood to buy from you when you do make them an offer. You can easily use this concept in your name squeeze page by offering them a special gift – an ebook, a special report, access to a hidden part of your website, an exclusive tip – the potential is almost endless – for which, incidentally, they have to give you their email address to receive.

Name squeeze pages work because you make a compelling offer to the visitor:

• You offer then a free report for instant download
• You offer them the #1 answer to their most pressing problem
• You pre-sell them on the fantastic content that is within your website

Then, instead of just giving them the download link, or the #1 answer, or a navigation button to the rest of your site, you put up a name capture form that they must fill in to get the reward.

If you are really clever you will make it clear that the next step (whether it is the download, the answer, the entry code to read the rest of the site or some other ‘bribe’ that you have devised) will be immediately emailed to them.

Simply by doing that one thing you disincentivize many of the time wasters from giving fake email addresses just to get your information or your ‘bribe’.

This form of reward-based subscription is extremely effective.

Having said that – there is power in that thar list!

There are two additional truths that make the enforced capture of your website’s visitors email address so important:

“People do business with people they like.”

“It takes up to 7 contacts before people feel confident enough to buy.”

These may be generalizations, but they are based on hard-won experience from many successful marketers.

By capturing the name and email address of your site’s visitor, you gain the ability to begin a relationship with them. You can start to show them that you care about them, that you understand their needs and that you are more responsive and generous than the owners of other competing sites that they may have visited.

Your autoresponder can begin to send them regular tips, personal stories and other suggestions. Each one can have a call to action built in that will drive that person back to your website. And every time they follow that call, their return to your site will be with less and less resistance to your offers.

Over time, as you gain their trust and become more of a friend, you will have earned the right to make other offers too – providing you don’t overdo it!

Avoid spam accusations

These days, it has become increasingly important to make your email lists double opt-in.

What this means is that after the person fills in the form to subscribe to your list, they are sent an email that asks them to click on a link to confirm that they really want to subscribe. Only after performing that second action, the ‘double opt-in’, should they be actually added to your list.

The reason to do this is to protect yourself, as far as possible, from spam accusations.

There are lots of reasons why people yell spam. They may have forgotten that they signed up, or their email address may have been subscribed to your list without their knowledge.

When you can prove that your subscribers have double opted in to your list, you can show anyone who asks that the person positively and deliberately signed up, and, because the confirmation email was sent to their own address, that they were not signed up by anyone else.

When you run a name squeeze page it is important that you make the process double opt in. If possible, your name squeeze script should also log the time and date and the IP address of the computer from which the request was made.

These additional pieces of information are captured in the background – the visitor is unaware that they have been gathered, but are often necessary if you ever wish to transfer your list to a new autoresponder service in the future.

If the incentive that you are offering is good enough, they won’t be able to click on the confirmation link fast enough. They will be yearning for your ‘bribe’!
Factors that can make your name squeeze page even more effective.

An effective name squeeze page is a very simple thing. Too much information can just lead to confusion, and any actions for the visitor to take other than filling in their name and email address defeat the object.

Here are a few things that your page should include – but as with any Internet marketing advise, you should test each one to see how it affects responses in your own specific situation.

1. The page should make it clear who is behind it.

This is generally done with a header graphic or a strong pre-headline. Too many sites are hesitant to say outright who they are and what they do, but with a name squeeze page this is disastrous. You need your visitor to get the point of your site the instant they land.

2. The headline has to ‘sell’ a very clear benefit.

The WII-FM (what’s in it for me?) factor has to be particularly strong in a name capture page. Take time over crafting the perfect headline that pre-sells the content of your site and what it can do for the visitor. Make them salivate.

Only then will they part with their email address willingly.

3. Sales copy.

I have seen name capture pages that used very long sales copy, but they are rare. In the main, the copy you need should be just enough to whet the visitor’s appetite for the content of your site (or for the ‘bribes’ you are offering) and no more. Tell then enough to start them yearning for more – and then make them take action to get more.

4. The opt in form.
 
It may sound strange, but there are name squeeze pages out there that make you hunt for where to type in your details. Don’t do it. Make your opt-in form highly visible and impossible to miss.

5. Audio or video.

There is an increasing use of audio or video on name squeeze pages for the simple reason that they work.

On one of my own name squeeze pages (a sign up page for a newsletter) the simple addition of an audio testimonial increased my visitor-to-signup conversion by almost 300%.

6. Only one possible action.

Never, ever give visitors to your name squeeze page any other choices other than sign up, or go away.

There can be no compromise on that. As soon as you offer any other possible action, some of those visitors will take it and you will have lost them forever.

And that means no other offers, no AdSense ads, no tasters, no links of any kind whatsoever.

Name squeeze works because it forces visitors to declare their interest in what you have to say (by inputting their name and email address) or declare that they have no interest by hitting the back button.

Name capture or name squeeze pages, whatever you choose to call them, are the perfect way to ensure that all the traffic your sites get is targeted, focused on the message you have to give and motivated enough to take action to read it. It may reduce the overall numbers of people who move through your websites, but it will ensure that those who do are the highest quality traffic that you can get.

What you do with them after that is entirely up to you, but my advice is to treat them with respect, never abuse their trust, work as hard as you can to build a good relationship with them and over deliver in as many ways as you can.

That way your name squeeze pages will be among your most valuable tools for your long term Internet business.

1 Comment »

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!
 

2 Comments »

 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!

2 Comments »