Upload Me! - How to get yourself a presence on the web

Lesson 1 - Getting Started

31^st January 2006

Okay, lets make our first web page. Nothing complex at first, but this is a vital building block towards building your first web site.

You're going to need to open notepad, or another simple text editor. (not Wordpad or other word processor, as these tend to add lots of invisible control characters into the document, that'll alter your code.)

Now type in the HTML from the following box, omitting the line numbers. (We've just put them there for reference.)

Line
1	<html>
2	<head>
3	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
4	<title>My first web page title</title>
5	</head>
6	<body>
7	My first web page text! Hello, world!
8	</body>
9	</html>

First of all, let's take a look at the code for a simple HTML page, then break it down.

Okay, if you already know that HTML is a markup language, this is where it starts to gather pace and start to make sense.

In it's basic guise, an HTML page is simply a plain text file, with tags wrapped around certain words, which in turn enables the browser to parse it, and display it correctly.

Let's have a look at lines 1 and 9, the <html> </html> tags. The <html> tag tells the browser that this is the start of the code, and that everything after it is to be parsed as HTML, until....... it reaches the </html> tag, which signifies the end of the HTML code.

Lines 2 and 5, the <head> </head> tags, operate in much the same way, and let the browser know that anything included between them is header information. That is, it won't be displayed as text on the page, but will contain other, special tags that will affect the content in some other way. The first of these is a <meta> tag, and unlike <html> and <head> tags, contains more qualifiers with the tag. You'll notice that this tag doesn't have a closing tag, but rather is a single tag, containing various information with the start tag.

Basically, this meta tag is telling the browser that the page will contain text or HTML, in a western character set. We'll delve into these, more complex, tags at a later date.

The next header tags are <title> </title>. These tell the browser that anything contained between them should be displayed in the title bar of the browser window, in this case, "My first web page title".

Lines 6 and 8, the <body> </body> tags, surround everything that will be displayed within the main window of the browser, as you'd expect. And in this case, it's simply, "My first web page text! Hello, world!"

Let's take a look at how this will display in our browser, here's a screen shot, and if you click it, you'll be shown the actual page, in a pop-up window.

Now here, you'll see the address is http://localhost/... but when you click your link, it may show as c:/windows/desktop... , or wherever you've saved the file.

At the moment, there's not a lot to your page, it's about as basic as it can be, but we're now going to play around with some new tags, and start to format our page.

Page 1

Next >>