Building a Web page now is very different from how I built them when I first started designing Web sites. I have not forgotten the basics, though, and I still use them to this day.
Back in 1996, when I was first learning how to construct a Web site, I had no access to editing programs such as Microsoft's Front Page or Adobe's Dreamweaver. I had to learn
HTML —
Hypertext Markup Language — and build my pages in Notepad, the non-formatting text editor that comes with Windows. For feedback, I would use the browser of the day, which at the time was Netscape.
Many people mistake such hand-coding for "programming," but it really isn't. HTML is actually a lot simpler, and far more user-friendly, than, say, JavaScript. HTML is a formatting language that tells the browser how to display your content, and where to display it on the page. Programs such as Dreamweaver and FrontPage give you instant feedback, but they have only simplified what was already a fairly simple effort to begin with. And with their automation came formatting errors that no one unlettered in HTML would even catch.
So why should you learn to build a basic Web page from scratch?
Because working with the source code empowers you to take control of the page rather than allow a program to do your thinking for you. When you take control of the page, you no longer have to accept the default browser settings. You are free to design at will. Using an adjunct formatting tool called
CSS (
Cascading Style Sheets) to modify the default HTML settings, you can create a page that looks like it was designed professionally rather than spawned by a struggling amateur.
So let's begin at the beginning. You will need to use Notepad, which can easily be found in Windows Accessories under All Programs. As a means of feedback, I recommend using Firefox, or any Mozilla-type browser. These are free downloads and are easy to install. You will later need to open your page in both programs: Notepad for editing, and the browser for feedback.
Avoid using Internet Explorer for feedback. All the security baggage Microsoft has brought to its browser makes it a pain to work with. Later on, when you've built the page and are satisfied with how it looks in Firefox, open up your page in Internet Explorer, jump through the all the Active X permission hoops just this once, to see how it looks. Then move on.
So now let's begin.
First of all, open up Notepad and
File/Save the blank page you've opened with the file name "index.html." Any file name will do, but "index.html" is the filename of the first page a browser opens when the page is hosted on the Internet, so you would have to use it anyway if you intend to build your pages into a full Web site. As a file location, I recommend either Desktop or My Documents for easy access. Later on you can set it up with its own directory. When you open it later for editing, right-click on the icon and
Open With Notepad.
Every basic HTML document begins and ends with matching set of opening and closing tags, <html> and </html>. So the first tag pair you should type into Notepad is:
<html></html>
You can arrange your markup code any way you like in Notepad to make the source code easier to read. Unlike real programming languages, HTML has a rather loose protocol and doesn't require specific spacing or position on the page. Just make sure you use opening and closing tags properly, where they are required.
Use the return button to bring down the closing tag below the opening tag, like so:
<html>
</html>
The next element of an HTML page is the
Head, which encloses the
Title of the page — which you will see in the upper left hand corner of the browser — and any "meta" information, which I will discuss briefly later on. For now, just type in the
Head and
Title inside the html tags, like so:
<html>
<head>
<title>My Web Page</title>
</head>
</html>
Not exactly rocket science, but this is a first step. You'll notice that I added text between the Title tags, My Web Page. Any text within those tags will do, the point being that the Title is absolutely necessary for search engines to distinguish one Web page from another
So your page has a Head, and now it needs a
Body. Type in your Body tags after the closing Head tag and before the closing HTML tag, like so:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
</body>
</html>
At this point you could just start typing content between the body tags, which is OK if you want all your content to be trapped in a single block stretching the full width of the page. However, if you want to start "styling" your page to make it easier to read, I suggest that you begin using
Styles right away, which requires some explanation.
There are HTML tag pairs that are called “Block Elements" that determine what constitutes, for example, a “Paragraph," the basic unit of written composition in nearly all Western languages, including English. In HTML, the default tag pair for paragraphing is <p></p>. These render differently in different browsers, so I’m going to go out on a limb here and recommend that you NOT use them (I can already hear my fellow Web designers screaming “Foul!" — ignore them for now).
In my experience, the
<div></div> tag pair is much more versatile and amenable to styling. In all block elements there are qualifying properties that modify the appearance of the content between the tag pairs. These qualifying properties are called “attributes." I will demonstrate these by adding an introductory <div></div> tag pair between the body tag pairs, like so:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<div style="width: 400px;">
My Content is now enclosed within a block that takes up 400 pixels, or roughly 1/2 of the width of the page. Because this is the first block element on the page, it naturally rises to the top.
</div>
</body>
</html>
The <div></div> block is modified by using the “style" attribute to restrict the width of the block to 400 pixels wide. You could just as easily specify 600px, or any width for that matter, or a percentage of the page width such as 30% or 50%. This is the first block on the page, so it naturally rises to the top. If you want to space it down a bit, you could add some padding, like so:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<div style="width: 400px;
padding-top: 25px;">
My Content is now enclosed within a block that takes up roughly 1/2 of the width of the page. Because this is the first block element on the page, it naturally rises to the top.
I just added a little padding to push it down a bit.</div>
</body>
</html>
If you want to indent the text a little bit to make it look the indented text you see published in print, you could further modify the attributes to just that, like so:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<div style="width: 400px; padding-top: 25px;
text-indent:
10px;">
My Content is now enclosed within a block that takes up roughly 1/2 of the width of the page. Because this is the first block element on the page, it naturally rises to the top. I just added a little padding to push it down a bit.
I also added a text indentation.</div>
</body>
</html>
If you want to add another paragraph, you can just copy and paste and div block you just created in to the space just below the closing div tag, like so:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<div style="width: 400px; padding-top: 25px; text-indent: 10px;"> My Content is now enclosed within a block that takes up roughly 1/2 of the width of the page. Because this is the first block element on the page, it naturally rises to the top. I just added a little padding to push it down a bit. I also added a text indentation.
</div>
<div style="width: 400px; padding-top: 25px; text-indent:
10px;">
My other content, that I copied and pasted below first div tag pair to get a second paragraph, is enclosed within a block that also takes up roughly 1/2 of the width of the page. Because this is the 2nd block element on the page, it naturally appears below the first. The padding I used to push it down a bit is repeated here to create a space between paragraphs. It too can be modified.
</div></body>
</html>
Now you have a basic Web page with two formatted paragraphs that will render the same in any of the major browsers. In this phase, it is still not ready to be published on the Web, although it would certainly display there just fine. You need Meta Tags in the head just below the Title to tell the browser what type of text you are using, as well as those describing the content and providing keywords for search engines.
It is not in scope of this article to go into such refinement, and there are many other ways to use Cascading styles to modify the look of the page. I've already met my goal of showing you how to build a basic Web page. You can go to the
resources section of my Web site if you want to learn more about HTML and CSS and how to use them effectively.
Just remember, you don't have to accept anybody's default style for any page you develop. You have choices only as long you persist in learning ways to acquire them. As with any endeavor, you get back what you put into it.
tweet this!