6 Introduction to HTML

you willlearn:
i Introduction to HTML Web page, Website and Web broswer
Basic structure of an HTML program
Creating, saving and viewing a web page in HTML
Attributes in HTML
Text formatting tags

Recap
What are web browsers? Give a few examples of web browsers.

Get Ready Environmental Literacy Creative Thinking

Visit the site of the UN and read about the SDGs. What did you like about the website? Do
you think the information presented on this website is clear and concise? How do you think this
website was created? Discuss in the class.

INTRODUCTION TO HTML-WEB PAGE, WEBSITE AND WEB BROWSER

You have already learnt that the Internet is aglobal system of computer networks. You may have
also come across some common Internet terms like website, web page,web browser and soon.
Let us learn about these terminologies.
Web page: Aweb page is an electronic or digital document written in a computer language called
Hypertext Markup Language (HTML). Web pages may contain multimedia content such as text,
graphics, video, animation and sound as wellas interactive features, such as data entry forms.
Website: A
website is a collection of interrelated web pages placed under the singledomain name.
The first page of awebsite is called its home page.
URL: Every web page has a unique address, called Uniform
Resource Locator (URL). It indicates the location of the web
page on the Internet.
Fact Byte
HTML Wwas invented in
Web browser: A web browser is commonly known as
'browser. It is asoftware that allowsa user to retrieve, view 1990 by ascientist called
Tim Berners-Lee.
and traverse the information resources on the Internet.
98
Jtroduction to HTAM

The information resource can be identified by its URL which may be in any format like a web
page,image, video or other kind of graphic content. Some examples of web browsers are Google
rome, Microsoft edge, Mozilla Firefox and Safari.
World Wide Web: It is a collection of websites.

ActvityByte Experiential Learning Scientific Temper

Open a web page in abrowser, right-click anywhere on it andselect the View Page Source or
View Source option. You willsee the HTML code which is used to create the web page.
Requirements for Working in HTML
HTML is an encoding language that is used to create web pages. HTML allows images and objects
to be embedded to create interactive forms. HTML stands for Hyper Text Markup Language and
is the standard markup language for creating web pages. It describes the structure of aweb page
and consists of aseries of clements, which informs the browser how to display the content.
Youcan display HTML documents on any platform or operating system. Basically, an HTML
document is a plain text file for which you require text editors like Notepad, WordPad, etc. You
need two basic tools to work in HTML, an HTML editor tocreate and save documents and a
web browser to view these documents.

Smart Byte
Youcan also use readymade HTML editors like Microsoft FrontPage, Adobe
Dreamweaver, and others to quickly create web pages, without having any
knowledge of HTML. But, in the field of web page designing, you are required to
learn special languages like HTML, CSS, JAVA, Java Script and other languages.

Fact Byte
Markup is a symbol used in editing and publishing documents. Authors and editors
can insert their comments, suggestions or corrections in a document using markups.
HTML also uses markup to insert commands in a document. Hence, it is referred to
as a markup language. It is a language that allows users to organise and improve the
appearance of the text and link data on the Internet.

Check Point -- Knowledge of India Information and Communication Technology

i Surf the Internet and ind information on Temples of India' using any web browser.
99
 Introduction to HTML

Contents of a Web Page

Every web page is divided into basically two sections: Head and Body. Each section has to be
separately programmed in a single HTML document. The head section includes the commands
to control what appearson the title bar of the web page while the body section contains
commands to design the fornmat of aweb page by incorporating objects like text, images/graphics,
vìdeo and others.

HTML Tags and Elements Fact Byte

To present the different objects in a presentable
manner on a web page, you can use the elements The closing tag has aforward
that inform the browser about the format or slash (/) as a prefix to the name
appearance of webpages on the website. Different of the tag. The content that has
elements of an HTML document are denoted by to be appendedappears between
using special HTML commands called tags. Atag the opening and closing tags.
is a label or identification of an object. Every tag in
HTML starts with a left-angle bracket (<), followed by the name of the tag and ends with a right
angle bracket (>). Unlike the other programming languages, HTML tags are not case-sensitive, as
you can use capital lettersor small letters or a combination of both in writing tags. For example,
tags <HTML>, <html> or <hTM> all are correct.
A browser considers text written within the angle brackets as commands which inform the
browser to takesome action in a program. For example, <html> is a tag that indicates the
opening of an HTML program. There are two types of tags, the opening tag (example, <htmlb)
and the closing tag (example, </html>).
AnHTML element is the combination of HTML tags and text content. There are basically two
types of HTML elements.
O Container element: Acontainer element requires both opening and closing tags. The
opening tag indicates the starting point of the element and the closing tag marks the end. In
between the two tags, text contentsmay be written. Each tag has a predefined meaning which
is applicable on the text given within the tags. The format for an HTML element is:
<tag_name> Text contents </tag_name>
For example, <HTML> is a tag, while <HTML>......</HTML> and <BODY>...</BODY>
are container elements. 5o 6
Empty element: An empty tag does not require acorresponding closing tag. HTML includes
working with HTML tags and elements, and how to use them to create the web pages. We
will learn about these HTML tags and elements in this chapter. For example, <br> is an
empty element.

BASIC STRUCTURE OF AN HTML PROGRAM

Every HTML program has the following basic structure:
<html> --- Starting tag of every HTML document
<head> ---- Beginning of the head section of aweb page
<itle> --- Tag todefine the title of the web page
100
ntroduction to HTML

ltitle> --- Closing the title tag

section of the web page
Ihead> --Closing the head
<body> ---Starting of the
body section of the web page
----All tags related to theweb page are typed between
the opening tag (<body)
and the closing tag (/body>)
-body> ---Closing the body section of the web page
</html> -Closing the HTML document
structure of an HTML document.
The following points are important regarding the
document is enclosed within the two tags <HTML> and </HTML>, Since it is
. Theentire
contents.
the main container element, it contains all the other elements and
contains other important
. <HEAD> is a container element within the <HTML> element. It
The
elements for identification and supplementing information about the document.
information contained in this element is not displayed on the web browser.
inside the <HEAD>..
A title is added to a web page in the <TITLE>...</TITLE> element
</HEAD> element. When you load a web page in a browser, the title of the web page is
displayed in the title bar of the browser.
The <BODY> element contains all the text, image, multimedia and other elements to be
displayed on the web page 20 16/0
CREATING,SAVING AND VIEWING A WEB PAGE IN HTML
extension
Aweb page is a plain text file. It is stored on the disk just as any other file, but the filename
must be either .htm or .html. To create an HTML web page, follow thesteps given below:
Open any text editor program. We will be using
Protuctty
enov

a8cfyour
Notepad text-editor in this chapter. mas in ore
place

Click on the Start button. A menu appears. Select Ofce

Maps

the Notepad Notepad

icon (Fig. 1). Microsoft Edge
Miczasoft Edge
Misrosot Ofise Toos
Anew window opens. When Notepad opens, by MicrasoR Shote
Explore

default an empty text file is opened, in which you Maxd Reay Aortat

can start typing your HTML code. If youwant to N

MicrosofR Store Fns &TV

create a new file, click on the File menu and then

Notepade

click on the New option (Fig. 2). Or, alternatively, Ofioe Soitaire

press Ctrl and N keys together on the keyboard. DneDrive

OneNote
N
Untitied - Notepad
NOneNote for Winsows 1o
File Edit Format View Help
Outiook
New Crl+N
New Window Cti+ Shit+N
Open. Curl-0
Save Ctri+S
Save As.. Crl- Shift+S Fig. 1: Selecting Notepad from the Start button
Page Setup..
Print.m Cul-P

Fig. 2: Opening a new file in Notepad

101
 Introduction to HTML
Type the HTML code in the file (Fig. 3).
Save the fle in the specifhed folder as an HTML document (add the file extension html after
typing the fle name), otherwise the fle will be saved as adocument ile (".txt). For example.
we will give the name "abc.htm" to this file. To save the document, you can click on the Save
or Save As option from the File menu or press CTRL+S keys.
After you have successfully saved the file, close the Notepad window.
Open the folder where you saved the file. You willind the ile with the icon that looks like
the icon abc of your browser.
" Double-click to execute the file. You will see the output on the default browser of your
computer (Fig. 4). In this chapter, we have used Microsoft Edge as the default web
browser.
"Untitled- Notepad
File Edit Format View Help
<html>
<head>

<title>
<hl> My first program </hl>
</title
</head>

cbody>
<h1> My first program </h1>
This is my first HTML Program
O File C/Users/Jasmeet/Desktop/MY%20FRST%20PROGRAM.htmi
</body>
</html> This is my first HTML Program

Fig. 3:Writing an HTML program Fig. 4:Viewing the output on the browser
in Notepad
To make changes and save the fle, you can switch between the text editor and the browser.
Every time you save the updated changes in the Notepad, click Refresh/Reload button on
the browser to see the updated changes in the output.

ATTRIBUTES IN HTML
You have already learnt about the basic structure of an HTML document, but HTML includes
more tags and elements to create aweb page. Some HTML elements can have attributes that provide
supplementary information about an element. An attribute is used to define the characteristics of
HTML. The following pointsmust be kept in mind while wrting atuributes of an element.
" Attributes are always specified in the start tag. For example, if you want the body of the web
page to have red background colour, you may write <body> tag in the following way:
cbody bgcolor=red> or cbody bgcolor= "red' >
" Here, bgcolor is an attribute of the <BODY tag and its value has been set to red.
The value of an attribute can be enclosed within double quotes, However, when the value
contains special characters such as space, then it must be enclosed within double quotes.
For example, <body bgcolor- "red blue'>
102
ntroducion to HTMI

An element may have multiple attributes. For example, the following <BODY> element has
rwo attributes-bgcolor and id.
cbody bgcolor="red" id="Body_one">
The order of appearance of the attributes makes no difference. For example, both the codes
give the same output.
<body bgcolor=-"red" id="one"> <body id="one" bgcolor="red'>

Activity Bye Experiential Learning

Ty asimple program in Notepad to change the background color to red and use the container
and empty tags. Identify the container and empty tags.
change bg - Notepad
File Edi Format View Help ) change bg.html
chtml>
<body bgcolor =red> O File C/Users/Jasmeet/Desktop/change%20bg.htmi
Artificial Intelligence cbr>
Robotics cbr>
Arhfical Intelligence
Internet of Things (IOT) <br> Roboncs
</body>
</html Internet of Things (IOT)

Fig. 5: Program to change background Fig. 6: Viewing the output on the browser

Attributes Used in the Body Tag

The usage of tags depends entirely on the way you have designed your web page to appear on a
browser. The body section of an HTML document is represented by the <body> tag, which is a
container element. It contains various HTML tags that are used toinsert objects like text, images
and others on the web page. These attributes help in formatting the body of a web page, similar
to formatting options in a word document. Let us study about someof the tags that are used to
design the body segment of a web page.
Table 1: Attributes of the <body> tag
Attribute Value Description Example
bgcolour Colour name or its Used to define the colour of the <body bgcolor="red">
hexadecimal code background of the web page
|background Image name with Used to place an image as the<body background="image.
file extension background of a web page jpg'> considering the
image is in the same folder
as the HTML program
text Colour nameor its To set the colour of the text in <body text= red">
hexadecimal the entire web page
topmargin Number of pixels Used toset the margin on the<body topmargin= "10">
top of the web page
leftmargin Number of pixels Used to set the margin on the
left side of the web page
<body leftmargin= "10°>

103
 Introduction to HTML

Fact Byte
There is only one <body> tag in an HTML document. All the attributes given in Table 1
are to be used in the same tag with one space between each attribute.

TEXT FORMATTING TAGS

You can change the appearance and give a professional look to webpages in a website using
various formatting tags in HTML, which present the text in a creative and artistic manner. You
should apply the opening and closing tags around the text that has to be formatted. An important
point to remember is that the effect of all the tags are applicable until the closing tag. Some
important tags related to formatting text in an HTML document are given below:
Table 2: Text formatting tags
HTML Tag Purpose Example
<b> (bold) or <Strong> Text appears in boldface. cb> Coding is fun </b>
<i> or <EM> (italics) Text appears slanted on one side. <i> Coding is fun </i>
<u> or <INS> (underline) To underline the text. <u> underlined text </u>
<center>
To bring the enclosed text in the <center> center align <lcenter>
center ofa line, horizontally.
<br> (line break) Shifts the control tothe next line, Artificial intelligence <br>
similar to using the Enter key in a
text editor. You can place multiple
<BR> elements to achieve multiple
line breaks.

<hr> (Horizontal Ruler) To draw a horizontal line at a Artificial intelligence <chr>

specified place. It is an empty
element. Color and width are the
attributes of <hr> tag.
<strike> (strikethrough Gives strikethrough effect to the <strike> Computers</strike>
effect) enclosed text
cbig> Used to make the given text one <big> Bigger Font </big>
point bigger than the default size
<small> Used to make the given text one <small> Smaller Font </small>
pointsmaller than thedefault size.

104
 introduction to HTML

<sup> (superscript) Characters are written above the | X²

normaltext line. Used in writing
mathematical formulae.

<sub> (subscript) Characters are written below the Base ₂

normal text line. Used in writing
chemical formulae.

<font> Used to define the size, colour and <font size='10' color 'blue'
style of the font used in the enclosed face='Arial Black'>
text. Size, Colour and Face are the
attributes of <font> tag.

Paragraph Tag
Aparagraph is agroup of sentences, which are organised in such an order, that it is a logical
development of asingle idea. Paragraph tag is avery important concept in adocument to
summarise the flow of an idea. Sometimes it is required to insert aline brcak at aspecific place
and also add some extra blank space between the lines to demarcate two paragraphs. The browser
does not recognise the ENTER key, therefore you have to indicate the end of paragraph and the
line break by using special HTML tags. The text under this tag starts from a new line leaving a
blank line. It is an empty element and does not require a closing tag.
The HTML tag <P> is used to start a new paragraph . If you need to break the line and continue
the text on the next line in the same paragraph, you should use the <BR> tag. The <BR> tag can
be used to incorporate multiple blank lines in a web page but the <P> tag can be used once.
Alignment of Paragraph
Your paragraph should be concise and coherent and the content should be relevant to the topic.
Therefore it is extremely important to align your paragraph in the correct place. The literal
meaning of the word align is to place in' or 'bring into astraight line. The text or image is left
aligned by default but you can always change the alignment of text or an image. Similar to MS
Word, a paragraph can be left, right or centre aligned. The paragraph element has an attribute
named 'align' which can be used to control the alignment of the paragraph.

To align the values left, right, center, justify.

The syntax 1s:
<p>...text ...<p> <p align=justify'> <p align=left>
<p align= center> <p align=right>

105
 introduction to HTML

Achvity Byte Appreciation of Literature CrossCurricular Learning Critical Thinking

Type the following paragraph using various formatting tags in HTML.

sentence is a combination of different words, It is only because of these words that a sentence
A
becomes meaningful and understandable by others, These words can therefore be called different
parts of speech. Each word in the English language fits into aspecific class or part of speech.
There are eight parts of speech in the English language: noun, pronoun, verb, adjective, adverb,
preposition, conjunction and interjection. The part of speech indicates how the word functions in
meaning as well as grammatically within the sentence.

Smart Byte
Unlike Microsoft Word, in HTML, Contents of the body are displayed as a single
paragraph without any line break. Web browsers ignore the white spaces inserted
into the text content. White spaces include space, new line, tabs and so on.
Therefore, paragraphs and lines do not appear in the browser as they appear in the
editor or adocument. In order to move to the next line, you must include the HTML
element <BR>, which is an empty tag for break or line break.

Check Point --Decision Making

Most of the tags used to format the text are container elements in HTML, except some tags,
! such as <BR> tag. Name the formatting tags which are empty elements.

Text Headings
The browser displays textual content of the body section in default font size. Sometimes, you may
want to display text in different font sizes. Aheading is atext size different from the normal font
or text size which is used to highlight important part of the text. We give headings and
sub-headings in adocument. In HTML, heading tags are used to describe the titles and sub-titles
of a web page. Headings are numbered from (hl to h6),with hl being the largest font size and
h6 being the smallest font size. The numbers, other than 1to 6are not valid, and hence willnot
apply any effect. You will observe that the font size of the text decreases as we increase the number
of the heading levels.

AetivityByte Experiential Learning Critical Thinking

Type the following program in Notepad and check the output on aweb browser. Add a
background of blue color to the entire page.
106
aroducton t oHTMI

chtml> Technoogical innovations

<heads
OFile D/Working%20Folder/Desktop/abc.ht
<titles Technological Innovations</title> Mail-Priyanka Ahu.
Mail Priyanka Ahu.S Privacyerror
/heads

body> Artificial intelligence

chl> Artificial intelligence</h1>
ch2> Coding </h2> Coding
h3> robotics </h3>
robotics

ch4> natural Language

Processing </h4>
Natural Language Processing
h5> Machine Learning </h5>
ch6> Chatbots</h6> Machine Lenrning

</body> Chatbott

</html>

Comment Tag
Thistag is used to insert acomment in the source code of an HTML document. Acomment
willbe ignored by the browser, as it will not generate any output on the browser. It is agood
programming practice to use the comment tag very frequently in your HTML coding
lsarts with an exclamation symbol, followed by ahyphen and ends with asimilar hyphen.
For example, -Thispart of theprogram displays aparagraph->
Colour of Body Background
Vou must have noticed that the colour of the background of the browser where the body of
HTML document is displayed is white by default. You can change this colour according to your
choice to give an impressive look to your document. Be careful while selecting a background
color for your web page. It should be in contrast to the color of the text written on it. Otherwise
the foreground text will not be properly visible to the readers. The background of the web page
is modified with the BGCOLOR attribute of the <BODY> element. The value of BGCOLOR
aribute can be specified in many different ways, as explained below.
The name of the colour is written as the value The colour is specified as a combination of
|of BGCOLOR attribute. three primary colors-Red, Green and Blue
<BODY BGCOLOR-RED> (RGB). These colors can take numerical values
from 0to 15, starting from 0, 1, 2, 3, 9,A,
B,., F (Hexadecimal values).
<BODY BGCOLOR= #342>

Smart Byte
HTML also allows you to mix colors to form anew colour.These colours must be enclosed
within double quotation marks. They can be expressed either using names or RGB value
or acombination of both <BODY BGCOLOR="Color _1 Color_2... Color_n'"'>
107
 Introduction to HTML

Changing Font Style, Colour and Size

One of the factors that make web page more presentable is the style of the fonts used on the web
page. Font is acollection of printable characters having adistinct style. On aweb page you can
add and customise the font for your text, <FONT> is a container tag which is used to control the
appearance of fonts in the BODY tag, and must be closed with the corresponding </FONT> tag.
Changing Font Face: The FACE aribute of the <FONT> tag allowsyou to change the face or
style of the font. If the specified font is not installed on the computer on which the browser is
running, the default font is used. The syntax of this attribute is:<FONT FACE= Name_ of the
font>
Changing Font Colour: TheCOLOR attribute of <FONT> tag allows you to change the colour
of the font. The syntax of this attribute is: <FONT COLOR=color_value>
The color_value can be expressed as red, blue, white, etc. or as hexadecimal RGB value (#6F4) or
a combination of both.
Changing Font Size: The SIZE attribute of <FONT> tag allows you to change the size of the
font. The size_value isexpressed as 1(smallest), 2, 3..7(arges). The syntax of this attribute is:
<FONT SIZE=size_value> All the attributes can be used in a single <FONT> tag too.
Coloring the Text: Just as you can change the color of the background of an HTML web page,
you can also change the colour of the text or foreground colour. You can ensure that acontrast
can be applied to the text and the background to make it impressive. Colour of the textual
content can be controlled using the TEXT attribute in the <BODY> tag. The colour value can be
given in the same way as you specify the background colour.
Using the above formatting tags in HTML, you can improve the visual appearance of a document,
which has an effect on the viewers, and how they perceive the information on the Internet.

Think Byte Critical ThinkingProblem Solving Decision Making

1. Neha has written the HTML code in the Notepad. She wants to view the output in aweb
page. How will she accomplish the task?
2. Ishita wants to write the headings of chapters and paragraphs in bold characters to differentiate
them from the rest of the content. Which tag should she apply to write the headings?
3. Madhu has written an HTML code. She wants to place some paragraphs in left, center and
right side of awebpage. Which tag and attribute should she use to align the paragraphs?
4. Abhinav wants to create a web page containing some chemical formulae. Suggest him some
tags which will be useful for defining the formulae.
5. Oops! What went wrong?
Idesigned an HTML page with an image in the background of the <BODY> tag. However,
the image is not being displayed. What are the possible problems? Identify each of them and
suggest probable solutions.

108
 introduction to HTML

Recall Time
collection of interrelated web pages placed under asingle domain name.
A website is a websites.
World Wide Web (Www) is a collection of
written in the text editor should be saved as an HTML document by
The program
adding .html as file extension.
are defined by the three elements.
An HTML document has three basic parts which
<HTML>...</HTML> <HEAD>...</HEAD> <BODY>...</BODY>
objects on a web page.
Different HTML elements are used for inserting and formattíng
These elements are made up of HTML tags.
Container.
" There are two types of HTML elements-Empty and
sub-titles on a web page.
" There are six levels of heading tags used for defining titles and
" <Br> tag is used to insert a line break.
P> tag is used to start a new paragraph.
<B> or <STRONG> tag is used to make the text appear in boldface.
<I> or <EM> is uaed to make the text appear slanted on one side.
<U> or <INS> is used to underline the text.
BGCOLOR attribute
The background colour of the web page can be modified with the
of the <BODY> element.
The FACE attribute of the <FONT> element allows you to change the font style.
" The COLOR attribute of the <FONT> element allows you to change the colour
of the font.
The SIZE attribute of the <FONT> element allows you to change the size of the font.

Tech Terms
iWeb Page: It is a document on the Internet written in acomputer language called
iHypertext Markup Language (HTML).
iWeb Browser: It is an application software that allows a user to retrieve, view and traverse
the information on the Internet.
i HTML: It is a computer languagethat is used to create and design web pages.
iHTML Tag: It is alabel or identification in HTMLwhich is enclosed within angle brackets.
iAttribute: It is a property of an HTML element.
Heading tags: Aheading is a text size different from the normal font or text size which is
used to highlight important part of the text.
Superscript:These are the characters written above the normal text line.
Subscript: These are the characters written belowthe normal text line.
RGB: It is the colour combination of the three primary colours: Red, Green and Blue.

109
 introduction to HTMI

Practice Time,
A. Tick (V)the correct option.
1. Which of the following is not an example of a web
browser?
a. Google Chrome b. Mozilla Firefox
C. Microsoft Edge d. Google Play Store
2. ldentify the tag which encloses the actual contents of a web page.
a. <body> b. <html> C. <title> d. <head>
3. An html document should begin with the.......a.g.
a. <title> b. <head> C. <html>
4. ldentify the tag that is used to write CO,.
a. <br> b. <sup> C. <sub> <p>
5. Name the attribute of the <FONT> element which is used to change the font style.
a. style b. font C. color d. face
B. Fillin the blanks.
1. Xb tag is used to insert a line break.
2. The Kmg.. in the form of html tags are used to instruct the browser to
display the multimedia and graphic content on the web page.
3. Thesize ofthe text withinthe..At...tag is the largest and that within
<htag is the smallest.
4. <HTML>.s/HTML> is also called the lon-tenA...element of the HTML document.
5. The HTML tag for which there is no corresponding closing tag is called
C. Write T for True and F for False.
1. Title tag is given inside the <Head> tag.
2. HTML is a case-sensitive language.
3. It is possible to change the font size in an HTML document.
4. There can be only one pair of <BODY> tag in an HTML program.
5. <Head> tag is a container element.
D. Explain briefly the functions of the following tags.
1. <BR> 2. <P> 3. <STRONG> 4. <EM>
5. <INS> 6. <SUP> 7. <SUB> 8. <H3>

E. Answer the following questions.

1. Define the following tags in HTML.
a. <center> b. <html> C. <Sup>

110
introduction to HTMI

How will youchange the font settings in a web page?

3. Differentiate between the container element and the empty element.
4. How many heading levels are supported by HTML? Name them.
5. What are attributes? Explain the different attributes of <BODY> tag.
 Datvoderbon to THL

4.<EH Emphasizes text

5 <INS-Undalne bext Repuuenfals ineeled
dtext undelred

text as
8. <H3
(mocliv-szel

Qortent

tf atort ond end a, an

4TML doeument
tag a,Used to
ebone day
nGmel
 Com
ckang

elen
teat </Aot

font

P) Conkine Glemsnt elomant

bath
and a

Con conan eat an Dses net contain

bthaolements hehe Centent
1
 loela

<ht 2 <hs, cheSh5sh67.

tibates
H) AfA:butes
They rae

colan.

Used to phce onU'inae a the

Used