ARMY PUBLIC SCHOOL BABINA
CLASS – X COMPUTER APPLICATION
CHAPTER -3 BASIC HTML ELEMENTS
HTML (Hyper text Markup Language)
HTML is a markup language , used to define the layout
and attributes of a world wide web document as well
as to create links between web page.
HTML Elements and Tags
HTML written in the form of tags. A tags refers to
string enclosed within angular brackets < and >
HTML are pre defined and are not case sensitive.
All the HTML tags are typed inside the angular
brackets (< and >) and the text between these
brackets are called elements.
The opening Tags are written with in the less than
< and greater than > assign.
The closing tags are written within the < and > sign
with a forward (/) appended before the name of
the tag.
For Example :
<html> -------- </html>
1
Container Tags
This type of HTML elements always wraps around
text or graphics and comes in a set with an
opening as well as a closing tags.
For Example
<html>---------------</html>
<head>-------------------</head>
<title>---------------------</title>
Empty Element
On the other hand , the empty element are stand
alone tag i.e empty tags do not have to be
wrapped around copy and do not require a closing
tag.
For Example :
<hr>
<br>
---------------------------------<br>----------------<br>
HTML Structure
An HTML document is a combination of various
tags , which define the structure and appearance
of the web page . The basic structure of HTML
documents consist of the HTML , head, title, body
2
elements These four basic structure are always
present in every HTML documents .
The most code you will use for any page you make,
is shown below.
<html>
<head>
<title> <!—This section is for the title and technical
info of the page>
</title>
</head>
<Body>
<!—This section is you for all that you want to
show on the page >
</body>
</html>
Create and saving an HTML document.
Step 1 – Open notepad by clicking and start-All
Program-Accessories – Notepad
Step 2– Type the HTML document in notepad
<html>
<head>
<title> <!—This section is for the title and technical
info of the page>
</title>
3
</head>
<Body>
<!—This section is you for all that you want to
show on the page >
</body>
</html>
Step3 – To save the document click at file menu
save as command.
Step -4 To save dialog box will appear on the
screen.
Filename.html
Attributes of body tag
1. Background :- The background attribute
specifies a background image for a document.
HTML support various graphics format such as
.gif , .jpg etc.
Syntax :
<html>
<body background = “baby.jpg”>
</body>
</html>
4
2. Text : The text attribute specifies the color of
the text in a document.
For example :
<html>
<body text =”blue”>
</body>
</html>
BGCOLOR :
The bgcolor attribute specifies the background
color of a document.
For Example :
<html>
<body bgcolor =”red”>
</body>
</html>
Link : The link attribute specifies the default
color of unvisited link in a document. The
default color of link attribute is blue.
For Example
5
<html>
<body link = “Yellow”>
</body>
</html>
Alink – The alink attribute specifics the color of
an active link in a document (a link is activated
when it the click). The default color of a link
attribute is Red.
For Example
<html>
<body alink = “blue”>
</body>
</html>
Vlink : The vlink attribute specifies the color of
visited link in a document . The default color of
vlink attribute in purple.
For Example :
<html>
<body vlink = “blue”>
</body>
</html>
6
Topmargin : Set a margin along the top of your
body element.
<html>
<body topmargin=”50”>
</body>
</html>
<html>
<body leftmargin=”50”>
</body>
</html>
<html>
<body rightmargin=”50”>
</body>
</html>
<html>
<body Bottommargin=”50”>
</body>
</html>
7
Font Tag
The <font> tag specifies the fon face , font size
and font color of text. The <font> tag provides
real functionality by itself but with the help of a
few attributes, this tag is used to change the
style , size and color of HTML tags, text
element.. The size, color and face attributes can
all be used at once of individually, providing user
and the ability to create dynamic font style for
any HTML element.
Attributes of Fonts
Size : The size attribute specifies the size of the
text inside a <font> element. The range of
accepted values goes from the 1- the smallest,
to 7- the largest.
For Example
<html>
<body>
<font size = “3”>
This is the default size.
</font>
</body>
</html>
FACE :
8
The face attribute specifies the font name of
the text inside a font element.
For Example
<html>
<body>
<font face = “Arial”> This is some text !
</font>
</body>
</html>
COLOR
The color attribute specifies the color of the text
inside a font element.
For example
<html>
<body>
<font color = “red”> This is some text !
</font>
</body>
</html>
9
Center <center> tag
The <center> tag is used to centralized the
segment of text to be display on browser
window.
For Example
<html>
<body>
<Center>
This is some text !
</center>
</body>
</html>
Comment <!--------) The comment tag is used to
insert comments in the source code .
Comments are not displayed in the browser
windows.
For Example
<html>
<body>
<!->
This is some text !
</center>
</body>
</html>
1
0
Heading Tag
In HTML, There are heading tags which help to
display text as some heading. Heading element
can be used to give the section heading . There
are six level of heading ranging from
<h1>……<h6>.
For Example
<html>
<body>
<h1> Level 1 heading line </h1>
<h2> Level 1 heading line </h2>
<h3> Level 1 heading line </h3>
<h4> Level 1 heading line </h4>
<h5> Level 1 heading line </h5>
<h6> Level 1 heading line </h6>
1
1
Text Formatting Using <P> and <BR> Tags
First , there are some special rules for text . The
browser does not recognize return tab or even
more then one space between letter. You must
tell it when to go to the next line .
For Example
To display text with no line space or paragraph
breaks.
<htm>
<head>
<title> Text with no break</title>
<body>
Hello ! Welcome to my personal webpage . I
hope you like it.
I’ am a student at DPS delhi, studying in class X, I
grew up in Benglore , and did my class VIII from
there itself.
This is my first attempt at a web page. Enjoy!
</body>
</html>
1
2
Break Lines - <br> - Paragraph correctly , you must put
in special markers, Unlike tag so far , these represent
single action that do not have a beginning or end .
They do not come in pairs. To simply end one line and
jump to the next using line break <br>.
For Example
To display text with line and paragraph breaks :
<html>
<head>
<title> Text with no break</title>
<body>
Hello ! Welcome to my personal webpage . I
hope you like it.
<p> I’ am a student at DPS delhi, studying in
class X,<br> I grew up in Benglore , and did my
class VIII from there itself.</p>
<p>This is my first attempt at a web page.
Enjoy!</p>
</body>
</html>
Changing Line paragraph Alignment – ALIGN
attribute.
1
3
The text that you type between <p> and </p> tags is
by default left alignment. To change its alignment
you can use ALIGN attribute of <p> tag.
<p align = alignment>
For Example :
To display paragraph in various alignment.
<html>
<head>
<title> Paragraph Alignment </title>
<body>
<p align = left> This paragraph is left alignment.
This paragraph is left aligned.</p>
<p align = right> This paragraph is left
alignment. This paragraph is left aligned.</p>
<p align=center> This paragraph is left
alignment. This paragraph is left aligned.</p>
</body>
</html>
Text Formatting with <BaseFont> and <Font>
BaseFont : The <BASEFONT> tag lets you define
the basic size for the font, the browser will use
to render normal document text i.e the text for
1
4
which no other font size setting has been
provided.
For Example :
1. To display text by changing base font size.
<html>
<head>
<title> BASE FONT </title>
<body>
This text is being display in default font size as
no Basefont size has been set as yet.
<BASEFONT size = 5>
This text has been font size 5.
<BASEFONT size = +2>
This text has relatively 40% bigger size than the
earlier one.
<BASEFONT size = -1>
This text has relatively 20% smaller size than earlier one.
</body>
</html>
The <FONT> Tag :
The <font> tag let you change the size , style
and color of text – It is generally used for
1
5
changing the appearance of a short segment
of text .
Example :
<font size = 7>
Q1. To display a paragraph in red color in
size 4 but its first letter should be of size 7 of
blue color :
<html>
<head>
<title> BASE FONT </title> </head>
<body>
<font size = 7 color = blue> U </font>
<font size = 4 color = red> sing the largest
font for the first character of a paragraph
makes for a crude from of illustrated
manyscript.
</font>
</body>
</html>
Changing Font Face – Face Attributes
You can also change font type of the text you are
displaying . This can by using face attribute. With
1
6
FACE attribute a list of font-names is provided ,
enclosed within quotes.
For Example :
To display text in particular font – type.
<html>
<head>
<title> FONT FACE</title>3.
<body>
<font size = 4 face = Broadway, Arial,
Albertus”>
The font face displayed by the browser
depends upon which fonts are available on
user’s system. <br></font>
The browser parses the list of font names,
one after the other , until it matches one
with a font name supported by the user’s
system.
</body>
</html>
1
7
Q] 1. HTML Programming
a) Write a HTML program to
design a form which should
allow to enter your
personal data
( Hint: make use of text field,
password field, e-mail, lists, radio
buttons, checkboxes, submit button)
b) Write html code to generate following
output.
Coffee
Tea
o Black Tea
o Green Tea
Milk
1
8
a) Write a HTML code to generate following output
b) Write a HTML code to generate following output
b) Create a web page of your college with following
specifications
Place your College name at the top of the page in
large text followed by address in smaller size Add
names of courses offered each in a different color,
style and typeface Add scrolling text with a message
of your choice Add college image at the bottom
1
9
Q] 1. HTML Programming
First Frame: Name and address
Second frame Third frame
Bulleted list of qualifications Links to favourite sites
Fourth frame Fifth frame Sixth frame
Scrolling message Blinking reminders Image
b) Create an html page with red background
with a message “warning” in large size blinking. Add
scrolling text “read the message” below it.
Q] 1. HTML Programming
a) Write a HTML code to generate following
output
▪ Maharashtra
o Pune
I. Dighi
II. Moshi
III. Shivajinagar
o Mumbai
2
0
Q] 1. HTML Programming
I. Santakruiz
II. Vikroli
III. Mumbra
b) Create an html page with 7 separate lines in
different colors. State color of each line in its text.
a) Create an html page with following specifications
Title should be about myCity Place your City
name at the top of the page in large text and in
blue color Add names of landmarks in your city each
in a different color, style and typeface One of the
landmark, your college name should be blinking .
Add scrolling text with a message of your choice
2
1
b) Create an html page with all the different text styles
(bold, italic and underlined) and its combinations on
separate lines. State style of each line in its text.
Design an html form to take the information of a
customer visiting a departmental store such as name,
contact phone no , preferred days of purchasing ,
favourite item ( to be selected from a list of items),
suggestions etc. One should provide button to Submit
as well as Reset the form contents.
22
b)
▪ Maharashtra
o Pune
IV. Dighi
V. Moshi
VI. Shivajinagar
o Mumbai
IV. Santakruiz
V. Vikroli
23
Create an html page with following specifications
Title should be about myCity
Place your City name at the top of the page in large text
and in blue color
Add names of landmarks in your city each in a different
color, style and typeface One of the landmark, your
college name should be blinking
Add scrolling text with a message
of your choice b)
Link other Sources = >https://www.youtube.com/watch?v=VVCQqeKZifI
OR
https://www.youtube.com/watch?v=ejF28j5J174
24
25
