HTML Tutorial Part 1: Creating a simple Home Page
In this tutorial I'll show you how you can create a simple home page that's fully XHTML 1.0 compliant, meaning it's 100% faultless code that will render correctly on all browsers. This is the first tutorial of a series planned to be released upon which we'll be working on this page later on. Please note that this is a very basic tutorial that's intended for first-time beginners that want to learn the fundamental basics of web design. So let's start.
First is the DOCTYPE, this specifies the kind of document it is. This is very important by W3C standards. Secondly, we begin the page with the <html> tag. Older tutorials might have shown you that tags are all in capital format, but the new rules for web standards by the World Wide Web Consortium states that all tags must be in lower-case format. Open your favourite text editor and start off by adding the following few lines and save the document as index.html.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
As you can see, the DOCTYPE states XHTML 1.0 Strict in English and references to the DTD from the W3C, don't worry about it too much. The <html> tag contains the headers to W3C as well.
Now that we've opened the html document we need to start off by adding a few more tags, namely: <head>, <title>, <body>. We also need to add a meta tag which will define the character-encoding of your document. All html tags are closed by the forward-slash character as such, </html>. Every tag that's opened MUST be closed. There are however, a few exclusions that work a bit differently as I'll explain later. Add the following to your text file.
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>My Home Page!</title>
</head>
<body>
We now have the page's title (the title that appears at the top of your browser's bar) within the <head> tags. The <title> tag must be within the <head> tag! Thereafter we finally open the main body of your page (where you'll add all the content) and it's just about time to do that! We'll add some navigation and some text to the body but first let's add a title shall we.
<h1>My Home Page</h1>
<p><a href="index.html">Home
Page</a>
- <a href="aboutme.html">About
me</a></p>
<h1> is the header tag, header tags can vary in sizes from <h1> to <h6>, the latter being the smallest. I suggest trying them out. Below this we create two links, one to your home page and one to a page that doesn't yet exist "About me". <a> Stands for "anchor", which is a link in html definition, the href is the http reference. Your links must all be within quotation marks for the browser to recognize it and render the page correctly. Now let's create a horizontal line below your navigation to distinguish it from the rest of your page's content.
<hr />
Noticed the trailing "/"? This is the exception to the rule. We still close the tag but since there will be nothing between the <hr> tags it needs to be closed within itself. This rule also counts for the <img> and <br> tags among others. Let's write some more...
<p>Hallo, this is my first web page. I hope it will turn out OK!</p>
I assume you can determine that that <p> stands for "paragraph". All we need to do now is to finalize the document by closing the remaining tags. As you may have noticed, the anchors were also within a paragraph since that's the required method by standard. The anchor tags can't stand on their own, your browser will render it fine but the validation won't be fine!
</body>
</html>
That's it! You've successfully created a home page without effort, just save it! Your final document should look like this.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>My Home Page!</title>
</head>
<body>
<p><a href="index.html">Home
Page</a> -
<a href="aboutme.html">About me</a></p>
<hr />
<p>Hallo, this is my first web page. I hope it will turn
out OK!</p>
</body>
</html>
Here's an example of what it will look like in your browser.
You can validate the page at http://validator.w3.org/.