Basic Page Structure
Now that we have a background in how the Internet works, it is time to begin our study of the HTML Language. This is what we will use to build our own webpages.
Markup Tags
HTML markup tags are HTML element names enclosed in angle brackets, or wickets. Tags are the essential building blocks of HTML files. They tell the browser what to do with the stuff inside the container. For example, using a heading tag around a sentence would make the sentence appear as a heading. There are two types of tags that you will learn how to use in this course:
Container Tags vs. Empty Tags
Container Tags – come in pairs and use an opening and closing tag.
<title>My Home Page</title>
Empty Tags – stand alone. This means that it has no closing tag. This is used when you wish to place something into your Web page. These tags must always end with a space and then a slash before the closing wicket. The code below is used to insert a picture into a page. It is a perfect example of an empty tag.
<img src=”http://www.picture.com” />
So What Are the Pieces of A Tag?
Tags are really quite simple to understand. Each tag may contain the following:
- An Element provides the main instruction for the tag. This must be in the tag
- An Attribute specifies a quality or a certain aspect of the element. It is usually optional.
- A Value gives a value to the attribute.
In the code example below, you can see that the paragraph element (<p>) contains an align attribute whose value is “center”
<p align=”center”>This text would aligned to the center</p>
Please note that attributes and their values always go inside of the opening tag.
Basic Web Page Structure
Every Web page must have the following elements in order to work properly, and be considered valid.
1. The Document Type Declaration (DTD) – this tag does very much what its name suggests. It describes the nature of your HTML code. Don’t forget, there have been different versions of HTML. You need to tell the browser what version of HTML you are using. We are going to be writing HTML 4, because it’s a bit easier and more forgiving. As we move along, we’ll look at some of the more current, rigid versions.
This is what the basic DTD that we will start with looks like:
<!DOCTYPE HTML>
If this seems scary, don’t worry. All you have to do is copy and paste your DTD into your page. I don’t expect you to memorize every piece of code; I just want you to understand what it is and why it is used.
2. <html> Container – A container , by definition, holds something. These containers are how the computer knows what to display on the screen and what to read as code. When your browser opens a Web page, and finds the <html> container it knows that it is dealing with an HTML document, and then follows that appropriate rules to displaying the information.
This is what your document will look like after you add the <html> tag.
<!doctype html>
<html>
</html>
Remember that a container has a top and a bottom. Whatever you want to be interpreted as HTML must be inside the opening and closing tags.
3. <head> Container – The head container is one that is found inside of the <html> container. Its purpose is to hold information that will never be displayed directly inside your page. The elements that go into the <head> of a document are usually for scripts, and search engines. They provide information about the page.
When you add the <head> container to your document it now looks like this:
doctype html>
<html>
<head>
</head>
</html>
4. <title> Container – The title container is one that is found inside of the <head> container. Its purpose is to give the title of the page to the browser so that it can display it in the title bar.
If you add the <title> container to your document it now looks like this:
doctype html>
<html>
<head>
<title> My Webpage </title>
</head>
</html>
When choosing a title for a Web page you should remember that it should be specific to the content that is on that particular page. For example, if boardersanonymous.com had a page in their site that had contact information this page should be named:
“Boarders Anonymous.com – Contact Information”.
Just keep in mind that the title provides information about the page, and if the user does not see what they are looking for, they may leave right away.
5. <body> Container – The body container is where most of your information will go. It comes directly after the <title> tag closes. If you add the <body> container to your document it becomes a complete HTML document. Think of the template below as the structure of a house.
doctype html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
***NOTE***
You have been given my permission to use the above code in the template repeatedly in this course, and in any future courses or Web pages that you may want to do. Copying and pasting any other code in this course is not allowed. Last year several students received a mark of zero because they decided to copy code from HTML Editing programs. Remember, code examples are meant as a guide in this course so that you can learn how to do this yourself. It is expected that you will learn to write the code and not simple paste my code into your assignments. This would be plagiarism and would result in a mark of zero for the assignment, and possible further disciplinary action. The same rules apply to code that has been lifted from other sources on the Web, and from other students’ work.