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!
 

If you have enjoyed this article, please social bookmark it!:
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • LinkedIn
  • Furl
  • YahooBuzz

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

2 Comments »