1. INTRODUCTION TO HTML
Workshop
on
Multimedia Content Development
In Collaboration with
Commonwealth Educational Media
Centre for Asia (India)
Date: 05-09 Feb., 2011;
Venue: Bangladesh Open University, Gazipur.
By
David Asirvatham, PhD
University of Malaya

2. Introduction to HTML
1.0 What is HTML?
HTML is a special kind of text
document that is used by Browsers to
present text as well as graphics.
These documents are often referred
to as Web Pages.
HTML documents use tags 2
(example: <b> to bold, <P> to
indicate start of paragraphs, etc.) to
format the document.
Here, you will learn to create some
simple HTML document using some
basic tags. This module provides an
overview of how the tags are used to
create simple HTML pages.
HTML documents are divided into
elements, which are marked by tags
2.0 How to create an HTML
page?
1. Open the Notepad
2. Select All Program ->
accessories -> Notepad
3. In the Notepad, type the text
shown in the image.
3
David Asirvatham® Page: 2

3. Introduction to HTML
3.0 To save the file:
1. In the Notepad, select File ->
Save As 2
2. Select a suitable folder to save
your file
3. Type a filename:
MyWebPage.html
4. Ensure the file extension is .html
and select All Files (*.*)
3
To view the HTML Page:
5. Go to the folder where you have
saved the file.
6. Double Click to open the file in 4
browser.
6
David Asirvatham® Page: 3

4. Introduction to HTML
4.0 To bold text:
1. Return to the Notepad
2. To bold a word or phrase, use the
tag <B> at the beginning and 2
</B> at the end.
5.0 To view the HTML Page:
3. Go to the folder where you have
saved the file.
4. Double Click to open the file in
browser.
5. Similarly, you can do further
formatting of the text by using
the following tags: 4
a. <i> and </i> for italics
b. <u> and </u> for underlined
c. <tt> and </tt> for typewriter
6 Try formatting using the above
tags.
5
David Asirvatham® Page: 4

5. Introduction to HTML
6.0 To change font size and
colour:
1. Return to the Notepad
2. The format for font size is as
follows:
<font size=5> text </font>
3. The format to change colour of
test is as follows:
<font color=red> text </font>
4. Type the tags as shown in the 4
figure.
5. Save the document and view it in
the browser.
7.0 To insert Paragraphs:
1. Return to the Notepad.
2. To insert a paragraph, the tag
<P> and </P> is used.
2
David Asirvatham® Page: 5

6. Introduction to HTML
8.0 To create hyperlink:
1. Return to the Notepad.
2. The format for hyperlink is as
follows:
<a href=
"http://www.um.edu.my/" >
University Malaya </a>
3. Type the text in the Notepad as
shown in diagram
4. Save the document and view it
in the browser.
3
4
David Asirvatham® Page: 6

7. Introduction to HTML
9.0 To create e-mail link:
1. Return to the Notepad.
2. The format for hyperlink is as
follows:
<a href= "mailto:
smith@gmail.com/" >
William Smith </a>
3. Type the text in the Notepad as
shown in diagram
4. Save the document and view it
in the browser.
3
4
David Asirvatham® Page: 7