Member Login:


First Steps: Basic HTML Web Page

Document Reference: TN200908002 - Rev: 4.63 - Last Update: 22-03-2014 16:50 GMT - Downloaded: 29-Mar-2024 13:05 GMT

HyperText Markup Language (HTML) is used to structure text, images and other content within a web page.

HTML is not a computer programming language, it is a markup language that can be easily applied. HTML files are saved as plain-text files. Text editors such as Notepad (Windows) or TextEdit (Apple) can be used to compose and modify any HTML files. Always save your file in plain-text format. Rich-text or any other text format would add additional file information to your HTML file, making it unsuitable for Internet browsers.

Practical Exercise Objective

Upon completion of this practical exercise you will be able to:

  • Create a basic HTML web page document.
  • Understand the use of <html>, <head>, <title> and <body> HTML tags.
  • Understand the purpose of Document Type Definitions.
  • Create a HTML5 web page template.
  • Apply minimum language attribute and character encoding requirements.

Task 1: Create a Basic HTML Web Page Document

  1. Create a new folder on your desktop and rename this folder after your first name. This is your practice folder.
  2. Open your standard plain-text editor (Notepad, TextEdit or similar).
  3. Type the code listed below:
    <html>
    <head>
    <title>My Web Page Title</title>
    </head>
    <body>
    Hello World!
    This is my first web page.
    </body>
    </html>
    Please note that as you type this code, the typed text may not show in colour or keywords may show in a different colour as displayed above.
  4. Save this code as basic-html-document.htm in to your practice folder.
  5. Examine the saved file name in your practice folder to ensure that it was saved with the *.htm extension. A browser icon should show beside the file name.
  6. Open the saved file in a web browser and observe how the text is displayed. You will notice that the text 'Hello World! This is my first web page.' will appear all in one line and not over two lines as we typed it in to the code. This is expected as we didn't add any markup to force a line break.

Structure of Our Basic HTML Web Page Document

Above page is made up of two main parts, a head (<head> ... </head>) element and a body (<body> ... </body>) element. Both parts are contained within a html (<html> ... </html>) element. We'll get to know more HTML elements to structure web site content at a later time.

HTML (<html> ... </html>) Element – Root Element

The HTML root element is the root element of an HTML document. Al other HTML elements are nested within the HTML root element. The HTML root element starts with an opening tag (<html>) and ends with a closing tag (</html>).

Head (<head> ... </head>) Element – Document Head

The head element contains information about the HTML page. This information is not considered to be part of the HTML page content and is generally not rendered within the browser window. The head element starts with an opening tag (<head>) and ends with a closing tag (</head>).

Title (<title> ... </title>) Element – Document Title

One title element is required and should be used to identify the HTML page content. The browser window displays the page title as part of the window title and/or browser session tab. The title element starts with an opening tag (<title>) and ends with an closing tag (</title>). This element is placed (nested) within the head element and may not contain any other elements.

Body (<body> ... </body>) Element – Document Body

The body element contains the HTML page content, which is rendered within the browser window. The body element starts with an opening tag (<body>) and ends with a closing tag (</body>).

Document Type Definitions - DTD

Document Type Definitions (DTD) state the HTML version. This is important as it identifies what type of HTML tags are used in the HTML document and helps the browser to display the web page correctly. The DTD is placed within the first line(s) of your HTML document.

Common Document Type Definitions

There are many different HTML DTD supported by web browsers. Below are three different examples of popular DTDs, all applied to the basic-html-document.htm code.

XHTML Document Type Definition

<!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">
<head>
<title>My Web Page Title</title>
</head>
<body>
Hello World!
This is my first web page.
</body>
</html>

HTML4.01 Document Type Definition

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My Web Page Title</title>
</head>
<body>
Hello World!
This is my first web page.
</body>
</html>

HTML5 Document Type Definition

<!DOCTYPE html>
<html>
<head>
<title>My Web Page Title</title>
</head>
<body>
Hello World!
This is my first web page.
</body>
</html>

Task 2: Create a HTML5 web page template

  1. Open your basic-html-document.htm file with a standard plain-text editor.
  2. Add the HTML5 DTD <!DOCTYPE html> at the beginning of your code, e.g.:
     <!DOCTYPE html>
    <html>
    <head>
    <title>My Web Page Title</title>
    </head>
    <body>
    Hello World!
    This is my first web page.
    </body>
    </html>
    Please note the line numbers at the beginning of each code line. You do not need to type these line numbers. Some code editors will display them automatically, but are not part of the code and will create erros if typed manually.
  3. Save your modified code as html5-draft-template.htm in to your practice folder. You just created a draft version of your HTML5 code template. We will finalise it in task 3.

Task 3: Language Attribute And Character Encoding

For the final HTML5 template, we want to add a language attribute to specify that our HTML document is in English. We also want to make sure that all our characters are displayed correctly and specify a specific character encoding.

  1. Open your html5-draft-template.htm file with a standard plain-text editor.
  2. Add the lang attribute with the value en to the html opening tag in code line 2, e.g.:
     <html lang="en">
  3. Insert a new code line just bellow the head opening tag (<head>) and add a new meta tag (<meta>), e.g.:
      <head>
    <meta>
    <title>My Web Page Title</title>
    </head>
  4. Add the charset attribute with the value utf-8 to the meta tag in code line 4, e.g.:
      <meta charset="utf-8">
  5. Check and see if your code matches this code example:
     <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>My Web Page Title</title>
    </head>
    <body>
    Hello World!
    This is my first web page.
    </body>
    </html>
  6. Starting in code line 6, just below the title element, insert a new HTML comment. Use multiple code lines to state the file name, the folder name, your name (author), the document creation date and a short discription. E.g.:
     <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>My Web Page Title</title>
    <!-- *******************************************************************
    * *
    * FILE NAME: html5-template.htm *
    * FOLDER NAME(s): Desktop/practicefolder *
    * AUTHOR: Your Name *
    * DATE: Today's Date *
    * *
    * DESCRIPTION: *
    * HTML5 code template that we will use for future exercises. *
    * *
    ******************************************************************* -->
    </head>
    <body>
    Hello World!
    This is my first web page.
    </body>
    </html>
    Please note that our HTML comment starts with a comment start delimiter (<!--) and ends with a comment end delimiter (-->). The '*' character is used to create a visual impression of a border surrounding the comment text. Any text placed within a HTML comment will show in the HTML code (source code) only and will not show on the web page.
  7. Save your code as html5-template.htm in to your practice folder. You just created a HTML5 code template that you can use for future exercises.

This website uses cookies to give you the best experience on our website, to personalise content and to analyse our website traffic. Some cookies may have been set already. To find out more about our use of cookies you can visit our Privacy Statement. By browsing this website, you agree to our use of cookies.

Hide this message