Lesson 1: Hello World!

The most important thing to remember when writing HTML is that you are marking up some text. HTML is not a programming language – it is a way of describing the structure of your text to a computer. This doesn’t mean that your web pages have to be boring, pictureless wastelands. It does mean that when you write your pages, you should concentrate on the meaning of the words, not the way that they look.

We mark up our text using tags. A tag is simply a clever bracket that tells the computer where the different sections of text begin and end. HTML tags begin with a < and end with a >. The content between the two angle brackets tells the computer what type of tag you’ve written.

Let’s jump right in. Open your favourite text editor (eg. Notepad2), and copy the following text into it. (You can use copy and paste, it’s OK!) Save it as “helloworld.html”, then open it in your favourite web browser.

<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

What’s happening here? I hope you’ve noticed that the tags come in pairs, and for example. Every tag has a starting tag and an ending tag. The starting tag marks the beginning of some meaning, and the ending tag (the one with a /) marks the end of it. Let’s look at these tags in detail.

html: This tag pair surrounds a HTML document. Every web page needs this.
head: This tag pair marks some header information about the document. There are many things that can go here, but none of them will be shown on the page in your browser. The title tag will probably show up in the title bar of the browser, however.
title: This tag pair sets the title of your document. It is generally shown in the title bar of the document window, but it could also be used be search engines when they display a summary of your page.
body: This tag pair surrounds the main content of your web page. you definitely want to use this one.
p: This tag pair identifies a chunk of words as being a paragraph. This could be displayed with extra space between paragraphs.

You might also have noticed some funny indenting going on. That’s not actually necessary, but we programmer types have been indenting things for decades to show how pairs of brackets match up. It just makes things easier when it comes to editing or fixing mistakes.

Practice

Here are some ideas for practice.

Can you change the title of the page? Can you change the message? (Go ahead, do it!)
What can you delete and still have things display properly? (Note: most browsers will display a file containing nothing but “Hello World!” quite similarly to the above example. But writing web pages like that is not good form.)
Try deleting all the white space, leaving everything on just one line. Does it still work?
Can you recreate this page from scratch? Don’t cheat!

Index Next Lesson