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
- Create a new folder on your desktop and rename this folder after your first name. This is your practice folder.
- Open your standard plain-text editor (Notepad, TextEdit or similar).
- Type the code listed below:
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.<html>
<head>
<title>My Web Page Title</title>
</head>
<body>
Hello World!
This is my first web page.
</body>
</html> - Save this code as
basic-html-document.htm
in to your practice folder. - 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. - 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
- Open your
basic-html-document.htm
file with a standard plain-text editor. - Add the HTML5 DTD
<!DOCTYPE html>
at the beginning of your code, e.g.:
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.<!DOCTYPE html>
<html>
<head>
<title>My Web Page Title</title>
</head>
<body>
Hello World!
This is my first web page.
</body>
</html> - 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.
- Open your
html5-draft-template.htm
file with a standard plain-text editor. - Add the
lang
attribute with the valueen
to the html opening tag in code line 2, e.g.:<html lang="en">
- 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> - Add the
charset
attribute with the valueutf-8
to the meta tag in code line 4, e.g.:<meta charset="utf-8">
- 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> - 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.:
Please note that our HTML comment starts with a comment start delimiter (<!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><!--
) 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. - 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.