Creating a HTML Squeeze Page by Hand – Introduction
What I am going to show you today is how to create a blank page! Sounds exciting doesn’t it? Don’t worry, we will be adding stuff you can actually see in the next part of the tutorial.
You will need a plain text editor to create your page. Do not use Word or any other word processing type of software. It will cause you nothing but headaches. You can use any plain text editor you want. I will be using Notepad++. You can get a free copy of it by clicking the link below.
In fact, just go get a copy now. It will make it a lot easier for you to follow what I am doing in each step.
Got Notepad++ installed? Great! Let’s move on.
Fire up Notepad++ and create a new blank text document. Now save it where you can find it and name it squeeze.html. You will have to click on the File menu and then Save As… since the text document is totally blank. Once you start adding something to the document you will be able to just click on the save icon in the tool bar instead.
The first line I want you to type into your new blank text file is:
<!DOCTYPE html>
The above line must be the very first line in the file. It is known as the doctype declaration. It tells the browser what type of document it is so it knows how to display it properly. In this case the doctype declaration is telling the browser that it is an HTML5 document.
You don’t need to remember that, just start each HTML file you create with it.
HTML documents use tag containers to let the browser know what is contained on the page so it knows how to display the contents of each tag container. This is where most people start to freak out and quit trying to learn HTML. It’s not difficult and most people expect it to be difficult so THEY make it difficult. Just keep saying to yourself, this is easy, this is easy, this is easy. Because it really is.
Each container uses two tags. A start tag and an end tag. Examples of containers are paragraphs, headlines and the entire page. They basically say for example… HEY browser! This is the start of a headline and the headline goes until you see the closing tag! This will become a lot more clear to you later on in this tutorial. So get ready for that light bulb to come on over your head and then explode.
Are you ready to meet your first tag? I sure hope so, because it’s coming now whether you like it or not.
Meet the HTML tag <html></html> That’s actually two tags. The starting HTML tag and the ending HTML tag. This tag tells your browser that everything between the starting <html> tag and the ending </html> tag should be treated as HTML code.
Now let’s add the HTML tag to our document. Add the two tags below the doctype declaration you had already added. Your document should look like this now.
<!DOCTYPE html>
<html>
</html>
We will be adding everything else between the HTML tags.
The next tag I would like to introduce you to is the HEAD tag <head></head>. Moat of the stuff that can go in the head tag area is for search engines, bots and the browser. Since we are keeping things simple, we are going to only place one item in the head tag area. I’ll get to that in a minute.
Now add the head tags <head></head> just below the starting <html> tag in your document. It should now look like this.
<!DOCTYPE html>
<html>
<head>
</head>
</html>
Don’t forget to save your document from time to time as you add additional lines and text to it.
Let’s now add the very first thing a human eye can see. We are going to add the TITLE tag and the title of the page. You know, the text you see above the browser tool bar or in the browser page tab and in search engine results? That’s what we are going to add next.
Meet the TITLE tag <title></title>. Let’s add it to our document along with a title for this squeeze page we are creating. Add it just below the starting <head> tag. Your document should now look like this.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
</html>
Now let’s add the actual text for the title of the page. You add that between the starting <title> tag and the closing </title> tag. Your document should now look like this.
<!DOCTYPE html>
<html>
<head>
<title>10 Quick Ways to Make Money Online</title>
</head>
</html>
Did you save your document? Good! Now let’s move on.
The next tag I want to introduce you to is the BODY tag <body></body>. This is where all the magic happens. Your actual squeeze page that the person sees in his or her browser will reside inside this tag.
Let’s add it to the document we are working on. It goes just below the ending </head> tag. Your document should now look like this.
<!DOCTYPE html>
<html>
<head>
<title>10 Quick Ways to Make Money Online</title>
</head>
<body>
</body>
</html>
Now save your document. We are going to see what it looks like in a browser next.
If you took my advice and downloaded Notepad++ and of course are actually using it, this next step is going to be easy.
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.
Did you click it? Good!
Now you should see your brand spanking new blank page in your favorite browser. See the title of the page on your browser tool bar or page tab?
Here is what you should see if you selected Firefox.
Well congratulations! You created your very first HTML page! Go pat yourself on the back and grab a cold beverage to celebrate. In the next part of this tutorial we will start adding stuff you can actually see in the browser. 🙂
Leave a Reply