Steve Cartwright : 2001
Everyone that has used the Internet must at sometime have wondered how web pages are actually designed. This as you can imagine is a vast subject in fact the sheer amount of information is often daunting, this need not be the case as we'll walk you through designing your very first web page. You will not need any special tools other than those found on your computer, you will not have to learn vast amounts of computer jargon and coding techniques, you'll just have to have fun.
There are basically two methods of making an html (Hyper Text Markup Language) web page, you can either type the text and html commands yourself in to a simple text editor or you can use graphical based software that generates the html coding for you. These graphical based software packages are often referred to as WYSIWYG editors, meaning, "What you see is what you get" and of course there are editors out there that are a combination of both.
We are suggesting that for the purposes of following this tutorial you do not use a graphical based editor and instead use either of these, Windows Notepad or Macintosh Simple Text, these simple text editors should already be installed upon your computer. Open up your chosen editor and let's begin shall we.
The first thing you need to actually do is to type the content that the web page is to display, now write a paragraph about your chosen subject, yourself or your company as I have done in figure 1.1
We have all heard about Hyper Text Markup language, this basically takes your sample text that you have just typed and displays it in a suitable format for the world-wide web, to do this you simply add a few html tags. An html tag is a coded command used to indicate how part of a web page should be displayed.
All web pages consist of basically two specific sections, the head section and the body section. Html tags define these sections and all web pages should incorporate these two sections. Let us now take the text you typed in earlier and incorporate html tags to this to display it correctly in your web browser.
In your text editor, at the very top of the page type the following:
<html>
<head>
<title>Your First Web Page</title>
</head>
The above html tags form the head section of your web page, now let us type the actual body of the document.
<body>
Insert the text you wrote earlier here.
</body>
</html>
Figure 1.2 shows the finished results we achieved based upon our sample text, your text editor should look similar. We now need to save our web page in a suitable format, by this I mean that we need to save it in a format that our web browser will recognise and open. To do this simply click "file" (top left) go down and click "save as", next you need to change the file type to "all files" and enter sample.htm see figure 1.3
All html web pages are generally saved with either the htm or html file extension, this means that when you save your web pages from windows notepad you need to enter the web page name followed by .html or .htm. Once you have save your web page, you can double click on its icon to view the file you have just created in your web browser as shown in figure 1.4
Let us now go back and look at the web page you have just designed and in particular the html tags and their meanings.
All html tags come in pairs an opening tag such as <html> and a closing tag such as </html>, have a look at them both and notice that the tags are basically the same with the exception that the closing tag always contains an / symbol.
All web pages should start with the <html> tag and end with the </html> tag, this tells the web browser where the html coding begins and where it ends, and although this is not strictly required nowadays with modern browsers it should still be included.
Next you will find the <head> tag, this defines the start of the head section of the web page. After this tag you should always find the <title> </title> tags, these tags allow you to specify the actual title of the web page as displayed by the web browser.
Numerous other html tags can be inserted in to the head section of a web page and although we do not cover them in this article it is worth mentioning that in this area you will often find numerous meta-tags.
The head section finishes when you see the </head> closing tag, this is immediately followed by the <body> tag. This tag defines the start of the body of the document; this is the area that the web browser actually displays in its main window.
Next we find the actual sample text you have type in, this is displayed in its simplest form at the moment, as we have not included for any specific formatting.
Once the actual text has finished you find the closing </body> and </html> tags these define the end of the body of the document and the web page itself.
Your very first web page is finished, it is nothing spectacular but by following this simple tutorial you will haven learnt the basic principles of html web page design, in that everything you do is tag based and that it sits either within the head section or more commonly within the body section. In the next article in this series we will look at adding in some basic formatting changes to make your content presentation more professional and we will also cover links and linking.
Cyber Aspect™ © Copyright 1999-2008 website design by fx digital All rights reserved Contacts | Terms of Use | Privacy Policy