Your first Web page

Follow these steps to create your first HTML page.

Preparation

Download and extract/unzip this file anywhere you want.  You will then have a folder called intro lesson which contains things you will use soon.

Starting

Open Notepad or another text editor (NOT a word processor).  At the top type:

<html>

That is an HTML tag.  All tags start with a less than symbol and end with a greater than.

Now type this on the next line in Notepad:

<head>

Then on the third line:

</head>

Then on the fourth line:

<body>

Almost all HTML tags come in pairs.  Look at the head tag on the second line.  It has a matching one on the third line.  One opened the head part of the page and one closes it.  You will learn about the head element soon.

For now you need to close the other tags by adding two more lines to Notepad:

</body>
</html>

You should now have six lines of code with a tag on each line.  First an opening html tag, then opening and closing head tags, then a pair of body tags and then the closing html tag.  Make sure you have three opening tags (no slash) and three closing tags (with the slash).

Saving - with careSaving as in Notepad

Don’t just save the file!  Some editors are difficult about how they save files so make sure you are saving as an html file.  In Notepad and many other editors do something like this:

  1. go to the menu and choose File then Save As
  2. look at the bottom of the dialog box and in the Save as type drop down choose All Files
  3. call the file index.html and save it in a folder called musicsite (it’s better not to use spaces or capitals in file names for the Web)

Viewing

You have now created your first Web page.  To see it go to the folder you saved it in.  Double click on index and the blank page should open in a browser.

To prove that it is your page right click somewhere on the page and choose something like View Page Source (it depends on your browser).  A new window should open and, in it, you should see the code you typed.  Next you will learn how to add some real content.