HTML: Creating a Web Page

Creating a Web Page

In this first tutorial, you will learn how to create a simple web page using a basic template (download here) that you can modify for your own web pages.

The HTML part of any web page starts and ends with <html> tags. There are 2 major sections inside the html tags: the head and the body. The head area is not viewable when the web page renders in the user's browser; instead, it sets up things like the window title, meta data information like keywords and description, the styles for the page, commonly called cascading style sheets, and javascript libraries or functions. The body area, on the other hand, is the viewable part of the web page; this is where you put such things as text, images, and video.

Here is a whole HTML web page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>XoaX.net HTML Lesson 1</title>

    <meta name="keywords" content="video, tutorial, tags"/>

    <meta name="description" content="This is a description."/>

</head>

<body>


<h1>XoaX.net HTML Lesson 1</h1>


<p>This is body text.</p>


</body>

</html>

The one thing in every web page that's important to include is something called the Document Type Declaration, or DTD.

A DTD tells the browser which tags can be used in the page and where the tags can be put. For example, some DTDs don't allow the <iframe> tag at all. And, some DTDs don't allow you to put anything directly inside the <html> tags except the <head> and then the <body> tags.

If an HTML page doesn't specify a DTD, the browser renders the web page in what is called "quirks" mode, which means in a non-standards compliant way like some browsers did before 2001. The problem with letting your page get rendered in "quirks" mode is that if you have an error in your HTML, you may have a very hard time figuring out what the problem is because it won't be clear what is or is not allowed in your web page. Since it's easy to specify a DTD at the top of every HTML page, it's best practice to use one. There are several DTDs to choose from, but for now, I'll show you the best general DTD to use. It's called the XHTML Transitional DTD. To use it, put this statement at the top of your web page, even before the html tags or anything else:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Now that we have our DTD specified, there are a couple things to keep in mind. First, all of your HTML tags should be in lowercase. Second, every tag should have a start tag, and either an end tag if there's text inside or a slash at the end of the start tag if there is no data in it.

After the DTD declaration, put the <html> start and end tags. The start <html> tag should look like this:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Inside the <html> start tag, you should put your start and end <head> tags.

Inside the head area, we want to specify a couple things such as the title, the meta keywords and description. The title is an important tag because it not only appears at the top of the window and on the tab of your page in the browser, but it helps search engines read what your page is about, and helps your page get ranked higher. Here's an example title tag:


<title>XoaX.net HTML Tutorials</title>

The head section should also contain meta information for keywords and description. It's not absolutely certain if search engines use this meta information anymore to help determine the rank of your pages, but it's a good idea to include them just in case. For keywords, pick up to 10 words or phrases that describe the content on your page, and separate them with a comma, like this:


<meta name="keywords"

        content="video, tutorial, creating web page, html tags, xoax.net"/>

For the meta description, write a sentence or two that describes the content of your page. If it exists, the meta description will show up in Google's search results underneath the URL for your page.


<meta name="description"

        content="This is a description of your web page content."/>

The head section can also include cascading style sheet styles, but we'll leave the css for later. We will also leave out the javascript programming right now and focus purely on the HTML tags.

As for the body area, you can put anything that you want to show on the web page, including text, images, and video.

To put a heading on your web page, you can use the <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, or <h6></h6> tag. By default, the <h1> tag is styled in a large font and has white space above and below it. The <h1> tag is also used by search engines like Google to help understand what your web page is about. The other 'h' tags are rendered by browsers in smaller fonts progressively, sometimes bold is added, down to where the <h6> tag is not too dissimilar from body text.

To show paragraphs on your web page, you can surround each chunk of body text with what are called <p> tags. By default, <p> tags have white space above and below them, made to look like paragraphs in a book.

If you want to see what your HTML web page looks like in a web browser, just save your file on your computer as 'index.html' and then double-click it. It should open in a web browser by default since it has the .html extension.