Class 6 Chapter 6 Introduction To HTML

Tntroduction to
HTML
LEARNING OBJECTIVES
You will learn about:
C
1. HTML 3. HTML tags and tag attributes
2. HTML Editor 4. important HTML tags
HTML
HTML stands for Hyper Text Markup Language. Hypertext is simply a piece of text which
contain links to other texts whereas Markup Language is a way of writing style and layout
information within a text document. HTML is an example of markup language. HTML is a
simple scripting language, mainly used for developing web pages. It is easy to learn and simple
to understand.
HTML document is a plain text file that contains text and HTML tags. It is also called a
web page.
Before learning the language, the following points should be kept in mind:
HTML is not a programming language but a markup language.

I t creates simple text files using any HTML editor.
It consists of markup tags.
I t is saved with the extension of .htm or .html.
It is not case sensitive, that is, <HTML>, <html> or <HTml> are the same.
HTML Editor
Before creating an HTML document, you must first learn about the HTML editor. HTML editor
is a software application required to create web pages. These web pages can be viewed using
any web browser such as Internet Explorer, Mozilla Firefox, etc.
There are several types of HTML Editors. The main types are discussed here.
WYSIWYG editor
WYSIWYG stands for 'What You See Is What You Get'. This type of HTML editor allo
lows yoyov
to create a web page without the use of the HTML tags. The content displayed onscreen durina
editing phase closely resembles the final web page. MS FrontPage and Adobe Dreamweaver are
during
examples of a WYSIWYG editor.
Text editor
To work with a text
editor, you must know Untitled- Notepad
how to write HTML that are used for
tags File Edit Format View Help
creating a web page. Notepad and WordPad <HTML>
are
examples of a text editor. <HEAD
TITLE My First web page </TITLE>
You </HEAD>
can create a web page using a text editor BODY>
HI FRIENDS LET US START ORKING IN HTML
by following a few steps:
</BODY>
1. Click </HTML>
on the Start button
All
Programs Accessories
Notepad. Fig. 6.1 Using Notepad as a text editor
2. The Notepad window
appears. Type the HTML code (Fig. 6.1).
Note: This is a sample code. You will learn Save As
how to write Desitop Seareh Desetop

an HTML code later in Organize New folder
this chapter Favcrites Libranies
Desktop Click Start
3. Click on the File Downioads Computer
menu Save As option. Recent Places jNetwork
Click Stat 7
4. Save As dialog
box appears (Fig. 6.2). Save Libraries Untitled
Dccuments
the file with any name and a .html' or
File name: Unttled im
htm' extension. Save as
type: Text Documents (".tat)
New Tab Windows lnternet &eplorer

Hide Folders Enccding ANSI
X|| Bng P Save Cancel
tdn View Fvortes Tools Help
New Tab Ctrd»T

Ouplicete Tab
New Windo
Ctnek
CtrfeN
Fig. 6.2 Save As dialog box
Nw essuon
Open Ctrl0
Ctd»s Browse with InPrivate

Viewing an HTML document using a
A
Clone ab CloW
startung Internet Explorer. Browse the web without
Session.
storing data about your bro web browser
Open an InPrivate urowsing window
Page Seup-
You can use
any web
P..
Print Previe.
Ctl-P
Use an Accelerator browser, say Internet
ena
mgon end Eport..

Open a web
Show copied test

service wth text Ihat youve copied fran Explorer Netscape Navigator to view an
or
ropertves
Wort Ofine
Glog with Windows Live
Map wth Bing
HTML document.
Search with Ung
Translate with Uing
You need to follow the
steps given below:
Fig. 6.3 Opening an HTML file using a web 1. Click on the File menu
of the Internet
browser Explorer window Open option (Fig. 6.3).
62
2. Open dialog box appears (Fig. 6.4). Open
3. Use the Browse... option to locate the HTML file. Type the rtemet address ofa document, and temet
Explorer wil open t for you.
Click OK.
Open:
4. The output appears in the form of a web page (Fig. 6.5).

My First Web page Windows Internet Explorer
OK Cance Bowe.
O e CAUserCambridg x Speedbitseon P |
File Edit View Favorites Tools Help Fig. 6.4 Open dialog box
My First Web page
Favorites
HI FRIENDS LET US START WORKING NHTML

TRYTHIS!
Type the complete path of the HTML file saved
Fig. 6.5 HTML web page in your computer in the Address Bar of the
Internet Explorer to get the output.
HTML Tags
HTML also called HTML tags. These denote the various elements in an HTML
markup tags are
< and >.
document. HTML tags are keywords enclosed in a pair of angular brackets, that is,
the start and end
These tags are usually paired (for example, <HTML> and </HTML>) to mark
and the
of an HTML instruction or HTML element. The first tag is known as the opening tag
with a forward slash (/)
last tag is called the closing tag. The end tag or closing tag is preceded
within the angular brackets. There are two types of tags.
end to HTML element. For example,
1. Container tags: These tags have a start and tag
an an
<B.., <BODY> </BODY>, etc. . . .
closing tags to an HTML

2. Empty Tags: These tags have only an opening or a start tag and no
element. For example, <LI>, <IMG> <HR>, etc.
HTML Elements
HTML element.
The content with the start tag and the end tag is called the
typed along
element. HTML can also have nested
For example, Click Start is one HTML
 B>.
elements. For example, Click Start
will learn about these tags in a later
Note: The tags used here are for examples only. You
chapter.
EAG fILE
The opening and closing of the tags

should always followa sequence, that is, the tag that opens first
should be closed last. For example,
 Click Start is a correct sequence
 Click Start is an incorrect sequence.
63
HTML Tag Attributes
HTML elements. They are
re alu.
always
ot atag provides additional information about the
u t e s
written in the start tlag. Attributes appear as an attribute name followed by an '= sign
Sign and t
and
double quotes, though some
then
ne attrbute valuc. Attribute valucs should be enclosed within
browsers allow single quotes also. Different attributes in the same tag are separated by
by aa space space
For exanmple, <IMG align="left">
Here, align = "left" is an attribute of the HTML element. Also, note that 'align is the attribute
name whercas 'left' is the attribute value.
Structure of an HTML Document

All HTML documents contain standard HTML tags that are executed in a web browser. The
purpose of a web browser is to read the HTML documents and display them as web pages. The
Drowser does not display the HTML tags, but uses the tags to interpret and display the content
of the page
accordingly.
An HTML document contains the
following main elements:
Root element
This contains the HTML
tag. It is a container tag. This tag does not show directly on the web
page. It is used to detect the document as an HTML document.
Head element
This element contains information about the document. The text
and tags do not show directly
on the web It contains the HEAD
page. tag which is the first tag under the HTML tag. This in
turn can contain various other
tags such as TITLE tag (title appears in the Title Bar of the web
page), STYLE tag, etc.
The example below shows the title element that
displays the text as the title of the web page in
the Title Bar (Fig. 6.6). The text specified within the title
tag does not appear on the text area of
the web browser.
<HTML>
<HEAD> Click Start- Learning HTML- Windows Internet Explorer
<TITLE> 2 CAUsersCambridgelDesktop >|x| SpeedbitSearch
Click Start Learning HTML File Edit View Favorites Tools Help
<STITLE> Favorites Click Start- Learning HTML
<SHEAD>
<HTML>
Fig. 6.6 Showing web page title on the Title bar
64
Body element
This element defines the document's body. This comes after the head element. The BODY
tag
is used to display text, images, links, etc. on the web This
page. may contain several other tags
(Fig. 6.7).
<HTML> Click Start-Learning HTML -WindowsInternet Explorer
<HEAD>
<TITLE>
e cAUseraiCambridg X E Soeedeiseorch
File Edit View Favorites Tools Help
Click Start-Learning HTML
SFavorites Click Start- Learning HTML
<TITLE>
/HEAD>
Leaming HTML is an enjoyable experience!
BODY>
Learning HTML is an enjoyable
experience!
/BODY>
SHTML> Fig. 6.7 Showing text on web page using BODY tag
The following are some important attributes of the <BODY> tag:

1. Text: This attribute specifies the color of the text of the entire document. The value can be the
name of the color within quotes.
2. Bgcolor: This attribute specifies the color of the background of the web page.
3. Lefimargin: This attribute sets the left margin of the web page. The value can be given as a
number or in percentage.
4. Topmargin: This attribute sets the margin at the top of the web page. The value can be given
as a number or in percentage.
To illustrate the attributes of the BODY tag, let us see the following example (Fig. 6.8):
<HTML>
<HEAD> Click Start- Learning HTML WindowsInternet Explorer
<TITLE> CNUsersCambridge xSpeedbitSeorek

Click Start- Learning HTML File Edit View Favorites Tools Help
STITLE>> Favorites Click Start- Learning HTML
HEAD>
<BODY text="Blue" bgcolor="Green Leaning HTVL an enjoybleeperence
leftmargin="60" topmargin="50">
Learning HTML is an enjoyable experience!
</BODY>
</HTML>
Fig. 6.8 Showing effects of the attributes of the BODY tag
Some Important Points
remember while writing HTML code:
Following are some important points you should an
The space between the tags does not matter. For example,
6S
Underline text is same as Underline text <IU
There should not be any space between letters of the tag names. For example,
HTML> is correct; <H TML>, <HT ML>, <HTML> are incorrect.

Attributes are always specified in the start tag.
Attribute name is not case sensitive.
ACTIVITY
Complete the following activity.
1. Open notepad and write down the coding for creating a web page on "My childhood
friends
2. Let there be some background color of your choice.
3. The text should be in green color.
4. Save the file with the name
5.
'MyFriends.html
Open the Internet Explorer or any other browser and execute your program.
GLOSSARY
BODY tag: It is used to display text, images, links, etc. on the web
page.
Container tag: It adds a start and an end tag to an HTML element.
Empty tag: It is the tag that has a Start tag only, and no
closing tags to an HTML element.
HEAD tag: It is the first element under the HTML tag that contains
information about the
HTML document.
HTML: It stands for Hyper Text Markup Language.
HTML tag attributes: It provides additional information about HTML
elements.
HTML tag: It is used to identify the program as a standard HTML
document.
HTML editor: It is a software application required to create web pages.
HTML element: It is the content typed along with start tag and end
tag.
Hypertext: It is a piece of text that works as a link.
Markup Language: It is used for writing style and layout information within a text document.
wYSIWYG editor: It allows you to create a web page without the use of the HTML tags.
TITLE tag: It displays the text that appears as the title of the web page in the Title
Bar.
(66 THL

Class 6 Chapter 6 Introduction To HTML

Uploaded by

Copyright:

Available Formats

You might also like

Class 6 Chapter 6 Introduction To HTML

Uploaded by

Document Information

Original Description:

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

Class 6 Chapter 6 Introduction To HTML

Uploaded by

Copyright:

Available Formats

Tntroduction to

HTML is not a programming language but a markup language.

how to write Desitop Seareh Desetop

New Tab Windows lnternet &eplorer

New Tab Ctrd»T

Ctd»s Browse with InPrivate

mgon end Eport..

Show copied test

4. The output appears in the form of a web page (Fig. 6.5).

HI FRIENDS LET US START WORKING NHTML

<B..<B>, <BODY> </BODY>, etc. . . .

closing tags to an HTML

element. For example, <LI>, <IMG> <HR>, etc.

The opening and closing of the tags

name whercas 'left' is the attribute value.

Structure of an HTML Document

Fig. 6.6 Showing web page title on the Title bar

The following are some important attributes of the <BODY> tag:

<TITLE> CNUsersCambridge xSpeedbitSeorek

HTML> is correct; <H TML>, <HT ML>, <HTML> are incorrect.

You might also like