A First Page


The best way to learn something is to do it. So let's go right ahead and create your first page. We will do this in 7 easy steps.

(In what follows I am going to assume that you are using a PC, running Windows and use Internet Explorer as your browser. If you use a different computer and/or browser, you will need to do some things slightly differently, but the principles are the same)

Step 1, Create a Directory

First, we need somewhere to put the pages you are going to create. So start by creating a new directory (or "folder" if you are used to Windows 95 names) on your hard disk, where you will keep the pages you are working on. To keep things simple, I suggest you put this in the root directory of the C: drive and call it webpages. I will use this name from now on. However by all means put it in "My Documents" if this seems more logical to you. Creating directories is most easily done from Windows Explorer if you are using Windows 95 or later, and from File Manager if you use Windows 3.x. (If you do not know how to create a directory or folder, check your computer's "help" information.)

If you are using Windows 95 and later, it is a good idea to set up Windows Explorer to show complete file names, with their extensions, since we shall be referring to these later. To do this, from within Windows Explorer, select the Options item from the View menu. In the View Tab that is then displayed, ensure that the box "Hide MS-DOS file extensions for file types that are resgistered" is not checked. (I usually find it helpful to keep the box "Display the full MS-DOS path in the title bar" checked, so I can always tell where I am in my directories). Then click the Apply and OK buttons.

Step2, Copy an Existing Page into this Directory

A good way to start a new page, is to copy an existing one, so I have provided a starting point here. If you click on this link with the right mouse button, you should get a pop-up menu. One of the options on this will be to "Save Target As .." Select this and save the page as mypage.htm in your new webpages directory.

Step 3, Open Two New Windows to View this Page

Now we are going to display three separate windows on your computer. One will be this one, so you can continue to read these instructions. The second window will be another browser window, where you look at your new page, as it will appear to others. The third window will be a Windows Notepad window, where you will edit your new page.

To start with, I suggest you size these windows, so that you can see them all on the screen at the same time. When you are working with more complicated pages, you will probably prefer to make them each fill the full screen and switch between them as required. (I am assuming that you know how to switch between windows, either using the task bar, or the Alt-Tab key sequence. It is a good idea to be thoroughly familiar with both these methods, as you will be switching windows a lot!) So size this window now so that it occupies about the top third of the screen.

Now from the File menu of this window, select New Window. (You can also use the short cut key ctrl-N if you prefer.) Size the new browser window so that it occupies about the middle third of the screen. By default, the new window opens, with a second copy of this same page in it. So go to the File menu of this new window and select Open then use the "Browse" button to find the webpages directory on your disk and you should see the file mypage.htm in this directory. Select this as the file to open.

The second window should now display the page you just copied, which contains just very simple one-line message.

Now start the Windows Notepad program. )If you have not used this before, you will find it in the Start, Programs, Accessories menu of Windows 95 and later. In Windows 3.x it is in the Accessories Program Manager group.) This will intially start with an empty editing window. Use the File menu Open command as above, to open the same file mypage.htm for editing. (You will need to select "All Files" in the "Files of type" box, in order to see mypage.htm in the directory window. By default notepad looks only for files of type Text Documents).

Step 4, Examine the HTML in the Notepad Window

The myfile.htm file should now be displayed in the Notepad Window as "raw" HTML and should look something like this:
	<HTML>
		<HEAD>
		<TITLE>My First Page</TITLE>
		</HEAD>

		<BODY>
			This is a minimal HTML page, to
			use as a starting point.
		</BODY>
	</HTML>
There are a few points to note about this:-

Step 5, Make Some Changes to the Page

So now you know a little bit about HTML tags, let's change something to make this into your page.

For a start, change the text in the BODY part of the page to say something like, "Welcome to my first web page". You do this by editing using your keyboard, to change the text in the Notepad window. When you have done this, select Save from Notepad's File menu.

Notice that the display in the middle browser window has not yet changed. To see the effects of the changes, you must tell the browser to refresh the display. Clicking the Refresh Button on the toolbar is the easiest way to do this. You should now see the browser's display update to show your new text.

Now let's give the page a heading. To do this we need a new pair of tags, <H1> and </H1> to contain the heading. So at the start of the BODY section immediately following the <BODY>, add a line something like:

<H1>Alan's First Page</H1>
(Use your own name of course, not mine!) Save the file in Notepad and Refresh the Browser window as before, to see the effect of the heading.

HTML allows six levels of headings, running from H1 to H6. Try the effect of some of these and see how they look on your browser.

To give the heading more emphasis, try adding a Horizontal Rule between the heading and the rest of the body text. You do this with an <HR> tag. Note that unlike the other tags, we have used so far, this one does not need a closing tag, since there is nothing to contain. It is called an empty tag as opposed to a container tag.

Now we could add some more text to the body of the document. I will leave it to you to decide what to say! We already noted that the layout of the page did not depend on the way your page of HTML text is laid out. So we need some way of splitting your text into separate paragraphs. The way to do this is to put each paragraph between a set of <P> and </P> tags. Put a pair in now round the original paragraph, then add one or two more paragraphs, each with its own set of containing <P> and </P> tags. Save the file again and refresh the browser window to see how they look. If you want to split things up into sections, try adding some more headings or horizontal rules.

Step 6, Add some Attributes

There is just one more thing to learn about HTML tags, before we finish this first page. So far we have just used tags "as they come" but many tags can be modified by the use of Attributes. These make various changes to the way the tags behave. For example we gave our page a heading, using the <H1> tag. Try the effect of changing the opening tag to <H1 align="center"> . (The closing tag needs no change). You should see that the heading is now centered on the page. You have modified the tag with the align attribute and given this the value center. This is the way all attributes work. You have an attribute name, an equals sign and the value you wish to assign to that attribute. It is good practice to put the value in quotes, as I have done here. However in most cases it will work even if you omit them. As with the tag itself, it generally doesn't matter whether you use upper or lower case for your attributes and you will find both in use by different authors. I generally use lower case for attributes to distinguish them from the tag itself but that is just a personal preference.

The align attribute may take the values "left", "center" and "right", with fairly predictable results. ("left" produces just the same effect as the tag without any attributes specified).

The align attribute may also be applied to the <P> tag where it has the expected effect on all the lines within the paragraph. Try it on one of your paragraphs.

Other attributes may be applied to other tags. For example the <HR> tag may take an attribute width which may take a numeric value. This may either represent the length of the line in pixels, or by putting a "%" symbol at the end, the length may be a percentage of the viewing window. This last option generally makes most sense, since you do not know how wide the viewers browser window is going to be in pixels. If you use this attribute, you can also add an align attribute as above. In this case align="center" is the default value. (Without a width attribute the line stretches the full width of the screen, so align would make no sense.) Other attributes which may be applied to the <HR> tag are size which affects the thickness of the line and noshade which prevents the line having a "3D" look. Note this is an example of an attribute that takes no value. Where more than one attribute is applied to a tag, they are just placed one after the other. For example

<HR width=75% size=7 noshade>
would give a line like the one which follows, which is as good a way as any, to end this step.



Step 7, Congratulate Yourself

You have now created your first web page. All you need now is a few more pages and you have your very own web site. From now on, I will assume that you are happy with the idea of using Notepad to edit your HTML source text, saving it and refreshing the browser window to view the changes. So I will just tell you what the various tags do, and leave it to you to add them to your pages and test the results.

The next thing needed for a complete site, is a way of linking pages together, and for that we go to the next page of this tutorial.


Copyright © Alan Simpson 2000 Back to index. Forward to next page. Last Updated 2000-04-08