Last time we started looking at how to build a Web site – see http://dahsu.com/wM3WXG9 — including the main ways to get it built.
The last option we looked at was building the site yourself. We’re going to look at how to do that in more depth.
Before we get started let’s do a quick review…
You also need software to be able to design and create the Web pages that are part of your Web site; I recommended KompoZer – it’s HTML editor freeware.
After you have that here is what you do…
We’re going to do 2 things, look at making a Web page and learning a little bit of HTML so you can understand enough if you come up against problems.
Note, that this isn’t going to be a detailed tutorial on KompoZer (click here if you want that)
Getting Started with KompoZer
But let’s look quickly at KompoZer.
When you first open KompoZer you’ll see something like this:
You can start creating your page immediately; just start typing in your content. I’ve put a few things to show you, see this screen shot:
You will immediately see 5 things:
- A big heading at the top
- A smaller heading under it
- Several paragraphs
- A link to the free gift
- An image that was placed on the page
It took me all of 1 minute and 42 seconds (I timed it) and half of that was finding a nice picture.
(Very) Quick Intro to HTML
I now want to take that and show you the HTML code behind it but first a very quick primer to help you learn about HTML and how to create an HTML Web page.
It is the language of the Web, it is the instructions or blueprint to make a Web page look the way it does, including the page you’re reading this on!
HTML is a “markup language” – that’s what the M and L start for and it means that your “markup” the contents of a Web page so that the Web browser understands how to display it properly.
If has a bunch of “tags” that are used and almost all tags are paired with a start tag and an end tag; the end tag using the same tag name but with a forward slash “/” in front of it.
Each tag starts with a less than sign “<”, has the tag name, has some optional attributes and ends with a greater than sign, here the format of a starting tag:
and an ending tag:
So every Web page is just a whole lot of <TagName>some content</TagName> groups (let me make up a name “tag groups”) and since the tag groups can be nested inside other tag groups to an unlimited depth you can make a pretty sophisticated Web page.
I know it is rushing it but let’s look at the HTML behind the page above and I think it will be clearer:
If you aren’t at all familiar with HTML code it probably looks pretty intimidating but it fairly easy to understand with just a little knowledge but, you know what, in general, you won’t need to understand but it always helps if you know a little bit.
Okay let’s start with the code that reads:
You see on the screen it makes the words bid and bold and on a line by itself…
Notice that the tag part of it (which doesn’t show on the screen) using our less than sign-tag name-greater than sign: < then h1 (which is the tag name) and then > followed by the content and then the ending tag.
This tag is called a “header tag” and there are 6 header tags named h1 to h6 (each smaller than the previous one); you can see the h2 tag above and see that it products smaller text.
Next, let’s look at the HTML code that made the link:
This tag, called an anchor tag (don’t ask!), creates the link like:
He’ll you see our first use of an attribute with the “href=FirstFreeGift.zip”; this says ‘when the link is clicked load the file name FirstFreeGift.zip’ which, in essence, starts downloading the .Zip file but if the file name had been a Web page then it would have loaded the Web page.
A little bit down the page we see this code:
It displays the picture on the Web page:
This tag has 4 attributes and NO closing tags!!!
The attributes are the “alt text” which display if someone hovers their mouse over the picture (and it read out by the screen readers that people that have trouble seeing use.
BUT the alt test is also the place to put some of your keywords, Google uses it as part of their ranking algorithm.
The other 3 attributes of the image tag are about the picture itself: it’s name and location (the src or source attribute); it’s height and it’s width.
There is one more prominent tag on the page the “break” tab (<br />); it’s like hitting the Enter key when typing in a word processor (like Word) or a text editor (Notepad).
So you’ll see that there are 2 break tags to separate the paragraphs.
One final thing I want to point out is that the image tag (<img>) and the break tags (<br>) do not have closing tags as it makes no sense to have them in situations like this because there can’t be any content in between.
It isn’t that hard to create a Web page or an entire Web particularly with a tool like KompoZer.
HTML isn’t that hard to learn and use unless you need to get real fancy or complex. For the average sales page or Web site though something like KompoZer with some HTML tweaking if necessary is more than sufficient.
Knowing how to use a tool like KompoZer and learning HTML at least a bit is very useful even if you hire people from places like Elance and Rent-a-Coder or if you start with a Web template and you need to fill it in.
If you want to jump start your learning of how to build a Web page, particularly KompoZer tutorials, you can go to How to Make Your Own Free Website
Of course, if you have an online business you are an Internet Marketer and you shouldn’t be spending a lot of time creating Web pages and writing HTML code!
Leave me a comment below.
O.Y. My friend John Delavera has something that can quickly and easily create complete Web site; smaller ones of course, it’s not going to create a great 1,000 page Web site , check it out at his Web page.