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)
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.
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).
<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:-
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>
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.
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>
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|