HTML: HTML Stands For Hyper-Text Markup Language. It Allows Us To Create Web

Hyper Text Markup Language
HTML Introduction:
HTML: HTML stands for Hyper-Text Markup Language. It allows us to create web
pages. It does not include any control structure and can produce only static
content. A HTML page consists of various tags that make a web page. The
features, advantages and disadvantages of HTML page are listed below.
Features of HTML:
 It is a formatting language for text and images.
 It allows us to read the content nonlinearly by using hyperlinks to a file.
 HTML is an application of SGML,XML and JAVA Script etc.
 HTML uses markup tags to describe web pages
 It is not case sensitive i.e. code can be written in small case or uppercase
letters.
 All the HTML documents have “ .html ” or “.htm” extension.
 HTML documents can be edited using editors such as notepad or front page.
The advantages of HTML:
 It can provide online documents with headings, text, tables, lists, photos etc.
 It can incorporate images and sounds with the help of HTML tags.
 It facilitates Moving and layered text
 It allows framed documents
 It allows absolute positioning of text and image.
 It facilitates to include spread sheets, video clips, sound clips and other
applications directly in their documents.
The disadvantages of HTML:
 HTML can produce only static content
 It does not facilitate headers, footers, footnotes.
 Mathematical typesetting is difficult
 It completely Browser Dependent
 No tabs and other automatic character spacing.
HTML Tools:
Information and Communication Technology Page 1
The most important two basic HTML Tools are discussed below.
1.HTML Editor: It is the program that uses to create and save HTML
documents.
Text based creating a document e.g. Notepad. i.e.; the code can be written
simply in a notepad.
Start Run Notepad.
2.Web Browser: It is a piece of software which is used to view the HTML page
output.
e.g. Internet Explorer, Mozilla Firefox, Google Chrome etc.
HTML Terminology:
Some of the most commonly used terms in HTML is shown below.
1.HTML Tags: It is a piece of text that is used to identify an element , so that
browser realizes how to display its contents. Tags are always written within
angle brackets(< Tag Name>).
e.g. <HTML> tag indicates the start of an HTML document and </HTML> tag
indicates the end of an HTML document.
HTML tags can be of two types. They are:
a) Paired Tags: In this the first tag referred to as opening tag and second tag is
referred to as closing tag.
e.g. <b> and </b>, <i> and </i> etc.
b) Unpaired Tags: In this does not have any closing tag. This tags are also
known as Singular or Stand-alone tags.
e.g. <br>, <hr> etc.
2. Attribute: Attribute is the property of an HTML tag that is specified in the
opening angle brackets. It supplies additional information like color, size, style
etc. to the browser about a tag.
e.g. height, color, width, src, href, border, align, alt etc.
3.DTD: Document Type Definition. HTML is defined in terms of its DTDS. All
the details of HTML tags, entities and the related document structure are
defined in the DTDS.
4.Element: It is the component of a document structure such as a title, a
paragraph or a list.

Structure of a HTML Document:
A HTML document is basically separated in two parts: the head (HTML head tag)
and the body (HTML body tag). The structure of a HTML document is shown
below.
Structure of HTML program:

<! DOCTYPE …> Document type information
<HTML>
<HEAD>
<TITLE>...Title name of the web page..</TITLE>
</HEAD>
<BODY>
...Body of the document….
</BODY>
</HTML>
The Commenting !DOCTYPE declaration: This declaration is made using the!
DOCTYPE tag and is to be written at the beginning of the document. It can also
uses to give comments in HTML page.
Comments generally of two types.
1. Single line comments. <!DOCTYPE>
2. Multi line comments.
<! ......more than one line……..
………………………….end>
<HTML> tag: This tag comes after the < ! DOCTYPE > tag and identifies the
document as an HTML document. All other tags included within <HTML> and
</HTML> tags.
<HEAD> tag: This tag contains information about the document, including its
title, scripts used, style definitions and document descriptions. The portion
enclosed between <HEAD> and </HEAD> tags is called the header. It includes
tags like title, script, style, meta and so on.
<TITLE> tag: This tag gives an HTML document a title by which it is known to
browsers. The title is given between the tags <TITLE> and </TILTE>.
<BODY> tag: This tag encloses all tags, attributes and information that one
wants the browser to display. To use <BODY> tag, enter it below the closing
</HEAD> tag and above the closing </HTML> tag.
Example:
<!..SAMPLE PROGRAM...>
<HTML>
<HEAD>
<TITLE> My first Page </TITLE>
</HEAD>
<BODY>
<H1> Hello HTML <H1>
</BODY>
</HTML>
The Document Head Tags:
This tag contains information about the document, including its title, scripts
used, style definitions and document discriptions.The portion enclosed between
<HEAD> and </HEAD> tags is called the header. It includes tags like title,
script, style, meta and so on.
An HTML document's head is enclosed by the HTML head element and can
contain some of these element definitions:
The document's title: Describes briefly what the document is about.
Style declarations: Group of class definitions (style sheets) used by other
tags to set visual characteristics.
Script functions: Set of functions declared inside the “HTML script
element” to provide functionality to the document.
Meta statements: Declared through the “HTML meta tag”, set custom
attributes and values for the document.
Global links: Defined using the “HTML link tag” designates resources
related to the actual document.
The Document Body tags: This tag encloses all tags, attributes and information
that one wants the browser to display. To use <BODY> tag, enter it below the
closing </HEAD> tag and above the closing </HTML> tag. Blocks:
Here are two major blocks of text in HTML document. They are
1. Paragraph.
2. Heading.
1. Paragraph: using paragraph, text will be displayed in a separate line. <P> is a
tag which is used to create a paragraph in a HTML page.
Syntax: <P align=”left”/”center”/”right”>
Text
</P>
The “ align” attribute is optional. It defines the horizontal alignment of its
content. Possible values are:
Left: Text is aligned to the left margin.
Right: Text is aligned to the right margin.
Center: Text is centered.
Justify: Text is justified to both margins.
2.Heading: The <h1> to <h6> tags are used to define HTML headings. <h1>
defines the most important heading and <h6> defines the least important
heading.
Syntax to create <h1> to <h6> headings:

<h1 align=”left”/”center”/”right”>…text…</h1>
The “ align” attribute is optional. It defines the horizontal alignment of its
content. Possible values are:
Left: Text is aligned to the left margin.
Right: Text is aligned to the right margin.
Center: Text is centered.
Justify: Text is justified to both margins.
Horizontal Line Tag: The HTML <hr> tag draws a horizontal line and that may
be used as separator. This tag has a set of attributes such as align, no shade, size
and width and they are optional. The <hr> tag does not require and end tag.
Attribute Value Syntax Description

Specifies the alignment of a
left <hr>
element
<hr align="left|center|
align center right">
right
<hr size="pixels"> Specifies the height of a<hr>

element
size pixels
<hr size="30">
Specifies the width of a<hr>

pixels <hr width="pixels|%"> element.
The width in pixels (like

"100px" or
just "100").
width % <hr width="50%">
The width in percent of

the
available space (like
"50%")
Ex: A Basic Example:

<! -- This code demonstrates the --
----purpose of headers, paragraph, --
-----break and horizontal tags -->
<html>
<head>
<title> This is Sample Page</title>
</head>
<body>
<h1 align=”center”>This is heading…1</h1>
<h4 align=”center”>This is heading…4</h4> <h5
align=”center”>This is heading…5</h5>
<p align=”center”>This is Basic Web Page Example. <br>I am studying B. Sc
III year(M.P.CS)<br>This is the first time I am learning HTML</p>
<hr width=”50%”>
</body>
</html>
Output:
Text Formatting And Syntactic Based Tags in HTML:
In contrast to the Semantic Based style tags , Syntactic Based style tags
allows you to tell the browser specifically how we want the text to appear on web
page.
Some syntactic based or text formatting tags are shown below.
1.<B>: The bold tag <b> is used to make text in bold format.
Syntax: <B>…..text….</B>
2.<I>: The italic tag <i> is used to make text in italic format.
Syntax: <I>…..text….</I>
3.<U>:The underline tag <u> is used to displaying the text with underline.
Syntax: <U>…..text….</U>

4.<STRONG>: The <strong> tag is used to display the given text in bright format
i.e.; always text is emphasized.
Syntax: <STRONG>…..text….</STRONG>
5.<TT>: The <tt> tag is used to display the given text in type writer’s format in
HTML.
Syntax: <TT>…..text….</TT>
6.<SUB>(subscript): This tag is used to display the text as a subscript.
Syntax: text<SUB>…..text….</SUB>
7.<SUP>(superscript): This tag is used to display the text as a superscript.
Syntax: text<SUP>…..text….</SUP>
8.<PRE>: It defines preformatted text. Text in a <pre> element is displayed in a
fixed-width font (usually Courier),and it preserves both spaces and line breaks.
Syntax: <PRE>…..text….</PRE>
9.<BLINK>:This tag is used to create the flashing text in web page.
Syntax: <BLINK>…..text….</BLINK>
10.<STRIKE>:This tag may be used for crossing out a word by having aline
drawn through it.
Syntax: <STRIKE>…..text….</STRIKE>
Text Formatting Example:
<! -- This code demonstrates the --

---purpose of syntactic tags-- >
<html>
<head>
<title>syntactic tag</title>
</head>
<body>
<pre><strong>Note:</strong>This is
Raja <br> I am living in <sup>
Bhimavaram </sup> <br> I am
Studying in <sub> BVRICE </sub> <br>
<blink> My group is Computer Science </blink>
<tt> Thank You </tt>
</pre>

</body>
</html>
Output:
Escape Sequence Characters: These characters start with an ampersand (&)

and terminated with semicolon (;). They are
& It Displays &
< It Displays <
> It Displays >
" It Displays "
It Displays blank space
© It Displays ©
Example Program:
<html>
<head>
<title>Escape Sequences</title>
</head>

<body>
<h2 align=”center”>Special Characters</h2><br>
Ampersand-&<br>
Tab space<br>
Less than-<<br>
Greater than-><br>
Quotes-"<br>
Copy-©
</body>
</html>
Output:
<Font> Tag: This tag is used to Specifies the font style, font size, and font color of
text.
This <font> tag , we can use some attributes is shown below.
Size: This attribute is used to change the size of the text.
Color: This attribute is used to set the color name of the text.

Style: This attribute is used to format the face of the text.
Syntax: <font size=”+n”>…text…</font>
<font color=”color name”>…text…</font>
<font style=”style name”>…text…</font>
Font Family: This is one of the property in <font> tag, which is used to set the
format to our text.
Syntax: <font style=”font-family: format name”>….text….</font>
Example Program for using <Font> tag:
<Html>
<head>
<title>Font tag</title>
</head>
<body>
<h2>format</h2><br>
<font style=”font-family:times new roman” size=4 color=”blue”>
My name is ramu<br>
Iam studying in BVRICE
</font><br>
<font style=”font-family:verdina” size=4 color=”black”>
My father name is Dasarad<br>
My mother name is Yesodha
</font>
</body>
</html>
Outpt:

Hyperlink:
Hyperlinks are used to link documents in a HTML page. Anchor tags are used to
place Hyperlinks in a HTML document. The beginning and ending of Hyperlink is
represented with Anchor tag.
 i.e; <a>……….</a>
 We can also navigate to some website address (or) inter document
linking with the help of Hyperlink of HTML page.
 We can create clickable text, images with the Hyperlink.
 Href is the attribute for the Anchor tag <a>, which specifies the
destination address of the Hyperlink. i.e; where the browser should jump
whenever the end user click on the Hyperlink.
Syntax:
<a href=”URL”>….some text….</a>
We can also use Hyperlinks to link to other websites as follows
<a href=”http://www.gmail.com”>click o this link</a>
Example: There are two Html pages i.e; one.html and two.html. In one.html the
website details regarding the gadgets information will be displayed and it also
displays Hyperlink, whenever the end user clicks on the Hyperlink the user has
to navigate to another page.
i.e;two.html which provides contact details
Html code for one.html:

<html>
<head>
<title>Hyperlinks</title>
</head>
<body>
<h2>our website provides latest gadgets</h2><br>
<h3>for further information click below link</h3><br>
<a href=”two.html”>contact us</a>
</body>
</html>
Html code for two.html:
<html>
<head>
<title>Information</title>
</head>
<body>
<pre>
Raja,<br>
13-5-5,<br>
Bhimavaram.
</pre>
</body>
</html>
output:

Absolute and Relative paths:
In the Href attribute we need to mention the entire path from

source to destination to move to the destination file. This path is known as
Absolute path.
i.e; one.html is a source file and Two.html is destination file.
Ex: <a href=”http://www.gmail.com”>click o this link</a>
In the Href attribute we need to mention only destination path to

move to the destination file, this type of path is known as Relative path.
Ex: <a href=”two.html”>contact us</a>

Inter Document Linking:
We can also create Hyperlink which leads to move to any part of the
document by using the Inter Document Linking.
Name is the attribute which is used to handle Hyperlink with-in the

document. Using this name attribute we can move to any portion of the
document and that document will be visible on the top of the page temporarily.
Syntax: <a href=”# location-name”>…..text….</a>
<a name=”location-name”></a>
HTML Program:
<html>
<head>
<title>Inter Document</title>
</head>
<body>
<p>
<a href="#c4">see als chapter 4.</a>
</p>
<h2>Chapter 1 </h2>
<p>this chapter explains ba bla bla</p>
<h2>Chapter 2 </h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3 </h2>
<h2><a name="C4">Chapter 4 </a></h2>
<h2>Chapter 5 </h2>
<p> This chapter explains ba bla bla</p>
<h2>Chapter 6 </h2>

<h2>Chapter 7 </h2>
<h2>Chapter 8 </h2>
<h2>Chapter 9 </h2>
<h2>Chapter 10 </h2>
</body>
</html>
Output:
List: Lists are used to represent the information in a specific format. Lists can be
used in many situations in the designing of a webpage.
There are three types of lists available in our HTML, they are
1. Ordered List.

2. Unordered List.
3. Definition List.
<li> tag which is used to create lists in our webpage.
1. Ordered List: An Ordered list follows the specific order infront of each list
item. Different numbering schemes ,i.e; numbers, small-letter alphabets and
capital-letter alphabets can be chosen in the Ordered List.
-<ol> tag is used represent Ordered List.
-Type is the attribute which is used to specify certain order for the Ordered
List. The order may be numbers (or) capital letters (or) small letters.
-Start is another attribute of <ol> tag which is used to specify starting value of
the Ordered List.
Syntax:
<ol type=”1”/”A”/”a” start=”n”>
<li>………</li>
<li>………</li>
<li>………</li>
……….</ol>
HTML Program:
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<h1>Groups in BVRICE</h1>
<ol type=”1”>
<li>M.E.Cs</li>
<li>M.P.Cs</li>
<li>M.S.Cs</li>

</ol>
</body>
</html>
Output:
2. Unordered List: As the name specifies Unordered List does not follows any
specific pattern. In this Unordered List also each List item is to be specified with
<li> tag.
- <ul> tag, which is used to specify Unordered List.
Syntax:
<ul type=”circle”/”square”/”disc”>
<li>………</li>
<li>………</li>
<li>………</li>
……….</ul>
HTML Program:

<html>
<head>
<title>Unrdered List</title>
</head>
<body>
<h1>Courses in BVRICE</h1>
<ul type=”square”>
<li>B.Sc</li>
<li>B.Com</li>
<li>Life Science</li>
<li>M.C.A</li>
<li>M.Sc</li>
</ul>
</body>
</html>
Output:

3. Definition List: Definition List is different previous two lists. This is
basically used to provide heading and mention the contents for that related
heading.
- <dl> is the tag which is used to place a Definition List in our HTML page.
- In that <dl> tag we need to use <dt> tag which is used for heading and <dd>
tag which is used to provide the Definition for the heading.
- <dt> stands for Definition Term.
- <dd> stands for Data Definition.
Syntax:
<dl>
<dt>heading</dt>
<dd>……………
……………..</dd>
</dl>
HTML Program:
<html>
<head>
<title>Definition List</title>
</head>
<body>
<dl>
<dt>B.V.R.I.C.E</dt>
<dd>B.V.Raju Institute of Computer Education</dd>
</dl>
</body>
</html>

Output:
Tables:
Tables in HTML page allows you to organize the information in the form
of rows and columns.HTML tables are basically used to present any information
in a tabular format. This tabular format is also known as Grid View type
information.
 <table> is the tag which is used to create a table in our HTML page.
 <tr></tr> is the tag which is used to create a row in the table, tr-means
table row.
<tr>……………….</tr>
 <td></td> is the tag which is used to create a column in the table, td-
means table data.
<td> text </td>
 We can create number of rows and columns in the table as per the
requirement.
 <caption> is the tag which is used to assign name to the table.
 After creating number of rows and columns wemust close the </table>
tag.
 <th></th> is the tag which is used to create heading for each column.
Syntax to create a simple table in HTML:
<table>
<caption>table-name</caption>
<tr>
<th>column1 heding</th>
</tr>
<tr>
<td>column1 data</td>
</tr>
</table>
Different attributes in <table> tag is shown below:
 Align , this attribute used to align our table to either left (or) right (or)
center.
For e.g: Align=”left”/”center”/”right”
 Height, this attribute used to set height of the table.
For e.g: height=”400”
 Width, this attribute used to set width of the table.
For e.g: width=”300”
 Border, this attribute is used to set border to the table.
For e.g: border=”1”
 Cellspacing, this attribute is used to set the amount of wide spaces
between cells.
 Cellpadding, this attribute is used to provide the amount of white spaces
between cell and data.
For e.g: Cellspacing=”5”
Cellpadding=”5”
Syntax to create table with different attributes:
<table Align=”left”/”center”/”right” border=”n” Cellspacing=”n”

Cellpadding=”n” height=”n” width=”n”>
<caption>table-name</caption>
<tr>
</tr>

<tr>
</tr>
And so on…………..
</table>
HTML Program:
<html>
<head>
<title>sample table</title>
</head>
<body>
<table align=”left” border=”3” bgcolor=”green” height=”400” width=”300”>
<caption>II M.P.Cs</caption>
<tr>
<th>register no</th>
<th>student name</th>
<th>address</th>
</tr>
<tr>
<td>2261</td>
<td>kavya</td>
<td>BVRM</td>
</tr>
<tr>
<td>2262</td>
<td>harsha</td>

<td>UNDI</td>
</tr>
</table>
</body>
</html>
Output:
Colspan and Rowspan Attributes in the table:
 These attributes of a table specifies number of rows (or) columns should

spans.
 We can also apply require changes for the specify rows and columns with
this rowspan and colspan attributes.
 We need to use colspan attribute of the table as colspan=”n”.
 We need to use rowspan attribute of the table as rowspan=”n”.
HTML Program with colspan attribute:
<html>
<head>
<title>colspan example</title>
</head>
<body>
<table align=”left” border=”2” height=”400” width=”300”>
<caption>COLSPAN</caption>
<tr>
<th>Branch</th>
<th colspan=”3”>Group</th>
</tr>
<tr>
<td>computer science</td>
<td>electronics</td>
<td>physics</td>
<td>statistics</td>
</tr>
</table>
</body>
</html>
Output:
HTML Program with rowspan attribute:
<html>
<head>
<title>rowspan example</title>
</head>
<body>
<table align=”left” border=”2” height=”400” width=”300”>
<caption>ROWSPAN</caption>
<tr>
<th>Branch</th>
<th>Group</th>
</tr>
<tr>
<td rowspan=3>computer science</td>
<td>electronics</td>
</tr>
<tr>
<td>physics</td>
</tr>
<tr>
<td>statistics</td>
</tr>
</table>
</body>
</html>

Output:
HTML Colors:
HTML colors are defined using a hexadecimal notation (HEX) for the
combination of Red, Green, and Blue color values (RGB). The lowest value that
can be given to one of the light sources is 0 (in HEX: 00). The highest value is 255
(in HEX: FF). HEX values are specified as 3 pairs of two-digit numbers, starting
with a # sign. The combination of Red, Green, and Blue values from 0 to 255,
gives more than 16 million different colors (256 x 256 x 256).
The 17 standard colors are: aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and
yellow.
bgcolor attribute:
The “bgcolor” attribute specifies the background color of a

document.
Ex:
<html>
<body bgcolor="red">
<h1>Hello world!</h1>

</body>
</html>
When we execute the above code, the background color of the web page
changes to red.
color attribute:
The color attribute specifies the color of the text inside a <font> element.
Ex:
<html>
<body>
<font color="red">This is some text!</font>
</body>
</html>

Images in HTML:
In HTML, images are defined with the <img> tag. The img tag is
empty, which means that it contains attributes only and it has no closing tag.
To display an image on a page, we need to use the src attribute. src
stands for
“ source”. The value of the src attribute is the URL of the image we want to
display on our page.
Many browsers supports images with .gif (graphical interchange format) and
.jpg (joint photographic group)
Syntax:
<img src=”url” alt=”string” height=”n” width=”n”>
Example:
<img src=”flower.jpg” height=”30px” width=”20px”>
attributes of <img> tag:
 Src: Src means source location , in this we need to mention the path of the
image.
 Alt: alt is the attribute which is used to display some text .
 Height and Width: these attributes are used to set the picture height and
width with pixels format.
 Align: this attribute is used to align image with
left/right/center/top/bottom.
HTML program:
<html>
<body>
<img src=” E:/B.Sc-2013/JS/Examples/ohm.jpg" width="100" height="100" />

</body>
</html>

Output:
Including image links: we can use images as links to other pages. To add
an image as a link just add the anchor tags <A> before the <IMG> tag and at the
end add the closing anchor </A> tag. Now include the destination file name to
the opening anchor tag by adding “href” attribute.
The following program illustrates including image links.
HTML program:
Type the following code and save it as “img4.html” .

<html>
<body>
<p>This is the First
Page</p> <p>
<a href="E:/B.Sc-2013/JS/Examples/img5.html" alt="2nd
Page"><img src="E:/B.Sc-
2013/JS/Examples/Harsha.gif" width="70"
height="100"></a>
</p>
</body>
</html>
* Type the following code and save it as “img5.html” .
<html>
<body>
<p>This is the Second Page</p>
<p>
<a href="E:/B.Sc-2013/JS/Examples/img4.html" alt="1st
Page"><img src="E:/B.Sc-
2013/JS/Examples/Kavya.jpg" width="70"
height="100"></a>
</p>
</body>
</html>
Output:
Including Background Images: we can specify a background image with in

webpage using background attribute in the opening of <BODY> tag. This
attribute will take the URL of the image as its value.
The following program illustrates background image.
HTML program:
<html>
<body background="E:/B.Sc-
2013/JS/Examples/ShirdiSaiBaba.jpg"> <font
color=”red”>
<h3>Look: A background image!</h3>
<p>Both gif and jpg files can be used a HTML
backgrounds.</p>
<p>If the image is smaller than the page, the image will
repeat itself.</p>
</font>
</body>

</html>
Output:
Including images within table: An image can either be included in a table cell
or act as a background in a table.
1.To add a background image: Use “background” attribute in the opening

<TABLE> tag. It will take the URL of the image as its value and the background
images are titled throughout the available table space.
2.To include images within cells: Images can be included within data cells of
the tables. For that add <IMG> attribute between the <TD> or <TH> cell tags
with proper URL specifying the source of the image.
Frames in HTML:
We can work with more than one HTML document inside a single HTML page.
Each HTML page is to be included in a main program which should use frame set
tag.
Procedure:
 Write two individual HTML pages namely ONE.HTML and TWO.HTML.

 Write MAIN.HTML by using <frameset> tag and also include individual
pages ONE.HTML and TWO.HTML with the <frame> tag.
 <frameset> is the tag which is used to include individual frames in a
HTML page.
 We can include individual frames as rows and columns.
 <frame> is the tag which is used to indicate individual frame in the
<frameset> tag.
 Name is the attribute of the frame, which indicates the name of the HTML
is to be included in the <frameset> tag.

 Src is the frame attribute which indicates the source location of the
individual page.
 Open the MAIN.HTML in the browser.
 Note: <frameset> tag does not use any <body> tag.
Syntax for <frameset> tag:
<frameset rows=”50%,50%” // cols=”50%,50%”>
<frame name=”ONE.HTML” src=”ONE.HTML” scrolling=”yes” // “no”>
<frame name=”TWO.HTML” src=”TWO.HTML” scrolling=”yes” // “no”>
</frameset>
Code for ONE.HTML:
<html>
<head>
<title>first page</title>
</head>
<body>
<h1>This is my first page</h1>
</body>
</html>
Code for TWO.HTML:
<html>
<head>
<title>second page</title>
</head>
<body>
<h1>This is my second page</h1>
</body>
</html>

Code for MAIN.HTML:
<html>
<head>
<title>Frames</title>
</head>
<frameset rows=”50%,50%”>
<frame name=”ONE.HTML” src=”ONE.HTML” scrolling=”yes”>
<frame name=”TWO.HTML” src=”TWO.HTML” scrolling=”yes”>
</frameset>
</html>

HTML: HTML Stands For Hyper-Text Markup Language. It Allows Us To Create Web

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML: HTML Stands For Hyper-Text Markup Language. It Allows Us To Create Web

Uploaded by

Copyright:

Available Formats

Hyper Text Markup Language

Information and Communication Technology Page 2

Structure of HTML program:

The Document Head Tags:

Syntax to create <h1> to <h6> headings:

Attribute Value Syntax Description

Information and Communication Technology Page 5

<hr size="pixels"> Specifies the height of a<hr>

Specifies the width of a<hr>

The width in pixels (like

The width in percent of

Ex: A Basic Example:

Text Formatting And Syntactic Based Tags in HTML:

Some syntactic based or text formatting tags are shown below.

Information and Communication Technology Page 7

Text Formatting Example:

<! -- This code demonstrates the --

Raja <br> I am living in <sup>

Bhimavaram </sup> <br> I am

Studying in <sub> BVRICE </sub> <br>

<blink> My group is Computer Science </blink>

<tt> Thank You </tt>

Information and Communication Technology Page 8

Escape Sequence Characters: These characters start with an ampersand (&)

&amp; It Displays &

&lt; It Displays <

&gt; It Displays >

&quot; It Displays "

&nbsp; It Displays blank space

Information and Communication Technology Page 9

<h2 align=”center”>Special Characters</h2><br>

Tab &nbsp; space<br>

This <font> tag , we can use some attributes is shown below.

Size: This attribute is used to change the size of the text.

Information and Communication Technology Page 10

Syntax: <font size=”+n”>…text…</font>

<font color=”color name”>…text…</font>

<font style=”style name”>…text…</font>

Syntax: <font style=”font-family: format name”>….text….</font>

Example Program for using <Font> tag:

<font style=”font-family:times new roman” size=4 color=”blue”>

Iam studying in BVRICE

<font style=”font-family:verdina” size=4 color=”black”>

My father name is Dasarad<br>

My mother name is Yesodha

Information and Communication Technology Page 11

<a href=”URL”>….some text….</a>

We can also use Hyperlinks to link to other websites as follows

<a href=”http://www.gmail.com”>click o this link</a>

i.e;two.html which provides contact details

Html code for one.html:

Information and Communication Technology Page 12

<h2>our website provides latest gadgets</h2><br>

<h3>for further information click below link</h3><br>

<a href=”two.html”>contact us</a>

Html code for two.html:

Information and Communication Technology Page 13

In the Href attribute we need to mention the entire path from

i.e; one.html is a source file and Two.html is destination file.

Ex: <a href=”http://www.gmail.com”>click o this link</a>

In the Href attribute we need to mention only destination path to

Ex: <a href=”two.html”>contact us</a>

Name is the attribute which is used to handle Hyperlink with-in the

& It Displays &

< It Displays <

> It Displays >

" It Displays "

It Displays blank space

Tab space<br>