Class- 10th
COMPUTER
APPLICATION.....
Chapter-3
HTML
HTML is a markup language, which is used to
define the layout and attributes of a World Wide Web (WWW) document as well as
to create links between Web pages. HTML is the underlying foundation of Website
design. It is a subset of SGML (Standard Generalised Markup Language) and a
high-level markup language. HTML is a short form of HyperText Markup Language,
which means-
(i)
HyperText is simply a piece of text that has some extra features like
formatting, images, multimedia and links to another document.
(ii) Markup Language is a way of writing layout
information within documents. HTML is a page layout and hyperlink specification
language. It allows images and other objects to be embedded that can be used to
create interactive forms. HTML documents are described through HTML tags or
elements.
HTML ELEMENTS or TAGS HTML is written in the
form of tags. A tag refers to a string enclosed within angular brackets (<
and >). HTML elements represent semantics or meaning.
1. HTML
tags are predefined and are not case-sensitive.
2. All
HTML tags are typed inside the angular brackets (< and >) and the text
between these brackets are called elements.
3. The opening tags are written within the less
than (<) and greater than (>) signs, e.g. <HTML>
4. The closing tags are written within the <
and > signs with a forward slash (/) appended before the name of the tag.
e.g. </HTML>
5. The
attributes are always specified in the opening tags, which provides additional
information about that tag. It comes in
name/value pairs like name = “value”, e.g. <FONT size =“5”>
There are two kinds of elements, i.e. Container
elements and Empty elements.
Container Elements These types of HTML elements
always wrap around the text or graphics which come in a set with an opening as
well as a closing tag. In other words, HTML tags that include both On and Off
tags are known as container tags. e.g.
<HTML>.. .</HTML>
Empty Elements On the other hand, the empty
elements are standalone tags, i.e. empty tags do not have to be wrapped around
text or graphics and do not require a closing tag. In other words, HTML tags
that include only On tag and there is no Off tag then, these tags are known as
empty tags. e.g.
<HR> inserts a horizontal line <BR> adds a line break
HTML STRUCTURE HTML document is a combination of
various tags, which define the structure and appearance of the Web page.
Following four basic structure elements are always present in every HTML
document:
(i) The <HTML> tag tells the browser that
this is an HTML document. You must begin your html files with this tag and must
end your html file with matching closing tag.
(ii) The <HEAD> tag is used for text and
tags that do not appear directly on the page. It acts as a header of file and
contains some information like setting the title of the Web page.
(iii) The <TITLE> tag contains the
document title. This tag lies between <HEAD> and </HEAD> tags. The
title specified inside this tag appears on the browser’s title bar.
(iv) The
<BODY> tag is used for text and tags that appears directly on the Web
page. It helps us to create a look and feel of the Web page. It holds all your
content words, pictures and other stuff. The most basic structure needed for
creation of any Web page are as follows:
CREATING and SAVING a HTML DOCUMENT Since, HTML
documents are just text files, they can be written in any simple text editor
like Notepad, FrontPage, Dreamweaver, WordPad etc. If you are using a Notepad
to create a HTML document, the steps are as follows:
VIEWING HTML DOCUMENT in a BROWSER You can view
HTML document in any Web browser such as Internet Explorer, Mozilla Firefox,
Opera, Apple Safari, Netscape Navigator, Google Chrome etc. Here, we are using
Internet Explorer Web browser to view the HTML document. To view an HTML
document, the steps are as follows:
BASIC HTML TAGS HTML provides some basic tags
which are required for HTML code.
<HTML>Tag
It represents the root of an HTML document, so
it acts as a container for all other HTML elements. It informs the browser that
it is dealing with an HTML document. It is very important to place both of
these tags (open and close HTML tags) in your documents as they tell the
browser, where your page begins and ends,
e.g.
<HTML> </HTML>
Attributes of <HTML> Tag This tag provides
various attributes, which are as follows: DIR It tells the browser the
direction in which the displayed text is to be read. This attribute can have
values either ltr (left-to-right) or rtl (right-to-left). By default, the value
of dir attribute is ltr.
Syntax
<HTML dir=“ltr"/“rtl”>
LANG It specifies the language of an element
content and attribute values. Now-a-days, Web pages are designed in many
languages, e.g. German, Hindi, Greek, Spanish etc.
Syntax
<HTML lang=“fr”> Here, fr
denotes to the French language.
Some common language codes are as follows:
Code Language Code Language en English hi Hindi
fr French es Spanish de German ar Arabic it Italian ru Russian nl Dutch zh
Chinese el Greek ja Japanese
<HEAD> Tag This element is a container for
all the header elements. The <HEAD> tag must include a title for the
document that can include scripts, styles, meta information and many more. The
second line of your HTML document should be <HEAD>. The content contained
in the head section of your document provides information to the browsers and
search engines but, it is not displayed directly on the Web page. The end of
the head tag is indicated by </HEAD>. e-g.
<HTML>
<HEAD> Header information
comes here </HEAD> </HTML>
<TITLE> Tag This tag defines the title of
the document. Title must be a simple text and should not be same as the file
name. It is placed between <HEAD> and </HEAD> tags. e-g-
<HTML>
<HEAD>
<TITLE>
This is
the title of my page.
</TITLE>
</HEAD>
</HTML>
output
<HTML>
<HEAD>
<TITLE>
My First Web Page
</TITLE> .
</HEAD>
<B0DY>
Hello world. This is my first web page. </B0DY> </HTML>
output
Attributes of <BODY> Tag This tag provides
various attributes, which are as follows: background.
This
attribute specifies a background image for a document. HTML supports various
graphics format such as .gif, .jpg etc.
Syntax
<B0DY background=“URL”>
Where, URL may be an image name or a path of an image. e-g-
<HTML>
<HEAD>
<TITLE>
Background Image </TITLE>
</HEAD>
<B0DY background ="image.jpg”> </B0DY>
</HTML>
Output
text This attribute specifies the color of the
text in a document.
Syntax
<B0DY text=“color_name|hex_number|rgb_number”>
Attribute Values
Value Description colorjaame Specifies the
text-color with a color name (like “red”).
hex_number Specifies the text-color with a
hexadecimal code (like “#FF0000”) where, # stands for the color number.
rgb_number Specifies the text-coior with a rgb(red, green, blue) code (like
“rgb(255,0,0)”). e.g.
<HTML>
<B0DY text=“red”> Arihant Publication
</B0DY>
</HTML>
bgcolor This attribute specifies the background
color of a document.
Syntax
<B0DY bgcol or=“color_name|hex_number|rgb_number”> e.g. <HTML>
<B0DY bgcolor="red”>
</B0DY>
</HTML>
link This attribute specifies the color of an
unvisited link in a document. The default color of link attribute is blue
(#0000FF).
Syntax
<B0DY 1ink=“color_name|hex_number|rgb_number”> e.g. <HTML>
<B0DY
Iink=“red”>
</B0DY>
</HTML>
alink This attribute specifies the color of an
active link in a document (a link get activated when it is clicked). The
default color of an alink attribute is red (#FF0000).
Syntax
<B0DY alink=“color_name|hex_number|rgb_number”> e.g.
<HTML>
<B0DY alink=“blue”>
</B0DY>
</HTML>
vlink This attribute specifies the color of a
visited link in a document. The default color of vlink attribute is purple
(#800080).
Syntax
<B0DY vl i nk=‘‘col or_name | hex_number | rgb_number”> e-g-
<HTML>
<B0DY vlink=‘‘bl ue”>
</B00Y>
</HTML>
topmargin Sets a topmargin (distance between the
top of the document and the top of the browser window) of your body element.
Syntax
<B0DY topmargin=“value”>
e.g.
<HTML>
<HEAD>
<TITLE> Topmargin </TITLE>
</HEAD>
<B0DY topmargin=“65”> Arihant Publications is one such reputed name
in the field of books which has the best
available books in the market.
</B0DY>
</HTML>
Output
leftmargin Sets a left hand margin (distance between the left side of
the document and the left edge of the browser window) of your body element.
Syntax
<B0DY 1eftmargin=“value”> e.g.
<HTML>
<HEAD>
<TITLE> Leftmargin </TITLE>
</HEAD>
<B0DY 1eftmargin=“65”> Arihant Publications is one such reputed name
in the field of books which has the best
available books in the market. </B0DY>
</HTML>
Output
<FONT> Tag This tag specifies the font
face, font size and font color of the text. The <FONT> tag provides no
real functionality by itself but with the help of a few attributes, this tag is
used to change style, size and color of HTML text elements. This tag is
generally used for changing the appearance of a short segment of text. It can
be set for a character, sentence or entire document.
Attributes of <FONT> Tag Following are the
attributes of <FONT> tag: size This attribute specifies the size of the
text inside a <FONT> tag. The range of accepted values goes from 1 (the
smallest) to 7 (the largest). We can also set the relative size to the current
size using (+) ve or (-) ve sign, e.g. size = +2
Syntax
<F0NT size=“number”>
Attribute Value
Value Description number A number from 1 to 7,
that defines the size of the text. Default number of value is 3.
e.g.
<HTML>
<HEAD>
<TITLE>
Font Size </TITLE>
</HEAD>
<B0DY>
<F0NT size=“4”> This is the default size. </F0NT>
</B0DY>
</HTML>
Output
face This attribute specifies the font name or
type face of the text inside a <FONT> tag.
Syntax
<F0NT face=‘‘font_family”>
Attribute Value
Value Description
font_family The font name of the text specifies
a prioritised list of several fonts, separate the names with a comma (like
<FONTface=“verdana,arial,sans-serif ”>. e.g.
<HTML>
<HEAD>
<TITLE> Font Face </TITLE>
</HEAD>
<BODY>
<FONT face=“verdana”> This i s some text!
</F0NT>
</B0DY>
</HTML>
Output
color This attribute specifies the color of the
text inside a <FONT> tag.
Syntax
<FONT color=“color_name|hex_number|rgb_number”> e.g.
<HTML>
<B0DY>
<F0NT cvolor=“red”> This is some text!
</F0NT>
</B0DY>
</HTML>
Some examples of using <FONT> tag are as
follows:
1. <F0NT size="3” color=“orange”> This is an example!</F0NT>
2. <F0NT
face=‘‘ari al ” col or=‘‘green”> This
is a table!</F0NT>
3. <F0NT size =+“2”> ABC </F0NT>
<BASEFONT> Tag This tag specifies a
default font color, font size or font family for all the text in a document
that follows it, which is only supported by Internet Explorer Web browser.
Ending tag (< /BASEFONT >) of basefont is optional. This tag can also
have face, size and color attributes, which can be used exactly in the same way
as face, size and color attributes of <FONT> tag.
Attributes of < BASEFONT> Tag Following
are the attributes of <BASEFONT> tag: color This attribute specifies the
color of the text inside a <BASEFONT> tag.
Syntax
<BASEF0NT color or=‘‘color_name|hex_number|rgb_number”>
face This attribute specifies the face type of
the text inside a <BASEFONT> tag.
Syntax
<BASEF0NT face="font_family”>
size This attribute specifies the size of the
text inside a <BASEFONT> tag.
Syntax
<BASEFONT size=“number”>
Differences between <F0NT> tag and
<BASEF0NT> tag
<FONT> tag <BASEFONT>tag
The <FONT> tag has “ending” tag.
The <BASEFONT> tag has optional “ending”
tag.
The <FONT> tag affects all text that lies
between its starting and ending tags.
The <BASEFONT> tag affects all text in a
document.
<CENTER> Tag This tag is used to
centralise a segment of text to be displayed on browser’s window. With the
<CENTER> tag, closing tag </CENTER> is always used. Anything
between these two tags will be centered including text, images or tables.
Syntax
<CENTER> ... K/CENTER>
e-g-
<HTML>
<HEAD>
<TITLE>
Center </TITLE>
</HEAD>
<B0DY>
<CENTER>
This text will be center-aligned. </CENTER> </B0DY>
</HTML>
Output
Comment
<!-…- -> Tag This tag is used to insert comments in the source code of
the Web page. Comments are not displayed in the browser’s window. All the text
inserted inside this tag (<! — … — >) will be ignored by the browser that
made invisible for the user. You can use comment to explain your code, it can
help you, when you edit the source code later. This is especially useful, when
you have a lot of codes.
Syntax
<! - -.... - ->
<HTML>
<HEAD>
<TITLE>
Comment </TITLE>
</HEAD>
<B0DY>
<!- - This is a comment. - - > This is body. </BODY>
</HTML>
Output
Syntax
<Hn>...........</H n>
Where, n may be any number from 1 to 6.
e-g-
<HTML>
<HEAD>
<TITLE>
Heading Level </TITLE>
</HEAD>
<B0DY>
<H1> level 1 Head!ine </H1>
<H2> level 2 Headline </H2>
<H3> level 3 Headline </H3>
<H4> level 4 Headline </H4>
<H5> level 5 Headline </H5>
<H6> level 6 Headline </H6>
Output
Attribute
of <HEADING> Tag Following is the attribute of <HEADING> tag: align
This attribute specifies the alignment of the text as heading. By default,
alignment is left.
Syntax
<Hn a 1 i gn=“center 11 eft | right | justify”X/H/?> Where, n=l to 6 e-g-
<HTML>
<HEAD>
<TITLE> Heading in HTML
</TITLE>
</HEAD>
<B0DY>
<H1 align = “center”>level 1 Headl ine</Hl>
<H2> level 2 Headline </H2>
<H3 align = “right”> level 3 Headline
</H3>
<H4> level 4 Headline </H4>
<H5 al i gn = "center”> 1 evel 5
Headline </H5>
<H6> level 6 Headline </H6>
</B0DY>
</HTML>
Output
Paragraph
<P> Tag This tag is used to mark a block of text as a paragraph. It is
used to insert a line break with extra space in the beginning. This is a
container tag.
Syntax
<P>.........</P>
e.g.
<HTML>
<HEAD>
<TITLE>
Paragraph </TITLE>
</HEAD>
<B0DY>
<P>This is some text in a paragraph.</P> </B0DY>
</HTML>
Output
Attribute
of <P> Tag Following is the attribute of <P> tag: align This
attribute specifies the alignment of the text within a paragraph. By default,
alignment is left.
Syntax
<P a 1ign="left|right|center|justify”> e.g.
<HTML>
<HEAD>
<TITLE>
P tag with align attribute </TITLE>
</HEAD>
<B0DY>
<P align="right”> This
is some text in a paragraph. </P>
</B0DY>
</HTML>
Output
Line
Break <BR> Tag This tag is used to insert a line break which means the
text/image following the tag will be moved to the next line when displayed in
the browser. To add a single line of space, you can use a break tag <BR>.
This is an empty tag, i.e. no need of closing tag. You can also use the
<BR> tag to insert one or more blank lines.
e-g.
<HTML>
<HEAD>
<TITLE>
Line BreaK </TITLE>
</HEAD>
<B0DY>
This text contains <BR> a line break. </B0DY>
</HTML>
Output
Horizontal Rule <HR> Tag To create a
horizontal line on your page, you have to use the empty tag <HR>. This
horizontal line can be used to divide information into sections. Attributes of
<HR> Tag Following are the attributes of
<HR> tag: align This attribute specifies the alignment of a horizontal
line.
Syntax
<HR align=“left|center|right”>
e.g.
<HTML>
<HEAD>
<TITLE>
HR tag with align attribute </TlTLE>
</HEAD>
<B0DY>
<HR align=“right”> This is
a line. </B0DY>
</HTML>
Output
size This
attribute specifies the height of the rule in pixels. A pixel is a tiny dot
that makes up the display of your computer. Its default value depends directly
on the browser. The default size of a rule is 3 pixels.
Syntax
<HR size="pixels”>
Attribute Value
Value Description pixels The height of the
<HR> tag in pixels. e.g.
<HTML>
<HEAD>
<TITLE>
HR tag with size attribute
</TITLE>
</HEAD>
<B0DY>
<HR size=“3”> This is a
line. </B0DY>
</HTML>
Output
noshade
When this boolean attribute is present, the rule is drawn with a solid black
line as a 2D effect instead of the default 3D effect, i.e. without shading.
Syntax
<HR noshade>
<HTML>
<HEAD>
<TITLE>
HR tag with noshade attribute </TITLE>
</HEAD>
<B0DY>
<HR size = "5” noshade>
<HR size= “5”> This is a
sol id line. </B0DY>
</HTML>
Output
width This attribute specifies the width of a
horizontal line in pixels or percent. Its default value is 100%.
Syntax
<HR width=“pixels or %”>
Attribute Value
Value Description pixels The width in pixels
(like ‘100 px’ or just ‘100’). % The width in percent of the available space
(like ‘50%’). e.g. <HTML>
<HEAD>
<TITLE>
HR tag with width attribute </TITLE>
</HEAD>
<B0DY>
<HR width=“50%”> This is a
line. </B0DY>
</HTML>
Output
color This attribute specifies the color of the
horizontal line.
Syntax
<HR color="color_name|hex_number|rgb_number”>
e.g.
<HTML>
<HEAD>
<TITLE>
HR tag with color attribute
</TITLE>
</HEAD>
<B0DY>
<HR color=“red”> . This is
a red line. . </BODY> </HTML>
Output
Colors and their Hexadecimal and RGB Values
Color name
|
Hexa decimal value
|
RGB value
|
Aqua
Black
Blue
Fuchsia
Gold
Gray
Green
Khaki
Lime
Maroon
Navy
Olive
Orange
Pink
Purple
Red
Silver
|
#00FFFF
#000000
#0000FF
#FF00FF
#FFD700
#808080
#008000
#F0E68C
#OOFFOO
#800000
#000080
#808000
#FFA500
#FFC0CB
#800080
#FF0000
#C0C0C0
|
rgb(0,255,255)
rgb(0,0,0)
rgb(0,0,255)
rgb(255,0,255)
rgb(255,215,0)
rgb(128,128,128)
rgb (0,128,0)
rgb(240,230,140)
rgb(0,255,0)
rgb(128,0,0)
rgb (0,0,128)
rgb(128,128,0)
rgb(255,165,0)
rgb(255,192,203)
rgb(128,0,128)
rgb(255,0,0)
rgb(192,192,192)
|
Style Tags HTML provides various style tags,
which are as follows: Bold <B> Tag This tag specifies the text into bold
text. It is a container element.
Syntax
<B>............</B>
e.g.
<HTML>
<HEAD>
<TITLE> Bold </TITLE>
</HEAD>
<B0DY>
<P> This normal text and
<B> this is bold text. </B>
</P>
</B0DY>
</HTML>
Output
Italic <I> Tag This tag is used to make
the text in italic form. It is also a container element.
Syntax
<I>........</I>
e.g.
<HTML>
<HEAD>
<TITLE> Italic </TITLE>
</HEAD>
<B0DY>
<I> Hello </I>
</B0DY>
</HTML>
Output
Underline <U> Tag This tag
is used to underline the text. It is also a container element.
Syntax
<U>...........</U>
e.g.
<HTML>
<HEAD>
<TITLE> Underline </TITLE>
</HEAD>
<B0DY>
<P> This is a <U> text </U> </P> </B0DY>
</HTML>
Output
HTML LISTS Sometimes, we are in hurry and do not
like to read a lot of text. So, putting important information in the form of a
list seems to be helpful. HTML supports several elements for making lists. They
can be divided into two types of lists, i.e. Glossary lists and Regular lists.
Glossary lists are denoted by the element <DL>, while Regular lists are
denoted by the elements <UL>, <OL>, <MENU> and <DIR>.
Lists can be nested, i.e. you can have a list within a regular list, a regular
list within a glossary list and so on. List tags, like paragraph and
preformatted text are generally HTML containers that are capable of accepting
other container and empty tags within their boundaries. These list tags are
responsible for affecting the spacing and layout of text, not the emphasis, so
they are applied to groups of text and allow individual formatting tags within
them. Most HTML lists are created in the following form:
<LIST
type>
<ITEM> First item in list <ITEM> Second item in list <ITEM> Third item in list </LIST type>
Types of Lists Unordered List <UL> This
list (also known a* unnumbered list) is an indented list with a bullet symbol
in front of each list item. An unordered list starts with the <UL> tag.
Each list item starts with the <LI> tag. The list items are marked with
bullets (typically small black circles). The unordered list tag is a container
tag. The default bullet type for most Web browsers is a full disc (black
circle), but this can be adjusted using an HTML attribute called type.
Syntax <UL>............</UL> e-g-
<HTML>
<HEAD>
<TITLE>
Unordered List
</TITLE>
</HEAD>
<BODY>
<UL>
<LI>My first item on the
list.</LI>
<LI>My second item on the list.</LI>
<LI>My third item on the
list.</LI>
<LI>My fourth item on the i ist.</LI>
</UL>
</B0DY>
</HTML>
Output
Attribute
of Unordered List Tag Following is the attribute of <UL> tag: type This
attribute is used to change the bulleted symbol in a list. The attribute may
have a value of circle, disc or square.
Syntax
<UL type="vaiue”>
HTML Unordered List Types Value
Value Description Square Use black square bullet
(■) Disc Use solid circle bullet (•) Circle Use a
hollow bullet (°)
Here, we are using <UL> HTML code in the
below example and we get various output as follows:
<UL type=“square”> <UL type=“disc”> <UL type=“circle”>
HTML Unordered List Types Output
Square
|
Disc
|
Circle
|
■ Rose
|
• Rose
|
o Rose
|
■ Lotus
|
• Lotus
|
° Lotus
|
■ Lily
|
• Lily
|
o Lily
|
Ordered List <OL> This list starts with
the <OL> tag. Each list item starts with the <LI> tag. The list
items are marked with numbers. The ordered list tag is a container tag which is
used for numbered lists. By default, the numbering will be 1, 2, 3 … . You can
also adjust the numbering using type attribute.
Syntax
<0L>.....</0L>
e.g.
<HTML>
<HEAD>
<TITLE> Ordered List </TITLE>
</HEAD>
<B0DY>
<0L> <LI> Rose
</LI>
<LI> Lotus </LI>
<LI> Lily </LI>
</0L>
</B0DY>
</HTML>
Output
Attributes of Ordered List Tag Following are the
attributes of Ordered list: type The numbering of an HTML list can be changed
to letters or roman numerals by the type attribute.
Syntax <OL type=“value”>
HTML Ordered List Types Value
Value Description 1 The default, uses arabic
numerals I Uses uppercase roman numerals I Uses lowercase roman numerals A Uses
uppercase letters a Uses lowercase letters
Here, we are using <OL> HTML code in the
below example and we get various output as follows:
<OL
type=“a”> <OL type=“A”> <OL type=“i”> <OL type=“I”>
HTML Ordered List Types Output
Lowercase roman numerals Uppercase roman
numerals i. Rose I. Rose ii. Lotus II. Lotus iii. Lily III. Lily Lowercase
letters Uppercase letters
a.Rose A. Rose
b.Lotus B.Lotus
c.Lily C. Lily
start This attribute is used to change the
beginning value of an ordered list. Normally, the ordered list begins with 1.
It lets you further customise an HTML ordered list by setting a new starting
digit for the ordered list element.
Syntax
<0L start=“value” type = “value”>
e.g.
<HTML>
<HEAD>
<TITLE>
Ordered List with type attribute
</TITLE>
</HEAD>
<B0DY>
<0L start=‘T" type=“l” >
<LI> Rose </LI>
<LI> Lotus </LI>
<LI> Lily </LI>
</OL>
</BODY>
</HTML>
Output
Definition List This is a list of items, with
a description of each item. HTML definition lists (<DL>) are indented
list without any bullet symbol or any number in front of each item. This list
elements have a unique array of tags and elements; the resulting lists are
similar to those you would see in a dictionary.
Tags used in definition lists are as follows:
1. <DL> Opening tag that detines the start
of the list. <DT> List item that defines the definition term.
<DD> Definition of the list item.
2. </DL> Closing tag that defines the end of the list.
The terms DL, DT and DD stand for definition
list, definition term and definition description.
e.g.
<HTML>
<HEAD>
<TITLE>
Definition List
</TITLE>
</HEAD>
<B0DY>
<DL> <DTXB> Fromage
<B>
<DD> French word for cheese
</DTXB> Voiture </B>
<DD> French word for car </DL>
</B0DY>
</HTML>
Output
Nested List List can be nested that means one
list can be placed inside another. In the nested list, one or more items can
contain sub-items.
e-g-
<HTML>
<HEAD>
<TITLE>
Nested List </TITLE>
</HEAD>
<B0DY>
<UL>
<LI> Fruits </LI> <0L type=“l”>
<LI> Mango </LI>
<LI> Apple </LI>
</0L>
<LI> Vegetables </LI>
<0L type=“l”>
<LI> Onion </LI>
<LI> Tomato </LI>
</0L>
</UL>
</B0DY>
</HTML>
Output
Comments
Post a Comment