Sagar HTML Notes

Introduction to HTML
What is HTML?
HTML is a language made for creating the web pages for the websites.
By using HTML language the even a child can make his web pages or even his own
website so why not you.
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.
First of all let me explain the above web page and how it is created, how easily it
can be created.
It is very easy to insert the element in the HTML pages simply by writing their tags
and provide their attribute.
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 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 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>.
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>
Explanation of the page:
The title of the page is at the top in blue strip. All the text appears in white color
and background in the black color. Because in the <body> tag the bgcolor and text
color is defined. The horizontal line appears because of the <hr> tag and the <br>
tag breaks the text in between and displays it on new line. The comment statement
is not displayed.
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 Format Tag Description

<b> Displays bold text
<i> Displays italic text
<tt> Renders as teletype or mono spaced text
<u> Displays underlined text
<em> Displays emphasized text
<big> Displays big text
<small> Displays small text
<strong> Displays strong text
<sub> Displays subscripted text
<sup> Displays superscripted text
<bdo> Defines the direction of text display
<font> Defines the font face, size, and color of text
<b> Tag
The <b> tag is used to make the text bold.
Format:
<b> ................text.........</b>
<i> Tag
The <i> tag displays the italic text.
Format:
<i> ................text.........</i>
<tt> Tag
The <tt> tag displays the typewriter text.
Format:
<tt> ................text.........</tt>
<u> Tag
The <u> tag displays the underlined text.
Format:
<u> ................text.........</u>
<em> Tag
The <em> tag displays the emphasized text.
Format:
<em> ................text.........</em>
<big> Tag
The <big> tag displays the big text.
Format:
<big> ................text.........</big>
<small> Tag
The <small> tag displays the small text.
Format:
<small> ................text.........</small>
<strong> Tag
The <strong> tag displays strong text.
Format:
<strong> ................text.........</strong>
<sub> Tag
The <sub> tag displays text in subscripted format.
Format:
<sub> ................text.........</sub>
<sup> Tag
The <sup> tag displays superscripted text.
Format:
<sup> ................text.........</sup>
<bdo> Tag
The <bdo> tag defines the direction of the text.
Format:
<bdo> ................text.........</bdo>
<font> Tag
The <font> tag defines the font, color, size of the text.
Format:
<font face="font_name" 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 Here is some Hebrew text
text</bdo>
You have read all the basis tags, 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>
<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>
Page in browser will Look Like:
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
<pre> Defines preformatted text
<code> Defines computer code text
<tt> Defines teletype text
<kbd> Defines keyboard text
<var> Defines a variable
<dfn> Defines a definition term
<samp> Defines sample computer code
<pre>.........</pre>Tag
This is preformatted text. It preserves both spaces and line breaks. The pre tag is
good for displaying computer code.
Format:
<pre> .....text.....</pre>
Example:
<pre> for i = 1 to 10
print i
next i
</pre>
Output:
for i = 1 to 10
print i
next i
<code> .....text ......</code> Tag

This tag is also used to display the computer code. But better you use <pre> tag.
Format:
<code> .....text.....</code>
<kbd>.....Keyboard Input......</kbd> Tag

This tag displays the Keyboard Input.
Format:
<kbd> ........ Keyboard Input......</kbd>
<tt>......text....</tt> Tag
This tag displays the typewriter text.
Format:
<tt> .....text.....</tt>
<samp>....sample text...</samp> Tag

This tag displays the sample text.
Format:
<samp> .....sample text.....</samp>
<var> computer variable </var>

This tag defines the computer variable.
Format:
<var> computer variable </var>
<dfn> definition term </dfn>

this tag is used for definition term.
Format:
<dfn> definition term </dfn>
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
Now you have learned the Output Tags so lets do some practical. Below there is a
file type the same code on notepad (any text editor) and save it. now open this file
in the internet browser.
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
<acronym> Defines an acronym
<abbr> Defines an abbreviation
<address> Defines an address element
<blockquote> Defines an long quotation
<center> Defines centered text
<q> Defines a short quotation
<cite> Defines a citation
<ins> Defines inserted text
<del> Defines deleted text
<s> Defines strikethrough text
<strike> Defines strikethrough text
<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>
<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>
<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
<blockquote>.........Text........</blockquote>
The <blockquote> tag defines the start of a long quotation.

<blockquote>
<p>here is a long quotation here is a long quotation</p>
</blockquote>
<center>....</center>
This tag Centers its enclosed text horizontally.
Format:
<center>... text .......</center>
<q> small text</q>

The <q> tag defines the start of a short quotation.
Format:
<q> small text</q>
<cite>
This tag defines the citation.
Format:
<cite> text </cite>
<ins>
This tag provide the facility of inserting the text in between the text.
Format:
<ins> text </ins>
<del>
Defines text that has been deleted in a document.
Format:
<del>..text..</del>
<s>or<strike>
The <s> and <strike> tags defines strikethrough text.
Format:
<s> text </s> or <strike> text</strike>
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 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 A version is not available. ok!
available.</strike> ok!
Now you have learned the Output Tags, so now lets do some practical.
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
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 <head> This is header <
type="text/css"> <style
h1 {color: yellow}
h3 {color:
type="text/css">
h1 {color: yellow}
h1 >
lightgreen} h3 {color:
</style> lightgreen} This is header < h1 >
</head> </style>
<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
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 This is a paragraph in a div section
section</h4>
<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.
Now lets have an example of both the tag.

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>
In the above example we have seen the use of <style> and <div> tags. the both
the headers h1 & h3 are displayed in the Red and Blue color because their color has
been defined in the style tags. Then we saw the use of <div> tag, so the text
defined in the <div> tag in displayed in the color defined inside the <div> tag.
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, positive integer Defines the area of scrolling.
height
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.
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>
In the above example we have used both the <marquee> & <blink> tags and
output is shown. In case of <blink> tag it might happen that the text displayed in
<blink> tag do not appears to be blinking. It is all because the Internet Explorer do
not support the blinking text where as the Netscape Navigator supports.
Tags Ordered Alphabetically
Tags Description
 Defines a comment
<a> Defines an anchor
<area> Defines an area inside an image map
<b> Defines bold text
<big> Defines big text
<blink> Defines the blinking text in a document
<blockquote> Defines a long quotation
<body> Defines the body element
<button> Defines a push button
<caption> Defines a table caption
<center> Deprecated. Defines centered text
<code> Defines computer code text
<col> Defines attributes for table columns
<colgroup> Defines groups of table columns
<dd> Defines a definition description
<dir> Deprecated. Defines a directory list
<dfn> Defines a definition term
<div> Defines a section in a document
<dl> Defines a definition list
<dt> Defines a definition term
<em> Defines emphasized text
<frameset> Defines a fieldset
<font> Deprecated. Defines the font face, size, and color of text
<form> Defines a form
<frame> Defines a sub window (a frame)
<fieldset> Defines a set of frames
<html> Defines an html document
<i> Defines italic text
<iframe> Defines an inline sub window (frame)
<img> Defines an image
<input> Defines an input field
<kbd> Defines keyboard text
<label> Defines a label for a form control
<li> Defines a list item
<map> Defines an image map
<marquee> Defines the moving text in a document
<menu> Deprecated. Defines a menu list
<noframes> Defines a noframe section
<ol> Defines an ordered list
<optgroup> Defines an option group
<option> Defines an option in a drop-down list
<pre> Defines preformatted text
<s> Deprecated. Defines strikethrough text
<samp> Defines sample computer code
<select> Defines a selectable list
<small> Defines small text
<span> Defines a section in a document
<strike> Deprecated. Defines strikethrough text
<strong> Defines strong text
<style> Defines a style definition
<sub> Defines subscripted text
<sup> Defines superscripted text
<table> Defines a table
<tbody> Defines a table body
<td> Defines a table cell
<textarea> Defines a text area
<tfoot> Defines a table footer
<th> Defines a table header
<thead> Defines a table header
<tr> Defines a table row
<tt> Defines teletype text
<u> Deprecated. Defines underlined text
<ul> Defines an unordered list
<var> Defines a variable
Tags Ordered by Functionasic Tags
Tags Description
<html> Defines a html document
<body> Defines the body element
 Defines a comment
Char Format
Tags Description
<b> Defines bold text
<font> Deprecated. Defines the font face, size, and color of text
<i> Defines italic text
<em> Defines emphasized text
<big> Defines big text
<strong> Defines strong text
<small> Defines small text
<sup> Defines superscripted text
<sub> Defines subscripted text
<u> Deprecated. Defines underlined text
Output
Tags Description
<b> <pre> Defines preformatted text
<font> <code> Defines computer code text
<i> <tt> Defines teletype text
<em> <kbd> Defines keyboard text
<big> <var> Defines a variable
<strong> <dfn> Defines a definition term
<small> <samp> Defines sample computer code
Blocks
Tags Description
<blockquote> Defines an long quotation
<center> Deprecated. Defines centered text
<s> Deprecated. Defines strikethrough text
<strike> Deprecated. Defines strikethrough text
Links
Tags Description
Frames
Tags Description
<frameset> Defines a set of frames
<noframes> Defines a noframe section
Input
Tags Description
<form> Defines a form
<input> Defines an input field
<textarea> Defines a text area
<button> Defines a push button
<select> Defines a selectable list
<optgroup> Defines an option group
<option> Defines an item in a list box
<label> Defines a label for a form control
<fieldset> Defines a fieldset
Lists
Tags Description
<form> <ul> Defines an unordered list
<input> <ol> Defines an ordered list
<textarea> <li> Defines a list item
<button> <dir> Deprecated. Defines a directory list
<select> <dl> Defines a definition list
<optgroup> <dt> Defines a definition term
<option> <dd> Defines a definition description
<label> <menu> Deprecated. Defines a menu list
Images
Tags Description
<img> Defines an image
<map> Defines an image map
<area> Defines an area inside an image map
Tables
Tags Description
<thead> Defines a table header
<tfoot> Defines a table footer
Styles
Tags Description
<style> Defines a style definition
<div> Defines a section in a document
<marquee> Defines the moving text in a document
<blink> Defines the blinking text in a document
Programming
Tags Description
<script> Defines a script
<noscript> Defines a noscript section
<applet> Deprecated. Defines an applet
<object> Defines an embedded object
<param> Defines a parameter for an object
HTML Colors
These are the colors used in the Html Here colors are defined using a hexadecimal
notation for the combination of Red, Green, and Blue color values (RGB). The
lowest value that can be given to one light source is 0 (hex #00). The highest value
is 255 (hex #FF).
We write the Hex color using six bits, as HEX color code of black color is #000000.
Hex color code is the combination of Red, Green, Blue (RGB) colors. First two zero's
in the code represents the Red color, third & fourth zero's represents the Green
color and fifth & sixth zero's represents the Blue color. 'F' is the maximum value of
each zero. Hence if want the HEX color code of red color then just make the write
the the maximum value of the zero's representing the Red color. i.e Hex color code
for red color is #FF0000. Similarly you can create the HEX color code for Green &
Blue also.
To use these colors in your HTML page you will have to simply select the color
which you like then note down it's Hex color code or RGB color code and write this
color code in your page color attribute.
This table shows the result of combining Red, Green, and Blue light sources:
Color Color HEX Color RGB

#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
More Colors
This 216 cross platform web safe color palette was originally created to ensure that
all computers would display all colors correctly when running a 256 color palette.
000000 000033 000066 000099 0000CC 0000FF

003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
More Colors+
Color Name Color HEX Color
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
Shades of Red
Red Light HEX RGB
#000000 rgb(0,0,0)
#080000 rgb(8,0,0)
#100000 rgb(16,0,0)
#180000 rgb(24,0,0)
#200000 rgb(32,0,0)
#280000 rgb(40,0,0)
#300000 rgb(48,0,0)
#380000 rgb(56,0,0)
#400000 rgb(64,0,0)
#480000 rgb(72,0,0)
#500000 rgb(80,0,0)
#580000 rgb(88,0,0)
#600000 rgb(96,0,0)
#680000 rgb(104,0,0)
#700000 rgb(112,0,0)
#780000 rgb(120,0,0)
#800000 rgb(128,0,0)
#880000 rgb(136,0,0)
#900000 rgb(144,0,0)
#980000 rgb(152,0,0)
#A00000 rgb(160,0,0)
#A80000 rgb(168,0,0)
#B00000 rgb(176,0,0)
#B80000 rgb(184,0,0)
#C00000 rgb(192,0,0)
#C80000 rgb(200,0,0)
#D00000 rgb(208,0,0)
#D80000 rgb(216,0,0)
#E00000 rgb(224,0,0)
#E80000 rgb(232,0,0)
#F00000 rgb(240,0,0)
#F80000 rgb(248,0,0)
#FF0000 rgb(255,0,0)
Shades of Gray
Gray colors are displayed using an equal amount of power to all of the light
sources.
To make it easier for you to select the right gray color we have compiled a table of
gray shades for you:
RGB(0,0,0) #000000
RGB(8,8,8) #080808
RGB(16,16,16) #101010
RGB(24,24,24) #181818
RGB(32,32,32) #202020
RGB(40,40,40) #282828
RGB(48,48,48) #303030
RGB(56,56,56) #383838
RGB(64,64,64) #404040
RGB(72,72,72) #484848
RGB(80,80,80) #505050
RGB(88,88,88) #585858
RGB(96,96,96) #606060
RGB(104,104,104) #686868
RGB(112,112,112) #707070
RGB(120,120,120) #787878
RGB(128,128,128) #808080
RGB(136,136,136) #888888
RGB(144,144,144) #909090
RGB(152,152,152) #989898
RGB(160,160,160) #A0A0A0
RGB(168,168,168) #A8A8A8
RGB(176,176,176) #B0B0B0
RGB(184,184,184) #B8B8B8
RGB(192,192,192) #C0C0C0
RGB(200,200,200) #C8C8C8
RGB(208,208,208) #D0D0D0
RGB(216,216,216) #D8D8D8
RGB(224,224,224) #E0E0E0
RGB(232,232,232) #E8E8E8
RGB(240,240,240) #F0F0F0
RGB(248,248,248) #F8F8F8
RGB(255,255,255) #FFFFFF
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
Just write/copy this example inside the body of the HTML file and save the file and
open in the browser and see how it looks.
So now you have learned how to create the unordered list in the web page.
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
So now you have learned how to create the ordered list in the web page. More over
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
I alphabets.
i Specifies ordered list containing Small Roman
1 alphabets.
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> Pen is the biggest power
</dl>
So now you have learned how to create the ordered list in the web page. Now you
have done a lot in the list now you saw how simple list are.
Now lets do some Practical.
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>
Page in browser will look like:

Hyperlinks and Multimedia
In this chapter we will learn about the hyperlinks and the Multimedia. First of all
you must be thinking of that what is this hyperlinks and the multimedia.
Hyperlinks
So lets start with the hyper links or the just call them "links". Ok you just think for
a minute that what may be the meaning of the links in your point of view. Yes
again you are going in the right direction. Links means "connection between the
two things" might it be any thing. Be two Persons, Roads, or two computers. And
the links provide the facility or path between two things through which we can go
from one to another.
In the same way 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.
Hyperlinking between two html pages:

We can point to any resource on the Web: an HTML page, an image, a sound file, a
movie, etc.
Multimedia
In multimedia, you will learn how to provide the songs, video and picture (images)
in your web page. How it will feel to you that whenever you open your web page it
starts singing, playing movie, or display your family picture.
You can learn all of these things very easily. Just go on reading the Chapter and
learn the Magic of the multimedia elements.
Hyper Links
So lets start with the hyper links or the just call them "links". Links means
"connection between the two things" might it be any thing. Be two Persons, Roads
or two computers. And the links provide the facility or path between two things
through which we can go from one to another.
In the same way 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.
linking between two html pages linking on same page
As you see in the above diagram if the user first click on the Page1.html then user
automatically jumps to the Page2.html and vice-versa. Because the links on the
both pages have been provided just the user have to click on those links. We can
point to any resource on the Web: an HTML page, an image, a sound file, a movie
etc.
Tags Used in the Hyperlinks
Tag Description
You see there is only one tag in the Table i.e. <a> tag, it is called as anchor tag.
This tag is used to link the documents in the Html and it is quite simple.
The <a> Anchor Tag and its Attributes:
<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

HTML uses the <a> (anchor) tag to create a link to another document.
An anchor can point to any resource on the Web:

an HTML page, an image, a sound file, a movie, etc.
Different attributes of the <a> tag are href, name, target.

so lets see some practical on <a> tag and its attributes.
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.MYWEB.com"> Visit www. MYWEB.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. MYWEB.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.
Remember the file you want to open on an hyperlink should exist on the location
you provided in the href attribute of the <a> tag.
The above Example will display the text in a browser:

And now click on above text you will get linked to website of ebizel.com. And the
Website of ebizel.com gets opened in the same window. In this way a hyperlinking
to jump to another page is done.
2) Open a link in a new browser window

HTML uses the <a> (anchor) tag to create a link to another document. An anchor
can point to any resource on the Web: an HTML page, an image, a sound file, a
movie etc.
Different attributes of the <a> tag are href, name, target. so lets see some
practical on <a> tag and its attributes.
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. MYWEB.com"> Visit www. MYWEB.com </a>
<a href="c:\abc.html" target="_blank "> Visit abc.html </a>
Note:
You can write the path in both ways in HTML
<a href="c:\abc\abc.html" target="_blank "> Visit www. MYWEB.com </a> or
<a href="c:/abc/abc.html" target="_blank "> 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.
Remember the file you want to open on an hyperlink should exist on the location
you provided in the href attribute of the <a> tag.
The above Example will display the text in a browser:
And now click on above text you will get linked to website of ebizel.com. And the
Website of ebizel.com gets opened in the new window. In this way a hyperlinking to
jump to another page is done.
Target Attribute
With the target attribute, you can define where the linked document will be opened.
The line below will open the document in a new browser window: <a
href="http://www.ebizel.com/" target="_blank"> Visit www.ebizel.com </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.
So the first write this named anchor on the section of the page to which you want
to get link.
surround the text "Hyperlink" by a named tag as shown below:
Syntax of a named anchor:

<a name="label">Text (to which you want to link)</a>
Example:
<a name="intro"> Hyperlinks </a> for e.g. Write this line instead of the Hyperlink
at the top of page
In this way the the named anchor is defined on the same document in which
Hyperlink section of this page is linked. The name attribute is used to create a
named anchor. The name of the anchor can be any text you care to use.
To link directly to the named anchor "intro" section, if from the end of the page
you want to go to the Hyperlink introduction, then include the following line at the
end of page in body section.
Add a # sign and the name of the anchor to the end of a URL,
like this:
<a href="#intro"> 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.
Example:
if you want to link to the tips section of basic.html page of xyz.com then the
formate will be:
<a href="http://www.xyz.com/basic.html#tips"> Jump to the Useful Tips Section
</a>
only the thing is that the basic.html page tips section should have a named anchor
as
<a name="tips" > TIPS </a>
so now you have done a lot in the links now you saw how simple hyperlinks are.
so now lets do some Practical.
Example:
<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>
Your above web page in the web browser looks like:

How to Hyperlink an Image
To hyperlink an image first we have to insert the image on the web page. So
question is how to insert the image on the web page. 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. so now use the <img> tag.
<img> tag
Format:
<img src="path" width="number" height="number">
Example:
<img src="img\logo_in.gif" width="200" height="200">
The example inserts the image "logo_in.gif" with the height of 200 pixel and width
of 200 pixel. By using this tag you can insert the image in your html file, now if
you want to create this image the hyperlink then follow the steps:
How to make the image as Hyperlink
Format:
<a href="path_of_file" ><img src="path" width="number"
height="number"></a>
Example:
<a href="list_tags.htm"><img src="img\logo_in.gif" width="200"
height="200"></a>To make an image as hyperlink just enter the <img> tag
between the <a> anchor tag. And it will get Hyperlinked.
so now lets do some practical.
Example:
<html>
<head>
<title>Links</title>
</head>
<body>
<b> Here the image is hyperliked.</b>
<a href="list_tags.htm">
<img src="img/logo_in.gif" width="200" height="100"></a>
</body>
</html>
So now you have seen how the Images are inserted in the HTML pages and how
these inserted images are made as hyperlinks to any other HTML page.
Multimedia
Working with Images
In this section you will learn about "how the images can be used in HTML".
· how you can create a page with image as background.

· how you can make a picture as a hyperlink to another file (any type of file).
lets start with the first
How to Hyperlink an Image
To hyperlink an image first we have to insert the image on the web page. So
question is how to insert the image on the web page. 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.
so now use the <img> tag.
Format of <img> tag :

<img src="path" width="number" height="number">
Example:
<img src="img\logo_in.gif" width="200" height="200"> Remember the file & path
of the file you provided in the src attribute of the any tag should be correct and
must exist.
The example inserts the image "logo_in.gif" with the height of 200 pixel and width
of 200 pixel. By using this tag you can insert the image in your html file, now if you
want to create this image the hyperlink then follow the steps.
How to make the image as Hyperlink
Format:
<a href="path_of_file" > <img src="path" width="number"
height="number"></a>
Example:
<a href="list.html"><img src="img\logo_in.gif" width="200" height="200"></a>
To make an image as hyperlink just enter the <img> tag between the <a> anchor
tag.
And it will get Hyperlinked. so now lets do some practical.
Format with Example Page in browser will look like

<html>
<body>
<img border="0"
src="img/LOGO_IN.GIF" width="109"
height="68"><br>
<a href="http://www.fultoo.com">
<img src="img\logo_in.gif"
width="109" height="68"></a>
</body>
</html>
In this example the first image is not the hyperlink. But the second image is the
hyperlink to the "www.fultoo.com" and this hyperlinking is done by using <a>
anchor tag. This you will study in the hyperlinks chapter.
How to create the page with image as back ground
This you can learn in the first chapter also. Use the
background="path_of_image_file" of the <body> tag and see what happens.

<html>
<head>
<title> multi </title>
</head>
<body background="img/LOGO_IN.GIF" width="109" height="68">
</body>
</html>
Working with the Video and Audio file Files

Now you can make the web page containing the video file or whenever you open
your page a movie starts playing in it. All this can be done using the <bgsound>,
<img> & <embed> tags. Only there are some extra attributes added for the
playing the video files (movie).
These attributes are:
<bgsound> Tag
This tag is used to insert only audio files on the page. This tag does not provides
the control on the audio file.
Format:
<bgsound src="path of audio file" loop="positive integer">
Attributes

src path of audio file Defines the path of the audio file.
loop positive integer Defines the no. of times the file must be
played.
Example:
<html>
<body>
<p>
<b>starts on file open</b><br>
<bgsound src="music/border.wav" loop="5">
<br>
</body>
</html>
<img> Tag
<img> tag is used to insert the audio & Video files.
Format:
<img border="0" dynsrc="img\dog.mpg" start="fileopen" loop="0" width="134"
height="138">
This will add the video file to your page.
How to add the audio files to your page
If you want to add the audio file then just replace the name of the video file with
the other audio file name.
Example:
<img border="0" dynsrc="img\border.wav" start="fileopen" loop="0" width="134"
height="138">
dynsrc path_of_movie_file Defines the path of movie file.
start fileopen, Defines the instances on which movie starts
mouseover playing.
loop 0 to n , infinite Defines the no. of times movie should repeat.
width, pixels Defines the height & width of movie window.
height
border 0 to n Defines the width of border of movie window.
start
if you want that movie starts playing when page gets opened then use
start="fileopen", if you want that it should open when mouse pointer moves over it
then use start="mouseover".
Loop
if want to play the movie in repeating manner then use loop="infinite" or you can
provide the value 0 to n.
if loop="0" then movie will play only one time.
So lets see an example so will get more clear
Example:
<html>
<body>
<p>
<img border="0" dynsrc="img\dog.mpg" start="fileopen" loop="0" width="134"
height="138">
<br>
<b>starts on mouse over</b><br>
<img border="0" dynsrc="img\dog.mpg" start="mouseover" loop="infinite"
width="140" height="142"></p>
</body>
</html>

starts on file open
starts on mouse over
<embed> tag
This tag is also used to insert the Audio & Video file on the web pages.
Format:
<embed src="path of sound file" align="top" autostart="true" controls="consol"
height="10"
width="10" Hidden="true" loop="true">
Attributes

dynsrc path_of_movie_file Defines the path of movie file.
autostart true, false Defines the instances on which movie starts
playing.
true- the file starts playing automatically on
page open
false- the do not starts playing on page
open.
loop true Defines the no. of times movie should
false repeat.
positive integer true- file will play for infinite loop.
false-file will play only once
0 to n positive integer will play file for value
of n times.
width, pixels Defines the height & width of movie
height window.
hidden true false Defines the controls to be hidden or
not.true-- control gets hidden.
controls consol, smallconsol, Defines the types of controls the user wants
playbutton,pausebutton, on the page to control the file.
stopbutton, volumelever
Example:
<html>
<body>
<p>
<embed src="path of sound file" align="top" autostart="true"
controls="consol"height="10" width="10" Hidden="true" loop="true"><br>
</body>
</html>
By using the <embed> tag use can play both type of files (audio & video), just you
have to provide the path of the file in the src attribute.
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 divides 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 divides 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
Tags and its Attributes:
tags Attribute Value Description

<frameset> rows pixels, % part of Defines the proportion of division
page of page in horizontal frame.
cols pixels, % part of Defines the proportion of division
page of 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.
<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:
If you want to create the three vertical frames of ratio 20%, 50%, 30% of the
page.
then the <frameset> tag will be:
<frameset cols="20%,50%,30%">
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.
<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.
<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.
Just write/copy this example on any text editor new file and save the file and
Example:
This example will display empty frames.
<html>
<frame>
<frame>
<frame>
</frameset>
<head>
<title> Frames</title>
</head>
</html>
Example:
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>
</head>
</html>

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 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>
</head>
</html>

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>

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.
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:

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>
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
<thead> Defines a table head
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
colorname the 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
colorname of 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
baseline of cell content
<th>,<td> width pixels % Specifies the width of the table
cell. Deprecated. Use styles
instead.
<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>

Example on the colspan and rowspan
Here you can see what the colspan and rowspan do.
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>
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.
So once again take a look on the form:

Now you saw the sample of Yahoo ID Registration form containing some of
elements of the form.
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.
example page in browser will look like

<form name="input"
Username :
action="forms_regisration.asp"
method="post"> Password
Username: :
<input type="text" name="user" Submit
size="20"><br>
Password :<input type="password"
name="pass" size="20">
<br><input type="submit"
value="Submit">
</form>
If you type some characters in the text field above, and click the "Submit" button,
you will send your input to a page called "forms_regisration.asp". That page will
show you 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:
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>

<form>
First name :
First name: <input type="text"
name="firstname"> Last name
<br> :
Last name: <input type="text"
name="lastname">
</form>
Note that the form itself is not visible. Also note that in most browsers, the width of
the text field is 20 characters by default. You can check them by typing in Text
fields.
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>

<form> Password1 : <input
Password1 :
type="password" name="Password1">
<br> Password2
Password2: <input type="Password" :
name="Password2" value="abc123">
</form>
In the example the password2 field has the default value "abc123". You can check
them by typing in password fields.
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>

<form> Male
<input type="radio" name="sex" value="male">
Male Female
<br>
<input type="radio" name="sex"
value="female"> Female
</form>
Note that only one option can be chosen. you can check them by clicking on radio
buttons.
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>
<form> I have a bike
<input type="checkbox" name="bike">
I have a bike I have a car
<br>
<input type="checkbox" name="car">
I have a car
</form>
You can check them by clicking on checkboxes.
<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>
<form> write your message here
write your message here<br>
<textarea rows="4" name="S1"
cols="22"></textarea>
</form>
Name can given of yours choice. You can check the textarea field by writing in it.
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.
<label for="name"> Name:</label>
Name :
<input type="text" name="name" id="name" />
The <fieldset> tag
The fieldset element draws a box around its containing elements.

<fieldset> first name
first name <input type="text" size="3">
</input> last name
last name <input type="text" size="3">
</input>
</fieldset>
The <select> tag
The select element creates a drop-down list. Use this tag in the form element to
accept user input.
<select>
<option SELECTED
VALUE="delhi">delhi</option>
<option VALUE="calcutta">calcutta</option>
<option VALUE="mumbai">mumbai</option>
<option VALUE="chennai">chennai</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 <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.
<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>
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.
<select>
</select>
Optional Attributes
disabled Specifies that the option should be disabled when it first loads
value="disabled"
label Defines a label to use when using <optgroup>
value="text"
selected Specifies that the option should appear selected (will be
displayed first in list) value="selected"
value Defines the the value of the option to be sent to the server.
value="text"
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">
</optgroup>
<optgroup label="Electronics">
</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>
so now you saw how simple it is to create the form in HTML.

Sagar HTML Notes

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Sagar HTML Notes

Enviado por

Direitos autorais:

Formatos disponíveis

Introduction to HTML

Here are some facts about the HTML language:

Why do Need HTML

What is an HTML File?

· HTML stands for Hyper Text Markup Language.

Basic Description of HTML File

The HTML file can be divided into the three parts:

So let us see the Body of the HTML File:

HTML Footer is the end section of the file.

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

Attribute Value Description

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

align value (right, center, left, justified)

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

In this tag align attribute can be used.

Attribute Value Description

Comment Tag

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

Follow these Steps:

Character Format Tags

Char Format Tag Description

Examples of the Text Formatting tags

Page in browser will Look Like:

So lets start with these tags:

<code> .....text ......</code> Tag

<kbd>.....Keyboard Input......</kbd> Tag

<samp>....sample text...</samp> Tag

<var> computer variable </var>

<dfn> definition term </dfn>

Examples of output tags

Page in browser will Look Like:

Format with Example:

Format with Example:

<q> small text</q>

Examples of Block tags

The <style> tag

The <style> tag defines a style in a document.

Format Example Output

Attribute Value Description

The <div> tag

Format Example Output

Attribute Value Description

Now lets have an example of both the tag.

Page in browser will Look Like:

Marquee Text with <marquee> Tags

Attribute Value Description

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

Tags Ordered Alphabetically

Color Color HEX Color RGB

000000 000033 000066 000099 0000CC 0000FF

Red Light HEX RGB

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

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

Now lets do some Practical.

Page in browser will look like:

Hyperlinking between two html pages:

linking between two html pages linking on same page

Tags Used in the Hyperlinks