A Summary of Web Page Construction

Objectives

The objective of this page is:

The Major Sections of an HTML File

In the previoius page we described how content that we want to display in a Web page is marked up with HTML tags so that a browser can display the page in a useful and, hopefully, aesthetic fashion. In doing so, we started with a text file that had various content and then described how to use HTML tags to identify the various page elements for a browser.

However, a properly formed Web page has more structure than what we described earlier. In this page we describe the proper way to construct a Web page.

The Proper Structure of a Web Page

The proper formulation of a Web page is given in the following example.

<!DOCTYPE html>

<html>

  <head>
    <meta charset=UTF-8"/>
    <title>Simple HTML Page</title>
  </head>

  <body>
    <p>Hello, World!</p>
  </body>

</html>

If we save this file with the file name Hello-World-Normal.html and open it in a browser, the browser will display:

We can use this example to identify and discuss the various parts of a properly formed HTML file.

The Four Sections of an HTML File

There are four major sections to a properly formed HTML file.

The DOCTYPE Type Line

The first line is is really not part of the HTML portion of the document. Instead, it specifies the type of the document this file represents. In our example, the first line of the file is

<!DOCTYPE html>

This indicates to the program (e.g., a browser) that processes this file that it should process it as an HTML file (that is, it should be prepared to find HTML tags and interpret them properly).

The HTML Document Itself

The HTML document itself is contained between the html opening and closing tags, as seen above:

<html>
. . .
</html>

All of the specifications and content for this Web page is to appear between these tags, and are divided into two parts: a head and a body.

The Head Section of the HTML document

The head section comes first in the HTML document and contains information about the page, but does not contain any of the page contents. In our example it contains the lines

  <head>
    <meta charset=UTF-8" />
    <title>Simple HTML Page</title>
  </head>

The "meta" line provides meta data (meta data is information about the data of a file, not the data itself) that states that all of the characters in this page are encoded with a scheme called Unicode, specifically the Unicode UTF-8 variant known as the Unicode Transformation Format. Unicode character encoding is important because it is possible to encode all of the characters in all of the languages of the world, including the special symbols of mathematics.

The <title> line gives a title for the Web pagethat the browser can display in the tab for the page.

4. The <body> section of the HTML document

Finally we reach the part where all of the content for the HTML page is included. This where the fun happens: all of the text, images, videos, and audio content goes between the <body> and </body> tags. Our only content in the above example is:

    <p>Hello, World!</p>

We give the text we want the browser to display within the <p> and </p> tags, indicating to the browser that this content is to be displayed as a paragraph (hence the <p> tag).

Summary

For the purpose of creating simple Web pages we open a text editor and copy and paste the following skeleton into a new editing window:

<!DOCTYPE html>

<html>

  <head>
    <meta charset=UTF-8"/>
    <title>Simple HTML Page</title>
  </head>

  <body>
    <p>Hello, World!</p>
  </body>

</html>

We then do two simple things:

  1. Replace the title between the <title> and </title> tags to something that represents the content of the page we are creating.
  2. Replace the <p>Hello, World!</p> paragraph with our own content.

Well, OK. Number 2 might not be that simple.

But it will be fun.