HTML

Introduction to HTML
What is HTML?
HTML is a language made for creating the web pages for the websites.
Here are some facts about the HTML language:

Why do Need HTML
As the HTML is a very easy language for creating the web pages. It can be learned in
few hours or in few days. It is the basic format of the HTML file it can be displayed
on mostly operating system which supports the web browser.
Basics of HTML
What is an HTML File?
· HTML stands for Hyper Text Markup Language.
· An HTML file is a text file containing small markup tags.
· The markup tags tell the Web browser how to display the page.
· An HTML file must have an htm or html file extension.
An HTML file can be created using any simple text editor like "Notepad" of the
Microsoft Windows.
Basic Description of HTML File
The HTML file can be divided into the three parts:
HTML Header
HTML Body
HTML Footer
So let us see the Body of the HTML File:<html>
<head>
Html header
</head>
<body>
Html body
</body>
Html footer
</html>
>HTML Header is the top most part of the HTML file in this section of the file we
define the header of file and also Title of the file can be provided.
>HTML Body is the middle part of file, in this section we define all text and elements
which is to be displayed on web page.
>HTML Footer is the end section of the file.
How To Write a HTML File

To write a HTML file you need an text editor, open the text editor and start writing
file as given below:
Steps to write a file & view the web page:
· Open the text editor (e.g. notepad).

· Write the above file in it OR copy the above file and paste it on the notepad.
· Save this file as .htm or .html file extension (e.g. <filename>.htm ,
<filename>.html).
· Now open the Internet Browser and open the saved file.
· Now you can see your web page.
The file starts from an <html> tag and ends with the </html>. <html> tag identifies
that it is an HTML file. <html> is also called as open tag and it also need its closed
tag which is </html>. Between these tags we will define the Header of the file, so
add the <head> tag and below it write </head> to close <head> tag.
More to display the Title to the Web Browser use the special tag <title> write here
title </title>. Text written between the <title> & </title> tag will be displayed as the
header of the your web page. The important tag is <body> tag. Whatever you want
to display on the web page you must write it in between <body> & </body>.
HTML Tags
Tags are the reserve keywords used in the HTML file. With the help of tags we can
set the format of the text and elements used in the file.
Example: Setting the font, size, color, bold, italic, Underline to the text.
In HTML language all of the files are written using tags. Even starting of the html file
is done by the <html> tag and ended with the </html> end tag. Tags are the
reserved keywords used in the HTML. They are the predefined words called tags.
· HTML tags are used to mark-up HTML elements.
· HTML tags are surrounded by the two characters <and>
· The surrounding characters are called angle brackets.
· HTML tags normally come in pairs like <b> and </b>
· The first tag in a pair is the start tag, the second tag is the end tag.
· The text between the start and end tags is the element content.
· HTML tags are not case sensitive, <b> means the same as <B>
>Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs, body
and line breaks. The basic HTML Tags are described here in the form of table so that
you can remind them easily.
Basic HTML Tags

Tag Description
<html> Defines an HTML document
<head> Defines information about the document
<title> Defines the document title
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
 Comment Tag

The comment tag is used to insert a comment in the source code. A comment will be
ignored by the browser. You can use comments to explain your code, which can help
you when you edit the source code at a later date.
You can also store program-specific information inside comments. In this case they
will not be visible for the user, but they are still available to the program. A good
practice is to comment the text inside the script and style elements to prevent older
browsers, that do not support scripting or styles, from showing it as plain text.
Format:

Example:

You might have became bored of reading so lets do some practical.
Follow these Steps:

copy this code in the new file of any text editor.
Save it with htm or html extension.
Open the Internet Browser.
Open the saved file in it.
Example:
<html>
<head>
<title>In body tag</title>
</head>
<body bgcolor="lightyellow" text="red">
In body tag, background color is defined as black and textcolor is defined as the
white.
<hr>
<h1> this is the h1 header </h1>
<h2> this is the h2header </h2>
<hr>This is the use of "Break" tag<br> and you will see use of more tags<br>
<hr> look at the use of comment tag it is good
<hr><p> This is the use of paragraph tag and you will see use of more tags </p>
The effect of "hr" tag <br> <hr>
</body>
</html>
>Character Format Tags

These tags are used for the formatting of the text such as underline, bold, italic,
font, size, color of the text.
All these character formatting Tags are defined in the table shown below:
Char Description format
Format Tag
<b> Displays bold text <b> ................text.........</b>
<i> Displays italic text <i> ................text.........</i>
<tt> Renders as teletype or mono <tt> ................text.........</tt>
spaced text
<u> Displays underlined text <u> ................text.........</u>
<em> Displays emphasized text <em>..............text.........</em>
<big> Displays big text <big> ............text.........</big>
<small> Displays small text <small>...........text.........</small>
<strong> Displays strong text <strong>.............text.........</strong>
<sub> Displays subscripted text <strong>..............text.........</strong>
<sup> Displays superscripted text <strong>..............text.........</strong>
<bdo> Defines the direction of text <bdo> ................text.........</bdo>
display
<font> Defines the font face, size, and <font face="font_name"
color of text color="color_name"
size="number">........text.........</font>
Examples of the Text Formatting tags

Examples Outputs
<b>This text is bold</b> This text is bold
<strong> This text is strong </strong> This text is strong
<big> This text is big </big> This text is big
<em> This text is emphasized </em> This text is emphasized
<i> This text is italic </i> This text is italic
<small> This text is small </small> This text is small
This text contains <sub> subscript </sub> This text contains subscript
superscript
This text contains <sup> superscript </sup> This text contains
<u> this is underlined text </u> this is underlined text
<bdo dir="rtl">Here is some Hebrew txet werbeH emos si ereH
text</bdo>
Example:
<html>
<body>
<b>This text is bold</b>
<br>
<strong> This text is strong </strong>
<br>
<big> This text is big </big>
<br>
<em> This text is emphasized </em>
<br>
<i> This text is italic </i>
<br>
<small> This text is small </small>
<br>
<u> this is underlined text </u>
<br>
This text contains
<sub> subscript </sub>
<br>
This text contains
<sup> superscript </sup>
<br> The use of font tag
<font face="arial" size="3" color="green">
this is use of font tag</font>
</body>
</html>
>Output Tags
These tags are often used to display computer/programming code. You might be
surprised for "how to display the text containing the spaces, line breaks,
programming codes, sample text, define variable". Do not worry, because in this
chapter we are going to show you how easily you can do easily.
So lets start with these tags:
Tag Description Format

<pre> Defines preformatted text <pre> .....text.....</pre>
<code> Defines computer code text <code> .....text.....</code>
<tt> Defines teletype text <tt> .....text.....</tt>
<kbd> Defines keyboard text <kbd> .....text.....</kbd>
<var> Defines a variable <var> computer variable</var>
<dfn> Defines a definition term <dfn> definition term</dfn>
<samp> Defines sample computer code <samp> sample text</samp>
<pre>.........</pre>Tag
This is preformatted text. It preserves both spaces and line breaks. The pre tag is
good for displaying computer code.
Example:
<pre> for i = 1 to 10
print i
next i
</pre>
Output:
for i = 1 to 10
print i
next i
Examples of output tags

Examples Outputs
<pre> It preserve all spaces </pre> It preserve all spaces
<code>Computer code</code> Computer code
<kbd>Keyboard input</kbd> Keyboard input
<tt>Teletype text</tt> Teletype text
<samp>Sample text</samp> Sample text
<var>Computer variable</var> Computer variable
<dfn>Definition term</dfn> Definition term
Example:
<html>
<body> <code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<tt>Teletype text</tt>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>
<p>
<b>Note:</b>
These tags are often used to display computer/programming code.
</p>
</body>
</html>
>Block Tags
Tag Description Format
<acronym> Defines an <acronym
acronym title="text_to_display_when_mouse_over_the_text">
...text..</acronym>
<abbr> Defines an <abbr title="text_to_display_when_mouse_over_the_text">
abbreviation ..text..
</abbr>
<address> Defines an <address>….. text…..<address>
address element
<blockquote> Defines an long <blockquote>…… long quotation.…..</blockquote>
quotation
<center> Defines <center>... text .......</center>
centered text
<q> Defines a short <q>….short quotation..</q>
quotation
<cite> Defines a <cite> text </cite>
citation
<ins> Defines inserted <ins> text </ins>
text
<del> Defines deleted <del>..text..</del>
text
<s> or Defines <s> text </s> or <strike> text</strike>
<strike> strikethrough
text
1.<acronym>..text..</acronym>Tag
The <acronym> tag defines the start of an acronym, like "WWW" and "C.B.I.". By
marking up acronyms you can give useful information to browsers, spell checkers,
translation systems and search-engine indexers.
The title attribute can be used to show the full version of the expression when you
are holding the mouse over the acronym(text).
format:
<acronym title="text_to_display_when_mouse_over_the_text">..text..</acronym>
2.<abbr>..text..</abbr>
Indicates an abbreviated form, like "Inc.", "etc.". By marking up abbreviations you
can give useful information to browsers, spell checkers, translation systems and
search-engine indexers.
In some browsers the title attribute can be used to show the full version of the
expression when you are holding the mouse over the abbreviation.
format:
<abbr title="text_to_display_when_mouse_over_the_text">..text..</abbr>
3.<address> ..address..</address>
The <address> tag defines the start of an address. You should use it to define
addresses, signatures, or authorships of documents. The address usually renders in
italic. Most browsers will add a line break before and after the address element, but
line breaks inside the text you have to insert yourself.
Format with Example:

<address>
Donald Duck<br />
Box 555<br />
Disneyland
</address>
Output:
Donald Duck
Box 555
Disneyland
Examples of Block tags

Examples Outputs
<blockquote><p>here is a long quotation here is a long quotation
</p></blockquote>
<q>here is a short quotation </q> here is a short quotation
<center>Center this text</center> Center this text
a dozen is <del>20</del>pieces! a dozen is 20 pieces!
a dozen is <ins>12</ins>pieces! a dozen is 12 pieces!
<cite>Citation</cite> Citation
A version is <s>not available.</s> now A version is not available. now
available! available!
A version is <strike>not available.</strike> A version is not available. ok!
ok!
Example:
<html>
<head>
<title>Block Tags</title>
</head>
<body>
<br><b> center tag </b>
<center>Center this text</center>
<b> acronym tag </b>
<acronym title="World Wide Web">WWW</acronym><br>
<b> abbr tag </b>
<abbr title="hypertext markup language"> HTML</abbr><br>
<b> blockquote tag </b>
<blockquote>here is a long quotation here is a long quotation</blockquote>
<b> del tag </b>
a dozen is <del>20</del> pieces!<br>
<b> ins tag </b>
a dozen is <ins>12</ins> pieces!<br>
<b> s tag </b>
A new version is <s>not yet available.</s> now available!
<b> strike tag </b><br>
A new version is <strike>not yet available.</strike> now available!
</body>
</html>
>Other Tags
1.The <style> tag
The <style> tag defines a style in a document.
The style element goes in the head section. If you want to include a style sheet in
your page, you should define the style sheet externally, and link to it using <link>.
Using this tag you can initialize the text properties as shown in the example. In the
example color for the header tag is defined initially in the header part of the file
using the <style> tag.
Format Example Output

<head> <html>
<style
type="text/css">
<head>
<style
This is header <h1>
h1 {color: yellow} type="text/css">
h3 {color: h1 {color: yellow} This is header < h1>
lightgreen} h3 {color: lightgreen}
</style> </style>
</head> <title>style
tag</title>
</head>
<body>
<h1>This is header <
h1 > </h1>
<h3>This is header <
h1 > </h3>
</body>
</html>
In the above example, h1 is a tag which will be displayed in a color which has been
mentioned in the style tag. Just like h1 tag there is a tag i.e., h3 which will be
displayed in the color which has been mentioned in the style sheet.
Attributes

type text/css Defines the content-type
2.The <div> tag

The <div> tag defines a division/section in a document. Use the <div> tag to group
block-elements to format them with styles. This tag is used below the <body> tag.
Format Example Output

<body> <html> This is some text
<div style=" " <body>
> </div> This is some text This is a header in a div section
</body> <div style="color:#FFFF00;">
<h4>This is a header in a div
section</h4> This is a paragraph in a div section
<p>This is a paragraph in a div
section</p>
</div>
</body>
</html>
Attributes

align left, right, top, How to align the text in the div element.
bottom better use style attribute.
Example:
<html>
<head>
<style type="text/css">
h1 {color: red}
h3 {color: blue}
</style>
<title>style tag</title>
</head> <body>
Use of STYLE tag
<h1>This is header H1 text </h1>
<h3>This is header H3 text </h3>
Use of DIV tag
<div style="color:#FF0000;">
This is a header in a div section
<br>This is a paragraph in a div section
</div><br>
</body>
</html>
3.Marquee Text with <marquee> Tags

This tag is used to to get a moving text. As on the television you see the moving
news headlines. You can do this by using the <marquee> tag.
Format : <marquee> Write the text to be scrolled </marquee>
Example: <marquee> Write the text to be scrolled </marquee>
Attributes

bgcolor colorcode,colorname Defines the back ground color to the text.
behavior alternet, slide Defines the type of movement to the text.
direction down, up, right, left Defines the movement direction of the text.
loop positive integer Defines the no. of times to text will scroll.
scrollamount positive integer Defines the scrolling speed of the text.
title text Defines text will appear when mouse pointer is
on it.
width, height positive integer Defines the area of scrolling.
Behavior attribute
alternet: for this value the text bounces across the scroll region.
slide: for this value the text slides into position.
if you do not defines the behavior attribute then the text keeps scrolling continues
manner according to the direction. BLINKING TEXT with <blink>Tag
This blinking text is the text which blinks like a bulb with on/off system. This blinking
of text can be achieved in the HTML using the <blink> Tag.
Format : <blink> write the text to blink </blink>

Example: <blink> This is the blinking text. </blink> so now lets do some practical.
Just write/copy this example on any text editor new file and save the file and open in
the browser and see how it looks.
Example:
<html>
<head>
<title>Marquee & Blink </title>
</head>
<body>
<b>Marquee text with <br>
direction=up height=50 width=200 scrollamount=1 bgcolor=lightyellow </b>
<br>
<marquee style="color: #FF0000; font-size: 12pt; font-weight: bold; font-family:
Verdana" direction="up" height="50" width="200" scrollamount="1"
bgcolor="lightyellow"> this is scrolling text</marquee></p>
<p><b>Marquee text with <br>
direction=left height=20 behavior=alternate scrollamount=10 bgcolor=lightyellow
</b>
Verdana" direction="left" height="20" behavior="alternate" scrollamount="10"
bgcolor="lightyellow"> this is scrolling text</marquee><br>
<br>
<b>Marquee text with <br>
direction=left height=20 scrollamount=10 bgcolor=lightyellow </b>
Verdana" direction="left" height="20" scrollamount="10" bgcolor="lightyellow"> this
is scrolling text</marquee><br>
<br>
<font face="Verdana">
<b>BLINKING TEXT</b></font></p>
</p>
<font color="#FF0000"><b>
<BLINK> <font face="Verdana">This is the blinking text.</BLINK></b></font>
</body>
</html>
HTML Lists
In HTML there are three types of list ordered, unordered and definition lists.
With the name itself you might be understanding that what is list. Yes you are
thinking in the right way.
It is the list of anything e.g. list of items, list of books.
Hope now you are clear about the List element of the HTML. Now the question is
that, can you create the list of items in the web page? Certainly not, But do not
worry with the help of this small chapter you can create any type of lists on the your
web page very easily. And it will take few of your minutes to learn. So lets Begain!
>Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically
small black circles), it does not have numbers in the list.
An unordered list starts with the <ul> tag and end with </ul>. liust items are
defined in between <ul> & </ul>. Each list item is surrounded by the <li> & </li>
tag.
<ul> tag is used for unordered list. Between <ul> & </ul> you have to enter list of
items.
<li> tag is used for list item. Each list item is surrounded by <li> & </li> tag.
Format:
<ul> <li> item1 </li> <li> item2 </li> .......<li> itemn </li><ul>
Example Output
<ul> • Text Book
<li>Text Book</li><li>Note Book</li> • Note Book
<li>Pen</li><li>Pencil</li> • Pen
</ul>
• Pencil
>Ordered List
An ordered list is also a list of items. The list items are marked with numbers not
with the bullets.
An unordered list starts with the <ol> tag and end with </ol>. list items are defined
in between <ol> & </ol>. Each list item is surrounded by the <li> & </li> tag.
<ol> tag is used for onordered list. Between <ol> & </ol> you have to enter list of
items.
<li> tag is used for list item. Each list item is surrounded by <li> & </li> tag.
Format:
<ol> <li> item1 </li> <li> item2 </li> .......<li> itemn </li><ol>
Example Output
<ul> 1. TextBook
<li>Text Book</li><li>Note Book</li> 2. NoteBook
<li>Pen</li><li>Pencil</li> 3. Pen
</ul>
4. Pencil
If you are looking for more options then you can have list containing Roman
numbers, alphabets in the list instead of numbers (1,2,3...n). Ordered list have an
attribute called type="value".
And you know how to define the attribute of any element inside it. type attribute
have different values
Format:
<ol type="value"> <li> item1 </li> <li> item2 </li> .......<li> itemn </li><ol>
type Specifies ordered list containing capital alphabets.
A
Specifies ordered list containing small alphabets.
a
Specifies ordered list containing big Roman alphabets.
I
Specifies ordered list containing Small Roman
i
alphabets.
1
Specifies ordered list containing numbers.
>Definition List
A definition list is not a list of items. This is a list of terms and explanation of the
terms. A definition list starts with the <dl> tag. Each definition-list term starts with
the <dt> tag. Each definition-list definition starts with the <dd> tag.
Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks,
images, links, other lists, etc.
<dl> tag is used for definition list. Between <dl> & </dl> you have to enter list of
items.
<dt> tag is used for list item terms. Each list item is surrounded by <dt> & </dt>
tag.
<dd> tag is used for the definition-list definition.
Format:
<dl> <dt> Term1 </dt> <dd> Term definition.<dd> .......<dt> itemn
</dt>....<dl>
Example Output
<dl> Books
<dt>Books</dt> Books are the great
<dd>Books are the great friends.</dd> friends.
<dt>Pen</dt> Pen
<dd>Pen is the biggest power</dd> </dl> Pen is the biggest power
Example:
<html>
<head>
<title> Lists </title>
</head>
<body>
Unordered List
<ul>
<li>Text Book</li>
<li>Note Book</li>
</ul> Ordered List with numbers
<ol>
<li>Text Book</li>
<li>Note Book</li>
</ol> Ordered List with Roman numbers
<ol type="i">
<li>Text Book</li>
<li>Note Book</li>
</ol> Ordered List with small character
<ol type="a">
<li>Text Book</li>
<li>Note Book</li>
</ol> Definition List
<dl>
<dt>Books</dt>
<dd>Books are the great friends.</dd>
<dt>Pen</dt>
<dd>Pen is the biggest power.</dd>
</dl>
</body>
</html>
Frames and Tables
Frames
Will not it be better, if you are able to display the more then one HTML document in
the same browser. Yes of course it will be better. So get ready to learn this
fascinating idea. It can be done very easily using "Frames" in the HTML.
With frames, you can display more than one HTML document in the same browser
window. Each HTML document is called a frame, and each frame is independent of
the others.
With the frames you will be able to create the pages like this:
In this way the browser can be divided into the Horizontal & Vertical Frames and
each frame contains a page in it. Hence by using frames you can display more then
one page in one Browser.
Horizontal Frame
The horizontal frames are created in the horizontal pattern on the browser.
Horizontal frames divide the browser in the horizontal parts as you see in the figures.
And all the frames displaying a different html files in them.
Vertical Frame
The vertical frames are created in the vertical pattern on the browser. Vertical
frames divide the browser in the vertical parts as you see in the figures. And all the
frames displaying a different html files in them.
Mixed Frame
The mixed frames are created using both vertical frames and horizontal frames.
Mixed frames divides the browser in the vertical parts as well as in the horizontal
parts as you see in the figure of Mixed frames. And all the frames displaying a
different html files in them. Before starting the creation of the frames you will need
to read some Simple Tags about frames.
Frame Tags
tags Description
<frameset> Defines a set of frames
<frame> Defines a sub window (a frame)
<iframe> Defines an inline sub window (frame)
Tags and its Attributes:
tags Attribute Value Description

<frameset> rows pixels, % part of Defines the proportion of division of
page page in horizontal frame.
cols pixels, % part of Defines the proportion of division of
page page in vertical frames.
<frame> src path of the file path of the file which in to displayed in
frame.
noresize noresize Defines weather the frames resizable
or not.
name name of frame Provides the name of frame.
<iframe> src path of the file path of the file which in to displayed in
iframe.
name name of iframe Provides the name of iframe.
1.<frameset> Tag
The <frameset> defines the set of frames or you may say, it defines no. of frames
we will have on the a page. The frameset is a set of frames.
Format:
<frameset rows="pixels or % of page, pixels or % of page,....,pixels or % of page">
Examples:
<frameset rows="30%,40%,30%">
This example will create the three horizontal frames with area of 30%, 40%, 30%.
As 100% area is divided in three parts of 30%,40% and 30% for three frames.
<frameset rows="30%,*">
Star character '*' here represents the remaining part of the screen.
This example will create the two horizontal frames with area of 30% and whatever is
remaing part of the screen will the height of second frame. As 100% area is divided
in two parts of 30% and then the remaining screen area will be second frame.
Note: This * is commonly used for creating frames.
Its Attributes:
rows: it is used when user wants to create the horizontal frames.
cols: it is used when user wants to create the vertical frames.
If you want to create the three horizontal frames of ratio 20%, 50%, 30% of the
page.
then the <frameset> tag will be:
In both the examples the first frame is of 20%, second is of 50%, third of 30%.
But <frameset> alone will not display the frames it only defines the set of number of
frames it will have. To display those frames make the use of <frame> tag.
2.<frame> Tag
The frame tag displays the empty frames. <frame> tag is used between the start &
end tag.
If you want to display the other pages in the frames then use src attribute of
<frame> tag.
Format:
<frame src="path of file" noresize="noresize" name="any_name">
Example:
<frame src="d:\html\frames.html" noresize="noresize" name="frame1">
Its Attributes:
src: defines the path of file which is to be displayed in the frame.
noresize: defines the resize property of the frame, if we defines the its value as
"noresize" then the you can not change the size of frames. The frames are not
resizable. Move the mouse over the borders between the frames and notice that you
can not move the borders.
And if you need resizable frames then do not use "noresize" attribute in <frame>
tag.
name: defines the name of the frame. You can provide the name of your choice.
3.<iframe> Tag
It is the tag for the inline frames. The inline frame is the small frame which can be
inserted on any web page. It is defined inside the body of the html file. It is not
resizable.
Format:
<iframe src="path of file" name="name_of_this_frame">
Example:
<iframe src="c:\html\lists.html" name="iframe">
Its Attributes:
src: defines the path of file which is to be displayed in the frame.
name: defines the name of the frame. You can provide the name of your choice.
How To create Horizontal Frames
Example:
if you want to create three horizontal frames of area 20%, 50%, 30% then first use
the <frameset> Tag.
This example will display three frames with different pages.
<html>
<frame src="c:\html\list_tags.htm" name="frame1" noresize="noresize">
<frame src="c:\html\basic.htm" name="frame2" >
<frame src="c:\html\link_media.htm" name="frame3" >
</frameset>
<head>
<title> Frames</title>
</head>
</html>
How To Create Vertical Frames
To create such type of vertical frames you do not have to do much more just write
"cols" in place of "rows" in the <frameset> tag.
Example:
<frameset cols="20%,50%,30%">
also test them in the browser.
Example:
This example will display three frames with different pages. <frameset
cols="20%,50%,30%">
<frame src="c:\html\list_tags.htm" name="frame1" noresize="noresize">
<frame src="c:\html\basic.htm" name="frame2" >
<frame src="c:\html\link_media.htm" name="frame3">
</frameset>
<head>
<title> Frames</title>
</head>
</html>
Page in browser will look like:

How To Create Mixed Frames
To create the mixed frames, concept of nesting is used, in mixed frames we use the
nesting of <frameset>. See how nesting of <frameset> is done
Example:
<html>
<frameset cols="20%,80%">
<frame src="c:\html\list_tags.htm" name="frame1">
<frameset rows="20%,80%">
<frame src="c:\html\link_media.htm" name="frame2">
<frame src="c:\html\basic.htm" name="frame3">
</frameset>
</frameset>
</html>
Page in browser will Look Like:

In this example you see how first <frameset> tag divides the browser into two
frames i.e. of 20% and 80%. then first frame1 is defined but the second frame is
again divided into the two new horizontal frames using the second <frameset> tag
of inside the first <frameset> tag. so
now lets do some Practical.
Just write/copy this example on any text editor new file and save the file and open in
the browser and see how it looks.
note:
You do not have to worry if the second example does not display the any page in the
frames. It is because path of file defined in the src attributes of the <frame> tag
does not exist or files in the directory c:\html does not exists.
How to Create Inline Frame

Inline frames are created using the <iframe> tag. This tag is used inside the body of the
HTML file.
So lets have an example:

Just write/copy this example on any text editor new file and save the file and open in the
browser and see how it looks Example
Example:
<html>
<body>
<iframe src="c:\html\list_tags.htm"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
Page in browser will Look Like:
Tables
If you want to display information of some type, like displaying your time table of
class, Report Card or want to display information in the form of the tables. Then the
Table elements of the HTML is used to display the information in the table form. Now
you can do this easily or how easily you can display your information using tables.
Information in the table can be displayed in the form of like.
S.No. Name Class Age Address

1 Arun Kumar 12th 20 xyz
2 Neeraj Kumar 10th 18 abc
Tables are the simplest form of displaying the data/ information. Using tables we can
display the information very easily to the user. Due to its Simplicity in almost all the
projects data is displayed using the tables. Project may be made using any
application. But most of them uses only tables to display the information.
In all most all of the database driven websites we uses the tables to display the
information. So tables are very important part of the HTML. And you must learn
them nicely.
Table Tags
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<thead> Defines a table head
<tbody> Defines a table body
<tbody> Defines a table body
The <table> tags

The <table> tag defines a table. Inside a <table> tag you can put table headers,
table rows, table cells and other tables
Format:
<table> <tr><td>..............</td></tr>.</table>
Attributes
<table> align left,center,right Aligns the table. Deprecated. Use
styles instead.
bgcolor rgb(x,x,x),#xxxxxx, Specifies the background color of the
colorname table. Deprecated. Use styles
instead.
border pixels (0-n) Specifies the border width.
Tip: Set border="0" to display tables
with no borders!
cellpadding pixels, % Specifies the space between the cell
walls and contents
cellspacing pixels, % Specifies the space between cells
width pixels, % Specifies the width of the table
Align
This attribute can have the value center, left, right. By using this table can be
aligned on the page.
bgcolor
bgcolor is used to give the background color to the table. It can have the values in
the three type, rgb (x,x,x) combination, #xxxxxx (color code), or color name.
border
border attribute of the table is used to provide the border style to the table. Its value
is given in pixels (0-n). Above table has border="5".
if you want your table should not have border then define border="0".
width
It specifies the width of the table. Its value is also given in pixels (0-n) or %.
cellpadding
It specifies the space between the cell walls and contents. Its value is also given in
pixels (0-n) or %.
cellspacing
It specifies the space between the cells. Its value is also given in pixels (0-n) or %.
<th> <tr> and <td>Tag

<th> tag
Defines a table header cell in a table. The text within the th element usually renders
in bold.
Format:
<th> this is the header </th>
<tr> tag
<tr> tag defines a row in a table.
Format:
<tr> <td>table data </td> </tr>
<td> tag
<td> tag defines the table data. This tag is used inside the <tr> tag.
Format:
<td> table data </td>
The next table defines the different attributes that can be used by <th>,<tr> and
<td> tags.

<th>,<td>,<tr> align left,center,right Specifies the horizontal alignment.
<th>,<td>,<tr> bgcolor rgb(x,x,x),#xxxxxx, Specifies the background color of
colorname the table. Deprecated. Use styles
instead.
<th>,<td> colspan number Indicates the number of columns
this cell should span
<th>,<td> rowspan number Indicates the number of rows this
cell should span
<th>,<td>,<tr> height pixels Specifies the height of the table
cell. Deprecated. Use styles
instead.
<th>,<td>,<tr> Valign top,middle,bottom, Specifies the vertical alignment of
baseline cell content
<th>,<td> width pixels % Specifies the width of the table cell.
<caption> Tag
<caption> tag defines a table caption.
Format:
<caption>This is a caption</caption>
<thead>,<tbody> and <tfoot> tag
The thead, tfoot and tbody elements enables you to group rows in a table. When you
create a table, you might want to have a header row, some rows with data, and a
row with totals at bottom. This division enables browsers to support scrolling of table
bodies independently of the table header and footer. When long tables are printed,
the table header and footer information may be repeated on each page that contains
table data.
Example for <thead>,<tbody>and <tfoot>
Example Output
<table border = "1"> This text is in the THEAD
<thead>
<tr> This text is in the TFOOT
<td>This text is in the THEAD</td> This text is in the TBODY
</tr>
</thead>
<tfoot>
<tr>
<td>This text is in the TFOOT</td>
</tr>
</tfoot>
<tbody>
<tr>
<td> This text is in the TBODY</td>
</tr>
</tbody>
</table>
Attributes of <thead>,<tbody> and <tfoot>

align right,left,center,justify Defines the text alignment in cells.
char
Valign top,middle,bottom,baseline Specifies the vertical text alignment in
cells.
How To Create Table

Example:
<html>
<head>
<title>tables</title>
</head>
<body>
<b>Table with border=1 cellspacing=1 cellpading=1 with one empty cell.
</b><table border="1" cellspacing="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<br>
<b>Table with border=1 cellspacing=1 cellpading=10 bgcolor=lightyellow</b>
<table border="1" cellspacing="1" cellpadding="10" bgcolor="lightyellow">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table><br><b>
Table with border=8 cellspacing=8 cellpading=1 bgcolor=lightblue
bgcolor=lightgreen</b>
<table border="8" cellspacing="8">
<tr>
<th bgcolor="lightblue">Heading</th>
<th bgcolor="lightgreen">Another Heading</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<p> </p>
</body>
<html>
Your above web page in the web browser looks like:
Example on the colspan and rowspan
Example:
<html>
<body>
This table has a caption,and a thick border,<h4>Cell that spans two columns:</h4>
<table border="6">
<caption>My Caption</caption>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>XYZ</td>
<td>011 273 994</td>
<td>011 274 465</td>
</tr>
</table> <h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>XYZ</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>011 273 994</td>
</tr>
<tr>
<td>011 274 465</td>
</tr>
</table>
</body>
</html>
Your above web page in the web browser looks like:
Forms and Input Element

HTML Forms are used to select different kinds of user input.
Forms
A form is an area that can contain form elements So simply you will have to irst
understand "What is Form". You must have seen the forms on the internet. Now
days there is too much craze of the forms on the internet. At least if you have an e-
mail ID then Sure you have filled the Form of e-mail registration during the creation
of your e-mail account. You fills all the information in the form, like your Name,
Registration ID, password, address, Qualification and many more clickable buttons.
Form elements are elements that allow the user to enter information like:
· text fields
· textarea fields
· drop-down menus
· radio buttons
· checkboxes, etc. in a form.
Form Tags
Data Type Description
<Form> Defines a form for user input.
<input> Defines an input field.
<textarea> Defines a text-area (a multi-line text input control).
<label> Defines a label to a control.
<fieldset> Defines a field set.
<select> Defines a selectable list (a drop-down box).
<optgroup> Defines an option group.
<option> Defines an option in the drop-down box.
<button> Defines a push button.
<form> Tag
A form is defined with the <form> tag. Form is the rectangular area in which all the
input elements are defined. Its is used inside the body section of HTML file. And it is
all done by using the <input> tag. <input> tag is an open tag hence do not need the
</input> tag.
Now see how body tag is defined below the body tag.
Format:
<body> <form>
<input>
<input>
</form> </body>
The Form's Action Attribute and the Submit Button
name name attribute defines the name of the form. Because a page can
have more than one form.
action action defines the action of form. (to which this form have to send
its values).
method method defines the type of method used to send the values of the
form.
method have two types of values. i.e. method="post",
method="get".
When the user clicks on the "Submit" button, the content of the form is sent to
another file. The form's action attribute defines the name of the file to send the
content to. The file defined in the action attribute usually does something with the
received input.
<Input> Tag
The most used form tag is the <input> tag. The type of input is specified with the
type attribute. There are the various input elements. To use these input elements in
form you will have to define the Input element in the "type" attribute in the <input>
tag.
Attributes of the <input> tag

type type attribute defines the type of input element.
e.g. <input type="text" or password or checkbox or radio button or
Drop-down menu>
name name defines the name of the input element. To access the value of
input elements better he provide names to the elements
e.g <input type="checkbox" name="firstname">
value value attribute defines the default value of input element.
The most commonly used input types are explained below:

1.Text Fields
Text fields are used when you want the user to type letters, numbers etc. in a form.
Format:
<form> First name: <input type="text" name="firstname"></form>
2.Password Fields
Text fields are used when you want the user to enter the password in the form of
letters, numbers etc. in a form, but you do not want to display the text. Then you
should use this field.
Whenever user types in the field the star or dot character appears in the text box.
Format:
<form>Password1: <input type="password" name="Password1"></form>
3.Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of
choices.
Format:
<form><input type="radio" name="sex" value="male"> Male<br></form>
Note that only one option can be chosen. you can check them by clicking on radio
buttons.
3.Checkboxes
Checkboxes are used when you want the user to select one or more options of a
limited number of choices.
Format:
<form><input type="checkbox" name="bike">I have a bike<br></form>
You can check them by clicking on checkboxes.
4.<textarea> Tag
Textarea tag is used when the user want to give big information in the form like
message. <textarea> is the only element used to send large message to other
location. It can contain number of lines and columns.
Format:
<textarea rows="6" name="S1" cols="27"></textarea>
Name can given of yours choice. You can check the textarea field by writing in it.
5.The <label> tag

Defines a label to a control. If you click the text within the label element, it is
supposed to toggle the control.
The "for" attribute binds a label to another element. Set the value of the "for"
attribute equal to the value of the "id" attribute of the related element.
Format:
<label for="element_name">Last Name:</label>
Example:
<label for="name">Last Name:</label>
Attributes:
for: defines the name of the element for which this label is made.
6.The <fieldset> tag

The fieldset element draws a box around its containing elements.
Format:
<fieldset>
<input>
<input>
</fieldset>
7.The <select> tag

The select element creates a drop-down list. Use this tag in the form element to
accept user input.
Format:
<select>
<option value=””>…</option>
<option value=””>…</option>
</select>

disabled disabled When set, it disables the drop-down list
multiple multiple When set, it specifies that multiple items can be
selected at a time
name unique_name Defines a unique name for the drop-down list
size number Defines the number of visible items in the drop-down
list
The <option> tag

The option element defines an option in the drop-down list. The <option> tag can be
used without any attributes, but you usually need the value attribute, which indicates
what is sent to the server. Use this tag in conjunction with the select element,
elsewhere it is meaningless.
Value: Defines the the value of the option to be sent to the server.
8.The <optgroup> tag

Defines an option group. This element allows you to group choices. When you have a
long list of options, groups of related choices are easier to handle.
Example:
<select>
<optgroup label="Computers">
<option value ="BE(CS)">BE(CS)</option>
<option value ="MCA">MCA</option>
</optgroup>
<optgroup label="Electronics">
<option value ="BE(ECE)">BE(ECE)</option>
<option value ="MSc(ECE)">MSc(ECE)</option>
</optgroup>
</select>
9.Buttons
Buttons are used in the forms. these are the clickable elements.
Format:
<input type="button_type"" value="value_of_button" name="button_name">
buttons are of three types:
Reset button
When you click on the reset button the value of all the elements gets clear or you
may say elements gets initialized to their default value.
format:
<input type="Reset" value="Reset" name="B1">
Submit button
When you click on the submit button the value of all the elements gets submitted to
the address mentioned in the <form> tag's "action" attribute.
format:
<input type="submit" value="Submit" name="B1"
Normal button
It is also called as push button. when when you click on the push button, it makes a
function call to the function defined in the "onclick" attribute.
format:
<input type="button" value="Button" name="B3" onclick="abc()"
Example:
<html>
<head>
<title>New Page 1</title>
</head>
<body>
<form method="POST" action="abc.asp">
<b>
<font color="#FF0000">REGISTRATION FORM</font></b><br>
<br>
First Name
<input type="text" name="firstname" size="15"><br>
Last Name
<input type="text" name="T2" size="15"><br>
E-mail ID
<input type="text" name="T3" size="15"><br>
Password
<input type="password" name="T4" size="15"></p>
<fieldset> Birthday:
<select name=".bmon">
<option value selected>[Select One]</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select><input maxLength="2" size="2" name=".bday"><input maxLength="4"
size="4" name=".byear">,
<font class="content_help"> (Month DD , YYYY)
</font></fieldset> <br>
Address<br>
<textarea rows="5" name="S1" cols="22"></textarea> <br>
<br>
Qualification:
<select>
<optgroup label="Computers">
<option value ="BE(CS)">BE(CS)</option>
<option value ="MCA">MCA</option>
</optgroup>
<optgroup label="Electronics">
<option value ="BE(ECE)">BE(ECE)</option>
<option value ="MSc(ECE)">MSc(ECE)</option>
</optgroup>
</select><br>
Hobbies: <input type="checkbox" name="C1" value="ON"> Reading
<input type="checkbox" name="C2" value="ON"> Painting
<input type="checkbox" name="C3" value="ON">Singing
<input type="checkbox" name="C4" value="ON"> fighting<br>
Sex
<input type="radio" value="v3" name="R1" checked>Male
<input type="radio" name="R1" value="V4">Female<br>
<br>
<input type="submit" value="Submit" name="B1">
<input type="reset" value="Reset" name="B2">
</form>
</body>
</html>
Multimedia
Working with Images

In html the image can be inserted using the <img> tag. <img> tag has the
attributes like width, height and src, which specifies the height and width of the
image that is to displayed on the web page and scr has the value of the path where
the image is stored.
<img> tag does not have the end tag.
Format of <img> tag :

<img src="path" width="number" height="number">
How to make the image as Hyperlink

Format:
<a href="path_of_file" > <img src="path" width="number" height="number"></a>
Hyper Links
The links can be provided between the two web pages, to go directly from one page
to the another page. Such type of links are called as the Hyperlinks. This technique
of linking one pages with other is called as the Hyperlinking.
Tags Used in the Hyperlinks

<a>: Defines an anchor
<a>Attributes Description
specifies the address or path (of any file) to which we want to
href
jump.
target specifies where the linked document will be opened.
name specifies the name of the anchor.
Types of linking
1) Open a link in the same browser window

If you want to open the new hyperlinked page in the same window then do not write
the "target" attribute in the <a> tag.
The syntax of creating an anchor:

<a href="url">Text to be displayed</a> OR <a href="url" >Text to be
displayed</a>
Example:
<a href="http://www.yahoo.com"> Visit www.yahoo.com </a>
<a href="c:\abc.html" > Visit abc.html </a>
Note:
You can write the path in both ways in HTML
<a href="c:\abc\abc.html" > Visit www.abc.com </a> or
<a href="c:/abc/abc.html" > Visit abc.html </a>
The <a> tag is used to create an anchor to link from, in href attribute we provide
the address or path of the web page (any file) to which we want to link (jump, open)
and the words between the open and close of the anchor tag will be displayed as a
hyperlink text.
2) Open a link in a new browser window

HTML uses the <a> (anchor) tag to create a link to another document. Different
attributes of the <a> tag are href, name, target.
The syntax of creating an anchor:

<a href="url"> Text to be displayed </a> OR <a href="url" target="_blank "> Text
to be displayed </a>
Example:
<a href="http://www.yahoo.com"> Visit www.yahoo.com </a>
<a href="c:\abc.html" target="_blank "> Visit abc.html </a>
3) Link to a location on the same page

The Anchor Tag and the Name Attribute
The name attribute is used to create a named anchor. When using named anchors
we can create links that can jump directly into a specific section on a page, instead
of letting the user scroll around to find what he/she is looking for
First write this named anchor on the section of the page to which you want to get
link.
Syntax of a named anchor:
<a name="label">Text (to which you want to link)</a>
Add a # sign and the name of the anchor to the end of a URL,
like this:
<a href="#label"> Hyperlinks Introduction (text you like) </a>
In this we use the href attribute of the <a> tag to link to named anchor "#intro" and
which automatically jumps to the top of the page where it was defined.
<html>
<head>
<title>Links</title>
</head>
<body>
<b>
Open a link in a new browser window
(using href & target attribute of the tag).
<br>
<br>
click here to go
<a href="http://www.ebizel.com">
www.e-bizel.com.</a><br>
<br>
click here to go
<a href="hyperlinks.htm">hyperlinks.html.</a></font>
Link to a location on the same page
<br>
<br>
go to<a href="#lesson11">
Lesson11</a><br>
go to <a href="#lesson10">Lesson10</a><br>
go to
<a href="#lesson8">Lesson8</a><br>Lesson1<br>
<br>
Lesson 2<br>
<br>
Lesson 3<br>
<br>
Lesson 4<br>
<br>
Lesson 5<br>
<br>
Lesson 6<br>
<br>
Lesson 7<br>
<br>
<a name="lesson8" >Lesson 8</a><br>

<br>
Lesson 9<br>
<br>
<a name="lesson10" > Lesson 10</a><br>
<br>
<a name="lesson11" >Lesson 11</a><br>
</b>
</body>
</html>

HTML

Uploaded by

Document Information

Original Description:

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

Uploaded by

Copyright:

Available Formats

Introduction to HTML

Here are some facts about the HTML language:

So let us see the Body of the HTML File:<html>

How To Write a HTML File

Steps to write a file & view the web page:

· Open the text editor (e.g. notepad).

>Basic HTML Tags

Basic HTML Tags

Description Of The Above Tags

Attributes of body tag

5.<hn>...</hn> Heading Tags

align value (right, center, left, justified)

6.<p>.....</p> Paragraph Tag

9. Comment Tag

You might have became bored of reading so lets do some practical.

Follow these Steps:

>Character Format Tags

Examples of the Text Formatting tags

Tag Description Format

Examples of output tags

Format with Example:

Examples of Block tags

Format Example Output

Attribute Value Description

2.The <div> tag

Format Example Output

Attribute Value Description

3.Marquee Text with <marquee> Tags

Attribute Value Description

Format : <blink> write the text to blink </blink>

It is the list of anything e.g. list of items, list of books.

<dd> tag is used for the definition-list definition.

Frames and Tables

Tags and its Attributes:

tags Attribute Value Description

How To create Horizontal Frames

Page in browser will look like:

Page in browser will Look Like:

How to Create Inline Frame

So lets have an example:

Page in browser will Look Like:

S.No. Name Class Age Address

The <table> tags

<th> <tr> and <td>Tag

tags Attribute Value Description

Example for <thead>,<tbody>and <tfoot>

Attributes of <thead>,<tbody> and <tfoot>

How To Create Table

Your above web page in the web browser looks like:

Example on the colspan and rowspan

Your above web page in the web browser looks like:

Forms and Input Element

Attributes of the <input> tag

The most commonly used input types are explained below:

5.The <label> tag

6.The <fieldset> tag

7.The <select> tag

Attribute Value Description

The <option> tag

8.The <optgroup> tag

buttons are of three types:

Working with Images

Format of <img> tag :