Scribd
Upload
56 views

Chapter 8

This document provides an overview of HTML (Hypertext Markup Language): 1) HTML is the code that web developers use to structure and present content on websites and web pages. It uses tags to mark elements like headings, paragraphs, and images. 2) HTML was created in 1991 and is one of the most widely used languages for web pages. Current versions allow embedding of multimedia and different types of content. 3) HTML code is made up of elements defined by opening and closing tags, which describe how different parts of a web page should be displayed. Attributes within tags provide additional information. 4) There are rules for writing valid HTML, like being case-insensitive and not allowing spaces in

Uploaded by

Beverly Moguel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
56 views

Chapter 8

This document provides an overview of HTML (Hypertext Markup Language): 1) HTML is the code that web developers use to structure and present content on websites and web pages. It uses tags to mark elements like headings, paragraphs, and images. 2) HTML was created in 1991 and is one of the most widely used languages for web pages. Current versions allow embedding of multimedia and different types of content. 3) HTML code is made up of elements defined by opening and closing tags, which describe how different parts of a web page should be displayed. Attributes within tags provide additional information. 4) There are rules for writing valid HTML, like being case-insensitive and not allowing spaces in

Uploaded by

Beverly Moguel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

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, <P> 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 <BR> 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 considers<P >as 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 <B> and <U> tags together, as shown
below,

B><U>Bold and underlined text</U></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.

You might also like