First Pages

Web Design Table of Contents by Arnold Kling

Making a Web Page

If you have never created a web page, you will find that it is very easy. All you have to do is save a text file using a .html extension. However, it is better to include some basic HTML tags as well. By the way, HTML stands for HyperText Markup Language, and was invented by Tim Berners-Lee when he was at CERN, a European research center in particle physics.

Open up notepad.
Type Hello, world
Click on "File/Save As" and do the following:
1. Change the "save as type" from "text" to "all files."
2. Change the folder to your htdocs folder.
3. Next to "file name," type hello.html.
4. Click on save or press "enter" on your keyboard to save the file.
Leave the notepad window open, but let it slip behind the browser window on the next step.
Open up a browser window. Select "File/Open" and type in the path to hello.html. You should see your page show up in the browser window.

Your page, hello.html, is a legitimate web page. We could copy it into your test directory and production directory on the web server. But first, let us do some real coding.

Toggle back to your notepad window. Now, add some code to your page, as follows (note that most of the code is inserted before the words Hello, world, and the rest is added afterward):
<html>
<head>
<title>
Howdy
</title>
</head>
<body>
<p>
Hello, world
</p>
</body>
</html>
Now, save this file as hello2.html
Open up hello2.html in your browser. What looks the same as hello.html, and what looks different? Where did the word "Howdy" show up in hello2.html?

Here are some comments about our first HTML code.

Almost all tags come in pairs, called an opening tag and a closing tag. The closing tag has a / preceding it. What pairs of tags are in hello2.html?
HTML tags are invisible to the user. In fact, anything enclosed in <> is invisible to the user. The browser assumes that anything that starts with < and ends with > is an HTML tag, not content.
You place your content in between the <body></body> tags. What we do inside the <head></head> tags will be explained later in the course.
HTML tags should be typed in lower case. Right now, browsers will accept capitals and mixed-case, so that you could get away with <BODY></bOdY>. But eventually, lower case will be the standard.
It helps to indent HTML tags and to put them on separate lines, in order to set them apart.
The <p></p> tags mark off a paragraph.
Forgetting to type a > at the end of a tag can cause problems. Many other errors, including forgetting to put in a closing tag, tend to be ignored. However, the fewer errors you make, the safer you are with your code.

Page created by Arnold Kling. Last Modified July 18, 2001.