Basic HTML: Your First Web Page

Every website must start with a home page. This is the main page that your visitors will usually ‘land’ on when they find your website. Although the content of a home page may vary site by site, it is generally where you’d place an introduction to your website and some updates or a blog.

Creating Your Home Page

On your computer (assuming you’re using Microsoft Windows) open Notepad (do NOT use WordPad or Microsoft Word programs for this). Straight away, go to the File menu, select Save As… and in the dialog box that pops up enter “index.htm” (with the quotation marks) as the file name and select All Files from the Save as type menu. Click Save. This will create a new file with a .htm extension, one of the popular web page file types.

We’ve named this file index.htm because most web servers are configured to recognise index.htm or index.html as home pages (there are others, but these are ‘safe’ for now). In fact, if you signed up with Freewebs in the Getting Started tutorial, you may have noticed that under the “My Site” link there’s already an index.htm file provided, but this should be deleted so that we can add our own.

The Basic Page Structure

HTML is a great mark-up language because the tags we need to use are often quite obvious in their meaning. For example, the <html> tag, which forms the basis of our document, tells the browser that yes — this is an <html> document. <body> contains the body of the document, and so on. htm man The other thing I like about HTML is the way in which the basic structure of a page is similar to a person. Each page must have a head and then a body — both integral parts to a human being — with the head on top and the body underneath. There are some flaws to my little person analogy, but it’s a good way to remember how to structure a page. We only need one head, and one body, and the head must always come first.

Using the tidbit from the Getting Started tutorial, we already know that tags usually come in pairs: an opening tag, and a closing tag. This is visually demonstrated in the HTML man image above; closing tags are generally identical to their opening counterpart but start with a forward slash before the element name. We can apply this knowledge along with our new found HTML person example to create the very simplest page structure:

<html>
	<head>
	
	</head>
	<body>
	
	</body>
</html>

Copy this code into your index.htm file created earlier and save it (use File > Save or press CTRL + S). This basic code will tell the browser that we have an HTML document (inside which we place everything else), and that it has the all important head, which we open and then later close, and the body (also opened and then closed).

Understanding <head> and <body>

The <head> and <body> tags, as well as being important structural tags, have two different functions. Much like a person, the head of an HTML document contains the brains and the body contains the gooey goodness. Inside the head we would put the title of the page, meta tags which control our keywords for search engine robots and when we get more advanced, CSS and JavaScript code. Inside the body we put all of the content: our introduction, images and anything else you may like to see on your web page, and we’ll cover this in Adding Text with Paragraphs and Headers.

Contradicting Everything with a Doctype

Above, I stated that everything must go inside the <html> tags. This is in fact only 99% true, because in actual fact pages should always start with a doctype. A doctype, or Document Type Declaration, tells the browser what version of HTML the page is coded in and how to render it. You can read more about doctypes in Understanding Doctypes (coming soon), but for now I’d recommend sticking with HTML 4, giving our page a structure of:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
	
	</head>
	<body>
	
	</body>
</html>

Save your amended page structure. If you signed up at Freewebs in Getting Started, you can now upload your first page. It won’t have any content yet, but will give you chance to get to know the Freewebs editor. Using the My Site quick link, make sure you have deleted the default index.htm page and then using the Single File Uploader, find and upload your index.htm file. If you access your new web page using the unique username you signed up with (freewebs.com/username) you should see a totally blank page. Now we can Add Text with Paragraphs and Headers.