HYPER TEXT MARKUP LANGUAGE
(HTML)
PART – II
SOME COMMONLY USED TAGS
0 < html> 0 <HEAD> 0 <TITLE> 0 <BODY>
0 <BASEFON 0 <Hn> 0 <B> 0 <U>
0 <I> 0 <BR> 0 <P> 0 <HR>
0 <FONT> 0 <IMG> 0 <CENTER> 0
<COMMENT>
<HTML>
Each HTML code should starts with the opening
<HTML> tag and ends with closing </HTML> tag.
These are markers for browsers to identify the spots
from where the code starts and ends. It indicates that
this webpage is developed in HTML. It is a Container
Tag. Within these marks is first the <HEAD> and then
the <BODY> section will be developed.
<HEAD>
All the information about the HTML document such as title, version of HTML etc.
are written between the opening <HEAD> and closing </HEAD> tags. It is a
Container Tag. It is important to note that the opening <HEAD> tag should always
appear after the opening <HTML> tag and closing </HEAD> tag should always
appear before the opening <BODY> tag.
For example : <HTML>
<HEAD>………………………… </HEAD>
<BODY>
……………………………………….
<TITLE>
One should write the <TITLE> tag in the <HEAD> section to specify the title of the
page. The title given should be placed between opening <TITLE> tag and closing
</TITLE> tag. The given title will appear in the Title Bar of the web browser
window. It is important to note that opening <TITLE> tag should appear after
opening < HEAD> tag and closing </TITLE> tag should appear before closing
</HEAD> tag. One should remember that (i) each HTML page must have a title,
(ii) the title must be short and descriptive and (iii) there should be only one pair
of <TITLE> and </TITLE> tags in each HTML code. It is a Container Tag.
For example : <HEAD><TITLE> FIRST HTML DOCUMENT </TITLE></HEAD>, the
title of the document which will be visible at browser’s title bar is FIRST HTML
DOCUMENT .
<BODY>
This is the most important part of entire HTML code. This section tells the browser
where to look for the actual content of the page. All the tags and related attributes that
are used from time to time are enclosed within opening <BODY> tag and closing
</BODY> tag. The opening <BODY> tag should always appear after the closing </HEAD>
tag and the closing </BODY> tag should always appear just before the closing </HTML>
tag. It is a Container Tag.
For example:
<HTML>
<HEAD><TITLE> ---------------------------</TITLE></HEAD>
<BODY>
---------------------------------------
---------------------------------------
</BODY>
</HTML>
ATTRIBUTES OF <BODY> TAG….. Cont.
✔ BGCOLOR : It changes the default white background colour of the webpage into specified
colour.
For example : <BODY BGCOLOR=“RED”>, the new background colour of the page will be
Red,
instead of default white colour.
✔ BACKGROUND : This attribute will help the user to get an image as background of the page
instead of default solid white background. If the image is too small in size, it will tiled. It is
to remember that BGCOLOR and BACKGROUND can not be used together with <BODY> tag.
For example : <BODY BACKGROUND=“Computer.jpg>, will help us to get Computer.jpg as
background image.
✔ TEXT : This attribute will enable the user to change the default font colour black to any
other specified font colour for the entire web page.
For example: <BODY TEXT= “RED>, will change the default font colour black into red for
the
entire web page.
ATTRIBUTES OF <BODY> TAG
✔ LINK : This attribute will enable the user to change the default link colour blue to any
other specified colour.
For example : <BODY LINK=“YELLOW”>, will change the default colour of link from
blue to
yellow.
✔ ALINK : It stands for ACTIVE LINK. The default active link colour is red. However, this
attribute enable the user to change the default active link colour from red to any other
specified solid colour.
For example : <BODY ALINK=“BLACK”>, the active link colour changes from default red
colour into black colour.
✔ VLINK : Using this attribute one can change the default colour of VISITED LINK from
purple into any other specified colour.
For example : <BODY VLINK= “GREEN>, will convert the default purple colour of VLINK
into
BOLD (<B>) and UNDERLINE (<U>)
BOLD :- Opening <B> and closing </B> tags are used to convert the text enclosed
within them as bold. It is a Container Tag.
For example : <B> BIRLA HIGH SCHOOL </B>, BIRLA HIGH SCHOOL is the text
which is enclosed within opening <B> and closing </B> tags, has appeared in
bold.
UNDERLINE :- In order to underline any text, that very text should be enclosed
within opening <U> and closing </U> tags. It is also a Container Tag.
For example : <U> BIRLA HIGH SCHOOL </U>, the given text BIRLA HIGH
SCHOOL
will be underlined.
ITALICS (<I>) and BREAK (<BR>)
ITALICS :- In order to convert any normal text into italics, the same text should be written within
opening <I> and closing </I> tags. It is a Container Tag.
For example : <I> BIRLA HIGH SCHOOL </I>, the given text BIRLA HIGH SCHOOL will be
converted
into italics.
BREAK :- <BR> tag is often used as line break tag. It is an empty tag. The line break tag <BR> forces
a
line break wherever it appears without leaving a vertical space. It functions like “ENTER” or
“RETURN” key in a word processing document. One can use this tag when making a list of items,
writing the lines of a poem etc.
For example : STAY AT HOME <BR> STAY SAFE <BR> STAY HEALTHY, will appear in three
different
lines, such as, STAY AT HOME
STAY SAFE
<BASEFONT>
It is an empty tag. Normally, one use it just after the opening <BODY> tag to change the default
font size, font style and font colour. It is important to note that default font size, font colour and
font style is 3, black and Times New Roman respectively. The different attributes are as follows :
✔ SIZE :- It can take any integer from 1 to 7. While size=1 means smallest size and size= 7 is the
largest.
For example : <BASEFONT SIZE=6>, will convert the default font size from 3 to 6 for the entire
page.
✔ FACE :- It helps us to change the default font style from Times New Roman to any other font
style as specified by the user for the entire page.
For example : <BASEFONT FACE=Calibri>, will convert the font style of the entire page into
Calibri
from Times New Roman.
✔ COLOR :- It will change the default font colour black into any other colour as defined by the
user.
HEADING <Hn>
There can be various levels of headings which are created by inserting the
heading level numbers within the tags, like : <Hn> Text to Appear In
Heading</Hn>, where n is any integer value from 1 to 6 identifying the heading
type or heading font size. Each heading level displays text using a different font
size. The higher the level, the smaller the number and more prominently the
heading is displayed. <H1> is the largest “heading” text command, whereas <H6>
is the smallest “heading” text command. It is a Container Tag. It has built in
break, so it is unnecessary to put <P> tag before a heading tag.
For example : <H1> COMPONENTS OF COMPUTER SYSTEM</H1>, is a heading
tag and the text “COMPONENTS OF COMPUTER SYSTEM” will be displayed in
largest heading size.
HORIZONTAL RULE (<HR>)…..Cont.
In order to draw any horizontal rule across the page we can use <HR> tag. It is an empty tag. The
<HR> tag inserts a straight line. The text that follows the <HR> tag appears in the next line below
the newly drawn rule. The different attributes are :
✔ SIZE :- It is given in pixels. It denotes the thickness or breadth of the horizontal line.
For Example : <HR SIZE=10>, will draw a straight line with thickness 10 pixels.
✔ WIDTH :- The value of this attribute is given either in pixels or as a percentage of the
document’s width. It will determine the length of the Horizontal Rule.
For Example :- <HR SIZE=10 WIDTH=75%>, will draw a horizontal rule from left to right whose
thickness will be 10 pixel and cover up 75% of the document horizontally.
✔ COLOR :- Colour of the horizontal rule can also be set using COLOR attribute with <HR> tag in
Microsoft Explorer only. The default colour of the rule is black.
For example : <HR COLOR=RED>, will help us to generate a red coloured horizontal rule across
the
page.
HORIZONTAL RULE (<HR>)
✔ ALIGN :- The default alignment of the Horizontal Rule is from left to right. However, by
using the attribute ALIGN along with the value either LEFT or RIGHT or CENTER , we
can adjust the alignment of the horizontal line.
For example: <HR COLOR= RED WIDTH=50% ALIGN=CENTER>, will draw a red
horizontal
line at the certre position covering 50% of the document horizontally.
✔ NOSHADE :- By default the horizontal rule that we get will be a shaded one, if we wish
to create a solid line with no shading, use this attribute.
So, we can say that <HR SIZE=10 COLOR=RED WIDTH=80% ALIGN=CENTER NOSHADE>,
will display a solid red horizontal rule with thickness 10 pixels, with length covering 80%
of the document horizontally and is aligned in centre on the page.
PARAGRAPH (<P>)
<P> tag is used to create a paragraph. It can be used as Empty tag as well as Container Tag as the
situation demands. Whenever the browser encounters the <P> tag always insert a blank vertical
space and starts a new paragraph. It is simply pressing “Return” or “Enter” key twice before
starting a new paragraph. By default a left alignment is maintained. However, by using the
attribute ALIGN along with the values either “CENTER” or “RIGHT” we can change the default
alignment of the text which is enclosed within opening <P> and closing </P> tags.
For example: STAY AT HOME, STAY SAFE AND HEALTHY <P ALIGN=“RIGHT”>STAY AT HOME, STAY
SAFE AND HEALTHY</P> <P ALIGN=“CENTER”>STAY AT HOME, STAY SAFE AND HEALTHY</P> will
appear as
STAY AT HOME, STAY SAFE AND HEALTHY
STAY AT HOME, STAY SAFE AND HEALTHY
STAY AT HOME, STAY SAFE AND HEALTHY
<CENTER>
Normally everything is left aligned. However, to put anything at
horizontally centre of the line we use opening <CENTER> and closing
</CENTER> tags. It is a container tag. Anything enclosed within the
opening <CENTER> and closing </CENTER> will appear at the centre
position.
For example : BIRLA HIGH SCHOOL<BR><CENTER>BIRLA HIGH
SCHOOL</CENTER> will appear as
BIRLA HIGH SCHOOL
BIRLA HIGH SCHOOL
<COMMENT>
One can insert comments in HTML code. These comments are not displayed on the web
page, but are very important for information that might be of use to anyone who looks
at the HTML code at any point of time. Comments prove to be of great help, if any one
need to update complicated webpages, which were developed long ago. A comment tag
can be placed anywhere and for any number of time in the HTML code and the browser
will ignore it every time it encounters the comment tag. Comments can be written within
opening <COMMENT> and closing </COMMENT> tags. It is type of Container Tag. It can
also be written as <!- Comment Text ->.
For Example : <COMMENT> any meaningful and simple but short descriptive text
</COMMENT>
or
<!- any meaningful and simple but short descriptive text ->
<FONT> …….. Cont.
In order to change the default font size, font style and font colour of any particular section of the
content of the web page we use opening <FONT> and closing </FONT> tags along with the required
attribute. The portion of the text which is enclosed within the opening <FONT> tag and closing
</FONT> tag will be different from rest of the content as desired by the user. It can be used
anywhere for any number of time depending on the requirement of the user. The attributes are as
follows :
✔ SIZE :- One can use any integer value from 1 to 7 as the value of this attribute. While SIZE=1 is
the smallest, SIZE=7 will produce the largest possible font size. However, one may also use
SIZE=+3 or SIZE= -2 , which tells the web browser to display the text 3 sizes bigger or 2 sizes
smaller than the default size. However, in no case neither it will be larger than 7 or smaller than
1, otherwise the browser will act accordingly.
For Example : <FONT SIZE=4> BIRLA HIGH SCHOOL</FONT>, will display the text BIRLA HIGH
SCHOOL
in size 4.
<FONT>
✔ FACE :- One can change the font face or font style from the default Times New Roman to some
other specified font face or style by using the FACE attribute of the <FONT> tag. FACE attribute
can the value as a list of one or more font names each separated by comma and enclosed
within double quotes. The text will be displayed in the default font, if the user does not have
the desired font on his system.
For example : <FONT FACE=“Impact,Helvetica,Arial”>BIRLA HIGH SCHOOL</FONT>, the text
BIRLA
HIGH SCHOOL will be displayed preferably in Impact or in Helvetica or in Arial font depending
on
availability.
✔ COLOR :- As against the default font colour black, colour of the selected text can be changed
into any specific colour using the COLOR attribute. This attribute can take any colour name or
RGB code as its value.
For example : <FONT COLOR=RED>BIRLA HIGH SCHOOL</FONT>, here the text BIRLA HIGH
SCHOOL
will be displayed in red colour.
IMAGE(<IMG>)……. Cont.
Most web browsers accepts images to be displayed with HTML files. It can be done by using
<IMG> tag, which is an Empty Tag, along with SRC attribute. For instance, <IMG
SRC=“image.ext”>, where “image.ext” is the name of the image file on the computer, SRC stands
for Source. It is better to have image and the HTML file at the same location. The default
appearance of the image is at left of the page, however, it is subject to change. Most of the
browsers support the image files with extension .jpg, .png, .bmp and .gif. The different attributes
of <IMG> tag are :
✔ SRC :- The full form is SOURCE. It specifies the URL or address of the image file to be displayed.
For example : <IMG SRC=“Computer.jpg”>, will display the image file whose file name is Computer.jpg.
✔ ALT :- The full form is ALTERNATE. It provides a alternate text for an image. It is particularly
important while browsers do not support images or many users may have such a slow
connection that they may choose not to view images at all, rather than wait endlessly. The ALT
attribute of <IMG> tag lets such users see a descriptive string of text in place of an image. The
ALT attribute replaces the image placeholder with a text string which can be the name of the
image or any other text. When the visitor points at the image, the text specified with the ALT
attribute will be displayed as a tool tip.
For Example: <IMG SRC=“Computer.jpg” ALT=“Computer”>
IMAGE (<IMG>)….. Cont.
✔ ALIGN :- This attribute can take either “top” or “middle” or “bottom” or “right” as its value. While
the values “top” , “middle” and “bottom” deal with alignment of the image with the text, the value
“right” aligns the image to the right of the page. However, it is important to note that in order to
position the image at the “Center” one should us the Container Tags <CENTER> and </CENTER>.
For example: <CENTER><IMG SRC=“Computer.jpg”></CENTER>, will place the image
“Computer.jpg” at
Centre location, while <IMG SRC=“Computer.jpg ALIGN=“Right”>, will place the image at right hand
side.
✔ HEIGHT & WIDTH :- These are the two attributes which enable the users to specify the size of the
image which is to be attached in the web page. Normally, the web browser has to determine the
dimension of the image as it reads it. The user’s browser is able to load the web page much faster if
the image dimensions are specified. Reading information from there, the user’s browser can
straightaway leave that much of space for the image and can load the text around those spaces.
With the text appearing before the images, the reader has something to read as the image is
downloading. It is to remember that specifying dimension smaller than the size of the image does
not save download time. The browser still downloads the full image. The values of the attributes
HEIGHT and WIDTH should be given in pixels.
For example : <IMG SRC=“Computer.jpg” HEIGHT=80 WIDTH=100> , will change the size of the
IMAGE (<IMG>)
✔ BORDER:- One can put a border around an image by using BORDER attribute.
<IMG SRC=“Computer.jpg” BORDER=n>, where n is the thickness of the border
in pixels.
For example: <IMG SRC=“Computer.jpg” BORDER=5>, will put a border of size
5
pixels around the image Computer.jpg.
✔ HSPACE & VSPACE:- These are the attributes which enable the user to specify
how much white space to left in between the border of the image and the text.
While HSPACE specifies the amount of white space on the left and right side of
the image, VSPACE specifies the amount white space at top and bottom of the
image. The values of the attributes will be given in pixels.
For example : <IMG SRC=“Computer.jpg” BORDER=4 VSPACE=3 HSPACE=5>,
denotes that there will be 3 pixels white space at top and bottom while 5
pixels
white space at left and right of the image which is surrounded by a border of
