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 2: Building Your First Page
Now that you know the basic structure of an HTML file and the required/recommended elements that go into it, let’s move on with building your first page.
The Page Skeleton
For the basic skeleton of your page, first include the doctype definition, followed by the required page elements.
Next, put in the recommended elements appropriate to your needs. For this example, I will be including all of the recommended elements.
"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>
</body>
</html>
Hello World!
Now that we have our basic page skeleton built, it is time to put the first content into it. We will use the classic "Hello World" example.
Create a paragraph tag (<p></p>) and put the words "Hello World" into it. This tag should be within the <body> section of your page, like so.
View example in a separate window.
That’s it! The next page will get more in depth with a practical example.
No related posts.
Pages: 1 2 3 4 5 6
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.
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.
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^)
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.
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.