4.
HTML (Hypertext Markup Language)
Introduction to HTML: HTML stands for Hypertext Markup Language. Hypertext is an ordinary text that
has been dressed up with extra features such as formatting, images, multimedia and links to other document.
Markup is the process of taking ordinary text and adding extra symbols. Each of the symbols used for
markup in html is command that tells the browser how to display the text. Html is a kind of computer
programming language, not really a programming language, but it is a markup language.
Advantages of HTML:
No special software except text editor is required to create HTML documents.
HTML document can be created on any hardware platform anywhere.
It is a tagged language and each tag specified certain task.
Finding error is easy in HTML, if something is not working.
HTML will not cost us anything for its use.
We can work independently and we need not to worry about our editing programs.
Learning HTML is very simple than any other programming language.
Disadvantages /Limitations of HTML:
HTML is not a programming language in real sense.
It is not even possible to perform simple calculations.
It cannot be used to display even date.
It is not possible to build interactive web pages using HTML.
The web-page developed by using HTML cannot behave like an application.
The web-page developed by using HTML does not have their own interface.
There must be hyperlinks provided in HTML but for that we need a trip to server at each step.
HTML Tags: Tags in HTML contain one keyword or abbreviation known as “element” and a pair of angle
brackets within which the keyword is enclosed. All HTML elements have at least one opening tag and most
of them also have an end or closing tag. It takes following form as: <element_name> space for text
</element_name> here closing tag always start with forward slash.
HTML tags are of two types as:
1) Container Tag: Tag that include both opening as well as closing tag. E.g. <body>…..</body>
2) Empty tag: Tag that has only opening tag but no closing lag. E.g. <br>
Structure of HTML page:
<HTML>
<HEAD>
<TITLE> Title of the document </TITLE>
</HEAD>
<BODY>
Actual document
</BODY>
</HTML>
Contact No 9011249993 Page No 1
1) <HTML> tag: The first tag of every HTML document. It indicates that the contents of file is in
HTML. It is container tag hence has opening and closing tag. All other tags must be written inside
the <HTML>………. </HTML> tag.
2) <HEAD> tag: It defines the header area of page which is not played within the page itself in the
browser. The <TITLE> tag placed within <HEAD> tag. The </HEAD> tag ends the header area
of the page.
3) <TITLE> tag: The text enclosed within start tag <TITLE> and end tag </TITLE> tells about
document and gives title to HTML web page. It is displayed in the title bar of browser.
4) <BODY> tag: Other than <HTML>, <HEAD> and <TITLE> tag all other tags and text of HTML
page is placed within <BODY> tag. This tag specifies body of HTML page.
Tags:
1) <BODY> tag:
<BODY> tag is used to display the actual document contents, means the contents which
you actually want to show should be enclosed within <BODY> tag.
It has two attributes as: bgcolor, background.
Bgcolor – used to change background color
Background – used to change current background with desire background images.
NOTE: Attribute bgcolor and background can never be used at a time.
2) Heading and sub heading tag: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Headings and sub-heading styles are normally used to give headings and sub-headings.
Heading tags are h1, h2, h3, h4, h5 & h6. h1 is the largest one where as h6 is the smallest one. These
are paired tag as they has opening as well as closing tags.
For example: <h1> Heading level 1 </h1>
<h2> Heading level 2 </h2>
<h3> Heading level 3 </h3>
<h4> Heading level 4 </h4>
<h5> Heading level 5 </h5>
<h6> Heading level 6 </h6>
The output of the above example will look like this:
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
3) <FONT> tag:
<FONT> tag is used to change the font-face (type) in the web page. It has some attributes as
face, size & color.
Face attribute is used to change the type-face (font-type) of web browser. Some web-safe
fonts are Arial, Verdana, Times New Roman, Courier New, Comic Sans MS etc.
Size attribute is used to change the size of font of web-browser.
Color attribute is used to specify color of font of web-browser.
Contact No 9011249993 Page No 2
4) <B> tag:
It is a bold tag. The text enclosed within <B> and </B> tag will be displayed in bold letters
on web page.
For example: <B> This will appear in bold text </B>
The output will look like this: This will appear in bold text
5) <STRONG> tag:
It is a strong tag. The text enclosed within <STRONG> and </STRONG> tag will be
displayed in bold letters on web page. This tag is used to create strong emphasis.
The basic difference between <B> tag (bold) and <STRONG> tag is that text to speech
reader’s gives strong pronunciation to the text within strong tag, while no such emphasis is given to
text within bold tags.
6) <I> tag:
It is italic tag. The text enclosed within <I> and </I> tag will be displayed in italic font style
text on web page.
For example: <I> This will appear in italic font style </I>
The output will look like this: This will appear in italic font style
7) <EM> tag:
It is emphasis tag. The text enclosed within <EM> and </EM> tag will be displayed in italics
on web page. This tag is used to emphasize the text.
The basic difference between <I> tag (italic) and <EM> tag (emphasis) is that text to speech
browsers gives spoken emphasis to the text within emphasis tag, while no such emphasis is given
to text within italic tags.
8) <U> tag:
It is underline tag. The text will be underlined enclosed within <U> and </U> tag.
For example: <U> This text will be underlined </U>
The output will look like this: This text will be underlined
9) <STRIKE> tag:
It is strike tag. This tag is used to strike out the text means a line is drawn through the middle
of the text.
For example: <STRIKE> Computer Science </STRIKE>
The output will look like this: Computer Science
10) <SUB> tag:
It is subscript tag. The text enclosed within <sub> and </sub> is displayed in subscript form.
For example: H<SUB>2 </SUB>O
The output will look like this: H2O
11) <SUP> tag:
It is superscript tag. The text enclosed within <sup> and </sup> is displayed in superscript form.
For example: M <SUP> 2 </SUP> c
The output will look like this: M2c
Contact No 9011249993 Page No 3
12) <br> tag:
It is break tag. It insert line break into a text flow. It tells the browser to wrap the text that
follows onto a new line without inserting any extra space between the lines.
For example: Anil Ambani <br> Andheri <br> Mumbai
The output will look like this: Anil Ambani
Andheri
Mumbai
13) <marquee> tag:
It is used for scrolling the text and images on screen from right to left. There are several
attributes associated with <marquee> such as BGCOLOR, HEIGHT and WIDTH.
For example: <marquee> Html is awesome </marquee>
14) <P> tag:
<P> tag is used for creating paragraph of texts for html web page. It has one optional attribute
called as align which can be used to specify where the text will appear on screen.
<P align = “left”>: Left alignment like normal text.
<P align = “right”>: Text is aligned to right margin, but not justified to left.
<P align = “center”>: Text is centered
15) <HR> tag:
It is called as horizontal rule tag. A web page can be divided into separate sections by using
<HR> tag. This tag is mostly used for decorative purposes.
16) <BIG> tag:
It is big tag. The text enclosed within <BIG> and </BIG> tag will be displayed in bigger
font. <BIG> tag has same effect as <FONT SIZE = “+1”>, if already the size is bigger, tag is
ignored.
For example: <BIG> Swami Vivekananda <BIG>
The output will look like this: Swami Vivekananda
17) <SMALL> tag:
It is small tag. The text enclosed within <SMALL> and </SMALL> tag will be displayed in
smaller font. <SMALL> tag has same effect as <FONT SIZE = “-1”>, if already the size is smaller,
tag is ignored.
For example: <SMALL> Swami Vivekananda <SMALL>
The output will look like this: Swami Vivekananda
18) <PRE> tag:
The <pre> tag defines preformatted text. Text enclosed within start tag <pre> and end tag
</pre> is displayed in a fixed width font and the text preserves both spaces and line breaks. The text
will be displayed exactly as written in the HTML code. It is used for columnar lists.
For example : <pre> Name Section Result </pre>,
The output will look like this: Name Section Result
Contact No 9011249993 Page No 4
19) <A> tag:
<A> is anchor tag. It is used to create links (or hyperlinks). Links points to different files on
the web. The text or image enclosed within <A> and </A> tag is a link. This link is clickable in a
graphical browser. With most browsers, text within the anchor tags is displayed in a different color
and underlined.
For example: <A HREF = [Link] Xerox Corporation </A>
The opening <A> tag includes hypertext reference (HREF) that specifies the place you are
linking to i.e. the destination URL or the name of file.
20) <ADDRESS> tag:
It is address tag which is used to display web page’s information such as page URL (uniform
resource locator), author name, and date of last version and so on, in italics font in your browser.
The text enclosed within address tag is recognized by search engines as your address information.
URL is address for each web page. It is unique for each page. (http – hypertext transfer protocol)
For example: <ADDRESS> [Link] </ADDRESS>
21) <IMG> tag:
It is a image tag. It is used to insert graphic images, pictures, photographs in the body of web
page. Images are sometime referred to as inline images because the images are inserted within a
line of body text. To make an image a separate paragraph it is enclosed within paragraph elements.
For example: <p>
<IMG SRC = “C:\My documents\[Link]”> </IMG>
<p>
Attributes used in IMG tag are SRC and ALT. SRC attribute includes appropriate path of
image file for searching. For any browser if it is not possible displaying image, the alternate text
contained inside the ALT attribute is displayed.
For example: <IMG SRC = “[Link]” ALT = “Mickey Mouse”>
If you use this tag, the browser can display the words “Mickey Mouse” instead of image.
For inline images, ALIGN attribute has three values which are ALIGN = “TOP”, ALIGN
= “MIDDLE” and ALIGN = “BOTTOM”. The default behavior is ALIGN = “BOTTOM” which
means that the bottom of an image will align with the bottom of the line of text.
For floating image i.e. it causes text to wrap around the image, ALIGN attribute has two
values which are ALIGN = “LEFT” and ALIGN = “RIGHT”
To indicate exact size and border of image WIDTH, HEIGHT and BORDER attribute is
used. For example: <IMG SRC = “C:\ My documents\[Link]” ALIGN = “MIDDLE WIDTH
= “20” HEIGHT = “100” BORDER = “2”> Greeting card </IMG>
Image format: GIF stands for Graphic Interchange Format. GIF is good for line drawings, icons,
computer generated images, cartoons or any images with big areas of solid colors. GIF images can
contain only 256 colors.
JPEG stands for Joint Photographic Experts Group. It is compact format, designed for
photographs and other images. JPEG images can allow 16 million different colors in an image.
PNG stands for Portable Network Graphics. PNG are superior to GIF. PNG are smaller and
have more colors.
List tags <LI>: With the help of list tag we list the items and elements. There are three main types of list
tags: ordered lists, unordered lists and definition lists.
Contact No 9011249993 Page No 5
1) Ordered list <OL>: An ordered list is used when the sequence of the list of items is important. Ordered
list are numbered in some fashion. They can be preceded by Arabic numbers, Upper case or Lower case
Roman numbers, upper or lower case alphanumeric characters. The tags for an ordered list are <ol> (starting
tag) and </ol> (ending tag) and <li> tag is used to indicate actual list element. The attributes that can be
used with ordered list are:
Type = “1” (Arabic numbers)
Type = “a” (lowercase alphanumeric)
Type = “A” (uppercase alphanumeric)
Type = “i” (lowercase roman number)
Type = “I” (uppercase roman number)
The default appearance for the list is with Arabic numbers.
For example: <html>
<body>
<ol type = “1”>
<li> Mango
<li> Apple
</ol>
<ol type = “A”>
<li> Watermelon
<li> Pineapple
</ol>
<ol type = “I”>
<li> Orange
</ol>
</body>
</html>
The output for the above code will be:
1. Mango
2. Apple
A. Watermelon
B. Pineapple
I. Orange
2) Unordered list <UL>: It is list of items that have no particular order or sequence. Unordered list require
(start) <ul> and </ul> (end) tag. The <li> tag is used to indicate actual list items. Unordered lists are bulleted
lists. They can be preceded by one of the several bullet styles like a closed circle, open circle or a square.
The CIRCLE attribute value is used for hollow circle, the DISC type creates a solid bullets while
SQUARE value creates solid block. The default appearance for a list is with disc.
For example: <html>
<body>
<ul type = “disc”>
<li> Mango
<li> Apple
</ul>
<ul type = “circle”>
<li> Watermelon
Contact No 9011249993 Page No 6
<li> Pineapple
</ul>
<ul type = “square”>
<li> Orange
</ul>
</body>
</html>
The output for the above code will be:
Mango
Apple
o Watermelon
o Pineapple
Orange
3) Definition list <DL>: This list is used to write definitions or mostly informative text. Two tags are used
for that: <dt> = definition term and <dd> = definition data
For example: <html>
<body>
<dl>
<dt> Computer
<dd> It is a machine which perform logical and arithmetical job very quickly.
</dl>
</body>
</html>
The output for the above code will be:
Computer
It is a machine which perform logical and arithmetical job very quickly.
Table tags: <table>………. </table>
A table consists of rows and columns (combined call a cell). A row is created using <tr>……. </tr>
tag while the data in cells can be inserted by using <th> (table heading) and <td> (table data) tag. The
attributes used with table tags are:
1) Border: to draw border of table.
For example: <table border = “5”>
2) Width: Shows how much of the width of screen the table occupies.
For example: <table width = “50%”>
3) Cellpadding: Decides the amount of spacing between each cell border and the actual content of
cell.
For example: <table cellpadding = “10”>
4) Cellspacing: Creates space between the cells.
For example: <table cellspacing = “5”>
Some important table tags are:
1) <CAPTION> tag: Caption tag is used to give heading to table. Alignment attribute is used to create
caption on top, bottom, left and right of table borders.
2) <TR> tag: It is a table row tag which is used to create a horizontal row of cells and contains table
headings or table data. Each use of <tr> tag create a new table row. Many attributes can be used
with <tr> tag such as ALIGN, BGCOLOR, VALIGN, FONT, etc.
Contact No 9011249993 Page No 7
3) <TD> tag: It is a table data tag which is used to enter a data in each individual cell. The number of
cells in a row determines the number of columns. ALIGN attribute can be used with <td> tag. By
default text in this cell is aligned left and centered vertically.
4) <TH> tag: It is a table heading tag which is used to enter a data in each individual cell. The data
entered using <th> tag appears more bold and acts as heading. ALIGN attribute can be used with
<th> tag. By default text in this cell is bold and aligned centered.
Colspan and Rowspan Attributes: Colspan and Rowspan attributes that can be used with <td> and <th>
tags. There may be a situation appear in which cell of table to span more than one row or column. For such
situations Colspan and Rowspan attributes may be used.
The Colspan attribute can be used to make cells contents merge with another cell (this spans more
than one column).
The Rowspan attribute can be used to make cells contents merge with another cell (this spans more
than one row).
1. Write HTML code for the following output:
Computer
A. Hardware
i. Printer
ii. Monitor
B. Software
a) C++
Arrays
Pointers
b) Java
HTML Code:
<HTML>
<body>
<UL type = “square”>
<LI>Computer
<OL type=”A” start=’1’>
<LI> Hardware
<OL type=”i” start=’1’>
<LI>Printer
<LI>Monitor
</OL>
<LI>software
<OL type=”i” start=’1’>
<LI > C++
<UL type = “disk”>
<LI> array
<LI> pointers
</UL>
<LI>Java
</OL>
</UL>
Contact No 9011249993 Page No 8
</Body>
</HTML>
2. Write HTML code for the following table:
C++
GAVA HTML
VB C PASCAL
<html>
<body>
<table collapsing = “20” collapsing = “5” border = “1”>
<tr>
<td> </td>
<td> </td>
<td align = center> C++ </td>
</tr>
<tr>
<td> </td>
<td align = center> java </td>
<td align = center> HTML </td>
</tr>
<tr>
<td align = center> VB </td>
<td align = center> C </td>
<td align = center> PASCAL </td>
</tr>
</table>
</body>
</html>
3. Write exact output of the following HTML code:
<HTML>
<BODY>
<OL start = “10”>
<LI> English
<LI> Second language
</OL>
<OL type = “a”
<LI> compulsory
<LI> optional
Contact No 9011249993 Page No 9
</OL>
<OL type = “square”>
<LI> Science
<LI> Arts
<LI> Commerce
</UL>
</body>
</HTML>
Output: 10. English
11. Second language
a. compulsory
b. optional
Science
Arts
Commerce
4. Write HTML code for the following output:
Cricket Analysis
Country Played Won Lose
INDIA 30 27 03
PAKISTAN 30 03 27
Ans: <HTML>
<HEAD>
<title> Cricket Analysis </title>
</HEAD>
<BODY> <table>
<TR>
<th> country </td>
<td> played </td>
<td> won </td>
<td> lose </td>
</tr>
<tr>
<td> India </td>
<td> 30 </td>
<td> 27 </td>
<td> 03 </td>
</tr>
<tr>
<td> Pakistan </td>
<td> 30 </td>
<td> 03 </td>
<td> 27 </td>
</tr>
Contact No 9011249993 Page No 10
</table>
</Body>
</HTML>
5. Write the output of the following HTML code:
<HTML>
<BODY>
<UL type = “circle”>
<LI> One
<LI> Two
<LI> Three </ul>
<UL type = “square”>
<LI> Monday
<LI> Tuesday
<LI> Wednesday
</ul>
</Body>
</HTML>
Ans:
One
Two
Three
Monday
Tuesday
Wednesday
6. Write a code in HTML for the following table:
Computer Paper I Paper II Total
Science 100 100 200
Ans: <HTML>
<HEAD>
<title> <Computer Science </title>
</HEAD>
<BODY> <table>
<table border = “1” collapsing = “15”>
<tr>
<td rowspan = “2” > Computer Science </td>
<td> paper-I </td>
<td> paper-II </td>
<td> total </td>
</tr>
<tr>
<td> 100 </td>
Contact No 9011249993 Page No 11
<td> 100 </td>
<td> 200 </td>
</tr>
</table>
</body>
</HTML>
7. Write the exact output of the following HTML code with font specification in bracket.
<HTML>
<title> Introduction </title>
<body>
<h1><b> computer science </b></h1>
<hr>
<u> Paper-I </u>
<hr>
<u> Paper-II </u>
</body>
</HTML>
Ans:
Introduction - (title on title bar)
Computer Science - (H1 heading, bold)
Paper - I - underline
Paper –II - underline
8. Write a HTML code to produce the following output:
Years Students
Boys Girls Total
2011 30 20 50
2012 45 35 80
2013 55 75 130
2014 75 95 170
<HTML>
<BODY>
<table border = “2” collapsing = “10” collapsing = “2”>
<tr>
<td rowspan = “2” > years </th>
Colspan = “3”
<th> students <th>
</tr>
<tr>
<td> 2011 </td>
<td> 30 </td>
<td> 20 </td>
<td> 50 </td>
</tr>
<tr>
Contact No 9011249993 Page No 12
<td> 2012 </td>
<td> 45 </td>
<td> 35 </td>
<td> 80 </td>
</tr>
<tr>
<td> 2013 </td>
<td> 55 </td>
<td> 75 </td>
<td> 130 </td>
</tr>
<tr>
<td> 2014 </td>
<td> 75 </td>
<td> 95 </td>
<td> 170 </td>
</tr>
</table>
</body>
</HTML>
9. Write the exact output of the following HTML program code with font specifications in the
bracket:
<html>
<body>
<table border = “2”>
<TR> <TD collspan = “2”>
<H1 align = “center”> HSC Board exam </H1>
</TD>
</TR>
<TR><TD align = “center”><u> PAPER-I </u>
</TD>
<TR><TD align = “center”><u> PAPER-II</u>
</TD>
</TR>
<TR><TD> <P align = “center”><i> 50 marks</i>
</P>
</TD>
<TD align = “center”><i> 50 marks</i>
</TD>
</tr>
</table>
</body>
</HTML>
Contact No 9011249993 Page No 13
HSC Board Exam
PAPER – I PAPER – II
50 50
Contact No 9011249993 Page No 14