Creating a HTML Squeeze Page by Hand – Part 2
Welcome back! Today we will be adding a call to action text block to our nifty squeeze page.
We will be using a new HTML container tag. So let me introduce you to the paragraph <p></p> tag. The paragraph tag is one of the most used HTML tags. It is used to contain a single paragraph of text. You simply enclose each paragraph in a beginning <p> and ending </p> paragraph tag. The browser will take care of the basic formatting and spacing of each paragraph.
OK, so load the page we have been building back into Notepad++. It should look like this.
<!DOCTYPE html>
<html>
<head>
<title>10 Quick Ways to Make Money Online</title>
</head>
<body>
<div style=”text-align:center;”>
<h1>Discover 10 Quick Ways To Make Money Online Today!</h1>
</div>
</body>
</html>
Since we want our call to action text below the headline, we will add it just below the <h1></h1> container tag div section. We will place the paragraph container inside a div container since this is a new section of the page. Go ahead and do that now.
Your page should now look like this.
<!DOCTYPE html>
<html>
<head>
<title>10 Quick Ways to Make Money Online</title>
</head>
<body>
<div style=”text-align:center;”>
<h1>Discover 10 Quick Ways To Make Money Online Today!</h1>
</div>
<div>
<p></p>
</div>
</body>
</html>
Now let’s add the actual text. We add the text between the starting <p> and the ending </p> tags.
<!DOCTYPE html>
<html>
<head>
<title>10 Quick Ways to Make Money Online</title>
</head>
<body>
<div style=”text-align:center;”>
<h1>Discover 10 Quick Ways To Make Money Online Today!</h1>
</div>
<div>
<p>Enter your email address below and I will send you the free guide immediately!</p>
</div>
</body>
</html>
Save the page now before you forget.
Remember how to view the page in your browser? Let’s view it now.
I don’t know about you, but I don’t like the way the text just goes across the browser in one long line. Let’s do something about that.
We will be using a new tag to break the long line into two shorter lines. The new tag we will be using is the line break <br> tag. This one is unique as it is not a container tag. So it does not have a ending marker like the others we have used have.
We simply insert the line break <br> tag where we want to break the line. Let’s do this now.
Let’s also center the call to action text the same way we centered the headline by adding style=”text-align:center;” to it’s div container tag.
Your page should now look like this.
<!DOCTYPE html>
<html>
<head>
<title>10 Quick Ways to Make Money Online</title>
</head>
<body>
<div style=”text-align:center;”>
<h1>Discover 10 Quick Ways To Make Money Online Today!</h1>
</div>
<div style=”text-align:center;”>
<p>Enter your email address below and I<br>will send you the free guide immediately!</p>
</div>
</body>
</html>
Save your page and then view it in your browser.
Much better, don’t you think? The text is a little small but we will make it bigger a little later in this tutorial.
Well our squeeze page is slowly starting to take shape. We will add more to it in the next part. See you then.
Creating a HTML Squeeze Page by Hand – Part 4
Leave a Reply