The web page design can seem like a very overwhelming thing, especially given how many advanced techniques there are. 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 groundwork, there are still some general principles to follow to help create a site that looks professional. However, we should note that before you can begin designing your own website you will need to buy a URL to build your site on. If you already have a URL (aka domain) that you have in mind, then please proceed.
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, 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 create 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 element’s name.
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 5.
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 view 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 filename for your page can be any alphanumeric character, a hyphen, and an underscore combination. However, it is generally best to keep everything lowercase; otherwise, people may confuse capitalization problems. The home page to your website should always be “index.html” as well.
You may notice that some websites have a “.htm” extension. Back in the 90s, extensions could only consist of three letters. It is possible that you could 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, 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 likely want to know what this page even looks like and whether it 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.