How to Really Build a Web Page
Quick Navigation:
- Introduction
- Step 0: Setting Up Your Environment
- Step 1: The Basic Structure of An HTML File
- Step 2: Building Your First Page
- Step 3: A Practical Example
- Next Steps
Step 3: A Practical Example
Obviously your web pages will have more content than just "Hello World" on them. This page will describe the commonly used elements of a web page.
Page Elements
Headings
Headings describe sections of your content and are denoted with heading tags (<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>). They should be numbered in order of importance, and a good rule of thumb is to have, on average, at most as many of each heading type as its number. For example, you should only have one <h1>, as it is the most important heading on the page. Additionally, you should only have 2 or 3 <h2> or <h3> tags, and so on.
Paragraphs
Paragraphs are denoted with the <p> tag. Any general content on your site (i.e. text and images) should be within a paragraph tag.
Images
Images can be inserted into your site using the <img> tag. This tag has a few required attributes that help browsers, search engines, and many users to better view the content. Here is a sample <img> tag:
Note that the <img> tag is self-closing, meaning that it ends with a forward slash inside the closing carat. The src attribute specifies the path to the image, while the alt attribute provides a fallback in the even that the image cannot be loaded. Both of these attributes are required for the <img> tag.
Links and Lists
You will likely want to link to other websites from your new page. Links are inserted with the <a>, or "anchor" tag. Here is a sample link:
The href attribute of an anchor tag specifies the destination of the link, and the title attribute provides helpful text that is displayed when the user hovers over the link. The href attribute is required for an anchor tag, while title is a strong recommendation.
If you want to insert numbered or bulleted lists into your web page, you may use the <ol> or <ul> tags, respectively. The <ol> tag denotes an ordered (numbered) list, while the <ul> denotes an unoredered (bulleted) list. Each of these tags can contain an arbitrary number of list items, which themselves are contained in <li> tags. Note that if you want to have a list in your website, you must include the tag specifying the list type (<ol> or <ul>) and a <li> tag for each list item. For example:
Putting it Together
Now that you have some basic HTML knowledge, let’s put it together with the page skeleton from step 2 to build a simple web page.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="author" content="Bill Parrott" />
<meta name="copyright" content="Copyright 2009 Bill Parrott" />
<meta name="robots" content="index,follow" />
<meta name="description" content="This is a sample web page built for the tutorial: 'How to Really Build a Web Page', found at http://chimericdream.com/2009/11/04/how-to-really-build-a-web-page/" />
<meta name="keywords" content="tutorial, web page tutorial, sample web page, web page template, xhtml, xhtml strict" />
</head>
<body>
<h1>My First Web Page</h1>
<p>Welcome! This is the first web page created with real (fake) content.</p>
<h2>About Me</h2>
<p>I make websites, and I hate writing bios. ;-) <a href="http://chimericdream.com/" title="Go to my home page">Here is a link to my website.</a></p>
<p>Here is a computer icon that I randomly found in a Google search. Looks fancy, huh?</p>
<p><img src="computer-icon.png" alt="Computer icon" /></p>
<h2>My Interests</h2>
<ul>
<li>Web Design</li>
<li>Swing Dancing</li>
<li>Video Games</li>
<li>RPGs</li>
</ul>
<h2>My Priorities</h2>
<ol>
<li>Family</li>
<li>Career</li>
<li>School</li>
<li>Hobbies (dancing, computers, gaming)</li>
</ol>
</body>
</html>
View example in a separate window.
That’s the whole thing! Go to the last page for some closing thoughts and to find out what we will cover in future posts.
November 6th, 2009 at 10:09 am
Good Job!
I’m going to go ahead and mention HTML5 here, also found via the w3c site, as the standard a new designer should be starting with. The switchover is coming and most of the big-boy browsers already have support. Also, the faster we can kill Flash, the happier I’ll be.
November 6th, 2009 at 10:22 am
Thanks! I appreciate the feedback.
I agree with you that HTML5 is on its way, and I plan to update this tutorial to use HTML5 instead of XHTML 1.0. However, since the spec is still in draft form and support is still (relatively) spotty, my preference is to stick with XHTML.
That being said, I don’t plan to wait forever for HTML5 support and the draft. If everyone does that, nobody will ever implement it. Once the spec gets to a fairly stable state and is a bit better supported, I’ll make the switch and start recommending it myself.
November 7th, 2009 at 4:30 pm
What’s your reason for suggesting that images be inside paragraph tags? To me it seems like that’s a presentational choice (block level, top and bottom margin, etc…) rather than structural.
Good article though. 8^)
November 9th, 2009 at 7:50 am
The main reason I am advocating that they be inside paragraph tags is that in this article I don’t get into discussing the <div> tag. Since every element must be within a block-level container, it made the most sense to recommend putting them in paragraph tags.
The next article (covering CSS, mostly) will cover more HTML, including divs.
February 24th, 2010 at 5:31 am
I don’t think many people realize the number of disadvantages that go along with creating free websites. Hopefully this article will shed some light on the subject.
Don’t make the same mistake I did. After this nightmare, I vowed to never go the “free route” again. Creating your site from scratch with its own dot com name is affordable and definitely worth the small investment.
Parking your site at a free host is often like building a house on sand. It may be quick and and it may seem easy at first, but I can almost guarantee you it won’t last long.