How to Design Your Own Web Page

By Johan Mengesha

So your presence on MySpace and Facebook isn't enough for you, and you've decided you want to launch a full-fledged personal web page. It's time to take advantage of the Internet's massive space and convenience, as well as its ability to transform the trivial by etching it into the ether for eternity.First of all, visit your favorite page and see what you like on it. Look at what the designer of the page has done to impress you, and keep it in mind when planning your own site. We are going to show you how to construct a simple personal page, which will demonstrate the essential features of web authoring, while saving the use of bells and whistles for a later installment. Your multimillion-dollar e-commerce portal and IPO will have to wait for another time (and another eHow).

Learn About Some of the Methods for Creating Your Own HTML Document

There are several ways to create HTML documents. First of all, you can type in HTML code instructions and content yourself, using a text-editing program. Simple text editors are included with all Microsoft Windows operating systems (WordPad and Notepad), and on the Mac (SimpleText). These are basically stripped-down word processors that your computer already has. You can also use an HTML editor like Microsoft SharePoint Designer. These applications let a user simply point and click his way to a completed web page, without ever having to look at a confusing line of HTML code. Finally, several word-processing and desktop-publishing applications (e.g., Microsoft Word, Adobe InDesign) allow you to easily convert your word-processed documents into HTML code by saving them in HTML format.We'll be using the first method, raw HTML code. We will also be coding our HTML by hand because: 1) it will help you to better understand how web pages work; 2) you will then know how to edit pages, no matter how they were created; and 3) some browsers may not recognize all of the features an application might add to a web page. Think of it like learning to drive on a stick shift--learning the tough way first gives you the skills to drive any car in the future.

Obtain Web Space

To make your web page available to the world, you'll need to upload it to a web server. Your school or business may offer you web space at a low price or for free. If not, you will have to use a commercial provider. Your Internet Service Provider (ISP) may already offer adequate web space for you. Finally, several commercial sites, like Yahoo! GeoCities, offer free space (and web-building tools) for users in exchange for allowing advertising on their pages. This can be an affordable option for web publishers who aren't afraid of a few banner ads..Fortunately, you don't need to have server space to create an HTML document on your own computer, or even to email it to your friends, enemies and everybody who's ever been foolish enough to give you his email address. Both Mozilla Firefox and Internet Explorer will let you open an HTML document directly from your hard drive. We'll talk about this later, when you check out our sample page.

Consider the Purpose of and Audience for Your Web Page

If you have a business you want to promote online, you'll want visitors to know who you are, what you do and how they can get in touch with you. If you are a fan or a hobbyist, your page could showcase your interests, offering information for fellow enthusiasts, along with pictures and maybe a set of links that will lead to related sites. Alternatively, there's nothing wrong with creating a page just to showcase yourself. Be advised, however, that your personal page will be unlikely to attract a whole lot of visitors. It may at least give you the satisfaction of being an international (if unknown) cultural figure.Think about what images you should include on your page and what they will contribute. Although it has become less of a concern thanks to the prevalence of high-speed Internet, remember that, for users with more primitive connections, large images take longer to download. This concern becomes even greater when dealing with multimedia, such as video and audio clips, which require much larger files.Determine how much information you want to include on the page. If your page is short, readers generally will not have a problem with scrolling down to read the content. Ideally, though, a visitor should be able to get most of the useful information about a page from the section that appears in the browser upon arrival. If there is a lot of information on a page, you might consider two options. One is to break up this information into separate web pages and provide links to these pages from your home page, or you can create a table of contents at the top of your page that provides links to information later on the page.

Prepare a Sample HTML Document

Getting startedYou'll first want to create a folder or directory in which to store your HTML document, along with any images or other stuff you decide to include with the document. It's recommended you create this folder on your desktop for now. You can always tuck it away somewhere else later. Next, you'll want to open up a text editor or word processor.Once you've got your editor open, a new, blank document should be staring at you. We'll save this file now, just so we know where it is. Under \"File,\" choose \"Save As.\" Name the file with your last name, or something else you're unlikely to forget, up to eight letters long. Put \".htm\" at the end of the file, to show that this is an HTML document. Do not put any spaces in the name--only letters or numbers. Then click \"Save.\" Make sure that all HTML files and graphics files you use for this page are saved in the folder you've made.Designing a simple HTML documentAs we go along, we're going to be making up our own character, Shari Saunders, and designing a home page that fits her needs and desires. At the same time, we'd like you to follow our lead, but instead of incorporating the details of Shari's life into your page, it might be nice for you to come up with some material of your own. If you're creatively impaired, however, feel free to plunder Shari's hard-won experiences.Let's do a quick review of the basics: * Start with the tag to let the browser know what kind of file your document is. * On the next line, enter the tag to create a header for your code. * Include a title in the header: for example, Shari Saunders' Awesome (Yet Modest) Home Page!. * Close your header: . * Following the header, within the tag, you'll be able to change the colors of the background and text of your documents. We'll leave these on the defaults for now and come back to this later. * After you've introduced the body of your document with the tag, fill in your text, images and other content and close it out with * Close the document with the tag.Here's what the code of this simple HTML document should look like: Shari Saunders' Awesome (Yet Modest) Home Page! Text, images, and other content.Note that only the text and images would appear in the main window of a browser. Also, you'll notice how we've carefully formatted the lines of code by placing each instruction on a new line and by indenting the lines. This is only for human readers; the browser couldn't care less if we ran all the instructions in a row on a single line, without spaces, as long as we get the syntax right.Now that we've covered the basic structure of an HTML document, it's time to add some content. We'll start from the top. Write a heading for your entire page, to serve as a title.The tag

Shari Saunders: My Home Page

will create a heading of Size 1, which will appear in a browser as:Shari Saunders: My Home PageYou'll now be creating a short message to introduce yourself to visitors to the page. Just begin a new paragraph with the

tag, and type a few words of welcome:

This is a professional page of great distinction. Thanks for visiting.Now let's create a subheading for the first subsection of your page. The tag

Professional Activities

will create a Heading of Size 2:Professional ActivitiesNext you'll create a list or two of your professional activities, educational institutions, interests and hobbies. Let's see what we've got so far (note that we've added some additional formatting, including some lists, using only tags discussed here: Shari Saunders' Awesome (Yet Modest) Home Page!

Shari Saunders: My Home Page

This is a professional page of great distinction. Thanks for visiting.


Professional Activities

  1. Worked for CIA as undercover liaison:
    • Spread disinformation re: U.S. activities
    • Performed online surveillance of public figures
  2. Worked at ice cream stand at Franklin County Fair
See the parts that say ? As it explains above, those are just our little notes to you, the reader of the code. They won't actually appear on the web page, just in the code itself.

Final Formatting: Add an Image or Two and Some Links

Saving and Incorporating an Image From the WebNow you're going to add an image to your fledgling HTML effort. To incorporate an image from the web into your own document, you must first save it to your own directory. To try this out, we must first come up with an image for you to use in your page. Look for a picture of a computer on Google Images and use it for this test run.You'll want to make sure that your image file's title is something you can remember. Save it as \"happycomputer.gif.\" After changing the \"Save As\" line, if necessary, save the image to the directory we've created--the one containing your HTML document.Since the image file called \"happycomputer.gif\" is now stored in the same directory as your HTML document, you'll point the browser to this file (your image source) by adding this line to your document: When the page loads in a browser, the image will appear on the page at the spot where you've requested it. Remember: Whenever you use text or images you've found on the web, you must always follow the guidelines for use posted by the website's creator. If there are no guidelines posted, you must contact the creator and ask for permission to use the material.Adding a Few LinksAnchors are special destination points within a document, allowing you to add links to different parts of the document, such as separate sections, a table of contents, or the top of the page. We'll now add an anchor at the top of the page, along with a link at the bottom to bring us back up to the top of the page: [Creates and names an anchor; we're putting this one at the top of the page] . . . To Top of Page [Creates a link that, when clicked, will jump the user back up to our anchor, at the top of the page]In addition, we'll add a link to the email address of the page's author (that would be you): Shari SaundersWhen a visitor clicks on this link, her browser will activate her default email application and open a new blank message. The message will already be addressed to you, and the user will only have to fill in her message and hit the \"send\" icon or command.You may also want to add a list of your favorite links, if your page is intended to reflect your hobbies or interests. We'll add just one of our favorite links: Visit the CIA Homepage for Kids!Final Formatting: Sample PageWith a little bit of final formatting, here's a sample page we've constructed to illustrate the HTML tags we've been working within this eHow: Shari Saunders' Awesome (Yet Modest) Web Page!

Shari Saunders: My Home Page

This is a professional page of great distinction. Thanks for visiting.


Professional Activities

  1. Worked for CIA as undercover liaison:
    • Spread disinformation re: U.S. activities
    • Performed online surveillance of public figures
  2. Worked at ice cream stand at Franklin County Fair

Contact Information:

Shari Saunders

Links You May Like:

Visit the CIA Homepage for Kids!

Back to our previously scheduled eHow

To Top of Page

Preview Your Document in a Browser

You'll now want to see how your document looks in a web browser, and to check if your code has any errors that keep the page from loading properly. First save your document in the directory we've created. If it isn't saved, it'll be tough to read. Once your document is saved, you'll open up your browser. Your browser is probably set to go out on the web as soon as it's opened; you'll want it to start on a blank page instead. To accomplish this, you'll have to figure out which of these four groups you belong to: To set this up on Firefox: Open the Tools menu and scroll down to \"Options.\" Click on the Main tab, and in the list of startup options, select \"Show a Blank Page.\" Open the Tools menu, then scroll down to click on \"Internet Options.\" Under the tab marked General, in the \"Home page\" box, click on the button marked \"Use Blank.\"Under File, choose \"Open File.\" Select the HTML document from your directory (which should still be on your desktop) and click \"OK.\" Your document should now be displayed as a web page in your browser window (even though it's not really out on the Web).If your page doesn't look the way you hoped it would, you'll want go back to the text editor to recheck your code for errors or spots you could improve.

Upload Your Document Into Cyberspace

Since the uploading process will vary depending on what application you use and on the requirements of your service provider, we will cover this process only briefly and generally. The standard method for uploading files is called FTP, or \"File Transfer Protocol.\" This means what it sounds like: a method of transferring files from your computer out to another server (or vice versa). We'll use WS_FTP as an example, as this is the standard application for uploading files from a Windows system. If you don't have a copy of WS_FTP, you can download it for free from many shareware sites, including shareware.com. Uploading from a Mac involves a different application program, but is a very similar process. Be forewarned: This whole uploading process can be tricky, so print out this step for quick reference.You'll first want to make sure that all your documents for uploading are in a common folder or directory. You will have to determine your service provider's policies as to where and how to upload your files to their server, and whether you must save the files with a particular label or format. Check your documentation and their web site. If you can't find the information, or if it's unclear, call them up and ask them nicely to explain it to you.You must first log in to your service, as you normally do to get online. Then run WS_FTP. This should open a window called Session Profile. If it does not, click on the \"Connect\" button to bring up the correct window. Click \"New\" for a new session, then fill in the Profile Name. Call it something that makes sense, like \"Web Page Upload.\" For the Host Name, you'll want to enter the name of your service provider's server (they will have to provide you with this information). Your User ID will be the first part of your email address, before the \"@\" symbol.You shouldn't need to include your password, since you entered it when you first logged in. In the bottom line, Local PC, you'll enter the path name to the directory containing your document and other material. Since we've saved our directory on the desktop, the correct path in Windows will be: C:\\WINDOWS\\Desktop\\DirectoryNameWhen you've finished filling in these lines, click \"Save\"--you'll need to use this connection again later. Then click \"OK\" to begin uploading files from the directory.You should now be looking at a window has at the top the name of the application, WS_FTP, followed by the name of the server you're uploading to.On the left side of the window, under the phrase \"Local System,\" you should be looking at a line containing the name of the directory on your computer, and beneath this line a listing of the files in that directory.On the right side of the window, under the phrase \"Remote System,\" there should be a line containing the name of the directory that represents your space on the server; the name of this directory will probably end in your User Name, for easy identification. Beneath this line will be an empty space, where we're about to stuff some files.Click on the files you want to transfer, on the left side of the window. If you hold down the mouse button you can select several files at once. Once they're selected, click on the arrow button at the center of the window--the one pointing to the right--since this is the direction in which we're transferring the files. A panel will open before each file is sent, asking you if you want to change the file name. If not, click on \"OK\" for each file and it will be on its way.Once you're finished, you should be able use your browser to visit your web page online, just like any other page. Remember: If you want to make any changes or corrections to your page at this point, you'll have to alter the file on your computer, then upload the revised file to overwrite the one on the server.Congratulations, you've just gone public.

References & Resources