How
we’ll do it:
These pages will show you step-by-step how
HTML works. The only tools we will use are:
1) Notepad - Go to Start -> Programs ->
Accessories -> Notepad.
2) Browser - this is the program you use to look at web pages. Which program this is depends on what you have on your computer. It could be Internet Explorer, or Mozilla, or another program. To see a picture of how the process will work, click here.
Keep both of these tools open because each time
you make a change to your new web site using Notepad, we will take
a look at it in the Browser.
Each of the HTML exercises that follows has
the code for the same web page, but each page has a few more features
added. The items that are new on each page show in bold. We will
build our sites by adding new features one by one; so, you can see
the affect of each change on your page.
In the code, you will see [words in brackets
like this]. Don’t type the brackets or the words. Instead,
when you see the brackets, it means that you should put in your
own words. So think of a topic for your web site. Make it something
that is important in your life: your business, your family, or a
hobby.
The code that you are to type will be
between lines like this:
<html>
<head>
<title>[Put the name for your page
here.]</title>
</head>
<body>
</body>
</html>
Go ahead and type that part in a Notepad window.
Notice that there are indents and spaces. Indents, spaces, tabs,
etc are called white space. The browser ignores
white space. You could type 20 or 100 spaces and the web page would
look the same in a browser. The reason we use white space is to
make your code more readable - to you!
Now Save your file: File -> Save Where: Desktop;
File Name: [yourname.html]. The .html at the end is a file
extention. File extensions are very important. A file extension is like a file's last name. It tells
Windows which program knows how to open the file. If you don't add .html, Notepad
will add .txt. So, if you save your file without it, your browser
will either put all the code on the screen or call Notepad to open
it.
Note the < and >. These tell the browser
not to show that stuff on your page. Instead, they are instructions,
called “tags,” and are instructions to the browser to
make your page look the way you want it to. They are like the prompts
to actors in a play. They don't say those parts, they do them. Tags
tell the browser how to show the parts that aren't tags. Each set
of tags has an opening tag and a closing tag. The closing tags have
the form </>. That tells the browser to stop doing whatever
was in < >.
The tags you have typed are the bones of a web
site. If you look at the file in your browser, you won't see anything in the white area. That's because we haven't put anything inside the <body>. The only part of the web page you have created is the title tag that shows up in the blue bar at the top of the page. Now we will add some information and formatting.
