Creating a HTML Squeeze Page by Hand – Part 1
Are you ready to do something with that awesome blank HTML page you created? Let’s add our very first visual element to the page. Let’s add the headline.
First let me introduce you to the next HTML container tag you are going to use. It’s the really boring DIV tag <div></div>.
A HTML page typically has multiple sections. For example, a squeeze page can have a headline, an introductory paragraph, a subscribe form and maybe a footer. The DIV tag can be used to contain each of these page sections.
A DIV tag also let’s us easily change the look of each section easily. For example, you could change the text type, the text color, the background color and the text alignment all by making small modifications to the div tag. I’ll show you more about this later in the tutorial.
OK, so load the page back in to Notepad++ that we have been working on. It should still look like this.
<!DOCTYPE html>
<html>
<head>
<title>10 Quick Ways to Make Money Online</title>
</head>
<body>
</body>
</html>
Got it loaded? Great! Let’s dive in and add that headline to the page.
Add the DIV tags where we want the headline to display. Since we want it at the top of the page we are going to add them just below the <body> tag. Go ahead and add them. Your page should now look like this.
<!DOCTYPE html>
<html>
<head>
<title>10 Quick Ways to Make Money Online</title>
</head>
<body>
<div>
</div>
</body>
</html>
Remember to save the page so you don’t lose the changes.
We want the headline to be big and stand out. So we are going to have to use a new tag. Let me introduce you to the heading tag! There are actually six heading tags but we are only going to use one of them. We will be using the <h1></h1> tag. The H1 tag is used to define the most important heading on the page. In this case it’s our headline.
The default formatting for the H1 tag is to make the text large and bold. This can actually be overridden but for now we are keeping things simple. So, we will just use the H1 tag without any format overriding.
You place the text of your headline between the starting <h1> and the ending </h1> tag.
So let’s add that inside the DIV tag we just added.
<!DOCTYPE html>
<html>
<head>
<title>10 Quick Ways to Make Money Online</title>
</head>
<body>
<div>
<h1>Discover 10 Quick Ways To Make Money Online Today!</h1>
</div>
</body>
</html>
Save your document and then view it in your favorite browser. Remember how to do that?
On the top menu bar in Notepad++ click on the “Run” drop down menu. See the menu entries that start with “Launch in?” Well click on the one that refers to your favorite browser.
Here is what you should see if you selected Firefox.
The headline does not look good left justified. Does it? Let’s center it on the page.
We will do that by revisiting that really boring DIV tag and add a little code to style it’s contents. WOW! We are just in part 2 and we are already going to learn a little CSS!
CSS stands for “cascading style sheets.” Now let me put that in English for you. It let’s you make things look pretty. 🙂
To center the headline in the div we are going to add the following to the starting <div> tag.
Style=”text-align:center;”
What this code does is it tells the browser to center the text that is contained inside the opening <div> and the closing </div> tags.
Here is what your modified DIV tag line should look like when you add the above code to it.
<div style=”text-align:center;”>
So your document 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>
</body>
</html>
Go ahead and save your changes and view it in your browser again.
Here is what you should see if you selected Firefox.
Much better. Don’t you think?
Well I think it’s time to go grab another celebratory beverage and give yourself a round of applause. Your blank page now has a headline. We will add more to the page in the next part of this tutorial. See you there!
Creating a HTML Squeeze Page by Hand – Part 3
Leave a Reply