So you want to make a website for free but you don’t know where to start? To make a website for yourself without paying any money you have to understand a few basic things about the Internet first. Let’s take a look at everything you need to build a website, and how to get started for nothing down.
UPDATE: Feb. 11, 2009 – Do you want a website for free? I’ll give you one, read my post at Get a Free Web Site to find out how.
Domain Names
A domain name is the address of your website. You can choose to have your own domain name or you can use somebody else’s domain name, often for free. Branding your business with your own name (thisismyurl.com for example) is the best way to do it but if you’d like to save some money there are many companies who will let you become a subdomain of their website (i.e. thisismyurl.theirdomain.com) for free. Registering a domain name costs about $10 per year.
Web Hosting
Web hosting is sort of like renting a storefront for your business. If you’ve elected to use a domain name, you really do need to pay for hosting to take full advantage of it. You don’t need to pay for hosting but if you want your website to be on the Internet reliably, try somebody like BlueHost. They’ll cost you $75 for the year which includes your domain name.
Coding a Web Site
Once you have your address on the internet (your domain name) and a place to rent (your web hosting) you need to construct the website itself. Building a website is a pretty complex task and building a good website is even harder. That’s one of the reasons I recommend to small companies that they look at a solution like WordPress, it’s a free tool which comes in two flavors:
- WordPress.com – a free, hosted solution for people just getting started.
- WordPress.org - you can download the WordPress engine and host it on a hosting company yourself.
In either case, building (or downloading) a great template is your first step to having a high quality, free website.
Coding a Web Site in HTML
If you’d prefer to ignore WordPress and want to code the site yourself, you need to understand the basic structure of an HTML website and how it works.
HTML is a tag based language, it’s actually really very simple once you get the hang of it. Basically you have to tell the web browser that your document is an HTML document (HTML is the short form for HyperText Markup Language, the real name of a web page). To do this, simply open and close an HTML tag. Tags are always stored between less than and greater than symbols like this <html>. To close a tag, add a slash like this: </html>. So put together, web browsers know that everything between the <html> and the </html> tag is part of a web page.
You need to do the same for the head portion of the web page. This is the part of the document read by computers, not people. The <head> and </head> tags enclose items such as the <title></title> tag which stores the document name. For example, if I wanted to create a document called My Great Web Page I would do the following:
<html>
<head>
<title>My Great Web Page</title>
</head>
</html>
View the results
The document would be empty of course but would store the critical details needed to open and close a page, as well as tell the web browser what the document name is.
To add a visible portion to the page, you need to add a <body></body> tag. This represents everything the user can see and is inserted into the code after you close the <head></head>. The <body> stored everything the user sees and can have a multitude of tags, the most common being:
- Headings (<h1><h2><h3><h4><h5><h6>) which represents headers just like you’d find in a book or technical paper.
- Paragraphs (<p>) which breaks the text into easy to read sections
- Ordered Lists (<ol>) and Unordered Lists (<ul>) along with List Items (<li>) which show up like bulleted lists in a document.
Remembering that each tag must be opened as well as closed, an effective web page can be coded using just these simple tags.
<html>
<head>
<title>My Great Web Page</title>
</head>
<body>
<h1>My Great Web Page</h1>
<p>This is my great web page. It’s great because:</p>
<ul>
<li>it respects the rules of html</li>
<li>it is a properly formatted document</li>
<li>it can be read by any web browser</li>
</ul>
<p>I can also add a numbered list:</p>
<ol>
<li>this is a list item</li>
<li>this is the other list item</li>
</ol>
</body>
</html>
View the results
This simple web page may not seem very impressive but what if we could easily add hyperlinks (links to other web pages) and images?
- The Anchor tag (<a>) allows one web page to link to another. To use the <a> tag you need to pass a attribute called an href. Sounds scary right? Not at all. <a href=’http://www.thisismyurl.com’> That’s all there is to is. See, the href called the http (Hyper Text Transfer Protocol) document stored at the address www.thisismyurl.com.
- The Image tag (<img>) also need a special attribute passed. In this case, it’s the src (source) of the graphic file. It looks like this <img src=’http://www.thisismyurl.com/wp-content/uploads/2009/01/aboutpage-150×150.jpg’ />. You’ll see that the src is just the http:// address of the image. Easy as pie right? No so fast … unlike most other tags the <img> can’t have a closing tag. That’s right .. there’s no such thing as a </img> so instead we close the <img> tag inside itself like this … <img />. There are a few other tags like that but not many.
Here it is in practice:
<html>
<head>
<title>My Great Web Page</title>
</head>
<body>
<h1>My Great Web Page</h1>
<p>This is my great web page. It’s great because:</p>
<ul>
<li>it respects the rules of html</li>
<li>it is a properly formatted document</li>
<li>it can be read by any web browser</li>
</ul>
<p>I can also add a numbered list:</p>
<ol>
<li>this is a list item</li>
<li>this is the other list item</li>
</ol>
<p>I like this picture: <img src=’http://www.thisismyurl.com/wp-content/uploads/2009/01/aboutpage1-150×150.jpg’ /></p>
<p>Let’s go to <a href=’http://www.thisismyurl.com’>my homepage</a>.</p></body>
</html>
View it in action
Using these simple tags, anybody can build a website.
