DIY Web Page Design

Webpage Design

Web page design can seem like a very overwhelming thing, especially given h ow many advanced techniques there are out there. Try not to worry too much about it, though; it is easy to break the overall project into smaller tasks, and resources on the Internet can also help. Even if you intend to use templates or site builders to lay the ground work, there are still some general principles to follow to help create a site that looks professional.

With a text editor ready to go, such as Notepad, it's time to get started. After reading through this guide, you will type out the basic format of a website, save it as an HTML file and successfully view it in a Web browser.

Basic Formatting

Every page has the same basic skeleton hidden beneath it. To understand the structure, you will need to learn what the basic tags are.

Tags

Tags are the text in between the < and > brackets. If you have ever seen code before, you have seen these tags. 

Structure

In addition to pages having structure, tags have their own form of structure too. Some tags are "starters," such as <i>, while others are "end tags," such as </i>. Together, this pair of tags creates an HTML element. For the provided example, this would italicize text. Most elements require an ending tag, which is simply a forward slash in front of the name of the element.

Creating the Page
To get things started, open your text editor and type in the following tags: 

<html>
</html>

Every page uses this as the standard tags, and they can have either text or additional HTML elements in between them.

Fill out the rest of the Notepad file so that it reads as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>A Basic HTML Page</title>
</head>

<body>

Content will go here.

</body>

</html>

Your new first line will certainly look a bit complicated and confusing, but it isn't something you have to worry about right now; it simply tells your Web browser what version of HTML you want to use; though it is not the most recent version, this example uses HTML version 4.01.

There are two basic parts to an HTML page: the head and the body. The head portion is where you would put more advanced elements like meta tags and other things; the only part you need to know right now is the title tag as this dictates what the title of the Web page will be.

As for the body section, this is the main part that displays anything you put here as its content. Type anything in here that you want to appear. In the above example, the phrase "Content will go here" would appear if you viewed your file as a website.

Now you have successfully made the bare-bones skeleton for Web page design. There are more complicated techniques, but everything boils down to this skeleton at the end of the day.

Saving the File

When you use a text editor like Notepad to create a website, it can be a little tricky trying to give your file the proper ".html" file extension. By default, it will try to save the file as ".txt" and not even give you the option to switch it to an HTML file.

Don't fret: All you need to do is type in a file name -- go for all lowercase letters to be safe -- and type in the file extension, wrapping the entire thing in quotes. For example: "index.html" is how you would type it. Click "Save" and remember where the file saves so you can find it again. In the future, all you would need to do is click "Save" rather than go through this entire process again, since the computer will recognize this file as an HTML file in the future.

The file name for your page can be any alphanumeric character, hyphen and underscore combination. However, it is generally best to keep everything lowercase; otherwise, people may have confusion problems with capitalization. The home page to your website should always be "index.html" as well.

You may notice that there are some websites that have an ".htm" extension. Back in the 90s, extensions could only consist of three letters. It is possible that you could simply call your file "index.htm," but the number of people who use such old computers is quite low, so you may as well still to the full ".html" file extension.

Word Processors versus Text Editors

It is noted here that you should use a text editor like Notepad, not a word processor like Microsoft Word. If you absolutely must go with the latter, you do not want to save all of the margin values and formatting as the Web browser cannot read them. To avoid this, simply save it as a text only file, meaning only the important information is saved and relayed to the browser.

Viewing the File

After all of this work, you will now likely want to know what this page even looks like and whether it even works properly. Open a new window or a new tab in your Web browser. Click "File," followed by "Open." Locate the file that you just saved and double-click it. It should appear as a Web page in your browser.

Because it is a basic file, it should only appear as a white page with nothing more than whatever you put between the body tags. However, this is just the first step into creating something new and more advanced in your ongoing journey to do-it-yourself Web page design.


More DIY Webpage Articles