THE INDIAN SCHOOL, KINGDOM OF BAHRAIN
COMPUTER EDUCATION PROGRAMME (CEP)
Class – VIII
INTRODUCTION TO HTML
HTML
HTML is a language used for designing webpages. It is a language that describes the
content, format, and layout in which a webpage should be displayed over the World Wide
Web.
Full form of HTML is “Hyper Text Markup Language”.
HTML TAGS
Commands in HTML are known as tags. A tag is an HTML command that controls the
structure and appearance of the page or document that is created.
All HTML tags are enclosed within a pair of angular brackets (< >).
There are 2 types of tags.
1. Container tag: A tag requires an opening tag and a closing tag. Opening tags are
written within the angular brackets. A tag is closed by putting a forward slash (/) in
front of the tag name. For example, <H1>Hello World</H1>
2. Empty tag: A tag that does not require a closing tag.
For example, <HR> and <BR>
ATTRIBUTES
An attribute is a special keyword used inside the tag to specify additional information
about the tag.
For example, <H1 align= center>, align is the attribute of <H1>. It indicates that the text
inside the <H1> tag is to be displayed in the centre.
STRUCTURE OF AN HTML DOCUMENT
An HTML page is also called an HTML document. Every HTML document must contain
certain standard HTML tags. These tags define the basic structure of a webpage.
1. <HTML> Tag: Identifies the document as an HTML document. It is a container tag.
2. <HEAD> Tag: Provides some additional information about a webpage. It is a
container tag.
3. <TITLE> Tag: To specify the title of the webpage. The title bar appears on the Title
bar of the browser window. It is a container tag.
4. <BODY> Tag: Defines the contents of a webpage. It is also a container tag. All the
tags that display text, images, or links as a part of a webpage are written between
opening and the closing BODY tags.
HTML EDITORS
An HTML editor is a software program that enables you to easily create HTML documents.
There are two types of HTML editors:
1) WYSIWYG Editor: (What You See Is What You Get)
Eg: Adobe Dreamweaver and CoffeeCup HTML Editor
2) Text Editor: To create HTML documents by writing HTML Commands.
Eg: Notepad and WordPad
A Web Browser is a software that lets you view the output of the HTML page.
Eg: Google Chrome, Microsoft Edge
BASIC TAGS IN HTML
BODY TAG
The BODY tag holds the entire content of the web page. This is the largest part of the HTML
document. Whatever is written in the BODY tag is the actual web page content.
Some of the important attributes of the BODY tag is listed below.
Attribute Description Example
This attribute is used to specify the
bgcolor background colour of a webpage. <BODY bgcolor=green>
This attribute is used to specify the
text colour of the text to be displayed on a <BODY text=red>
webpage.
LINE BREAK <BR> TAG
The <BR> tag is to add line breaks. It shifts the text following it to the next line. It is an empty
tag.
HEADING TAGS
The Heading tags display text in larger and bolder font than the normal body text. HTML
provides 6 levels of headings (<H1> to <H6>), with 1 being the largest and 6 being the smallest
size.
Heading tags have only one attribute- align.
Attribute Description Example
To specify the placement of the heading
<Hn align=center>
text with respect to the margins. The
align (where n stands for
values that can be specified are left,
numbers between 1 to 6)
right and center.
HORIZONTAL RULE (<HR>) TAG
The <HR> tag is used to insert a straight horizontal line across the webpage. It is an empty tag.
It is used to separate different parts of the text from one another.
Attribute Description Example
To specify the vertical size or the
size thickness of the horizontal line. The <HR size=5>
value is given in pixels
To specify the colour of the horizontal
color line. <HR color=blue>
Creating Lists in HTML
HTML supports 3 types of lists
1. Ordered list
2. Unordered list
3. Definition list
Ordered List
Ordered lists, also called numbered lists, are used when the list items have a specific
numerical order or ranking. An ordered list is enclosed within the <OL> and the </OL> tags.
Each item in the list is marked using the <LI> (List Item) tag. The default numbering style is
1, 2, 3, and so on.
Attribute Description Example
This attribute specifies the type of
numbering to be used for each list item. <OL type=A/ a/ i/ I /1>
type
The values that can be given are – A, a,
I, i and 1 (default).
To start the list numbering from a
<OL start=n, where ‘n’
start different letter or a number, that is,
denotes a number>
other than the default numbers.
Examples of type and start attributes for ordered lists
Unordered List
Unordered lists are also known as bulleted lists. In unordered lists, the list items do not have a
specific order. An unordered list is enclosed within the <UL> and </UL> tags. Each item is marked
using <LI> (List Item) tag.
Attribute Description Example
This attribute specifies the type of
bullet to be used for each list item. The <UL type=disc/circle/square>
type
values that can be given are – disc
(default), square and circle.
Definition Lists
Definition lists comprise two parts-a term and its description. A definition list consists of three
tags <DL> <DT> and <DD>.
The <DL> and </DL> tags mark the beginning and the end of a definition list.
The <DT> tag marks the definition terms in a definition list. It is an empty tag.
The <DD> tag marks the definition description in a definition list. It is also an
empty tag.
REVISION
Write the HTML commands for the following
1. To start an ordered list with number 5.
<OL type=1 start=5>
2. To display square bullets in an unordered list.
<UL type=square>
Find out the error and write the correct the code in the given box.
Study the given webpage and choose the correct answer:
a) Type of list shown in the above webpage.
i. <OL> ii. <DL> iii. <UL>
b) HTML command to create the list as shown in the webpage.
i. <OL start=square>
ii. <UL type=square>
iii. <DL type=square>
c) HTML command to specify the background colour of a webpage.
i. <BODY bgcolor=blue>
ii. <BODY bgcolour=blue>
iii. <BODY bg color=blue>
d) Which tag is used to insert a horizontal line across the webpage?
i. <BR> ii. <HR> iii. <H1>
Assessment Time
Choose the correct answer.
i) Which of the following is the correct way of using the start attribute of the <OL>tag?
a. <OL start=3>
b. <OL start=iii>
c. <OL start=C>
d. <OL start=disc>
ii) Which of the following holds true for a definition list?
a. It is a numbered list of items.
b. It is a bulleted list of items.
c. It is a list of terms and definitions of terms.
d. It is a combination of bulleted list and numbered list.
iii) A/An _______________ is a numbered list.
a. Ordered list
b. Unordered list
c. Style list
iv) Which tag is used for definition description?
a. <DT>
b. <DL>
c. <DD>
Fill in the blanks
1. Each list item starts with the <LI>tag.
2. An unordered list is a bulleted list.
3. A <DL> tag is used to create a Definition List.
4. We use the type attribute of the <OL> tag to specify the type of numbering to be used in
front of each list item.
