A. The HTML
1. Introduction
In internet marketing, it is important to have a salespage for the product we’re promoting, and it’s equally important for the salespage to be “good looking”.
Let’s start at the beginning. We need a solid body for the salespage. It needs to be centered no matter the size of the viewer’s screen. It needs to be clean and clear.
First we create a new folder with the name of our campaign, then we open a new document in our text editor and save it as index.html in the folder.
The first tags we should put in our sales page are the html and body tags and their respective closing tags as follows
<html> <body> </body> </html>
All tags begin with < and end with >. All closing tags have a forward slash / before their name.
2. All these
‘s
Let’s look at our
tag as the oven where we’re gonna bake cookies.
Since we want to have cookies of different sizes and shapes, we’re also gonna have what we call divs, they’re like divisions, which are denoted with the
tags. We are then going to identify our different divs with unique ID’s.
With CSS, using these unique div names or IDs to refer to them, we can give any style (color, size, font, etc.) to any division in the HTML body. So we label them or ID them to be able to change the way they look separately, using that unique ID we have given them.
Here’s what it looks like:
<html>
<body>
<div id="arbitraryName1">
</div>
<div id="arbitraryName2">
</div>
<div id="arbitraryName3">
</div>
</body>
</html>
3. The ‘container’
But we have something missing here. Think about it, we’re not gonna take the cookie dough, place it in its unique form and put it directly in the oven. It’s gonna stick to the oven and we’re gonna have a hard time taking them out and they might burn.
What we need is a big container where we’re gonna place all our cookie dough, and then we’re gonna put it in the oven!
We will call that div a ‘container’.
<div id="container"></div>
Let me sidetrack a little here. I call it container because it’s easier for me to remember what that div is for. I can easily call it “div123″, but it has no meaning. The convention is to name the divs so that they’ll mean something to you.
For example, if I want to put some testimonials in my sales page, I’ll put them in a div and name it “testimonial”. This way, if I want to change the color or the font, I’ll know exactly where to find it in my CSS document (usually called styles.css).
So we put all our cookies in the container:
<html>
<body>
<div id="container">
<div id="arbitraryName1">
</div><!-- end arbitraryName1 -->
<div id="arbitraryName2">
</div><!-- end arbitraryName2 -->
<div id="arbitraryName3">
</div><!-- end arbitraryName3 -->
</div><!-- end container -->
</body>
</html>
Note: Whatever is inside is a comment. It is only seen by you and does not affect the appearance of the webpage. I strongly recommend for anyone who works with code to use comments especially to specify which div is
closing (as demonstrated above), because with longer code it might get messy and confusing.
So now we have our oven (
), our container (
), and our different cookie shapes. Our different cookie shapes are basically all the different ‘design elements’ we want on our salespage.
Example:
red, bolded, underlined, giant text
has a different
id than green, not bold, not underlined, tiny text.
A ‘testimonial’ has a different
id, the ‘guarantee’ has a different one (
).
These are four different elements of your salespage.
4. What is the container exactly and why use it?
Let me explain to you more in detail what the container does and this time let’s leave the cookies alone.
Why not just put all the images and all the text straight into the body? Why use the container? Well, you can but you won’t get the salespage look anymore. What I mean by the salespage look is dark text one white centered area and the surrounding color is dark to get your attention onto one place: your sales letter.
It’s with the container that you create the white and centered area in which the sales letter is written. And the dark background color surrounding the container is the
background color. Removing the container is like removing that white area, and leaving the text of the dark background.
Ok. For now we have the skeleton of our salespage:
<html>
<body>
<div id="container">
<!-- ALL CONTENT GOES HERE -->
</div><!-- end container -->
</body>
</html>
5. Header and images
Since our header is a different element, we put it in its own div and we name it header (because we want to). And we put an attractive header image in our div.
<div id="header">
<center><img src="images/myImageName.jpg" width="250" height="250" alt="Blogging" /></center>
</div>
When you call an image, you state that it’s an image, img, and then you write out the source, src, of the image, meaning where it’s located.
<img src="images/myImageName.jpg" />
From this, I know that your image is in a folder called “images”, your image name is myImageName and its type is JPEG, jpg. You have optional properties, width and height, that you can use to specify the size of the image, and there’s also the alt property that lets you describe the image.
In order for your images to appear, they have to be in a certain hierarchy with your CSS and HTML files
In order to call the image, as demonstrated above the index.html file (our salespage), the styles.css file (our stylesheet) and the images folder where all the images used for the salespage are, have to be in the same folder (preferably named after the campaign, i.e. dogtrainingguide).
Now we understand how images are called, we can place our header in our container.
<html>
<body>
<div id="container">
<div id="header">
<img src="images/myImageName.jpg" width="250" height="250" alt="This is a great description for my image" />
</div><!-- end header -->
</div><!-- end container -->
</body>
</html>
6. Headings, paragraphs and classes
The heading tags in HTML are
<h1> This is heading 1 </h1>
<h2> This is heading 2 </h2>
<h3> This is heading 3 </h3>
<h4> This is heading 4 </h4>
<h5> This is heading 5 </h5>
<h6> This is heading 6 </h6>
is the biggest heading and
is the smallest. You can definitely use
as the title of your salespage,
as the subtitle and the others such as
, to introduce different parts
<h3> Testimonial </h3>
<h3> Guarantee </h3>
That’s the default size of the heading but you can change it using CSS. I will show you how soon.
All paragraphs should be enclosed in the paragraph tags
.
<p> My long paragraph is here </p>
Again, you can modify the way the paragraphs look in CSS.
OK, lets quickly go over classes. Until now we’ve been labeling all of my divs using IDs. Why on earth do I have to use classes now?! It’s very simple, and I’ll try to explain it the best I can.
Let’s say sometimes, not always and not only once either, you want to use text that is bold, underline, italic and dark red. Say you’re gonna use it three times in your HTML document. In this case you create a class, you give it a specific style in the CSS document (in this case bold, underline, italic and dark red) and you can use this class as many times as you want in your HTML document!
To define a class in HTML is very similar to defining an id.
<div class="darkRed"></div>
You can also give a class to your headings and paragraphs as such
<p class="darkRed"> This paragraph will be bolded, underlined, italicized and dark red </p>
<h2 class ="darkRed"> This heading will be bolded, underlined, italicized and dark red</h2>
Any questions? OK, let’s move on. 
7.
When we create new divs or paragraphs or headings, there’s automatically a line break. But, in a salesletter it is very common to have one word in red or highlighted in yellow and underlined, etc, within one sentence. If we use
for that one word, it’ll go on the next line. So what do we do?
The tag comes to the rescue. As for everything else its closing tag is . Either a class or an ID can be attached to it. Here’s an example:
<p>This is a very long paragraph and I want <span class="yellowHighlight">this part to be yellow</span> and the rest to be normal.</p>
The fact that the part confined by the tags is yellow is defined in the CSS document.
8. Lists
List are wonderful to have in sales letter because they’re so much easier to read. There are two types of list:
• unordered list (ul) in which you place your list items
<ul>
<li> List item 1</li>
<li> List item 2</li>
<li> List item 3</li>
</ul>
• ordered list (ol)
<ol>
<li> List item 1</li>
<li> List item 2</li>
<li> List item 3</li>
</ol>
This is what we have so far:
<html>
<body>
<div id="container">
<div id="header">
<img src="images/myImageName.jpg" width="250" height="250" alt="This is a great description for my image" />
</div><!-- end header -->
<h1> My Great Title </h1>
<h2> My Great Subtitle </h2>
<p> Dear friend, </p>
<p> This is a great salesletter. I am selling a <span class="yellowHighlight">great product</span>. Read my testimonials.</p>
<h3> Here are the benefits </h3>
<ul>
<li>Great benefit 1</li>
<li>Great benefit 2</li>
<li>Great benefit 3</li>
<li>Great benefit 4</li>
</ul>
<div id="testimonials">
<h3>Here are some testimonials</h3>
<p>My testimonial paragraph</p>
</div><!-- end testimonials -->
<div id="guarantee">
<h3>Here's my iron clad guarantee</h3>
</div> <!-- end guarantee-->
</div><!-- end container -->
</body>
</html>
9.
and
To put a line break in your sentence, use the
element.
<h1>
This is the title<br />of my sales letter<br />containing line breaks!
</h1>
But the title doesn’t look too nice because it’s not centered. So to center the title simply enclose it in
<center>
<h1>
This is the title<br />of my sales letter<br />containing line breaks!
</h1>
</center>
10. Hyperlinks and Anchor Text
Creating a hyperlink is very easy with HTML. If you have a piece of text, for example “click here” and you want to make it clickable, this is what you have to do:
<a href="#">Click here</a>
Now simply replace # by the full URL including http://, for example http://www.tips4onlinesuccess.com, and it’s all done!
If you want the link to open in a new window, use target=”_blank”
<a href="#" target="_blank">Click here</a>
11. Bold, Italic, Underline
You can use CSS to do this, but you can also incorporate it HTML using the following tags.
<strong>bold</strong>
<em>italic</em>
<u>underline</u>
Sometimes it’s faster to just use these tags than to style it in the CSS document.
Now we have the core of our HTML elements and we have a few ID’s and classes we’d like to define in the CSS!
Please read my next post to find out how to define our divs!
Until then, if any questions pop up, don’t be shy to ask.
See you soon!
Like it? Tweet it! 
Previous post: Why am I blogging?
rss
Let’s look at our
tag as the oven where we’re gonna bake cookies.Since we want to have cookies of different sizes and shapes, we’re also gonna have what we call divs, they’re like divisions, which are denoted with the
tags. We are then going to identify our different divs with unique ID’s.
With CSS, using these unique div names or IDs to refer to them, we can give any style (color, size, font, etc.) to any division in the HTML body. So we label them or ID them to be able to change the way they look separately, using that unique ID we have given them.
Here’s what it looks like:
<html> <body> <div id="arbitraryName1"> </div> <div id="arbitraryName2"> </div> <div id="arbitraryName3"> </div> </body> </html>
3. The ‘container’
But we have something missing here. Think about it, we’re not gonna take the cookie dough, place it in its unique form and put it directly in the oven. It’s gonna stick to the oven and we’re gonna have a hard time taking them out and they might burn.
What we need is a big container where we’re gonna place all our cookie dough, and then we’re gonna put it in the oven!
We will call that div a ‘container’.
<div id="container"></div>
Let me sidetrack a little here. I call it container because it’s easier for me to remember what that div is for. I can easily call it “div123″, but it has no meaning. The convention is to name the divs so that they’ll mean something to you.
For example, if I want to put some testimonials in my sales page, I’ll put them in a div and name it “testimonial”. This way, if I want to change the color or the font, I’ll know exactly where to find it in my CSS document (usually called styles.css).
So we put all our cookies in the container:
<html>
<body>
<div id="container">
<div id="arbitraryName1">
</div><!-- end arbitraryName1 -->
<div id="arbitraryName2">
</div><!-- end arbitraryName2 -->
<div id="arbitraryName3">
</div><!-- end arbitraryName3 -->
</div><!-- end container -->
</body>
</html>
Note: Whatever is inside is a comment. It is only seen by you and does not affect the appearance of the webpage. I strongly recommend for anyone who works with code to use comments especially to specify which div is
But we have something missing here. Think about it, we’re not gonna take the cookie dough, place it in its unique form and put it directly in the oven. It’s gonna stick to the oven and we’re gonna have a hard time taking them out and they might burn.
What we need is a big container where we’re gonna place all our cookie dough, and then we’re gonna put it in the oven!
We will call that div a ‘container’.
<div id="container"></div>
Let me sidetrack a little here. I call it container because it’s easier for me to remember what that div is for. I can easily call it “div123″, but it has no meaning. The convention is to name the divs so that they’ll mean something to you.
For example, if I want to put some testimonials in my sales page, I’ll put them in a div and name it “testimonial”. This way, if I want to change the color or the font, I’ll know exactly where to find it in my CSS document (usually called styles.css).
So we put all our cookies in the container:
<html> <body> <div id="container"> <div id="arbitraryName1"> </div><!-- end arbitraryName1 --> <div id="arbitraryName2"> </div><!-- end arbitraryName2 --> <div id="arbitraryName3"> </div><!-- end arbitraryName3 --> </div><!-- end container --> </body> </html>
Note: Whatever is inside is a comment. It is only seen by you and does not affect the appearance of the webpage. I strongly recommend for anyone who works with code to use comments especially to specify which div is
closing (as demonstrated above), because with longer code it might get messy and confusing.
So now we have our oven (
), our container (), and our different cookie shapes. Our different cookie shapes are basically all the different ‘design elements’ we want on our salespage.
Example:
red, bolded, underlined, giant text
has a different
A ‘testimonial’ has a different
).
These are four different elements of your salespage.
4. What is the container exactly and why use it?
Let me explain to you more in detail what the container does and this time let’s leave the cookies alone.
Why not just put all the images and all the text straight into the body? Why use the container? Well, you can but you won’t get the salespage look anymore. What I mean by the salespage look is dark text one white centered area and the surrounding color is dark to get your attention onto one place: your sales letter.
It’s with the container that you create the white and centered area in which the sales letter is written. And the dark background color surrounding the container is the
background color. Removing the container is like removing that white area, and leaving the text of the dark background.Ok. For now we have the skeleton of our salespage:
<html> <body> <div id="container"> <!-- ALL CONTENT GOES HERE --> </div><!-- end container --> </body> </html>
5. Header and images
Since our header is a different element, we put it in its own div and we name it header (because we want to). And we put an attractive header image in our div.
<div id="header"> <center><img src="images/myImageName.jpg" width="250" height="250" alt="Blogging" /></center> </div>
When you call an image, you state that it’s an image, img, and then you write out the source, src, of the image, meaning where it’s located.
<img src="images/myImageName.jpg" />
From this, I know that your image is in a folder called “images”, your image name is myImageName and its type is JPEG, jpg. You have optional properties, width and height, that you can use to specify the size of the image, and there’s also the alt property that lets you describe the image.
In order for your images to appear, they have to be in a certain hierarchy with your CSS and HTML files
In order to call the image, as demonstrated above the index.html file (our salespage), the styles.css file (our stylesheet) and the images folder where all the images used for the salespage are, have to be in the same folder (preferably named after the campaign, i.e. dogtrainingguide).
Now we understand how images are called, we can place our header in our container.
<html> <body> <div id="container"> <div id="header"> <img src="images/myImageName.jpg" width="250" height="250" alt="This is a great description for my image" /> </div><!-- end header --> </div><!-- end container --> </body> </html>
6. Headings, paragraphs and classes
The heading tags in HTML are
<h1> This is heading 1 </h1> <h2> This is heading 2 </h2> <h3> This is heading 3 </h3> <h4> This is heading 4 </h4> <h5> This is heading 5 </h5> <h6> This is heading 6 </h6>
is the biggest heading and
is the smallest. You can definitely use
as the title of your salespage,
as the subtitle and the others such as
, to introduce different parts
<h3> Testimonial </h3>
<h3> Guarantee </h3>
as the title of your salespage,
as the subtitle and the others such as
, to introduce different parts
<h3> Testimonial </h3>
<h3> Guarantee </h3>
, to introduce different parts
<h3> Testimonial </h3>
<h3> Guarantee </h3>
That’s the default size of the heading but you can change it using CSS. I will show you how soon.
All paragraphs should be enclosed in the paragraph tags
.
<p> My long paragraph is here </p>
Again, you can modify the way the paragraphs look in CSS.
OK, lets quickly go over classes. Until now we’ve been labeling all of my divs using IDs. Why on earth do I have to use classes now?! It’s very simple, and I’ll try to explain it the best I can.
Let’s say sometimes, not always and not only once either, you want to use text that is bold, underline, italic and dark red. Say you’re gonna use it three times in your HTML document. In this case you create a class, you give it a specific style in the CSS document (in this case bold, underline, italic and dark red) and you can use this class as many times as you want in your HTML document!
To define a class in HTML is very similar to defining an id.
<div class="darkRed"></div>
You can also give a class to your headings and paragraphs as such
<p class="darkRed"> This paragraph will be bolded, underlined, italicized and dark red </p> <h2 class ="darkRed"> This heading will be bolded, underlined, italicized and dark red</h2>
Any questions? OK, let’s move on.
7.
When we create new divs or paragraphs or headings, there’s automatically a line break. But, in a salesletter it is very common to have one word in red or highlighted in yellow and underlined, etc, within one sentence. If we use
The tag comes to the rescue. As for everything else its closing tag is . Either a class or an ID can be attached to it. Here’s an example:
<p>This is a very long paragraph and I want <span class="yellowHighlight">this part to be yellow</span> and the rest to be normal.</p>
The fact that the part confined by the tags is yellow is defined in the CSS document.
8. Lists
List are wonderful to have in sales letter because they’re so much easier to read. There are two types of list:
• unordered list (ul) in which you place your list items
<ul> <li> List item 1</li> <li> List item 2</li> <li> List item 3</li> </ul>
• ordered list (ol)
<ol> <li> List item 1</li> <li> List item 2</li> <li> List item 3</li> </ol>
This is what we have so far:
<html> <body> <div id="container"> <div id="header"> <img src="images/myImageName.jpg" width="250" height="250" alt="This is a great description for my image" /> </div><!-- end header --> <h1> My Great Title </h1> <h2> My Great Subtitle </h2> <p> Dear friend, </p> <p> This is a great salesletter. I am selling a <span class="yellowHighlight">great product</span>. Read my testimonials.</p> <h3> Here are the benefits </h3> <ul> <li>Great benefit 1</li> <li>Great benefit 2</li> <li>Great benefit 3</li> <li>Great benefit 4</li> </ul> <div id="testimonials"> <h3>Here are some testimonials</h3> <p>My testimonial paragraph</p> </div><!-- end testimonials --> <div id="guarantee"> <h3>Here's my iron clad guarantee</h3> </div> <!-- end guarantee--> </div><!-- end container --> </body> </html>
9.
and
To put a line break in your sentence, use the
element.
<h1> This is the title<br />of my sales letter<br />containing line breaks! </h1>
But the title doesn’t look too nice because it’s not centered. So to center the title simply enclose it in
<center> <h1> This is the title<br />of my sales letter<br />containing line breaks! </h1> </center>
10. Hyperlinks and Anchor Text
Creating a hyperlink is very easy with HTML. If you have a piece of text, for example “click here” and you want to make it clickable, this is what you have to do:
<a href="#">Click here</a>
Now simply replace # by the full URL including http://, for example http://www.tips4onlinesuccess.com, and it’s all done!
If you want the link to open in a new window, use target=”_blank”
<a href="#" target="_blank">Click here</a>
11. Bold, Italic, Underline
You can use CSS to do this, but you can also incorporate it HTML using the following tags.
<strong>bold</strong> <em>italic</em> <u>underline</u>
Sometimes it’s faster to just use these tags than to style it in the CSS document.
Now we have the core of our HTML elements and we have a few ID’s and classes we’d like to define in the CSS!
Please read my next post to find out how to define our divs!
Until then, if any questions pop up, don’t be shy to ask.
See you soon!
Previous post: Why am I blogging?
rss
{ 1 comment… read it below or add one }
Thanks for the detailed information! It really helped me with my HTML challenges. I bookmarked this page for future reference.
{ 2 trackbacks }