How to Design Your Own Web Page

The World Wide Web is a great place to obtain information, communicate with family and friends, and make purchases. Web design is an activity that involves art, writing and computer skills. With some basic knowledge, it is very easy to create your own Web page. There are different ways to do this, but these instructions use the most fundamental commands, those that will help you understand how Web pages actually work. Here's what you need to do to get started:  

If you are using a PC-style of computer, look for the program named Notepad (it should be in the Accessories menu under the Programs menu from the Start button). If you are using a Macintosh type of computer, you will want to use the SimpleText program. These programs are very easy word processors, you actually do not want to use a fancy one (like Word) because it will add information to your file that you don't need. You will also need a Web browser, such as Netscape Navigator or Microsoft Explorer, to view your Web page. Open the word processor -- you will have a clean blank window to work in. What you will be typing are commands for the Web browser, known as HTML tags. HTML stands for HyperText Markup Language, and these are the commands for displaying pages on the World Wide Web. All Web pages require the following tags:
 
 <HTML>
 <HEAD>
 <TITLE>Your Title Goes Here</TITLE>
 </HEAD>
 <BODY>
 Here is the information that will appear in your Web page.
 </BODY>
 </HTML>
 
The tags are the words written inside of < > and you must be sure to spell the words correctly (using capital letters can help you see the tag words, but you can use upper or lower case or mix them in the tag words).  You can type any phrase you like between the <TITLE> and </TITLE> tags and it will show up at the top of the Web browser window. Anything you type between the <BODY> and </BODY> tags shows up in the Web page.
 
Now, save your file by going to the File menu in your word processing program and click on the word Save (or Save As). You will be asked a name for your file. You want the name to be fairly short and related to the content of your page. The name should not have any spaces in it, it is best if the name contains only letters, and you will need to be specific about the use of capitalization. Without any spaces between, you will need to add a period (.) and then type the lowercase letters html in order to include the file type extension. A name for this practice file could be testfile.html for example. When you have the name typed in, go to the top bar of the Save window and select the place on your computer drive where you want to save the file (you might need some help doing this if you have never saved a file before). An easy place to save the file (for starters) is the desktop. Now click on the Save button, and your file is ready to test out. Note that you have not published your page to the Web, so nobody but you will be able to see it at this point. Testing out your file before publishing it is an important part of Web page development.
 
To test your file, start your Web browser and then click on the File menu and select the Open (or Open File) option. Then scan the list to find the name of the Web page you just saved, and click to open it in the browser. (There are other ways to do this, like clicking on the file's icon on the desktop.) Now you should be able to see your work the way it will look on the Web. You can keep the browser window open and continue to make changes to your HTML file in the text editor. Notice that changes made to your file will not be reflected in the browser window until you hit the refresh button. (Also, remember to use the Save command in your word processor in order to store your changes in the HTML file before reviewing it in the browser window.) When you publish your page, changes to it can still be made locally, and you will need to republish the modified file in order for Web users to see the updates. You should always keep local file copies of your Web pages just in case the Web version happens to get lost or corrupted.
 
If you have created your Web page in a text editor, one thing you will notice is that the lines of text in the body get run together no matter how you typed them in the file. Also, if your text lines are long, they will be wrapped around so that they fit into the browser window, no matter what size the window is (try it -- tug on the lower right corner of the browser window and watch the text flow around in the window). This is actually a feature of Web programming. Web pages are NOT what is known as WYSIWYG (What You See Is What You Get). If you need to create a page that has a fixed format or appearance (for example, a résumé or a published paper), you probably will want to create the file by using a more powerful word processor that allows you to save in PDF format. Images also retain their original appearance, although you can control resizing or stretching in horizontal and vertical dimensions when they are displayed on your page. In order to view images or PDF files from a Web page, usually they are linked (this is discussed below). What is important to remember about your HTML file, is that you WANT to allow the browser to do the formatting work for you, since that will create the most flexible page. If you need a blank line or space somewhere in your page, specify it by using a tag. There are all sorts of tags that can help you customize your page, while still keeping it in the flexible (or non-WYSIWYG) format. Here are some Web sites that have useful information about tags:
Glossary of Basic HTML Tags --
   http://www.umd.edu/HTMLClasses/glossary.html
All About HTML: Starting With The Basics --
   http://www.webdeveloper.com/html/beginners_html.html
NCSA Beginner's Guide to HTML --   
   http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
You will notice that in the list above, the Web addresses are underlined. This is because these are links to the actual Web pages to which they refer. Many things on a Web page (even pictures) can be configured to link to another Web page and the user will know this, because as they scan the pointer over the page, the arrow turns into a hand. It is customary, though, for text links to other pages to be underlined. This underline is created automatically when you create the link tag. It is therefore considered to be poor Web programming to underline text that is not actually a link (even though there is an underline tag, you shouldn't use it)! To turn text into a link, create an anchor container tag:
<A HREF="page address goes here">text goes here</A>
Be sure to use regular double quotes and spell out the full location of the Web page you are linking, including the http:// part. For example, to link to the Web page containing these instructions you would type:
<A HREF="http://www.notablesoftware.com/WebDesign.html">a notable Web instruction page</A>
Good Web designers always test their links to be sure they are working properly, after putting a new or newly edited page on the Web. Remember that the Web is a dynamically changing place. If you are linking to pages that are maintained by others, these pages may eventually be removed, and your link will then be pointing to nothing (known as a "broken" link), or to something else that was put in its place. Periodically checking the links on your Web page will help ensure that things remain up to date.

If you want to link to a PDF file, do it the same way you did with the Web link. In order for the link to work, though, you will additionally need to copy the PDF file to your Web space (if it is not already in someone else's Web space). This will be explained below. Also, the user will need to have a PDF reader (like Adobe Acrobat).

Some types of picture files can be displayed in Web pages along with the text. To include a JPG or GIF file, you specify it as:
<IMG SRC="picture address goes here" attributes>
You will need to copy the picture file to your Web space (explained below), and provide its full Web address (beginning with http://) inside of the double quotes, for it to be viewable. Various display attributes can also optionally be specified, such as alignment, image description, width, height and border. Picture files can be very large, and these will be time consuming to view on the Web, so you may want to reduce the size of your file by using a photo editor like IrfanView (http://www.irfanview.com) for the PC, or iPhoto for the Mac.

One way to learn how to design Web pages is to look at the raw HTML of other Web pages. You can do this via the View menu on your browser (click on Source or HTML Source). Start by looking at the source of this Web page. Some Web pages are very complex, especially those that have been created by automatic Web development tools (such as Netscape Composer or Microsoft Front Page), but others are fairly simple. You can save the HTML of pages on the Web via the Save feature in the File menu of your browser. Then use the text editor to make small changes and observe the effects. By getting familiar with the raw HTML code of Web pages, you can find features that you would like to try out, and then experiment with them in your own page.

Now that you have a basic page, you need to publish it on the Web so that others can view it. First, you will need a host account where you will place the HTML file and any auxiliary files (like images and PDFs) needed for your page. To get a host account, you should contact a Web service provider, who will give you the location where your files will be stored, an account name, and a password (many Web service providers have a phone number that customers can use to speak with a technical support person who can assist by talking you through this publishing part, but you can do it yourself). Guard your password carefully, because anyone who has it will be able to make changes to your Web page. The address that people type into a browser in order to see your page is its URL (Uniform Resource Locator). The address can begin with a special URL that identifies your Web space, but this must be purchased through a domain name provider, and then activated by a Web service (or host) provider. The page that is viewed by default when someone types the domain name is called the home page. The custom for this page (may differ with service providers) is that its name is index.html. Other pages (and picture files, etc.) are accessible via a path that is specified by giving the domain name, a forward slash (/), and then the full file name. You can also put pages and other files that are related together into a directory that resides on the host server, these can be referenced as www.domain.type/directory/file.html for example. It is important to remember not to use blanks or other characters in domain, file, and directory names (although underscores, hyphens and digits are acceptable). Be sure to use the entire file name, including its extension (such as .html or .jpg or .gif) -- to see what this part of the name is, you may need to turn extensions on when examining the directory where the file is stored.

Once you have the information about where your page will reside, you need to use an FTP (File Transfer Protocol) program in order to send a copy of it to the Web. Putting things into your Web space is called uploading (or publishing). Viewing or transferring files that are on the Web is called downloading. If you are using a PC, a good program to use for uploading is WS_FTP (available at http://www.wsftp.com). If you are using a Mac, it should have come with an FTP program called Fetch (in this, uploading is called Put and downloading is called Get). In order to perform the upload, you want to use the FTP program to find the file on your computer that you want to make available on the Web. Then, open the directory for your Web space via the FTP program (here is where you type in the address of your Web space, your user ID, and your password as mentioned above). A simple click on the upload (or Put) button publishes the file, by copying it into your Web space. (WARNING: For revisions, be sure you do the transfer in this way, or you can overwrite the new file on your computer with the older version you have on the Web!) Then you can try out the page by typing its full path URL into a browser.
 
Of course, you'll want others to be able to easily find your Web page through search engines (like Google and Yahoo). The higher your rating is with the search engine, the closer to the very top of the list it will appear when people type in words pertaining to its contents. Make sure that the words that would likely be used to search for your information appear in the body of your page (in a relevant way), and the most salient few words should also be in the title (such as your name, if it is a Web page about you). Another way to improve your search engine rating is to encourage people who have popular Web pages to link to yours. For example, if you are appearing in a play and the theatre has a Web page, have them link to your page (at least once) when they refer to you. Other suggestions can be found in Nancy Blachman's Google Guide http://www.googleguide.com (see the section on How Google Works).

Generally the Web is great, but it is a public space, so some precautions should be taken. Contents of HTML and auxiliary files residing in Web space (even if password protected) are routinely harvested and can subsequently be misused. Information placed on the Web for only a very short time may be collected and archived (to haunt you forever). Think of the Web as a giant highway billboard and only post information that you would not mind being known by everyone on the planet. For example, it is best to use a P.O. Box or a business address, and special email and phone numbers, for Web contacts. Do not provide or collect social security numbers (ever) or bank and credit card information (unless you have created a secure site -- an advanced topic you will need to learn more about if you plan to do such things).

That much having been said, the last step is a big pat on the back and congratulations -- if you followed these instructions carefully, you now have a Web page that you created yourself, as an HTML programmer! If you ran into difficulties, ask someone who is a bit more experienced with computing to assist you, and you should have your page up and running very soon. Have fun improving your page, along with your skills in Web design!

This material is part of a popular course called "How to Design a Web Page in 30 Minutes" that can be presented at your location (business, school -- for students or teacher in-service, library, computer festival, etc.) as a short talk or longer hands-on workshop. Contact Rebecca Mercuri via www.notablesoftware.com for further information.

 Copyright © 2005 Rebecca Mercuri
 All Rights Reserved