Embed Size (px)
DESCRIPTION
Citation preview
IINNTTRROODDUUCCTTIIOONN TTOO HHTTMMLL
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
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 (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.
2
3
David Asirvatham® Page: 2
Introduction to HTML
3.0 To save the file: 1. In the Notepad, select File ->
Save As
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 (*.*)
To view the HTML Page: 5. Go to the folder where you have
saved the file. 6. Double Click to open the file in
browser.
2
3
4
6
David Asirvatham® Page: 3
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 </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:
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.
2
4
5
David Asirvatham® Page: 4
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 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.
4
2
David Asirvatham® Page: 5
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
David Asirvatham®
Introduction to HTML
Page: 7
9.0 To create e-mail link: 1. Return to the Notepad.
2. The format for hyperlink is as
follows:
<a href= "mailto: [email protected]/" > 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
