Chapter 8

8 Getting Started with HTML
Learning Objectives
Get familiar with
HTML
components that make up HTML code
Know about the
HTML code
to be followed while writing
List the rules
view an HTML document
Create, save and
structure of an HTML document
Understand the
You can accesS millione
life.
important part of everybodys
loday, the Internet has become an Internet. Do you know how these
web pages are
on the computers on the
of web pages stored can be used by
simple language is Hypertext Markup Language (HTML) that
developed? One
a 'novice to develop web pages.
Lee in late 1991, but the first
standard HTML specification
HTML was created by Tim Berners-
version HTML 4.01 was published in
late
HTML 2.0 was published in 1995. Another major
versions. Currently, we have HTML
5.0 version
1999. It is one of the most widely used HTML
which was published in 2012.
HYPERTEXT MARKUP LANGUAGE (HTML)

(web pages) for display on the World Wide
HTML is a computer language used to create documents
Web (WWw). It is made up from two terms: hypertext and markup.
displayed
Hypertext:It is the text that lets you organise the information that is to be
between
on the web page. It enables you to create links between different documents or
different parts of the same document.
HTML
Markup: It is the special code that describes to the web browser how parts of the
document are to be processed.
Some features of HTML are given below.

It is easy to understand and use.
No additional software is required to execute the HTML code.

It allows you to display diferent multimedia components together in a web page.
It can be used with all kinds of browsers.

It does not require prior knowledge of any programming language.
116
HTML CODE
erent components that together make up the HTML code include elements, tags and
Ditferen
attributes
wTML Elements and Tags

ll
elements are the building blocks of an HTML page. They are represented by tags.
wTML describe how a web page should be displayed. They label pieces of content such as
HTMI Ags
heading Paragraph, table, and so on.
An
HTML tag starts with a less than sign () followed by the tag name and ends with a greater
than sign For example, is an HTML tag used to create a paragraph.
()
An
HTML element usually consists of a
starting (or opening) tag and an ending (or closing)
tag, with the content inserted in between. The closing
the opening tag except
tag is similar to
itis preceded with a forward slash (/). The HTML element is everything from the opening tag
to the closing tag.
P>My first paragraphe/
Starting tag Content Closing ta8

an HTML element
An HTML element can be one of the following two types.

Container element: An HTML element that has both the opening and closing
tags is
called a container element. For example, the HTML element shown in the above figure is
a container element.
Empty element: An HTML element that has only the opening tag is called an empty
element. For example, the tag, which is used to insert a line break, is an empty
element and does not require a closing tag.
HTML Attributes
Attributes provide additional information about HTML elements. They are always specified
nside the opening tag after name. Each attribute has a name and a value.
the tag
Example:
SPONT COLOR="RED" SIZE-"8">

are the attributes of the FONT element, and RED and
8
tnis example, the COLOR and SIZE
are their values, respectively.
117
HTML Rules
these rules are
While writing HTML code, you need to follow certain rules. Some of istea
below
sensitive. That is, whether
whet you
HTML tag names and attribute names are not case se write
SBODY>, Body> or <body>, all mean the same.
spaces. The browser does not reee
e writing tags, the tag names cannot contain wrong output. For exampl
the tag havingsspaces in it and consequently it displays the nple,the
browser considersas an incorrect tag
an element can contain one or m.
The HTML elements can be nested. This implies that underlinede
nore
you want to make some text bold and
cicments within it. For example, if you
Can use both and tags together, as shown
below,
B>Bold and underlined text</B

within quotes.
The value of an attribute may or may not be specified
CREATING, SAVING AND VIEWING HTML DOCUMENTS

To create HTML documents, the following two basic tools are needed.
an HTML editor to create and save the documents
a web browser to view the document
HTML Editor
An HTML editor is a software application used to create and save HTML documents. There are
two main types of HTML editors: WYSIWYG and text editor.
wYSIWYG (What You See Is What You Get) editor: This editor provides a graphical
interface and tools that let you develop web pages quickly and easily. You need not write
the HTML code; rather, you can directly insert images, hyperlinks or tables whatever you
want in your web page and the code is generated automatically. 1he main advantage ofthis
editor is that you can create web pages without having knowledge of HTML tags. Some
examples of WYSIWYG HTML editors are Adobe Dreamweaver, Microsoft Publisher
and Google Web Designer.
Text editor: You can also use a text editor such as Notepad or WordPad to write and modify
the HTML tags. However, in this case, you must have the knowledge of HTML tags.
ExTRA
DoSE!
Earlier, Microsoft FrontPage was one of the most widely used WYSIWYG
HTML editors. But, now it has been discontinued.
118
Creating and Saving HTML Documents
can
use either WYSIWYG or text editor to create an HTML document. Let us learn how to
Jou HTM document using Notepad.
createan
HTML document using Notepad, follow these
create aand save an
To
steps.
click the Start button and then click All Programs.
Click Accessories and then click Notepad. The Notepad window

2 ppears.
Type the HTML code as shown in the following figure.
3
<HTML
EAD>
TITLEMY FIRST WEB PAGE</TITLE>
/HEAD
<BODY>
ALL THE WEB PAGE CONTENT GOES HERE
/B00Y
/HTML>
Click the File menu and then click Save As. The Save As dialog
box appears.
Select the location where you want to save the document

from the left pane of the dialog
5
box.
3Deme
4
Comu
s Hiden
Type a suitable name for the document with extension .htm or .html in the File name text
box and then click Save.
NoTE
While saving a document, if you do not use the .htm or .html extension with the
name, the document is by default saved with .txt extension.
119
Viewing HTML Documents Explorer, Googl.
browser, like Internet
document in any web displays oni
IML web browser, it
or Mozilla Firefox. When a web page is viewed in the formatted according to the gven
Mos
Or
y
1nformation (without the tags, elements and attriou
or elements. follow these steps.
lo view your created HTML document in
Internet Expo
Open Internet Explore Open
Press Ctrl+ O on the keyboard. The Ope Type the irtemet addressda
open for you.
documer
tme
dialog box appears.
Bpiorer wl t
Click Browse. The Windows Internet Explorer
gpen
dialog box appears.

you
4. Locate and select the HTML document
Open
want to view and click Open. The
dialog box reappears showing the path of the
selected document.
Windows Intermet Explorer
S My folder HTML code
ganie New folder

Dute mdied
Recent Places Name
e My fist we page
Libranes
Documents
Open
Music
Pictures Typethe irtemet address d a documert and iten
Videos Epiorer wil open it foryou
Homegroup
Computer
pen: D:My folderHTAML code y fiest web page he
Local Dsk (C3
a New Volume D)
Fie pame My finst web pag HTMFie

O
5. Click OK. The selected document opens up in the Internet Explorer
ALL THE WEB PAGE CONTENT GOES HEE
120
NoTE
NOTTf you make any changes in the HTML code written in the Notepad, you need not
close the Notepad program. You can switch to the web browser and press
the F5
key to view your most recent modifications.
STRUCTURE OFAN HTML DOCUMENT

co1ICTURE OF
BODY.
HTML document consIsts of four major elements: HTML, HEAD, TITLE and
HTMILd
Fvery
given the basicstructure
of an HTML document.
Hereis
KHTML>
KHEAD
<TITLE> . </TITLE>
/HEAD
KBODY
</BODY
</HTML
HTML Element
HTML document and defines the document as
The HTML element is the first element in an
and ends
starts with <HTML>
an HTML
file. It is a container element. Every HTML document
HEAD and BODY elements, which in turn,
with</HTML>. An HTML element contains only
contain other elements.
HEAD Element
identification and additional information about the HTML
The HEAD element includes the
within this element is not displayed
document, such as title and keywords. The content written
on the web page. It is also a container element.
TITLE Element
web page. The title of the
The container element that provides a title for the
TITLE element is a
web page is displayed in the title bar when you view the page in
a browser. The TITLE element
enclosed within the HEAD element.

1S
BODY Element
Lne BODY element has the main content of the web page. It includes text, images, tables, links,
121
etc. It is a container element. The CBODY> follows </HEAD> and </BOD ODY> appears
BODY
before </HTML>. Al other elements are enclosed within <BODY> and </BO tags
backgroundndimag
The BODY element has many attributes that can be used to specify the
colour of the web pag left margin and top margin of the web
as well. Let us learn about these attributes.
page, and the alignment
e
Background Attribute
for the web page. You can u
ne Dackground attribute is used to specify the background
which is tiled across the web
image or text (convert into an image) as the background
Syntax:
SBODY BACKGROUND="URL or path/filename">,.../BODY>
where,
as
ORL Or path/filename is the location of the image which is to be placed
background of the web page.
For example, the following HTML code sets the image of a moon and stars as the backgroung
of the page.
CHTML>
<HEAD>
<TITLE>Moon and Stars</TITLE>
</HEAD>
BODY BACKGROUND-"D: \My folder\stars . jpg">
</BODY>
</HTML>
e dS d
Bgs Sey Tols
Congute | Protected Mede Off
122
Bgcolor Attribute
The
he alor
bgcolor((background colour) attribute
isused to specify thebackground
web ge
By default, the background
colour of the web page is white.
colour for the
Syntax
<BODY BGcOLOR=
or colou name">.
where S/BODY>
rggbb is a six-digit hexadecimal number
All wsers do not understand the
colour names, Hence,
acimal
hexade (hex) number. This
number is formed by the
colours are represented
s
andi
deternmined using
the formula ot #RRGGBB,
combination of red,
where RR is the hex value
as a
green and blue
value for green and B is the hex value for blue. for red, GG is the
These numbers are always
a#symbol, preceded with
the hexadecimal numbers of some of the colours are listed

in the following table.
Colour Hexadecimal number
Colour
Black
Hexadecimal number
#000000 Maroon
#800000
White WFFFFFF
Green #008000
Silver WCOCOCO
Purple #800080
Olive #8O8000
Orange FF9900
Red WFFO000 Aliceblue #FOF8FF
Aqua WOOFFFF Brown #A52A2A
Blue #O00OFF Linen #FAFOE6
Yellow FFFFO0 Teal #008080
Orchid #DA7OD6
Text Attribute
The text attribute is used to specitythecolour for the text in the web page. By default, the text
colour of the web page is black. Like background colour, the text colour is also
represented in
hexadecimal numbers.
Syntax:
BODY TEXT=#rrggbb">,. </BODY>
Leftmargin and Topmargin Attributes

Ihe leftmargin and topmargin attributes are used to specity the width of the margin
trom the left edge of the web page and from the top of the web page, respectively.
Syntax:
SBODY LEFTMARGIN"value" TOPMARGIN="value">..</BODY>

123
Try in Lab
Open Notepad and perform the following steps.
Type the following HTML code.
<HTML>
<HEAD>
TITLE>Introduction to HTML</TITLE
</HEAD>
TEXT="WHITE" LEFTMARGIN="30
<BODY BGCOLOR="BLUE"
TOPMARGIN="30">
HTML isa computer language used to create Da.
web page
for display very easy tO understand and
on wWW. It is
use. Different conponents that togetner maKe up the HTML
Hmu
COde include elements, tags and attributes.

To create HTML documents, two basic tools are needed: HT
ne
editor and web browser. Every HTML document consists
BODY.
tour major elements: HTML, HEAD, TITLE and
</BODY
</HTML
2. Save the file with the name Simple HTML Page.html
3. View the web page in the Internet Explorer.
rtruction ta HTM- Windans Internet Epores

2Brg
e Favcdtas40gted Stes E Wet Dica GsliesyY
ntrductan to HTML ge afety Tgols
HTM1acomgres laagse ued to eeweb pales tn dislay on w

tsvery eay to undersAand and use Dalerent
conpnents that
enake y tte HIM. cde nchde elenetts, tas and atrides 1o ctede HIML documnts, fwo baic tocls ase needed HTMI, edton
togetes
nd wes taoHA EUAY HM, dcuet connt of 1on mayn dements HlML, HEAD 111.E and BODY
Computar |Pretected Mode: Off

410%
QuICK
RECAP
HTML is a computer
language used
for display on the World tocreate
Wide Web (Www).documents (web pages)
terms: hypertext and markup. It is made up from two
Different components
that together make
elements, tags and attributes. up the HTML code include
To create HTML documents,
two basic tools are needed:
editor to create and save the an HTML
documents and a web browser
the documents. to view
There are two main types of HTML
editors: WYSIWYG and text
editor. You can use either of these
editors to create and save an
HTML document.
When a web page is viewed in the web browser, displays
it only
the actual information (without the tags, elements and attributes)
formatted according to the given tags or elements.
Every HTML document consists of four major elements: HTML,
HEAD, TITLE and BODY
The BODY element has many attributes, some of which are
background, bgcolor, text, leftmargin and topmargin.
TEACHER'S NoTE
Discuss with students the basics of HTML.
Explain to them the structure of an HTML document.
TIME FOR EXERCISES
Fill in the blanks.
a. HTML describe how a web page should be displayed.
b. The content written within element is not displayed on the web page.
C. To view an HTML document, you need a.

d. An is a software application used to create and save HTML
documents.
125
web browser how parto
is the special code that describes to the s of
the HTML document are to be processed.
HTML elements
provideadditional information about
Circle the correct option.

a What does HTML stand for?
(0 HyperText Markup Language

(4) HomeTool Markup Language
(ii) Hyperlinks and Text Markup Language

b. Which of the following is not a text editor?
Notepad (il) Adobe Dreamweaver
(0 WordPad ()
colour?
code for adding background
CWhich of the following is the correct HTML
(0 <BODY BACKGROUND COLOR="RED">
(4) <BODY BACKGROUND="RED">
(iil) <BODY BGCOLOR-"RED"
d. Which character is used to indicate a closing tag?
(ii) ii)
0)
a web page?
e. Which HTML element is used to give title for
(i) TITLE (ii) HTML
(0) HEAD
f.By default, the text colour in a web page is

(6) Black (i) White (ii) Red
Identify the errors in the following HTML code and rewrite.

<HTML>
<TITLE>
HEAD>Our National Flower</HEAD></TITLE>
<BODY BGCOLOR="1otus .jpg" TEXT="RED">
The Lotus, the national flower of India, is a symbol of

supreme reality. Hindu religion and mythology portray goddess
Saraswathi, the muse of learning, as being seated on a lotus
flower. The lotus grows in fresh water ponds and lakes and 1n
semitropical climates . It blossoms gradually and magnificentlY
one petal at a time and reaches full bloom when the rays O
126
the rS,
-tnkiss the flower The lotus. is found in
colouz namely, white, red, different
blue, pink, and
in many Aslan countries . purple and 1s
nd
</BODY>
Put a
. tick () for the correct statements and a cross (x) for the wrong ones.
The hexadecimal code for purple colour is #800080.
h. You cannot use a text editor to write HTML code.

The HEAD element is an empty element.
A Before using HTML, you must have knowledge of any other programming
language.
e.The HTML elements can be nested.
An HTML document always begins with <HTML> tag. 8

Answer the questions.
a. Name the components that make up the HTML code.
b. Define element.
c. What is the role of HTML attributes?
d. Write any two rules that are to be followed while writing HTML code.
e. Give the basic structure of an HTML document.

fMention differences between the following
) Container and empty element
(i) WYSIWYG and text editor

g What is the purpose of BODY element?
6Application-basedquestions.
a. Kanan wants to create an HTML document but she does not have much knowledge of
HTML tags.
6) Which type of HTML editor should she use to create the document?
1) Give two examples of this type of HTML editor.
Manoj is designing a web page in which he wants to set background colour to orange. Can
you tell which attribute he should use to do this?
127
below. Ohe.
Observe the
the figure given figure
page as shown in been used to create this web
web
C.
cated a web two attributes that have
Deepika has crea page
par
y three elements and
Foaits Windows nteet opiorer
RevisioniClus 74TML Pegesi
Chapten htm Page Safey Tools9
2himanshulEploring I7 C
Zd ggested Stes We Sca Galey
Y
Fevonts 1
2
Frols
ILOVE FRUT
0-
Done
Internet |
Protected Mode On 123%
TIME FOR ACTIVITIES .

"Stop Deforestation Set an image nt
1. Create a simple HTML document on the topic
as the background and text colour to orange using
appropriate attributes. Save the dom
cumeu
and then view it in a web browser.
Create an HTML document on My leisure-time activities'. Set

the background colonr. Our a
free timad
aqua, text colour as brown and use the names of activities you like to do in your timeto
create the text.

Chapter 8

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 8

Uploaded by

Copyright:

Available Formats

8 Getting Started with HTML

HYPERTEXT MARKUP LANGUAGE (HTML)

Some features of HTML are given below.

No additional software is required to execute the HTML code.

It can be used with all kinds of browsers.

wTML Elements and Tags

P>My first paragraphe/

Starting tag Content Closing ta8

An HTML element can be one of the following two types.

SPONT COLOR="RED" SIZE-"8">

B><U>Bold and underlined text</U></B

CREATING, SAVING AND VIEWING HTML DOCUMENTS

an HTML editor to create and save the documents

a web browser to view the document

Click Accessories and then click Notepad. The Notepad window

Select the location where you want to save the document

Open Internet Explore Open

dialog box appears.

Windows Intermet Explorer

S My folder HTML code

ganie New folder

Local Dsk (C3

Fie pame My finst web pag HTMFie

5. Click OK. The selected document opens up in the Internet Explorer

ALL THE WEB PAGE CONTENT GOES HEE

STRUCTURE OFAN HTML DOCUMENT

enclosed within the HEAD element.

Bgs Sey Tols

Congute | Protected Mede Off

the hexadecimal numbers of some of the colours are listed

BODY TEXT=#rrggbb">,. </BODY>

Leftmargin and Topmargin Attributes

SBODY LEFTMARGIN"value" TOPMARGIN="value">..</BODY>

COde include elements, tags and attributes.

rtruction ta HTM- Windans Internet Epores

ntrductan to HTML ge afety Tgols

HTM1acomgres laagse ued to eeweb pales tn dislay on w

Computar |Pretected Mode: Off

C. To view an HTML document, you need a.

Circle the correct option.

(0 HyperText Markup Language

(ii) Hyperlinks and Text Markup Language

(0 <BODY BACKGROUND COLOR="RED">

(4) <BODY BACKGROUND="RED">

(iil) <BODY BGCOLOR-"RED"

d. Which character is used to indicate a closing tag?

f.By default, the text colour in a web page is

Identify the errors in the following HTML code and rewrite.

The Lotus, the national flower of India, is a symbol of

The hexadecimal code for purple colour is #800080.

h. You cannot use a text editor to write HTML code.

e.The HTML elements can be nested.

An HTML document always begins with <HTML> tag. 8

c. What is the role of HTML attributes?

e. Give the basic structure of an HTML document.

(i) WYSIWYG and text editor

1) Give two examples of this type of HTML editor.

TIME FOR ACTIVITIES .

and then view it in a web browser.

Create an HTML document on My leisure-time activities'. Set

You might also like