HTML Example
Example 1 : Controlling Image Borders
<HTML>
<HEAD>
<TITLE> Working with Images </TITLE>
</HEAD>
<BODY BACKGROUND = "images/image1.gif">
<B> Controlling Image Borders ! </B>
<CENTER>
<I>Image Without a BORDER </I><BR><BR>
<IMG SRC = "images/image2.gif"><BR><BR>
<I>Image With BORDER = 3</I><BR><BR>
<IMG BORDER = 3 SRC = "images/image2.gif"><BR>
</CENTER>
</BODY>
</HTML>
Example 2: Controlling Image Sizes
<HTML>
<HEAD>
<TITLE> Working with Images </TITLE>
</HEAD>
<BODY BACKGROUND = "images/image1.gif">
<B>Controlling Image Sizes !</B>
<CENTER>
<I>Normal Image Size</I><BR><BR>
<IMG SRC="images/image2.GIF"><BR>
<I>Image With Size(Height And Width) Set To 200</I><BR><BR>
<IMG WIDTH = 200 HEIGHT = 200 SRC = "images/image2.gif"><BR>
</CENTER>
</BODY>
</HTML>
Example 3: Controlling Image Align
<HTML>
<HEAD>
<TITLE> Working with Images </TITLE>
</HEAD>
<BODY BACKGROUND = "images/image1.gif">
<B><I>Image Aligned Left</I></B>
<IMG SRC = "images/image2.gif" ALIGN = left> <BR> <BR>
Silicon Chip Technologies, <BR>
<I> We Specialize In Corporate Training, Software Development And Placements. Our
Training Programs and Software Development include Web Based Commercial Applications
and Commercial Application Development using Databases. </I><BR><BR><BR><BR>
<B><I>Image Aligned Right</I></B>
<IMG SRC = "images/image2.gif" ALIGN = right> <BR> <BR>
Silicon Chip Technologies, <BR><I>We Specialize In Corporate Training, Software
Development And Placements. Our Training Programs and Software Development include
Web Based Commercial Applications and Commercial Application Development using
Databases</I>
</BODY>
</HTML>
Example 4: Use of ALT Attribute
<HTML>
<HEAD>
<TITLE> Working with Images </TITLE>
</HEAD>
<BODY BACKGROUND="images/image1.GIF">
<B>Use of ALT attribute<BR>
<CENTER><I>Avaliable Image : Javacup.gif</I><BR><BR>
<IMG SRC = "images/javacup.gif"><BR><BR>
<I>Unavaliable Image : Javac.gif - Without the ALT Attribute </I><BR><BR>
<IMG SRC = "images/javac.gif"><BR><BR>
<I>Unavaliable Image : Javac.gif - With the ALT Attribute set to "Java" </I> <BR>
<BR><IMG SRC = "images/javac.gif" ALT = "Java"><BR>
</CENTER>
</BODY>
</HTML>
Example 5: The Intercity Web Using Image Tag Attributes
<HTML>
<HEAD>
<TITLE>WORLD WIDE WEB</TITLE>
</HEAD>
<BODY BACKGROUND="images/texture1.gif">
<CENTER>
<B><I>THE INTERCITY WEB</I></B><BR>
<IMG SRC="images/house.GIF" Border=4><BR><BR>
</CENTER>
<IMG WIDTH=100 HEIGHT=100 SRC="images/Javacup.GIF" ALIGN=left>
<B><I>THE WORLD WIDE WEB</I></B><BR>
<I>The World Wide Web, or Simply the Web, has been a 'Killer App'
of the Internet. Certainly its capability to display text and
graphics and provide access to other pages and information has
made it the fastest growing component of the Internet. Major
online services are America Online, CompuServe and Prodigy.
</I><BR><BR><BR>
<IMG WIDTH=100 HEIGHT=100 SRC="images/COMPUTER.GIF" ALIGN=Right>
<B><I>GET CONNECTED</I></B><BR>
<I>A way to access the web is to get an account with an Internet
Service Provider, or ISP. These accounts include access to the
World Wide Web and other Internet resources, and often provide
space to store Web pages one will create. A very helpful feature
of the web is the capability to move from page to page by selecting
specific highlighted words and prases or images, which are called as
links.
</I><BR><BR><BR>
</BODY>
</HTML>
Example 6: Specifying the BORDER and WIDTH of the Table
<HTML>
<HEAD>
<TITLE>Table Attributes</TITLE>
</HEAD>
<BODY BGCOLOR = LIGHTGREY>
<B>Specifying the BORDER and WIDTH of the Table!</B>
<BR><BR><BR><BR>
<CENTER>
<TABLE BORDER=5 WIDTH=50%>
<CAPTION ALIGN=bottom>
<B>Personal Information</B>
</CAPTION>
<TR><TH>NAME</TH><TH>AGE</TH></TR>
<TR ALIGN=CENTER><TD >Shilpa</TD>
<TD >21 </TD></TR>
<TR ALIGN=CENTER>
<TD>Vaishali</TD><TD>22</TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Example 7: Specifying CELLPADDING
<HTML>
<HEAD>
<TITLE>Working With Table</TITLE>
</HEAD>
<BODY BGCOLOR=LIGHTGREY>
<B>Specifying CELLPADDING !</B><BR>
<HR>
<I>Without Cellpadding</I>
<CENTER>
<TABLE BORDER=1 WIDTH=25% ALIGN=CENTER>
<TR>
<TH>NAME</TH>
<TH>AGE</TH>
</TR>
<TR ALIGN=CENTER>
<TD >Shilpa</TD>
<TD >21 </TD>
</TR>
<TR ALIGN=CENTER>
<TD>Vaishali</TD>
<TD>22</TD>
</TR>
</TABLE>
</CENTER>
<HR>
<I>With Cellpadding of 10</I>
<CENTER>
<TABLE BORDER=1 WIDTH=25% CELLPADDING=10 ALIGN=CENTER>
<TR>
<TH>NAME</TH>
<TH>AGE</TH>
</TR>
<TR ALIGN=CENTER>
<TD >Shilpa</TD>
<TD >21 </TD>
</TR>
<TR ALIGN=CENTER>
<TD>Vaishali</TD>
<TD>22</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Example 8: Controlling Space Between Adjacent Cells
<HTML>
<HEAD>
<TITLE>Working With Table</TITLE>
</HEAD>
<BODY BGCOLOR=LIGHTGREY>
<B>Controlling the space between Adjacent Cells ! </B><BR><BR>
<HR>
<I>Without Cellspacing</I>
<CENTER>
<TABLE BORDER=1 WIDTH=25% ALIGN=CENTER>
<TR>
<TH>NAME</TH>
<TH>AGE</TH>
</TR>
<TR ALIGN=CENTER>
<TD >Shilpa</TD>
<TD >21 </TD>
</TR>
<TR ALIGN=CENTER>
<TD>Vaishali</TD>
<TD>22</TD>
</TR>
</TABLE>
</CENTER>
<HR>
<I>With Cellspacing of 10</I>
<CENTER>
<TABLE BORDER=1 CELLSPACING = 10 WIDTH=25% ALIGN=CENTER>
<TR>
<TH>NAME</TH>
<TH>AGE</TH>
</TR>
<TR ALIGN=CENTER>
<TD >Shilpa</TD>
<TD >21 </TD>
</TR>
<TR ALIGN=CENTER>
<TD>Vaishali</TD>
<TD>22</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Example 9: Specifying Colored Table Cells
<HTML>
<HEAD>
<TITLE>Working With Tables</TITLE>
</HEAD>
<BODY BGCOLOR=LIGHTGREY>
<B>Specifying Coloured Table Cells !</B><BR><BR><BR><BR>
<CENTER>
<TABLE BORDER=1 WIDTH=50% ALIGN=CENTER>
<TR>
<TH Bgcolor = gray>NAME</TH>
<TH Bgcolor = gray>AGE</TH>
</TR>
<TR ALIGN=CENTER>
<TD Bgcolor = black><FONT Color=white>Shilpa</FONT></TD>
<TD Bgcolor = violet><FONT Color=RED>21 </FONT></TD>
</TR>
<TR ALIGN=CENTER>
<TD Bgcolor = blue><FONT Color=white>Vaishali</FONT></TD>
<TD Bgcolor = red><FONT Color=blue>22</FONT></TD>
</TR>
<CAPTION ALIGN=bottom><B><BR>
Personal Information</B>
</CAPTION>
</TABLE>
</CENTER>
</BODY>
</HTML>
Example 10: Specifying ROWSPAN and COLSPAN Attributes
<HTML>
<HEAD>
<TITLE>Working With Table</TITLE>
</HEAD>
<BODY BGCOLOR=LIGHTGREY>
<B>Specifying ROWSPAN and COLSPAN Attributes !</B>
<BR><BR><BR><BR>
<CENTER>
<TABLE BORDER=1 WIDTH=50% ALIGN=CENTER>
<TR>
<TH ROWSPAN=2>NAME
<TH COLSPAN=3>MARKS
</TR>
<TR>
<TH>PowerBuilder
<TH>VisualBasic
<TH>Developer2000
</TR>
<TR ALIGN=CENTER>
<TD> Shilpa
<TD> 21
<TD> 45
<TD> 30
</TR>
<TR ALIGN=CENTER>
<TD> Vaishali
<TD> 26
<TD> 30
<TD> 40
</TR>
<CAPTION ALIGN=bottom><B><BR>Mark Sheet</B></CAPTION>
</TABLE>
</CENTER>
</BODY>
</HTML>
Example 11: Time Table Using Table Attributes
<HTML>
<HEAD>
<TITLE>Table Test</TITLE>
</HEAD>
<BODY BACKGROUND="images/texture1.gif">
<TABLE BORDER=2 CELLPADDING=3 ALIGN=CENTER>
<CAPTION><B> Time Table And Fare List<B><CAPTION>
<TR>
<TH ROWSPAN=2>Name of Train
<TH ROWSPAN=2>Place
<TH ROWSPAN=2>Destination
<TH COLSPAN=2>Time
<TH ROWSPAN=2>Fare
</TR>
<TR><TH>Arrival<TH>Departure</TR>
<TR>
<TD>Rajdhani Express
<TD ALIGN=CENTER>Bombay
<TD ALIGN=CENTER>Delhi
<TD ALIGN=CENTER>07.30
<TD ALIGN=CENTER>08.45
<TD ALIGN=RIGHT>Rs 989.00
</TR>
<TR>
<TD>Madras Mail
<TD ALIGN=CENTER>Bombay
<TD ALIGN=CENTER>Madras
<TD ALIGN=CENTER>09.00
<TD ALIGN=CENTER>10.15
<TD ALIGN=RIGHT>Rs 450.00
</TR>
<TR>
<TD>Konya Express
<TD ALIGN=CENTER>Bombay
<TD ALIGN=CENTER>Banglore
<TD ALIGN=CENTER>11.30
<TD ALIGN=CENTER>12.25
<TD ALIGN=RIGHT>Rs 645.00
</TR>
<TR>
<TD>Konkan Express
<TD ALIGN=CENTER>Bombay
<TD ALIGN=CENTER>Manglore
<TD ALIGN=CENTER>13.30
<TD ALIGN=CENTER>14.45
<TD ALIGN=RIGHT>Rs 756.00
</TR>
<TR>
<TD>Deccan Express
<TD ALIGN=CENTER>Bombay
<TD ALIGN=CENTER>Pune
<TD ALIGN=CENTER>16.00
<TD ALIGN=CENTER>17.30
<TD ALIGN=RIGHT>Rs 345.00
</TR>
</TABLE>
</BODY>
</HTML>
Example 12: Using Anchor Tag
<HTML>
<BODY >
<FONT FACE="Arial" COLOR="Green">
Welcome to our homepage.
<BR>
This page has links to the website of
</FONT>
<FONT FACE="ZappedChancellor" SIZE=5 COLOR="Brown">
<B> ABC Lever Inc.</B>
</FONT>
<P>
<FONT FACE="Arial" COLOR="Green">
For further information click on any one of the following :
<UL>
<LI><A HREF="aboutus.htm" >About ABC Lever Inc.</A>
<P>
<LI><A HREF="aboutus.htm#SECTION 1" >
Contact information</A>
</UL>
</FONT>
</BODY>
</HTML>
Example 13: Using Image Link
<HTML>
<HEAD>
<Title> Delta Engineering Pvt. Ltd. </Title>
</HEAD>
<BODY Background = "../pinkwhit.gif">
<CENTER>
<Font face = "Brush Script MT" size = 6 color="#008000">
<IMG Src = "images/Logo.gif" Align = bottom>
<I> Delta Engineering Pvt. Ltd. </I>
<HR>
</Font>
<Font size = 3 color = "#008000">
<B><I><BR>
Delta Engineering Pvt. Ltd. is a specialist manufacturer of wire and wire products. DEPL
established in Mumbai, India is ideally located for shipments to any part of the world. The
main items of manufacture, in collaboration with Gulf Fencing Industry (GFI) include
protector gabions and protector fencing systems.
<B><I><P>
<TABLE WIDTH = 90%>
<TR>
<TD ALIGN=CENTER>
<A Href = "Ex4_1.html">
<img src="images/profile.gif" alt="Profile" width="101" height="35" Border = 0>
</A>
<TD ALIGN=CENTER>
<A HREF = "Ex4_2.html">
<img src="images/conwire.gif" alt="Barbed Wire" width="101" height="35" Border = 0>
</A>
<TD ALIGN=CENTER>
<A Href = "Ex4_3.html">
<img src="images/contape.gif" alt="barbed tapes" width="101" height="35" Border = 0>
</A>
<TD ALIGN=CENTER>
<A Href = "Ex4_4.html">
<img src="images/anifenc.gif" alt="Fencing" width="101" height="35" Border = 0>
</A>
</TR>
</TABLE>
</Center>
</BODY>
</HTML>
Example 14: Link Using another Document Location
<HTML>
<BODY Background = "images/texture1.gif">
<CENTER><FONT FACE = "LatinoPalSH" SIZE=+2><B>
Web Guidelines</B><BR><BR></FONT>
</CENTER>
<FONT FACE = "LatinoPalSH">
There are several guidelines that can be followed when creating and developing Web Sites.
The user needs to be familiar with the working of the Internet, several terms like Web Server,
Web Pages etc. Further, more information about hosting a Web Site needs to be understood.
These and more information has been segregated into sections and listed below. Clicking on
any of these sections will lead to a detailed explanation of the section. <BR><BR>
<B>These are References To a Section in Another Document.</B>
<BR><BR>
<UL>
<LI><A HREF = "Ex2_1.htm#SECTION1">Section 1</A>
<LI><A HREF = "Ex2_1.htm#SECTION2">Section 2</A>
<LI><A HREF = "Ex2_1.htm#SECTION3">Section 3</A>
</UL>
</FONT>
</BODY>
</HTML>
Example 15: Link Using Image Maps
<HTML>
<HEAD>
<TITLE>Using Image Maps !! </TITLE>
</HEAD>
<BODY BackGround = "images/texture1.gif">
<MAP Name = "AlertMap">
<Area shape = "Rect" Coords = "102,74,164,96" Href = "Ex3_1.htm">
<Area shape = "Rect" Coords = "209,74,272,96" Href = "Ex3_2.htm">
</MAP>
<BR>
<H2><I> Planning a Holiday ?</I></H2><BR>
<I><B>Know about the Best places of the World from where you are ! </I></B>
<P>
<I>My Home Site will give a detailed information about the best places
throughout the World. Get all the required information about the best
Restaurants, Resorts, Food n Drink, <BR>
And much more . . . !!!</I>
<BR><BR>
<CENTER>
<IMG Src = "images/alert.gif" UseMap = "#AlertMap">
</CENTER>
</BODY>
</HTML>
Example 16: Using Link Tag within LI
<HTML>
<BODY Background = "images/texture1.gif">
<CENTER><FONT Face = "LatinoPalSH"> <B>
SILICON CHIP TECHNOLOGIES</B><BR>
<IMG WIDTH=50 HEIGHT=50 SRC="images/traing31.gif">
</CENTER>
<HR Noshade>
<H4>SCT Provides Corporate Training For The Following Products:</H4>
<UL>
<LI><A HREF="Ex1_1.html">HTML</A>
<LI><A HREF="Ex1_3.htm">Javascript</A>
<LI><A HREF="Ex1_2.htm">CGI</A>
<LI><A HREF="Ex1_4.htm">Java</A>
<LI><A HREF="Ex1_5.htm">PowerBuilder</A>
<LI><A HREF="Ex1_6.htm">Oracle Developer 2000</A>
<LI><A HREF="Ex1_7.htm">Oracle DBA</A>
</UL>
<SPACER SIZE = 275> Click for more Details !
</BODY>
</HTML>
Example 17: Using Frame COLS Attribute
<HTML>
<HEAD>
<TITLE> Hands on</TITLE>
</HEAD>
<FRAMESET COLS = "35%,*">
<FRAME SRC="menu.htm" Name="First">
<FRAME SRC="desc1.htm" Name="Second">
</FRAMESET>
</HTML>
Example 18: Using Frame ROWS Attribute
<HTML>
<FRAMESET Rows = "30%,*" Framespacing="0">
<Frame Name = "Header" Src = "Chapter7Ex2_3.htm" Frameborder ="0" Scrolling=no>
<FRAMESET Cols = "25%, *">
<Frame Name = "Index" Src = "Chapter7Ex2_1.htm" Frameborder ="0" Scrolling= no>
<Frame Name = "Details" Src = "Chapter7Ex2_2.htm" Frameborder ="0">
</FRAMESET>
</FRAMESET>
</HTML>
DHML Example (Style Sheet)
Example 19: Using Font Properties
<HTML>
<HEAD>
<TITLE> Working with Style Sheets using Font Attributes </TITLE>
<STYLE Type = "text/css">
H1 {font-family:arial, helvetica}
P {font-size:12pt; font-style:italic}
</STYLE>
</HEAD>
<BODY>
<H1> Silicon Chip Technologies </H1>
<P> Silicon Chip Technologies, a private limited company, was founded in December
1989.
<P>
The vision of this company is to provide any corporate client a single entity which
addresses all their Software Development, Technical and User Documentation, Training and
Manpower Recruitment needs.
</BODY>
</HTML>
Example 20: Using Color & Background Properties
<HTML>
<HEAD>
<TITLE> Working with Style Sheets using Color and Background Attributes </TITLE>
<STYLE Type = "text/css">
H1 {font-family:arial, helvetica; font-size:26pt;
background-image:url(images/sct-logo.gif)}
H2 {font-family:arial, helvetica; font-size:26pt;
background-image:url(images/sct-logo.gif);
background-repeat:no-repeat}
P {font-size:12pt; font-style:italic; font-weight:bold;
color:#23238e;
background-color:red;
background-position:bottom-left}
</STYLE>
</HEAD>
<BODY >
<B> <U> With background repeat </U> </B>
<H1> Silicon Chip Technologies</H1>
<P> A private limited company, which was founded in December 1989. The vision of
this company is to provide any corporate client a single entity which address all their
Software Development, Technical and User Documentation, Training and Manpower
Recruitment needs. </P>
<BR>
<B> <U> With background no-repeat </U> </B>
<H2> Silicon Chip Technologies</H2>
</BODY>
</HTML>
Example 21: Using Text Properties
<HTML>
<HEAD>
<TITLE> Working with Style Sheets using Text Attributes </TITLE>
<STYLE Type = "text/css">
H1 {font-family:arial, helvetica; font-size:26pt;
text-decoration:blink; color:red}
P {font-size:12pt; font-style:normal; font-weight:bold;
color:#23238e;}
H6 {font-size:12pt; font-style:italic; font-weight:bold;
color:#23238e; text-align:justify; text-indent:.5in}
</STYLE>
</HEAD>
<BODY >
<H1> Silicon Chip Technologies</H1>
<B> <U> Without text align, first line indent </U> </B>
<P> A private limited company, which was founded in December 1989.
The vision of this company is to provide any corporate
client a single entity which address all their Software
Development, Technical and User Documentation, Training
and Manpower Recruitment needs. </P>
<B> <U> With text align (justify), first line indent </U> </B>
<H6> A private limited company, which was founded in December 1989.
The vision of this company is to provide any corporate
client a single entity which address all their Software
Development, Technical and User Documentation, Training
and Manpower Recruitment needs. </H6>
</BODY>
</HTML>
Example 22: Using Border Properties
<HTML>
<HEAD>
<TITLE> Working with Style Sheets using Border Attributes </TITLE>
<STYLE Type = "text/css">
H1 {font-family:arial, helvetica; font-size:26pt;
color:red}
P {font-size:12pt; font-style:italic; font-weight:bold;
color:#23238e;
border-color:#23238e; border-style:groove;
border-width:thick}
</STYLE>
</HEAD>
<BODY >
<H1> Silicon Chip Technologies</H1>
<P> A private limited company, which was founded in December 1989.
The vision of this company is to provide any corporate
client a single entity which address all their Software
Development, Technical and User Documentation, Training
and Manpower Recruitment needs. </P>
</BODY>
</HTML>
Example 23: Using Margin Properties
<HTML>
<HEAD>
<TITLE> Working with Style Sheets using Margin Attributes </TITLE>
<STYLE Type = "text/css">
BODY {margin-top:10%}
H1 {font-family:arial, helvetica; font-size:26pt;
color:red}
P {font-size:12pt; font-style:italic; font-weight:bold;
color:#23238e; margin-left:15%; margin-right:15%}
</STYLE>
</HEAD>
<BODY >
<H1> Silicon Chip Technologies</H1>
<P> A private limited company, which was founded in December 1989.
The vision of this company is to provide any corporate
client a single entity which address all their Software
Development, Technical and User Documentation, Training
and Manpower Recruitment needs. </P>
</BODY>
</HTML>
Example 24: Using List Properties
<HTML>
<HEAD>
<TITLE> Working with Style Sheets using List Attributes </TITLE>
<STYLE Type = "text/css">
BODY {margin-top:5%}
H1 {font-family:arial, helvetica; font-size:26pt;
color:red}
UL {list-style-type:lower-roman}
</STYLE>
</HEAD>
<BODY >
<H1> Silicon Chip Technologies</H1>
<H4>SCT Provides Corporate Training For The Following Products:</H4>
<b>
<UL>
<LI> HTML
<LI> Javascript
<LI> CGI
<LI> Java
<LI> PowerBuilder
<LI> Oracle Developer 2000
<LI> Oracle DBA
</UL>
</b>
</BODY>
</HTML>
Example 25: Using Class Selector
<HTML>
<HEAD>
<TITLE> Working with Class </TITLE>
<STYLE Type = "text/css">
P {font-size:12pt;font-weight:bold; text-align:justify;
margin-left:10%; margin-right:10%}
.question {color:brown; font-style:italic}
.answer {color:#23238e}
</STYLE>
</HEAD>
<BODY >
<P class="question"> How to create style sheet to alter an HTML element ? </p>
<P class="answer"> The Style assignment process can be accomplished with the
<STYLE>... </STYLE> tags. The syntax for making the assignment is simple.
Between <STYLE> and </STYLE>, HTML tags to which styles are to be
assigned are to be listed and each tag with a pair of curly brackets in which specific style
attributes are to be specified. This <STYLE> tag should be within <HEAD>...
</HEAD>element. </P>
<P class='question'> What are the attributes that can be specified ? </P>
<P class='answer'> The attributes that can be specified are, Font Attributes, Color and
Background Attributes, Text Attributes, Border Attributes, Margin Attributes and List
Attributes. </P>
</BODY>
</HTML>
Example 26: Using Span Tag
<HTML>
<HEAD>
<TITLE> Working with SPAN </TITLE>
<STYLE Type = "text/css">
P {font-size:12pt;font-weight:bold; text-align:justify}
.question {color:brown; font-style:italic}
.answer {color:#23238e}
.big {font-size:14pt; text-decoration:underline;
text-transform:uppercase; color:red}
</STYLE>
</HEAD>
<BODY >
<P> <A class= "question" > How to create <SPAN class = "big"> style sheet </SPAN>
to alter an HTML element ? </p>
<P class="answer"> The Style assignment process can be accomplished with the
<STYLE>... </STYLE> tags. The syntax for making the assignment is simple.
Between <STYLE> and </STYLE>, HTML tags to which styles are to be
assigned are to be listed and each tag with a pair of curly brackets in which specific style
attributes are to be specified. This <STYLE> tag should be within <HEAD>...
</HEAD>element. </P>
<P class='question'> What are the <SPAN class = "big"> attributes </SPAN> that can be
specified ? </P>
<P class='answer'> The attributes that can be specified are, Font Attributes, Color and
Background Attributes, Text Attributes, Border Attributes, Margin Attributes and List
Attributes. </P>
</BODY>
</HTML>
Example 27: Using External Style Sheet
File Name : mystyle.css
P {font-size:12pt;font-weight:bold; text-align:justify}
.question {color:brown; font-style:italic}
.answer {color:#23238e}
.big {font-size:14pt; text-decoration:underline; text-transformation:uppercase;
color:red}
External Style Sheet
<HTML>
<HEAD>
<TITLE> Working with External Style Sheet </TITLE>
<LINK REL = stylesheet HREF = "mystyle.css">
</HEAD>
<BODY >
<P> <A class= "question" > How to create <SPAN class = "big"> style sheet </SPAN>
to alter an HTML element ? </p>
<P class="answer"> The Style assignment process can be accomplished with the
<STYLE>... </STYLE> tags. The syntax for making the assignment is simple.
Between <STYLE> and </STYLE>, HTML tags to which styles are to be
assigned are to be listed and each tag with a pair of curly brackets in which specific style
attributes are to be specified. This <STYLE> tag should be within <HEAD>...
</HEAD>element. </P>
<P class='question'> What are the <SPAN class = "big"> attributes </SPAN> that can be
specified ? </P>
<P class='answer'> The attributes that can be specified are, Font Attributes, Color and
Background Attributes, Text Attributes, Border Attributes, Margin Attributes and List
Attributes. </P>
</BODY>
</HTML>
Example 28: Using JSSS Style Sheet (Run Only Netscape 4.7 or more)
<HTML>
<HEAD>
<TITLE> Working with JSSS Style Sheets </TITLE>
<STYLE Type = "text/javascript">
document.tags.BODY.backgroundColor = 'cyan';
document.tags.H1.Color = 'red';
document.tags.H2.Color = 'blue';
document.tags.P.Color = 'green';
</STYLE>
</HEAD>
<BODY>
<BR><BR>
<H1> <center>Silicon Chip Technologies </H1>
<H2> Mumbai</center> </H2>
<P> Silicon Chip Technologies, a private limited company,
was founded in December 1989. </P>
<P> The vision of this company is to provide any corporate client a
single entity which address all their Software Development,
Technical and User Documentation, Training and Manpower
Recruitment needs.</P>
</BODY>
</HTML>
Example 29: Using Cascading Style Sheets (As above prg. using CSS)
<HTML>
<HEAD>
<TITLE> Working with Cascading Style Sheets </TITLE>
<STYLE Type = "text/css">
BODY {background-Color: 'cyan';}
H1 {Color: 'red';}
H2 {Color: 'blue';}
P {Color: 'green';}
</STYLE>
</HEAD>
<BODY>
<BR><BR>
<H1> <center>Silicon Chip Technologies </H1>
<H2> Mumbai</center> </H2>
<P> Silicon Chip Technologies, a private limited company,
was founded in December 1989.</P>
<P> The vision of this company is to provide any corporate client a
single entity which address all their Software Development,
Technical and User Documentation, Training and Manpower
Recruitment needs. </p>
</BODY>
</HTML>
Example 30: Using DIV Tag
<HTML>
<HEAD>
<TITLE> Working with DIVs </TITLE>
</HEAD>
<BODY >
<DIV ID = box1 style = "background-color:red; position:absolute; left:300;
top:150; width:50">
<IMG SRC = images/sct-logo.gif>
</DIV>
<DIV ID = box2 style = "background-color:red; position:absolute; left:380;
top:150; width:50">
<IMG SRC = images/sct-logo.gif>
</DIV>
<DIV ID = box3 style = "background-color:red; position:absolute; left:300;
top:190; width:50">
<IMG SRC = images/sct-logo.gif>
</DIV>
<DIV ID = box4 style = "background-color:red; position:absolute;
left:380; top:190; width:50">
<IMG SRC = images/sct-logo.gif>
</DIV>
</BODY>
</HTML>
Example 31: Using LAYER Tag (Run Only Netscape 4.7 or more)
<HTML>
<HEAD>
<TITLE> Working with Layers </TITLE>
</HEAD>
<BODY >
<LAYER id = box1 LEFT = 150 TOP = 150>
<img src = images/fence1.jpg height = 100 width = 170> Animal Fencing
</LAYER>
<LAYER id = box2 LEFT = 50 TOP = 200>
<img src = images/barbed.jpg height = 100 width = 140> Barbed Tapes
</LAYER>
This text is before layers.
<HR>
This text is after layers. Notice how the layers are positioned absolutely, independent of the
order they appear in the document.
</BODY>
</HTML>
Example 32: Using DIV Tag with layer
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.Maxx{font-size:120%;color:'green';font-weight:bold;font-family:cursive}
</STYLE>
<TITLE>Dynamic Layers1</TITLE>
</HEAD>
<BODY STYLE="background-color:#ffffcc">
<H1 STYLE="text-align:center">Welcome to <A Class="Maxx">CYBERSHOP INC
</A><BR>the only online Cyber Mall!</H1>
<HR>
<P STYLE = "margin-right:40%">At
<A Class = "Maxx">
CYBERSHOP INC</A>, we are proud of our Clients who avail
our services, and every personnel of the incorporation.
Here are few the services we offer
<UL>
<LI>E-Commerce Applications</LI>
<LI>Virtual Reality Module Developments</LI>
<LI>Cyberengineering</LI>
</UL>
</P>
<A Class = "Maxx">
CYBERSHOP INC </A> Products and services are known virtually all over the world.
<DIV STYLE = "position:absolute;top:35%;left:65%;background-color:'blue';
color:'white';width:120;height:110;z-index:0">
<P STYLE="font-weight:bold;font-size:20;text-align:center">Virtual Developments</P>
</DIV>
<DIV STYLE = "position:absolute;top:55%;left:73%;background-color:'green';
color:'white';width:120;height:110;z-index:1">
<P style="font-weight:bold;font-size:20;text-align:center">
Number one since 1994</P>
</DIV>
<DIV STYLE = "position:absolute;top:75%;left:81%;background-color:'goldenrod';
color:'white';width:120;height:90;z-index:2">
<P style="font-weight:bold;font-size:20;text-align:center">The Cyber Mall on the WEB</P>
</DIV>
</BODY>
</HTML>
Example 33: Using LAYER Tag with JavaScript (Run ONLY Netscape 4.7. or more)
<HTML>
<HEAD>
<TITLE>Dynamic Layers 2</TITLE>
</HEAD>
<BODY BGCOLOR = "Lavender">
<LAYER NAME = layerHeader left =5% top = 10% visibility="show">
<CENTER>
<H1>CYBERSHOP INC</H1>
</CENTER>
<HR>
</LAYER>
<LAYER NAME = layerMessage left = 5% top = 10% visibility = "hide">
<CENTER>
<H1 STYLE = "color:'Crimson' ">CYBERSHOP INC</H1>
</CENTER>
<HR>
<P STYLE = "color:'Blue';font-size:35px; font-weight:bold">
CYBERSHOP INC Provides The Following Services
<UL STYLE = "color:'Blue'; font-size:25px; font-weight:bold">
<LI>E-Commerce Applications
<LI>Virtual Reality Module Development
<LI>Cyberengineering and ...many more!
</UL>
</P>
<P STYLE="color:'Coral';font-family:cursive;font-weight:bold;font-size:15pt">
Avail our Satisfaction Guaranteed Services.
</P>
</LAYER>
<LAYER NAME= layerButton left = 80% top = 90% >
<FORM>
<INPUT TYPE=button value="Show"
onClick = "layerMessage.visibility = 'show';
layerHeader.visibility = 'hide'S">
<INPUT TYPE=button value="Reset"
onClick = "layerMessage.visibility = 'hide';
layerHeader.visibility = 'show'">
</FORM>
</LAYER>
</BODY>
</HTML>
JAVA Script Example
Example 34: Using Array
<HTML>
<HEAD>
<TITLE>Viewing the array elements of a JavaScript Array</TITLE>
</HEAD>
<BODY>
<SCRIPT language = "JavaScript">
<!-- Begin Hiding JavaScript
friends = new Array(5);
friends[0] = "Ananth";
friends[1] = "Cedric";
friends[2] = "Ketan";
friends[3] = "Rohan";
friends[4] = "Leela";
document.write(friends[0]+"<BR>");
document.write(friends[1]+"<BR>");
document.write(friends[2]+"<BR>");
document.write(friends[3]+"<BR>");
document.write(friends[4]+"<BR>");
join_crit = friends.join();
document.writeln(join_crit);
document.write(“<BR>”+friends.reverse()); // Reverse Array Printed
// End hiding JavaScript -->
</SCRIPT>
</BODY>
</HTML>
Example 35: Using onLoad and onUnLoad Event
<HTML>
<HEAD>
<TITLE>Creating and Using User Defined Functions</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var name = "";
function hello( )
{
name = prompt('Enter Your Name:','Name');
alert('Greetings ' + name + ', Welcome to my page!');
}
function goodbye( )
{
alert('Goodbye ' + name + ', Sorry to see you go!');
}
</SCRIPT>
</HEAD>
<BODY onLoad="hello( );" onUnload="goodbye( );">
<IMG SRC="Images\Pinkwhit.gif ">
</BODY>
</HTML>
Example 36: Placing Text In a Browser
<HTML>
<HEAD>
<TITLE>Outputting Text </TITLE>
</HEAD>
<BODY>
<CENTER><BR><BR>
<IMG SRC = "Images/sctfamil.gif" Width = 100 Height = 100>
Silicon Chip Technologies.<BR>
<SCRIPT Language = "Javascript">
document.write("<BR><BR>");
document.write('<IMG SRC = "Images/sctfamil.gif" Width = 100 Height = 100>');
document.write("<B>Silicon Chip Technologies.</B> <BR>")
</SCRIPT>
</CENTER>
</BODY>
</HTML>
Example 37: Using Method Prompt, Confirm & Alert
<HTML>
<HEAD>
<TITLE> Confirm Method </TITLE>
<SCRIPT LANGUAGE="JavaScript">
var question = "What is 10+10 ?";
var answer = 20;
var correct = '<img src="images/man2.gif">';
var incorrect ='<img src="images/man1.gif">';
var Response = prompt(question,"0");
for(count=1;count<3;count++)
{
if (Response != answer)
{
if (confirm("Wrong, Press OK For Another Chance"))
{
Response = prompt(question,"0");
}
else
{
alert("Better Luck Next Time");
count=3;
}
}
else
{
alert("Great!! Your Are Right");
count=3;
}
}
var output = (Response == answer) ? correct : incorrect;
document.write("<BR>");
document.write(output);
</SCRIPT>
</HEAD>
<BODY BGColor="#f0f0f0">
</BODY>
</HTML>
Example 38: Using Date Object
<HTML>
<HEAD>
<TITLE> Date validations </TITLE>
<SCRIPT>
var monthNames = new Array(12);
monthNames[0]= "January";
monthNames[1]= "February";
monthNames[2]= "March";
monthNames[3]= "April";
monthNames[4]= "May";
monthNames[5]= "June";
monthNames[6]= "July";
monthNames[7]= "August";
monthNames[8]= "September";
monthNames[9]= "October";
monthNames[10]= "November";
monthNames[11]= "December";
var dayNames = new Array(7);
dayNames[0]= "Sunday";
dayNames[1]= "Monday";
dayNames[2]= "Tuesday";
dayNames[3]= "Wednesday";
dayNames[4]= "Thursday";
dayNames[5]= "Friday";
dayNames[6]= "Saturday";
function customDateString (m_date)
{
var daywords = dayNames[m_date.getDay()];
var theday = m_date.getDate();
var themonth = monthNames[m_date.getMonth()];
var theyear = m_date.getYear();
return daywords + ", " + themonth + " " + theday + ", " + theyear;
}
</SCRIPT>
</HEAD>
<BODY>
<H1>WELCOME!</H1>
<SCRIPT>
document.write(customDateString( new Date()))
</SCRIPT>
</BODY>
</HTML>
Example 39: Using String Object
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function checkData(column_data)
{
if (column_data != "" &&
column_data.value != column_data.value.toUpperCase( ))
{
column_data.value = column_data.value.toUpperCase( )
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="text" NAME="collector" SIZE=10 onChange="checkData(this)">
<INPUT TYPE="text" NAME="dummy" SIZE=10>
</FORM>
</BODY>
</HTML>
Example 40: Password Validation Using Form Controls
<HTML>
<HEAD>
<TITLE>Password Validation</TITLE>
<SCRIPT language="JavaScript">
<!--
var userpassword = new Array(4);
userpassword[0]= "Allwyn";
userpassword[1]= "allwyn";
userpassword[2]= "Rohan";
userpassword[3]= "rohan";
function checkOut()
{
var flag =0;
var flag1 =0;
var i =0;
var j =0;
for (x=0; x<document.survey.elements.length; x++)
{
if (document.survey.elements[x].value == "")
{
alert("You forgot one of the required fields. Please try again")
return;
}
}
var user= document.survey.elements[0].value
var password = document.survey.elements[1].value
while(i<=3)
{
if(userpassword[i] == user)
{
j=i;
j++;
if(userpassword[j] == password)
{
flag=1;
break;
}
}
i+=2;
}
if(flag == 0)
{
alert("Please enter a valid user name and password")
return;
}
else
{
alert("Welcome !!\n" +document.forms[0].Username.value);
}
return;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM ACTION="" method="POST" NAME="survey"
onSubmit="return checkOut(this.form)">
<INPUT TYPE="TEXT" NAME="Username" SIZE="15" MAXLENGTH="15">
User Name
<BR><INPUT TYPE="PASSWORD" NAME="Pasword" SIZE="15">Password
<BR><INPUT TYPE="SUBMIT" VALUE="Submit"><INPUT TYPE="RESET"
VALUE="Start Over">
</FORM>
</BODY>
</HTML>
Example 41: Using Event onMouseOver & onMouseOut
<HTML>
<HEAD>
<TITLE>CHANGING IMAGES....</TITLE>
<SCRIPT>
if(document.images)
rollover="yes";
else
rollover="no";
if(rollover=="yes")
{
img1on = new Image();
img1off = new Image();
img1on.src="Images/man1.gif";
img1off.src="Images/man2.gif";
}
function imageSwitchOn(imagename)
{
if(rollover=="yes")
{
imageOn=eval(imagename + "on.src");
document [imagename].src=imageOn;
}
}
function imageSwitchOff(imagename)
{
if (rollover=="yes")
{
imageOff=eval(imagename+"off.src");
document [imagename].src=imageOff;
}
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<H1>IMAGES......</H1><BR>
<H3><I>place your mouse pointer on the picture</I></H3>
<A HREF="page1.html" onMouseOver="imageSwitchOn('img1')"
onMouseOut="imageSwitchOff('img1')">
<IMG SRC="Images/man2.gif" height=200 width=200 alt="space" name="img1">
</A>
</CENTER>
</BODY>
</HTML>
Example 42: Using Form Controls
<HMTL>
<HEAD>
<TITLE>FORMS</TITLE>
<!-- This code allows to access the Form objects Elements Array //-->
<SCRIPT Language="JavaScript">
function Ver(form1)
{
v=form1.elements.length;
if (form1.elements[3].name=="Button1")
{
alert('First form name : '+document.forms[0].name);
alert('No. of Form elements of ' +document.forms[0].name + ' = '+v);
}
else if (form1.elements[4].name=="Button2")
{
alert('Second form name : '+document.forms[1].name);
alert('No. of Form elements of ' +document.forms[1].name + ' = '+v);
}
for(i=0;i<v;i++)
alert(form1.elements[i].name+ ' is at position '+i);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM Name="Survey Form 1">
FIRST FORM: <i><b>Survey Form 1 </b></i><BR><BR>
First Name : <Input Type=Text Name="Text1" Value="" size="20"><BR><BR>
<Input Type="radio" Name="Radio1" Value=""> Fresher
<Input Type="radio" Name="Radio1" Value=""> Experienced<BR><BR>
<Input Type="Button" Name="Button1" Value="Click1"
onClick="Ver(form)">
</FORM>
<FORM Name="Survey Form 2">
SECOND FORM: <i><b> Survey Form 2 </b></i><BR><BR>
Name : <Input Type="Text" Name="Text2" Value="" size="20"> <BR><BR>
Password : <Input Type="Password" Name="Pass2" Value="" size="20">
<BR><BR>
<Input Type="CheckBox" Name="Check1" Value="" > Employed
<Input Type="CheckBox" Name="Check2" Value="" > Studying <BR><BR>
<Input Type="Button" Name="Button2" Value="Click2"
onClick="Ver(form)">
</FORM>
</BODY>
</HTML>
Example 43: Using ChekBox & Radio Button
<HMTL>
<HEAD>
<TITLE>FORMS</TITLE>
<!-- This code checks the Checkbox when the button is clicked //-->
<SCRIPT Language='JavaScript'>
function Chk(f1)
{
f1.Check.checked=true;
alert(" The Checkbox just got checked ");
f1.Check.checked=false;
f1.Radio[0].checked=true;
f1.Radio[1].checked=false;
alert(" The Radio button just got checked ");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Client Name : <Input Type=Text Name="Text" Value="" size="20"><BR><BR>
Client Address: <Input Type=Text Name="Text1" Value="" size="20"> <BR><BR>
Client E-mail Address :<Input Type=Text Name="Text2" Value=""
size="20"><BR><BR>
<Input Type="radio" Name="Radio" Value=""> Male
<Input Type="radio" Name="Radio" Value=""> Female<BR><BR>
<Input Type="CheckBox" Name="Check" Value=""> Employed <BR><BR>
<Input Type="Button" Name="Bt" Value="Set Element Array Value"
onClick="Chk(this.form)">
</FORM>
</BODY>
</HTML>
Example 44: Verify Form Elements – Fill or Not
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
function verifyData ( )
{
a=0; r="";
for (i=0; i<=4; i++)
{
if (document.forms[0].elements[i].value == "")
{ a=1;
r = r +" "+ document.forms[0].elements[i].name + ";" ;
}
else if ((i > 3)&&(a==0))
{ alert("All Textboxes are filled in - Thank You !");
}
}
for (i=0; i<=4; i++)
{ if (document.forms[0].elements[i].value == "")
{
alert("Please fill in the following Textbox / Textboxes :- " + r);
document.forms[0].elements[i].focus( );
break;
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
First Name : <INPUT TYPE="text" NAME="Firstname" SIZE=20>
Last Name : <INPUT TYPE="text" NAME="Lastname" SIZE=20><P>
Address : <INPUT TYPE="text" NAME="Address" SIZE=60><P>
Pincode : <INPUT TYPE="text" NAME="Pincode" SIZE=6><P>
<INPUT TYPE="button" NAME="act" VALUE="Verify"
onClick="verifyData( )">
</FORM>
</BODY>
<SCRIPT Language="JavaScript">
document.forms[0].Firstname.focus( );
</SCRIPT>
</HTML>
Example 45: Using Built In Function – eval()
<HTML>
<HEAD>
<TITLE>Using Text and Button objects in an HTML Form </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function calculate(form)
{
form.results.value = eval(form.entry.value);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM >
Enter a Javascript Mathematical Expression:
<INPUT TYPE = "text" NAME = "entry" VALUE = "" size="20">
<INPUT TYPE="button" VALUE = "Calculate" onClick = "calculate(this.form);" >
<BR> The result of this expression is:
<INPUT TYPE = "text" NAME = "results" onFocus = "this.blur();" size="20" >
<BR>
</FORM>
</BODY>
</HTML>
Example 46: Using onReset Event
<HMTL>
<HEAD>
<TITLE>FORMS1</TITLE>
<!-- Using Reset Button //-->
<SCRIPT>
function func(f1)
{
alert("The Form Elements have been cleared");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM onReset="func(this.form) ">
Client Name : <Input Type=Text Name="Text" Value="" size="20"><BR><BR>
Client Address: <Input Type=Text Name="Text1" Value="" size="20"> <BR><BR>
<Input Type="radio" Name="Radio" Value=""> Male
<Input Type="radio" Name="Radio" Value=""> Female<BR><BR>
<Input Type="CheckBox" Name="Check" Value=""> Employed <BR><BR>
<Input Type="Reset" Name="Rst" Value="Reset" >
</FORM>
</BODY>
</HTML>
Example 47: Using Math Object (CheckBox Button)
<HTML>
<HEAD>
<TITLE>Working with Check Boxes</TITLE>
<SCRIPT>
function calculate(form, callingField)
{
if (callingField == "result")
{
if(form.square.checked)
{
form.entry.value = Math.sqrt(form.result.value);
}
else
{
form.entry.value = form.result.value/2;
}
}
else
{
if(form.square.checked)
{
form.result.value = form.entry.value * form.entry.value;
}
else
{
form.result.value = form.entry.value * 2;
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<CENTER><BR>
<B> Value: </B>
<INPUT TYPE = "text" NAME = "entry" VALUE = 0
onChange = "calculate(this.form, this.name);" size="20"><BR><BR>
<B>Action</B>(Default - Double):
<INPUT TYPE = checkbox NAME = square
onClick = "calculate(this.form, this.name);" value="ON"> Square <BR><BR>
<B>Result:</B>
<INPUT TYPE = "text" NAME = "result" VALUE = 0
onChange = "calculate(this.form, this.name);" size="20">
</CENTER>
</FORM>
</BODY>
</HTML>
Example 48: Using Math Object (Radio Button)
<HTML>
<HEAD>
<TITLE> Working with Radio Buttons </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function calculate(form)
{
if(form.elements[2].checked)
{
form.result.value = form.entry.value * form.entry.value;
}
else
{
form.result.value = form.entry.value * 2;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM >
<CENTER><BR>
<B>Value:</B>
<INPUT TYPE="text" NAME="entry" VALUE=0 size="20">
<BR><BR>
<SPACER Size= 190>
<B>Action:<B><BR>
<SPACER Size = 225>
<INPUT TYPE="radio" NAME="action1" VALUE="twice"
onClick="calculate(this.form);">Double<BR>
<SPACER Size = 225>
<INPUT TYPE="radio" NAME="action1" VALUE="square"
onClick="calculate(this.form);">Square <BR><BR>
<B>Result:</B>
<INPUT TYPE=text NAME="result" onFocus = "this.blur();" size="20">
</CENTER>
</FORM>
</BODY>
</HTML>
Example 49: Using Combo & List Menu and TextArea
<HTML>
<HEAD>
<TITLE>McDonalds</TITLE>
<SCRIPT Language="JavaScript">
var m;
function pick(F1)
{ var z=" ";
for(j=0;j<3;j++)
{
for(i=0;i<F1.elements[j].length;i++)
{
if (F1.elements[j][i].selected)
{
var y=F1.elements[j].options[i].value;
z=z+"\n"+y;
F1.elements[3].value=z;
}
}
}
m=z;
}
function cal(F1)
{ var d=0;
for(j=0;j<3;j++)
{
for(i=0;i<F1.elements[j].length;i++)
{
if (F1.elements[j][i].selected)
{
var y=F1.elements[j].options[i].value;
s=new String(y);
var a=s.indexOf(">");
var b=s.substring(a+1,a+3);
c=parseInt(b);
d=d+c;
}
}
}
p="Total cost of the selected items="+d;
m=m+"\n"+p;
F1.elements[3].value=m;
}
function clr(F1)
{
F1.elements[3].value=" ";
}
</SCRIPT>
</HEAD>
<BODY>
<h2><font color="blue"><center> Welcome to the World Famous Fast Food Center </font>
<font color="red"> McDonalds ! </center></font></h2>
<Form name="F1">
Select the Menu Items of your choice -
<BR><BR>
<Table>
<TR valign=top><td>
Major dishes :<BR>
<select name="s1" MULTIPLE onBlur="pick(this.form)">
<option value="Mc Burger->80" selected> Mc Burger
<option value="Fish Fillets->70"> Fish Fillets
<option value="Chicken Burger->60"> Chicken Burger
<option value="Veg. Burger->45"> Veg. Burger
</select>
<BR><BR></td>
<td> </td><td> </td>
<td>
Starters :<BR>
<select name="s2" MULTIPLE onBlur="pick(this.form)">
<option value="French Fries->40"> French Fries
<option value="Nuggets->50">Nuggets
<option value="Hash Browns->55">Hash Browns
<option value="Mc Aloo Tikki->65">Mc Aloo Tikki
</select>
<BR><BR></td>
<td> </td><td> </td>
<td>
Miscellaneous :<BR>
<select name="s3" onBlur="pick(this.form)">
<option value=" ">'Check these out'
<option value="Milkshakes->35">Milkshakes
<option value="Soft drinks->20">Soft drinks
<option value="Softy->25">Softy
</select>
<BR><BR></td>
<td> </td><td> </td>
</TR>
</Table>
<Table>
<TR valign=top><td>
The items selected form the Menu are :
<TEXTAREA Name="TA1" Rows=10 Cols=50>
</TEXTAREA><BR><BR></td>
<td> </td><td> </td>
<td><BR>
<input type="button" Value="Total Cost" onClick="cal(this.form)">
<input type="button" Value="Clear" onClick="clr(this.form)">
</td>
</TR>
</Table>
</Form>
</BODY>
</HTML>
Example 50: Using Window Object
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function begin(form)
{
form_name = form;
time_out=window.setTimeout("display_date()",500);
}
function display_date()
{
form_name.date.value=new Date();
time_out=window.setTimeout("display_date()",1000);
}
function display_clock()
{
document.write('<FONT COLOR=red SIZE=+1><FORM
NAME=time_form><CENTER><BR><BR>Current Date & Time :');
document.write(' <INPUT NAME=date size=19
value=""</FORM></FONT></CENTER>');
begin(document.time_form);
}
display_clock();
</SCRIPT>
</BODY>
</HTML>
Example 51: Check All Elements of a Form
<HTML>
<HEAD>
<TITLE>Elements of a Form</TITLE>
<SCRIPT language="JavaScript">
<!-- function checkOut()
{
for (x=0; x<document.survey.elements.length; x++)
{
if (document.survey.elements[x].value == "")
{
alert("Sorry, you forgot one of the required fields. Please try again.");
break;
}
}
return false;
}//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="lightyellow">
<H2><i>INFONET SERVICES</i></H2>
<FORM NAME="survey" onSubmit="return checkOut(this.form)">
<INPUT TYPE="TEXT" NAME="firstname" SIZE="30"
MAXLENGTH="30"><b>First Name</b><br>
<br><INPUT TYPE="TEXT" NAME="lastname" SIZE="30"><b>Last
Name</b><br>
<br><INPUT TYPE="TEXT" NAME="emailaddr" SIZE="30"><b>E-mail
Address</b><br>
<br><INPUT TYPE="TEXT" NAME="address"
SIZE="30"><b>Address</b><br>
<br><INPUT TYPE="TEXT" NAME="city" SIZE="30"><b>City</b><br>
<br><INPUT NAME="state" SIZE="6"><b>State</b>
<INPUT NAME="zip" SIZE="10"><b>Postal Code</b>
<INPUT NAME="country" SIZE="15"><b>Country</b>
<P>
<b><i>Please choose the most appropriate statement</i></b>
<BR><INPUT TYPE="RADIO" NAME="buying" VALUE="regular"><b>I
regularly purchase items online</b>
<BR><INPUT TYPE="RADIO" NAME="buying" VALUE="sometimes"><b>I
have on occasion purchased items online</b>
<BR><INPUT TYPE="RADIO" NAME="buying" VALUE="might"
CHECKED><b>I have not purchased anything online, but I would
consider it</b>
<BR><INPUT TYPE="RADIO" NAME="buying" VALUE="willnot"><b>I
prefer to shop in real stores</b>
<P>
<b><i>I'm interested in (choose all that apply)</i></b>
<BR><INPUT TYPE="CHECKBOX" NAME="hiking"
VALUE="hiking"><b>Hiking</b>
<BR><INPUT TYPE="CHECKBOX" NAME="mbiking"
VALUE="mbiking"><b>Mountain Biking</b>
<BR><INPUT TYPE="CHECKBOX" NAME="camping"
VALUE="camping"><b>Camping</b>
<BR><INPUT TYPE="CHECKBOX" NAME="rock"
VALUE="rock"><b>Rock Climbing</b>
<BR><INPUT TYPE="CHECKBOX" NAME="4wd"
VALUE="4wd"><b>Off-Road 4WD</b>
<BR><INPUT TYPE="CHECKBOX" NAME="ccskiing"
VALUE="ccskiing"><b>Cross-country Skiing</b>
<P>
<b><i>I learned about this site from</i></b><br>
<SELECT NAME="referral">
<OPTION VALUE="print" SELECTED>Print Ads
<OPTION VALUE="visit"> In-Store Visit
<OPTION VALUE="rec"> Friend's Recommendation
<OPTION VALUE="internet"> Sources on the Internet
<OPTION VALUE="other"> Other
</SELECT>
<P><h4>Comments</h4><BR>
<TEXTAREA NAME="comments" COLS="40" ROWS="5">
Please type any comments here
</TEXTAREA>
<BR><INPUT TYPE="SUBMIT" VALUE="Submit"><INPUT TYPE="RESET"
VALUE="Start Over">
</FORM>
</BODY>
</HTML>
Example 1 : Controlling Image Borders
<HTML>
<HEAD>
<TITLE> Working with Images </TITLE>
</HEAD>
<BODY BACKGROUND = "images/image1.gif">
<B> Controlling Image Borders ! </B>
<CENTER>
<I>Image Without a BORDER </I><BR><BR>
<IMG SRC = "images/image2.gif"><BR><BR>
<I>Image With BORDER = 3</I><BR><BR>
<IMG BORDER = 3 SRC = "images/image2.gif"><BR>
</CENTER>
</BODY>
</HTML>
Example 2: Controlling Image Sizes
<HTML>
<HEAD>
<TITLE> Working with Images </TITLE>
</HEAD>
<BODY BACKGROUND = "images/image1.gif">
<B>Controlling Image Sizes !</B>
<CENTER>
<I>Normal Image Size</I><BR><BR>
<IMG SRC="images/image2.GIF"><BR>
<I>Image With Size(Height And Width) Set To 200</I><BR><BR>
<IMG WIDTH = 200 HEIGHT = 200 SRC = "images/image2.gif"><BR>
</CENTER>
</BODY>
</HTML>
Example 3: Controlling Image Align
<HTML>
<HEAD>
<TITLE> Working with Images </TITLE>
</HEAD>
<BODY BACKGROUND = "images/image1.gif">
<B><I>Image Aligned Left</I></B>
<IMG SRC = "images/image2.gif" ALIGN = left> <BR> <BR>
Silicon Chip Technologies, <BR>
<I> We Specialize In Corporate Training, Software Development And Placements. Our
Training Programs and Software Development include Web Based Commercial Applications
and Commercial Application Development using Databases. </I><BR><BR><BR><BR>
<B><I>Image Aligned Right</I></B>
<IMG SRC = "images/image2.gif" ALIGN = right> <BR> <BR>
Silicon Chip Technologies, <BR><I>We Specialize In Corporate Training, Software
Development And Placements. Our Training Programs and Software Development include
Web Based Commercial Applications and Commercial Application Development using
Databases</I>
</BODY>
</HTML>
Example 4: Use of ALT Attribute
<HTML>
<HEAD>
<TITLE> Working with Images </TITLE>
</HEAD>
<BODY BACKGROUND="images/image1.GIF">
<B>Use of ALT attribute<BR>
<CENTER><I>Avaliable Image : Javacup.gif</I><BR><BR>
<IMG SRC = "images/javacup.gif"><BR><BR>
<I>Unavaliable Image : Javac.gif - Without the ALT Attribute </I><BR><BR>
<IMG SRC = "images/javac.gif"><BR><BR>
<I>Unavaliable Image : Javac.gif - With the ALT Attribute set to "Java" </I> <BR>
<BR><IMG SRC = "images/javac.gif" ALT = "Java"><BR>
</CENTER>
</BODY>
</HTML>
Example 5: The Intercity Web Using Image Tag Attributes
<HTML>
<HEAD>
<TITLE>WORLD WIDE WEB</TITLE>
</HEAD>
<BODY BACKGROUND="images/texture1.gif">
<CENTER>
<B><I>THE INTERCITY WEB</I></B><BR>
<IMG SRC="images/house.GIF" Border=4><BR><BR>
</CENTER>
<IMG WIDTH=100 HEIGHT=100 SRC="images/Javacup.GIF" ALIGN=left>
<B><I>THE WORLD WIDE WEB</I></B><BR>
<I>The World Wide Web, or Simply the Web, has been a 'Killer App'
of the Internet. Certainly its capability to display text and
graphics and provide access to other pages and information has
made it the fastest growing component of the Internet. Major
online services are America Online, CompuServe and Prodigy.
</I><BR><BR><BR>
<IMG WIDTH=100 HEIGHT=100 SRC="images/COMPUTER.GIF" ALIGN=Right>
<B><I>GET CONNECTED</I></B><BR>
<I>A way to access the web is to get an account with an Internet
Service Provider, or ISP. These accounts include access to the
World Wide Web and other Internet resources, and often provide
space to store Web pages one will create. A very helpful feature
of the web is the capability to move from page to page by selecting
specific highlighted words and prases or images, which are called as
links.
</I><BR><BR><BR>
</BODY>
</HTML>
Example 6: Specifying the BORDER and WIDTH of the Table
<HTML>
<HEAD>
<TITLE>Table Attributes</TITLE>
</HEAD>
<BODY BGCOLOR = LIGHTGREY>
<B>Specifying the BORDER and WIDTH of the Table!</B>
<BR><BR><BR><BR>
<CENTER>
<TABLE BORDER=5 WIDTH=50%>
<CAPTION ALIGN=bottom>
<B>Personal Information</B>
</CAPTION>
<TR><TH>NAME</TH><TH>AGE</TH></TR>
<TR ALIGN=CENTER><TD >Shilpa</TD>
<TD >21 </TD></TR>
<TR ALIGN=CENTER>
<TD>Vaishali</TD><TD>22</TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Example 7: Specifying CELLPADDING
<HTML>
<HEAD>
<TITLE>Working With Table</TITLE>
</HEAD>
<BODY BGCOLOR=LIGHTGREY>
<B>Specifying CELLPADDING !</B><BR>
<HR>
<I>Without Cellpadding</I>
<CENTER>
<TABLE BORDER=1 WIDTH=25% ALIGN=CENTER>
<TR>
<TH>NAME</TH>
<TH>AGE</TH>
</TR>
<TR ALIGN=CENTER>
<TD >Shilpa</TD>
<TD >21 </TD>
</TR>
<TR ALIGN=CENTER>
<TD>Vaishali</TD>
<TD>22</TD>
</TR>
</TABLE>
</CENTER>
<HR>
<I>With Cellpadding of 10</I>
<CENTER>
<TABLE BORDER=1 WIDTH=25% CELLPADDING=10 ALIGN=CENTER>
<TR>
<TH>NAME</TH>
<TH>AGE</TH>
</TR>
<TR ALIGN=CENTER>
<TD >Shilpa</TD>
<TD >21 </TD>
</TR>
<TR ALIGN=CENTER>
<TD>Vaishali</TD>
<TD>22</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Example 8: Controlling Space Between Adjacent Cells
<HTML>
<HEAD>
<TITLE>Working With Table</TITLE>
</HEAD>
<BODY BGCOLOR=LIGHTGREY>
<B>Controlling the space between Adjacent Cells ! </B><BR><BR>
<HR>
<I>Without Cellspacing</I>
<CENTER>
<TABLE BORDER=1 WIDTH=25% ALIGN=CENTER>
<TR>
<TH>NAME</TH>
<TH>AGE</TH>
</TR>
<TR ALIGN=CENTER>
<TD >Shilpa</TD>
<TD >21 </TD>
</TR>
<TR ALIGN=CENTER>
<TD>Vaishali</TD>
<TD>22</TD>
</TR>
</TABLE>
</CENTER>
<HR>
<I>With Cellspacing of 10</I>
<CENTER>
<TABLE BORDER=1 CELLSPACING = 10 WIDTH=25% ALIGN=CENTER>
<TR>
<TH>NAME</TH>
<TH>AGE</TH>
</TR>
<TR ALIGN=CENTER>
<TD >Shilpa</TD>
<TD >21 </TD>
</TR>
<TR ALIGN=CENTER>
<TD>Vaishali</TD>
<TD>22</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Example 9: Specifying Colored Table Cells
<HTML>
<HEAD>
<TITLE>Working With Tables</TITLE>
</HEAD>
<BODY BGCOLOR=LIGHTGREY>
<B>Specifying Coloured Table Cells !</B><BR><BR><BR><BR>
<CENTER>
<TABLE BORDER=1 WIDTH=50% ALIGN=CENTER>
<TR>
<TH Bgcolor = gray>NAME</TH>
<TH Bgcolor = gray>AGE</TH>
</TR>
<TR ALIGN=CENTER>
<TD Bgcolor = black><FONT Color=white>Shilpa</FONT></TD>
<TD Bgcolor = violet><FONT Color=RED>21 </FONT></TD>
</TR>
<TR ALIGN=CENTER>
<TD Bgcolor = blue><FONT Color=white>Vaishali</FONT></TD>
<TD Bgcolor = red><FONT Color=blue>22</FONT></TD>
</TR>
<CAPTION ALIGN=bottom><B><BR>
Personal Information</B>
</CAPTION>
</TABLE>
</CENTER>
</BODY>
</HTML>
Example 10: Specifying ROWSPAN and COLSPAN Attributes
<HTML>
<HEAD>
<TITLE>Working With Table</TITLE>
</HEAD>
<BODY BGCOLOR=LIGHTGREY>
<B>Specifying ROWSPAN and COLSPAN Attributes !</B>
<BR><BR><BR><BR>
<CENTER>
<TABLE BORDER=1 WIDTH=50% ALIGN=CENTER>
<TR>
<TH ROWSPAN=2>NAME
<TH COLSPAN=3>MARKS
</TR>
<TR>
<TH>PowerBuilder
<TH>VisualBasic
<TH>Developer2000
</TR>
<TR ALIGN=CENTER>
<TD> Shilpa
<TD> 21
<TD> 45
<TD> 30
</TR>
<TR ALIGN=CENTER>
<TD> Vaishali
<TD> 26
<TD> 30
<TD> 40
</TR>
<CAPTION ALIGN=bottom><B><BR>Mark Sheet</B></CAPTION>
</TABLE>
</CENTER>
</BODY>
</HTML>
Example 11: Time Table Using Table Attributes
<HTML>
<HEAD>
<TITLE>Table Test</TITLE>
</HEAD>
<BODY BACKGROUND="images/texture1.gif">
<TABLE BORDER=2 CELLPADDING=3 ALIGN=CENTER>
<CAPTION><B> Time Table And Fare List<B><CAPTION>
<TR>
<TH ROWSPAN=2>Name of Train
<TH ROWSPAN=2>Place
<TH ROWSPAN=2>Destination
<TH COLSPAN=2>Time
<TH ROWSPAN=2>Fare
</TR>
<TR><TH>Arrival<TH>Departure</TR>
<TR>
<TD>Rajdhani Express
<TD ALIGN=CENTER>Bombay
<TD ALIGN=CENTER>Delhi
<TD ALIGN=CENTER>07.30
<TD ALIGN=CENTER>08.45
<TD ALIGN=RIGHT>Rs 989.00
</TR>
<TR>
<TD>Madras Mail
<TD ALIGN=CENTER>Bombay
<TD ALIGN=CENTER>Madras
<TD ALIGN=CENTER>09.00
<TD ALIGN=CENTER>10.15
<TD ALIGN=RIGHT>Rs 450.00
</TR>
<TR>
<TD>Konya Express
<TD ALIGN=CENTER>Bombay
<TD ALIGN=CENTER>Banglore
<TD ALIGN=CENTER>11.30
<TD ALIGN=CENTER>12.25
<TD ALIGN=RIGHT>Rs 645.00
</TR>
<TR>
<TD>Konkan Express
<TD ALIGN=CENTER>Bombay
<TD ALIGN=CENTER>Manglore
<TD ALIGN=CENTER>13.30
<TD ALIGN=CENTER>14.45
<TD ALIGN=RIGHT>Rs 756.00
</TR>
<TR>
<TD>Deccan Express
<TD ALIGN=CENTER>Bombay
<TD ALIGN=CENTER>Pune
<TD ALIGN=CENTER>16.00
<TD ALIGN=CENTER>17.30
<TD ALIGN=RIGHT>Rs 345.00
</TR>
</TABLE>
</BODY>
</HTML>
Example 12: Using Anchor Tag
<HTML>
<BODY >
<FONT FACE="Arial" COLOR="Green">
Welcome to our homepage.
<BR>
This page has links to the website of
</FONT>
<FONT FACE="ZappedChancellor" SIZE=5 COLOR="Brown">
<B> ABC Lever Inc.</B>
</FONT>
<P>
<FONT FACE="Arial" COLOR="Green">
For further information click on any one of the following :
<UL>
<LI><A HREF="aboutus.htm" >About ABC Lever Inc.</A>
<P>
<LI><A HREF="aboutus.htm#SECTION 1" >
Contact information</A>
</UL>
</FONT>
</BODY>
</HTML>
Example 13: Using Image Link
<HTML>
<HEAD>
<Title> Delta Engineering Pvt. Ltd. </Title>
</HEAD>
<BODY Background = "../pinkwhit.gif">
<CENTER>
<Font face = "Brush Script MT" size = 6 color="#008000">
<IMG Src = "images/Logo.gif" Align = bottom>
<I> Delta Engineering Pvt. Ltd. </I>
<HR>
</Font>
<Font size = 3 color = "#008000">
<B><I><BR>
Delta Engineering Pvt. Ltd. is a specialist manufacturer of wire and wire products. DEPL
established in Mumbai, India is ideally located for shipments to any part of the world. The
main items of manufacture, in collaboration with Gulf Fencing Industry (GFI) include
protector gabions and protector fencing systems.
<B><I><P>
<TABLE WIDTH = 90%>
<TR>
<TD ALIGN=CENTER>
<A Href = "Ex4_1.html">
<img src="images/profile.gif" alt="Profile" width="101" height="35" Border = 0>
</A>
<TD ALIGN=CENTER>
<A HREF = "Ex4_2.html">
<img src="images/conwire.gif" alt="Barbed Wire" width="101" height="35" Border = 0>
</A>
<TD ALIGN=CENTER>
<A Href = "Ex4_3.html">
<img src="images/contape.gif" alt="barbed tapes" width="101" height="35" Border = 0>
</A>
<TD ALIGN=CENTER>
<A Href = "Ex4_4.html">
<img src="images/anifenc.gif" alt="Fencing" width="101" height="35" Border = 0>
</A>
</TR>
</TABLE>
</Center>
</BODY>
</HTML>
Example 14: Link Using another Document Location
<HTML>
<BODY Background = "images/texture1.gif">
<CENTER><FONT FACE = "LatinoPalSH" SIZE=+2><B>
Web Guidelines</B><BR><BR></FONT>
</CENTER>
<FONT FACE = "LatinoPalSH">
There are several guidelines that can be followed when creating and developing Web Sites.
The user needs to be familiar with the working of the Internet, several terms like Web Server,
Web Pages etc. Further, more information about hosting a Web Site needs to be understood.
These and more information has been segregated into sections and listed below. Clicking on
any of these sections will lead to a detailed explanation of the section. <BR><BR>
<B>These are References To a Section in Another Document.</B>
<BR><BR>
<UL>
<LI><A HREF = "Ex2_1.htm#SECTION1">Section 1</A>
<LI><A HREF = "Ex2_1.htm#SECTION2">Section 2</A>
<LI><A HREF = "Ex2_1.htm#SECTION3">Section 3</A>
</UL>
</FONT>
</BODY>
</HTML>
Example 15: Link Using Image Maps
<HTML>
<HEAD>
<TITLE>Using Image Maps !! </TITLE>
</HEAD>
<BODY BackGround = "images/texture1.gif">
<MAP Name = "AlertMap">
<Area shape = "Rect" Coords = "102,74,164,96" Href = "Ex3_1.htm">
<Area shape = "Rect" Coords = "209,74,272,96" Href = "Ex3_2.htm">
</MAP>
<BR>
<H2><I> Planning a Holiday ?</I></H2><BR>
<I><B>Know about the Best places of the World from where you are ! </I></B>
<P>
<I>My Home Site will give a detailed information about the best places
throughout the World. Get all the required information about the best
Restaurants, Resorts, Food n Drink, <BR>
And much more . . . !!!</I>
<BR><BR>
<CENTER>
<IMG Src = "images/alert.gif" UseMap = "#AlertMap">
</CENTER>
</BODY>
</HTML>
Example 16: Using Link Tag within LI
<HTML>
<BODY Background = "images/texture1.gif">
<CENTER><FONT Face = "LatinoPalSH"> <B>
SILICON CHIP TECHNOLOGIES</B><BR>
<IMG WIDTH=50 HEIGHT=50 SRC="images/traing31.gif">
</CENTER>
<HR Noshade>
<H4>SCT Provides Corporate Training For The Following Products:</H4>
<UL>
<LI><A HREF="Ex1_1.html">HTML</A>
<LI><A HREF="Ex1_3.htm">Javascript</A>
<LI><A HREF="Ex1_2.htm">CGI</A>
<LI><A HREF="Ex1_4.htm">Java</A>
<LI><A HREF="Ex1_5.htm">PowerBuilder</A>
<LI><A HREF="Ex1_6.htm">Oracle Developer 2000</A>
<LI><A HREF="Ex1_7.htm">Oracle DBA</A>
</UL>
<SPACER SIZE = 275> Click for more Details !
</BODY>
</HTML>
Example 17: Using Frame COLS Attribute
<HTML>
<HEAD>
<TITLE> Hands on</TITLE>
</HEAD>
<FRAMESET COLS = "35%,*">
<FRAME SRC="menu.htm" Name="First">
<FRAME SRC="desc1.htm" Name="Second">
</FRAMESET>
</HTML>
Example 18: Using Frame ROWS Attribute
<HTML>
<FRAMESET Rows = "30%,*" Framespacing="0">
<Frame Name = "Header" Src = "Chapter7Ex2_3.htm" Frameborder ="0" Scrolling=no>
<FRAMESET Cols = "25%, *">
<Frame Name = "Index" Src = "Chapter7Ex2_1.htm" Frameborder ="0" Scrolling= no>
<Frame Name = "Details" Src = "Chapter7Ex2_2.htm" Frameborder ="0">
</FRAMESET>
</FRAMESET>
</HTML>
DHML Example (Style Sheet)
Example 19: Using Font Properties
<HTML>
<HEAD>
<TITLE> Working with Style Sheets using Font Attributes </TITLE>
<STYLE Type = "text/css">
H1 {font-family:arial, helvetica}
P {font-size:12pt; font-style:italic}
</STYLE>
</HEAD>
<BODY>
<H1> Silicon Chip Technologies </H1>
<P> Silicon Chip Technologies, a private limited company, was founded in December
1989.
<P>
The vision of this company is to provide any corporate client a single entity which
addresses all their Software Development, Technical and User Documentation, Training and
Manpower Recruitment needs.
</BODY>
</HTML>
Example 20: Using Color & Background Properties
<HTML>
<HEAD>
<TITLE> Working with Style Sheets using Color and Background Attributes </TITLE>
<STYLE Type = "text/css">
H1 {font-family:arial, helvetica; font-size:26pt;
background-image:url(images/sct-logo.gif)}
H2 {font-family:arial, helvetica; font-size:26pt;
background-image:url(images/sct-logo.gif);
background-repeat:no-repeat}
P {font-size:12pt; font-style:italic; font-weight:bold;
color:#23238e;
background-color:red;
background-position:bottom-left}
</STYLE>
</HEAD>
<BODY >
<B> <U> With background repeat </U> </B>
<H1> Silicon Chip Technologies</H1>
<P> A private limited company, which was founded in December 1989. The vision of
this company is to provide any corporate client a single entity which address all their
Software Development, Technical and User Documentation, Training and Manpower
Recruitment needs. </P>
<BR>
<B> <U> With background no-repeat </U> </B>
<H2> Silicon Chip Technologies</H2>
</BODY>
</HTML>
Example 21: Using Text Properties
<HTML>
<HEAD>
<TITLE> Working with Style Sheets using Text Attributes </TITLE>
<STYLE Type = "text/css">
H1 {font-family:arial, helvetica; font-size:26pt;
text-decoration:blink; color:red}
P {font-size:12pt; font-style:normal; font-weight:bold;
color:#23238e;}
H6 {font-size:12pt; font-style:italic; font-weight:bold;
color:#23238e; text-align:justify; text-indent:.5in}
</STYLE>
</HEAD>
<BODY >
<H1> Silicon Chip Technologies</H1>
<B> <U> Without text align, first line indent </U> </B>
<P> A private limited company, which was founded in December 1989.
The vision of this company is to provide any corporate
client a single entity which address all their Software
Development, Technical and User Documentation, Training
and Manpower Recruitment needs. </P>
<B> <U> With text align (justify), first line indent </U> </B>
<H6> A private limited company, which was founded in December 1989.
The vision of this company is to provide any corporate
client a single entity which address all their Software
Development, Technical and User Documentation, Training
and Manpower Recruitment needs. </H6>
</BODY>
</HTML>
Example 22: Using Border Properties
<HTML>
<HEAD>
<TITLE> Working with Style Sheets using Border Attributes </TITLE>
<STYLE Type = "text/css">
H1 {font-family:arial, helvetica; font-size:26pt;
color:red}
P {font-size:12pt; font-style:italic; font-weight:bold;
color:#23238e;
border-color:#23238e; border-style:groove;
border-width:thick}
</STYLE>
</HEAD>
<BODY >
<H1> Silicon Chip Technologies</H1>
<P> A private limited company, which was founded in December 1989.
The vision of this company is to provide any corporate
client a single entity which address all their Software
Development, Technical and User Documentation, Training
and Manpower Recruitment needs. </P>
</BODY>
</HTML>
Example 23: Using Margin Properties
<HTML>
<HEAD>
<TITLE> Working with Style Sheets using Margin Attributes </TITLE>
<STYLE Type = "text/css">
BODY {margin-top:10%}
H1 {font-family:arial, helvetica; font-size:26pt;
color:red}
P {font-size:12pt; font-style:italic; font-weight:bold;
color:#23238e; margin-left:15%; margin-right:15%}
</STYLE>
</HEAD>
<BODY >
<H1> Silicon Chip Technologies</H1>
<P> A private limited company, which was founded in December 1989.
The vision of this company is to provide any corporate
client a single entity which address all their Software
Development, Technical and User Documentation, Training
and Manpower Recruitment needs. </P>
</BODY>
</HTML>
Example 24: Using List Properties
<HTML>
<HEAD>
<TITLE> Working with Style Sheets using List Attributes </TITLE>
<STYLE Type = "text/css">
BODY {margin-top:5%}
H1 {font-family:arial, helvetica; font-size:26pt;
color:red}
UL {list-style-type:lower-roman}
</STYLE>
</HEAD>
<BODY >
<H1> Silicon Chip Technologies</H1>
<H4>SCT Provides Corporate Training For The Following Products:</H4>
<b>
<UL>
<LI> HTML
<LI> Javascript
<LI> CGI
<LI> Java
<LI> PowerBuilder
<LI> Oracle Developer 2000
<LI> Oracle DBA
</UL>
</b>
</BODY>
</HTML>
Example 25: Using Class Selector
<HTML>
<HEAD>
<TITLE> Working with Class </TITLE>
<STYLE Type = "text/css">
P {font-size:12pt;font-weight:bold; text-align:justify;
margin-left:10%; margin-right:10%}
.question {color:brown; font-style:italic}
.answer {color:#23238e}
</STYLE>
</HEAD>
<BODY >
<P class="question"> How to create style sheet to alter an HTML element ? </p>
<P class="answer"> The Style assignment process can be accomplished with the
<STYLE>... </STYLE> tags. The syntax for making the assignment is simple.
Between <STYLE> and </STYLE>, HTML tags to which styles are to be
assigned are to be listed and each tag with a pair of curly brackets in which specific style
attributes are to be specified. This <STYLE> tag should be within <HEAD>...
</HEAD>element. </P>
<P class='question'> What are the attributes that can be specified ? </P>
<P class='answer'> The attributes that can be specified are, Font Attributes, Color and
Background Attributes, Text Attributes, Border Attributes, Margin Attributes and List
Attributes. </P>
</BODY>
</HTML>
Example 26: Using Span Tag
<HTML>
<HEAD>
<TITLE> Working with SPAN </TITLE>
<STYLE Type = "text/css">
P {font-size:12pt;font-weight:bold; text-align:justify}
.question {color:brown; font-style:italic}
.answer {color:#23238e}
.big {font-size:14pt; text-decoration:underline;
text-transform:uppercase; color:red}
</STYLE>
</HEAD>
<BODY >
<P> <A class= "question" > How to create <SPAN class = "big"> style sheet </SPAN>
to alter an HTML element ? </p>
<P class="answer"> The Style assignment process can be accomplished with the
<STYLE>... </STYLE> tags. The syntax for making the assignment is simple.
Between <STYLE> and </STYLE>, HTML tags to which styles are to be
assigned are to be listed and each tag with a pair of curly brackets in which specific style
attributes are to be specified. This <STYLE> tag should be within <HEAD>...
</HEAD>element. </P>
<P class='question'> What are the <SPAN class = "big"> attributes </SPAN> that can be
specified ? </P>
<P class='answer'> The attributes that can be specified are, Font Attributes, Color and
Background Attributes, Text Attributes, Border Attributes, Margin Attributes and List
Attributes. </P>
</BODY>
</HTML>
Example 27: Using External Style Sheet
File Name : mystyle.css
P {font-size:12pt;font-weight:bold; text-align:justify}
.question {color:brown; font-style:italic}
.answer {color:#23238e}
.big {font-size:14pt; text-decoration:underline; text-transformation:uppercase;
color:red}
External Style Sheet
<HTML>
<HEAD>
<TITLE> Working with External Style Sheet </TITLE>
<LINK REL = stylesheet HREF = "mystyle.css">
</HEAD>
<BODY >
<P> <A class= "question" > How to create <SPAN class = "big"> style sheet </SPAN>
to alter an HTML element ? </p>
<P class="answer"> The Style assignment process can be accomplished with the
<STYLE>... </STYLE> tags. The syntax for making the assignment is simple.
Between <STYLE> and </STYLE>, HTML tags to which styles are to be
assigned are to be listed and each tag with a pair of curly brackets in which specific style
attributes are to be specified. This <STYLE> tag should be within <HEAD>...
</HEAD>element. </P>
<P class='question'> What are the <SPAN class = "big"> attributes </SPAN> that can be
specified ? </P>
<P class='answer'> The attributes that can be specified are, Font Attributes, Color and
Background Attributes, Text Attributes, Border Attributes, Margin Attributes and List
Attributes. </P>
</BODY>
</HTML>
Example 28: Using JSSS Style Sheet (Run Only Netscape 4.7 or more)
<HTML>
<HEAD>
<TITLE> Working with JSSS Style Sheets </TITLE>
<STYLE Type = "text/javascript">
document.tags.BODY.backgroundColor = 'cyan';
document.tags.H1.Color = 'red';
document.tags.H2.Color = 'blue';
document.tags.P.Color = 'green';
</STYLE>
</HEAD>
<BODY>
<BR><BR>
<H1> <center>Silicon Chip Technologies </H1>
<H2> Mumbai</center> </H2>
<P> Silicon Chip Technologies, a private limited company,
was founded in December 1989. </P>
<P> The vision of this company is to provide any corporate client a
single entity which address all their Software Development,
Technical and User Documentation, Training and Manpower
Recruitment needs.</P>
</BODY>
</HTML>
Example 29: Using Cascading Style Sheets (As above prg. using CSS)
<HTML>
<HEAD>
<TITLE> Working with Cascading Style Sheets </TITLE>
<STYLE Type = "text/css">
BODY {background-Color: 'cyan';}
H1 {Color: 'red';}
H2 {Color: 'blue';}
P {Color: 'green';}
</STYLE>
</HEAD>
<BODY>
<BR><BR>
<H1> <center>Silicon Chip Technologies </H1>
<H2> Mumbai</center> </H2>
<P> Silicon Chip Technologies, a private limited company,
was founded in December 1989.</P>
<P> The vision of this company is to provide any corporate client a
single entity which address all their Software Development,
Technical and User Documentation, Training and Manpower
Recruitment needs. </p>
</BODY>
</HTML>
Example 30: Using DIV Tag
<HTML>
<HEAD>
<TITLE> Working with DIVs </TITLE>
</HEAD>
<BODY >
<DIV ID = box1 style = "background-color:red; position:absolute; left:300;
top:150; width:50">
<IMG SRC = images/sct-logo.gif>
</DIV>
<DIV ID = box2 style = "background-color:red; position:absolute; left:380;
top:150; width:50">
<IMG SRC = images/sct-logo.gif>
</DIV>
<DIV ID = box3 style = "background-color:red; position:absolute; left:300;
top:190; width:50">
<IMG SRC = images/sct-logo.gif>
</DIV>
<DIV ID = box4 style = "background-color:red; position:absolute;
left:380; top:190; width:50">
<IMG SRC = images/sct-logo.gif>
</DIV>
</BODY>
</HTML>
Example 31: Using LAYER Tag (Run Only Netscape 4.7 or more)
<HTML>
<HEAD>
<TITLE> Working with Layers </TITLE>
</HEAD>
<BODY >
<LAYER id = box1 LEFT = 150 TOP = 150>
<img src = images/fence1.jpg height = 100 width = 170> Animal Fencing
</LAYER>
<LAYER id = box2 LEFT = 50 TOP = 200>
<img src = images/barbed.jpg height = 100 width = 140> Barbed Tapes
</LAYER>
This text is before layers.
<HR>
This text is after layers. Notice how the layers are positioned absolutely, independent of the
order they appear in the document.
</BODY>
</HTML>
Example 32: Using DIV Tag with layer
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.Maxx{font-size:120%;color:'green';font-weight:bold;font-family:cursive}
</STYLE>
<TITLE>Dynamic Layers1</TITLE>
</HEAD>
<BODY STYLE="background-color:#ffffcc">
<H1 STYLE="text-align:center">Welcome to <A Class="Maxx">CYBERSHOP INC
</A><BR>the only online Cyber Mall!</H1>
<HR>
<P STYLE = "margin-right:40%">At
<A Class = "Maxx">
CYBERSHOP INC</A>, we are proud of our Clients who avail
our services, and every personnel of the incorporation.
Here are few the services we offer
<UL>
<LI>E-Commerce Applications</LI>
<LI>Virtual Reality Module Developments</LI>
<LI>Cyberengineering</LI>
</UL>
</P>
<A Class = "Maxx">
CYBERSHOP INC </A> Products and services are known virtually all over the world.
<DIV STYLE = "position:absolute;top:35%;left:65%;background-color:'blue';
color:'white';width:120;height:110;z-index:0">
<P STYLE="font-weight:bold;font-size:20;text-align:center">Virtual Developments</P>
</DIV>
<DIV STYLE = "position:absolute;top:55%;left:73%;background-color:'green';
color:'white';width:120;height:110;z-index:1">
<P style="font-weight:bold;font-size:20;text-align:center">
Number one since 1994</P>
</DIV>
<DIV STYLE = "position:absolute;top:75%;left:81%;background-color:'goldenrod';
color:'white';width:120;height:90;z-index:2">
<P style="font-weight:bold;font-size:20;text-align:center">The Cyber Mall on the WEB</P>
</DIV>
</BODY>
</HTML>
Example 33: Using LAYER Tag with JavaScript (Run ONLY Netscape 4.7. or more)
<HTML>
<HEAD>
<TITLE>Dynamic Layers 2</TITLE>
</HEAD>
<BODY BGCOLOR = "Lavender">
<LAYER NAME = layerHeader left =5% top = 10% visibility="show">
<CENTER>
<H1>CYBERSHOP INC</H1>
</CENTER>
<HR>
</LAYER>
<LAYER NAME = layerMessage left = 5% top = 10% visibility = "hide">
<CENTER>
<H1 STYLE = "color:'Crimson' ">CYBERSHOP INC</H1>
</CENTER>
<HR>
<P STYLE = "color:'Blue';font-size:35px; font-weight:bold">
CYBERSHOP INC Provides The Following Services
<UL STYLE = "color:'Blue'; font-size:25px; font-weight:bold">
<LI>E-Commerce Applications
<LI>Virtual Reality Module Development
<LI>Cyberengineering and ...many more!
</UL>
</P>
<P STYLE="color:'Coral';font-family:cursive;font-weight:bold;font-size:15pt">
Avail our Satisfaction Guaranteed Services.
</P>
</LAYER>
<LAYER NAME= layerButton left = 80% top = 90% >
<FORM>
<INPUT TYPE=button value="Show"
onClick = "layerMessage.visibility = 'show';
layerHeader.visibility = 'hide'S">
<INPUT TYPE=button value="Reset"
onClick = "layerMessage.visibility = 'hide';
layerHeader.visibility = 'show'">
</FORM>
</LAYER>
</BODY>
</HTML>
JAVA Script Example
Example 34: Using Array
<HTML>
<HEAD>
<TITLE>Viewing the array elements of a JavaScript Array</TITLE>
</HEAD>
<BODY>
<SCRIPT language = "JavaScript">
<!-- Begin Hiding JavaScript
friends = new Array(5);
friends[0] = "Ananth";
friends[1] = "Cedric";
friends[2] = "Ketan";
friends[3] = "Rohan";
friends[4] = "Leela";
document.write(friends[0]+"<BR>");
document.write(friends[1]+"<BR>");
document.write(friends[2]+"<BR>");
document.write(friends[3]+"<BR>");
document.write(friends[4]+"<BR>");
join_crit = friends.join();
document.writeln(join_crit);
document.write(“<BR>”+friends.reverse()); // Reverse Array Printed
// End hiding JavaScript -->
</SCRIPT>
</BODY>
</HTML>
Example 35: Using onLoad and onUnLoad Event
<HTML>
<HEAD>
<TITLE>Creating and Using User Defined Functions</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var name = "";
function hello( )
{
name = prompt('Enter Your Name:','Name');
alert('Greetings ' + name + ', Welcome to my page!');
}
function goodbye( )
{
alert('Goodbye ' + name + ', Sorry to see you go!');
}
</SCRIPT>
</HEAD>
<BODY onLoad="hello( );" onUnload="goodbye( );">
<IMG SRC="Images\Pinkwhit.gif ">
</BODY>
</HTML>
Example 36: Placing Text In a Browser
<HTML>
<HEAD>
<TITLE>Outputting Text </TITLE>
</HEAD>
<BODY>
<CENTER><BR><BR>
<IMG SRC = "Images/sctfamil.gif" Width = 100 Height = 100>
Silicon Chip Technologies.<BR>
<SCRIPT Language = "Javascript">
document.write("<BR><BR>");
document.write('<IMG SRC = "Images/sctfamil.gif" Width = 100 Height = 100>');
document.write("<B>Silicon Chip Technologies.</B> <BR>")
</SCRIPT>
</CENTER>
</BODY>
</HTML>
Example 37: Using Method Prompt, Confirm & Alert
<HTML>
<HEAD>
<TITLE> Confirm Method </TITLE>
<SCRIPT LANGUAGE="JavaScript">
var question = "What is 10+10 ?";
var answer = 20;
var correct = '<img src="images/man2.gif">';
var incorrect ='<img src="images/man1.gif">';
var Response = prompt(question,"0");
for(count=1;count<3;count++)
{
if (Response != answer)
{
if (confirm("Wrong, Press OK For Another Chance"))
{
Response = prompt(question,"0");
}
else
{
alert("Better Luck Next Time");
count=3;
}
}
else
{
alert("Great!! Your Are Right");
count=3;
}
}
var output = (Response == answer) ? correct : incorrect;
document.write("<BR>");
document.write(output);
</SCRIPT>
</HEAD>
<BODY BGColor="#f0f0f0">
</BODY>
</HTML>
Example 38: Using Date Object
<HTML>
<HEAD>
<TITLE> Date validations </TITLE>
<SCRIPT>
var monthNames = new Array(12);
monthNames[0]= "January";
monthNames[1]= "February";
monthNames[2]= "March";
monthNames[3]= "April";
monthNames[4]= "May";
monthNames[5]= "June";
monthNames[6]= "July";
monthNames[7]= "August";
monthNames[8]= "September";
monthNames[9]= "October";
monthNames[10]= "November";
monthNames[11]= "December";
var dayNames = new Array(7);
dayNames[0]= "Sunday";
dayNames[1]= "Monday";
dayNames[2]= "Tuesday";
dayNames[3]= "Wednesday";
dayNames[4]= "Thursday";
dayNames[5]= "Friday";
dayNames[6]= "Saturday";
function customDateString (m_date)
{
var daywords = dayNames[m_date.getDay()];
var theday = m_date.getDate();
var themonth = monthNames[m_date.getMonth()];
var theyear = m_date.getYear();
return daywords + ", " + themonth + " " + theday + ", " + theyear;
}
</SCRIPT>
</HEAD>
<BODY>
<H1>WELCOME!</H1>
<SCRIPT>
document.write(customDateString( new Date()))
</SCRIPT>
</BODY>
</HTML>
Example 39: Using String Object
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function checkData(column_data)
{
if (column_data != "" &&
column_data.value != column_data.value.toUpperCase( ))
{
column_data.value = column_data.value.toUpperCase( )
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="text" NAME="collector" SIZE=10 onChange="checkData(this)">
<INPUT TYPE="text" NAME="dummy" SIZE=10>
</FORM>
</BODY>
</HTML>
Example 40: Password Validation Using Form Controls
<HTML>
<HEAD>
<TITLE>Password Validation</TITLE>
<SCRIPT language="JavaScript">
<!--
var userpassword = new Array(4);
userpassword[0]= "Allwyn";
userpassword[1]= "allwyn";
userpassword[2]= "Rohan";
userpassword[3]= "rohan";
function checkOut()
{
var flag =0;
var flag1 =0;
var i =0;
var j =0;
for (x=0; x<document.survey.elements.length; x++)
{
if (document.survey.elements[x].value == "")
{
alert("You forgot one of the required fields. Please try again")
return;
}
}
var user= document.survey.elements[0].value
var password = document.survey.elements[1].value
while(i<=3)
{
if(userpassword[i] == user)
{
j=i;
j++;
if(userpassword[j] == password)
{
flag=1;
break;
}
}
i+=2;
}
if(flag == 0)
{
alert("Please enter a valid user name and password")
return;
}
else
{
alert("Welcome !!\n" +document.forms[0].Username.value);
}
return;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM ACTION="" method="POST" NAME="survey"
onSubmit="return checkOut(this.form)">
<INPUT TYPE="TEXT" NAME="Username" SIZE="15" MAXLENGTH="15">
User Name
<BR><INPUT TYPE="PASSWORD" NAME="Pasword" SIZE="15">Password
<BR><INPUT TYPE="SUBMIT" VALUE="Submit"><INPUT TYPE="RESET"
VALUE="Start Over">
</FORM>
</BODY>
</HTML>
Example 41: Using Event onMouseOver & onMouseOut
<HTML>
<HEAD>
<TITLE>CHANGING IMAGES....</TITLE>
<SCRIPT>
if(document.images)
rollover="yes";
else
rollover="no";
if(rollover=="yes")
{
img1on = new Image();
img1off = new Image();
img1on.src="Images/man1.gif";
img1off.src="Images/man2.gif";
}
function imageSwitchOn(imagename)
{
if(rollover=="yes")
{
imageOn=eval(imagename + "on.src");
document [imagename].src=imageOn;
}
}
function imageSwitchOff(imagename)
{
if (rollover=="yes")
{
imageOff=eval(imagename+"off.src");
document [imagename].src=imageOff;
}
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<H1>IMAGES......</H1><BR>
<H3><I>place your mouse pointer on the picture</I></H3>
<A HREF="page1.html" onMouseOver="imageSwitchOn('img1')"
onMouseOut="imageSwitchOff('img1')">
<IMG SRC="Images/man2.gif" height=200 width=200 alt="space" name="img1">
</A>
</CENTER>
</BODY>
</HTML>
Example 42: Using Form Controls
<HMTL>
<HEAD>
<TITLE>FORMS</TITLE>
<!-- This code allows to access the Form objects Elements Array //-->
<SCRIPT Language="JavaScript">
function Ver(form1)
{
v=form1.elements.length;
if (form1.elements[3].name=="Button1")
{
alert('First form name : '+document.forms[0].name);
alert('No. of Form elements of ' +document.forms[0].name + ' = '+v);
}
else if (form1.elements[4].name=="Button2")
{
alert('Second form name : '+document.forms[1].name);
alert('No. of Form elements of ' +document.forms[1].name + ' = '+v);
}
for(i=0;i<v;i++)
alert(form1.elements[i].name+ ' is at position '+i);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM Name="Survey Form 1">
FIRST FORM: <i><b>Survey Form 1 </b></i><BR><BR>
First Name : <Input Type=Text Name="Text1" Value="" size="20"><BR><BR>
<Input Type="radio" Name="Radio1" Value=""> Fresher
<Input Type="radio" Name="Radio1" Value=""> Experienced<BR><BR>
<Input Type="Button" Name="Button1" Value="Click1"
onClick="Ver(form)">
</FORM>
<FORM Name="Survey Form 2">
SECOND FORM: <i><b> Survey Form 2 </b></i><BR><BR>
Name : <Input Type="Text" Name="Text2" Value="" size="20"> <BR><BR>
Password : <Input Type="Password" Name="Pass2" Value="" size="20">
<BR><BR>
<Input Type="CheckBox" Name="Check1" Value="" > Employed
<Input Type="CheckBox" Name="Check2" Value="" > Studying <BR><BR>
<Input Type="Button" Name="Button2" Value="Click2"
onClick="Ver(form)">
</FORM>
</BODY>
</HTML>
Example 43: Using ChekBox & Radio Button
<HMTL>
<HEAD>
<TITLE>FORMS</TITLE>
<!-- This code checks the Checkbox when the button is clicked //-->
<SCRIPT Language='JavaScript'>
function Chk(f1)
{
f1.Check.checked=true;
alert(" The Checkbox just got checked ");
f1.Check.checked=false;
f1.Radio[0].checked=true;
f1.Radio[1].checked=false;
alert(" The Radio button just got checked ");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Client Name : <Input Type=Text Name="Text" Value="" size="20"><BR><BR>
Client Address: <Input Type=Text Name="Text1" Value="" size="20"> <BR><BR>
Client E-mail Address :<Input Type=Text Name="Text2" Value=""
size="20"><BR><BR>
<Input Type="radio" Name="Radio" Value=""> Male
<Input Type="radio" Name="Radio" Value=""> Female<BR><BR>
<Input Type="CheckBox" Name="Check" Value=""> Employed <BR><BR>
<Input Type="Button" Name="Bt" Value="Set Element Array Value"
onClick="Chk(this.form)">
</FORM>
</BODY>
</HTML>
Example 44: Verify Form Elements – Fill or Not
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
function verifyData ( )
{
a=0; r="";
for (i=0; i<=4; i++)
{
if (document.forms[0].elements[i].value == "")
{ a=1;
r = r +" "+ document.forms[0].elements[i].name + ";" ;
}
else if ((i > 3)&&(a==0))
{ alert("All Textboxes are filled in - Thank You !");
}
}
for (i=0; i<=4; i++)
{ if (document.forms[0].elements[i].value == "")
{
alert("Please fill in the following Textbox / Textboxes :- " + r);
document.forms[0].elements[i].focus( );
break;
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
First Name : <INPUT TYPE="text" NAME="Firstname" SIZE=20>
Last Name : <INPUT TYPE="text" NAME="Lastname" SIZE=20><P>
Address : <INPUT TYPE="text" NAME="Address" SIZE=60><P>
Pincode : <INPUT TYPE="text" NAME="Pincode" SIZE=6><P>
<INPUT TYPE="button" NAME="act" VALUE="Verify"
onClick="verifyData( )">
</FORM>
</BODY>
<SCRIPT Language="JavaScript">
document.forms[0].Firstname.focus( );
</SCRIPT>
</HTML>
Example 45: Using Built In Function – eval()
<HTML>
<HEAD>
<TITLE>Using Text and Button objects in an HTML Form </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function calculate(form)
{
form.results.value = eval(form.entry.value);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM >
Enter a Javascript Mathematical Expression:
<INPUT TYPE = "text" NAME = "entry" VALUE = "" size="20">
<INPUT TYPE="button" VALUE = "Calculate" onClick = "calculate(this.form);" >
<BR> The result of this expression is:
<INPUT TYPE = "text" NAME = "results" onFocus = "this.blur();" size="20" >
<BR>
</FORM>
</BODY>
</HTML>
Example 46: Using onReset Event
<HMTL>
<HEAD>
<TITLE>FORMS1</TITLE>
<!-- Using Reset Button //-->
<SCRIPT>
function func(f1)
{
alert("The Form Elements have been cleared");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM onReset="func(this.form) ">
Client Name : <Input Type=Text Name="Text" Value="" size="20"><BR><BR>
Client Address: <Input Type=Text Name="Text1" Value="" size="20"> <BR><BR>
<Input Type="radio" Name="Radio" Value=""> Male
<Input Type="radio" Name="Radio" Value=""> Female<BR><BR>
<Input Type="CheckBox" Name="Check" Value=""> Employed <BR><BR>
<Input Type="Reset" Name="Rst" Value="Reset" >
</FORM>
</BODY>
</HTML>
Example 47: Using Math Object (CheckBox Button)
<HTML>
<HEAD>
<TITLE>Working with Check Boxes</TITLE>
<SCRIPT>
function calculate(form, callingField)
{
if (callingField == "result")
{
if(form.square.checked)
{
form.entry.value = Math.sqrt(form.result.value);
}
else
{
form.entry.value = form.result.value/2;
}
}
else
{
if(form.square.checked)
{
form.result.value = form.entry.value * form.entry.value;
}
else
{
form.result.value = form.entry.value * 2;
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<CENTER><BR>
<B> Value: </B>
<INPUT TYPE = "text" NAME = "entry" VALUE = 0
onChange = "calculate(this.form, this.name);" size="20"><BR><BR>
<B>Action</B>(Default - Double):
<INPUT TYPE = checkbox NAME = square
onClick = "calculate(this.form, this.name);" value="ON"> Square <BR><BR>
<B>Result:</B>
<INPUT TYPE = "text" NAME = "result" VALUE = 0
onChange = "calculate(this.form, this.name);" size="20">
</CENTER>
</FORM>
</BODY>
</HTML>
Example 48: Using Math Object (Radio Button)
<HTML>
<HEAD>
<TITLE> Working with Radio Buttons </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function calculate(form)
{
if(form.elements[2].checked)
{
form.result.value = form.entry.value * form.entry.value;
}
else
{
form.result.value = form.entry.value * 2;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM >
<CENTER><BR>
<B>Value:</B>
<INPUT TYPE="text" NAME="entry" VALUE=0 size="20">
<BR><BR>
<SPACER Size= 190>
<B>Action:<B><BR>
<SPACER Size = 225>
<INPUT TYPE="radio" NAME="action1" VALUE="twice"
onClick="calculate(this.form);">Double<BR>
<SPACER Size = 225>
<INPUT TYPE="radio" NAME="action1" VALUE="square"
onClick="calculate(this.form);">Square <BR><BR>
<B>Result:</B>
<INPUT TYPE=text NAME="result" onFocus = "this.blur();" size="20">
</CENTER>
</FORM>
</BODY>
</HTML>
Example 49: Using Combo & List Menu and TextArea
<HTML>
<HEAD>
<TITLE>McDonalds</TITLE>
<SCRIPT Language="JavaScript">
var m;
function pick(F1)
{ var z=" ";
for(j=0;j<3;j++)
{
for(i=0;i<F1.elements[j].length;i++)
{
if (F1.elements[j][i].selected)
{
var y=F1.elements[j].options[i].value;
z=z+"\n"+y;
F1.elements[3].value=z;
}
}
}
m=z;
}
function cal(F1)
{ var d=0;
for(j=0;j<3;j++)
{
for(i=0;i<F1.elements[j].length;i++)
{
if (F1.elements[j][i].selected)
{
var y=F1.elements[j].options[i].value;
s=new String(y);
var a=s.indexOf(">");
var b=s.substring(a+1,a+3);
c=parseInt(b);
d=d+c;
}
}
}
p="Total cost of the selected items="+d;
m=m+"\n"+p;
F1.elements[3].value=m;
}
function clr(F1)
{
F1.elements[3].value=" ";
}
</SCRIPT>
</HEAD>
<BODY>
<h2><font color="blue"><center> Welcome to the World Famous Fast Food Center </font>
<font color="red"> McDonalds ! </center></font></h2>
<Form name="F1">
Select the Menu Items of your choice -
<BR><BR>
<Table>
<TR valign=top><td>
Major dishes :<BR>
<select name="s1" MULTIPLE onBlur="pick(this.form)">
<option value="Mc Burger->80" selected> Mc Burger
<option value="Fish Fillets->70"> Fish Fillets
<option value="Chicken Burger->60"> Chicken Burger
<option value="Veg. Burger->45"> Veg. Burger
</select>
<BR><BR></td>
<td> </td><td> </td>
<td>
Starters :<BR>
<select name="s2" MULTIPLE onBlur="pick(this.form)">
<option value="French Fries->40"> French Fries
<option value="Nuggets->50">Nuggets
<option value="Hash Browns->55">Hash Browns
<option value="Mc Aloo Tikki->65">Mc Aloo Tikki
</select>
<BR><BR></td>
<td> </td><td> </td>
<td>
Miscellaneous :<BR>
<select name="s3" onBlur="pick(this.form)">
<option value=" ">'Check these out'
<option value="Milkshakes->35">Milkshakes
<option value="Soft drinks->20">Soft drinks
<option value="Softy->25">Softy
</select>
<BR><BR></td>
<td> </td><td> </td>
</TR>
</Table>
<Table>
<TR valign=top><td>
The items selected form the Menu are :
<TEXTAREA Name="TA1" Rows=10 Cols=50>
</TEXTAREA><BR><BR></td>
<td> </td><td> </td>
<td><BR>
<input type="button" Value="Total Cost" onClick="cal(this.form)">
<input type="button" Value="Clear" onClick="clr(this.form)">
</td>
</TR>
</Table>
</Form>
</BODY>
</HTML>
Example 50: Using Window Object
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function begin(form)
{
form_name = form;
time_out=window.setTimeout("display_date()",500);
}
function display_date()
{
form_name.date.value=new Date();
time_out=window.setTimeout("display_date()",1000);
}
function display_clock()
{
document.write('<FONT COLOR=red SIZE=+1><FORM
NAME=time_form><CENTER><BR><BR>Current Date & Time :');
document.write(' <INPUT NAME=date size=19
value=""</FORM></FONT></CENTER>');
begin(document.time_form);
}
display_clock();
</SCRIPT>
</BODY>
</HTML>
Example 51: Check All Elements of a Form
<HTML>
<HEAD>
<TITLE>Elements of a Form</TITLE>
<SCRIPT language="JavaScript">
<!-- function checkOut()
{
for (x=0; x<document.survey.elements.length; x++)
{
if (document.survey.elements[x].value == "")
{
alert("Sorry, you forgot one of the required fields. Please try again.");
break;
}
}
return false;
}//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="lightyellow">
<H2><i>INFONET SERVICES</i></H2>
<FORM NAME="survey" onSubmit="return checkOut(this.form)">
<INPUT TYPE="TEXT" NAME="firstname" SIZE="30"
MAXLENGTH="30"><b>First Name</b><br>
<br><INPUT TYPE="TEXT" NAME="lastname" SIZE="30"><b>Last
Name</b><br>
<br><INPUT TYPE="TEXT" NAME="emailaddr" SIZE="30"><b>E-mail
Address</b><br>
<br><INPUT TYPE="TEXT" NAME="address"
SIZE="30"><b>Address</b><br>
<br><INPUT TYPE="TEXT" NAME="city" SIZE="30"><b>City</b><br>
<br><INPUT NAME="state" SIZE="6"><b>State</b>
<INPUT NAME="zip" SIZE="10"><b>Postal Code</b>
<INPUT NAME="country" SIZE="15"><b>Country</b>
<P>
<b><i>Please choose the most appropriate statement</i></b>
<BR><INPUT TYPE="RADIO" NAME="buying" VALUE="regular"><b>I
regularly purchase items online</b>
<BR><INPUT TYPE="RADIO" NAME="buying" VALUE="sometimes"><b>I
have on occasion purchased items online</b>
<BR><INPUT TYPE="RADIO" NAME="buying" VALUE="might"
CHECKED><b>I have not purchased anything online, but I would
consider it</b>
<BR><INPUT TYPE="RADIO" NAME="buying" VALUE="willnot"><b>I
prefer to shop in real stores</b>
<P>
<b><i>I'm interested in (choose all that apply)</i></b>
<BR><INPUT TYPE="CHECKBOX" NAME="hiking"
VALUE="hiking"><b>Hiking</b>
<BR><INPUT TYPE="CHECKBOX" NAME="mbiking"
VALUE="mbiking"><b>Mountain Biking</b>
<BR><INPUT TYPE="CHECKBOX" NAME="camping"
VALUE="camping"><b>Camping</b>
<BR><INPUT TYPE="CHECKBOX" NAME="rock"
VALUE="rock"><b>Rock Climbing</b>
<BR><INPUT TYPE="CHECKBOX" NAME="4wd"
VALUE="4wd"><b>Off-Road 4WD</b>
<BR><INPUT TYPE="CHECKBOX" NAME="ccskiing"
VALUE="ccskiing"><b>Cross-country Skiing</b>
<P>
<b><i>I learned about this site from</i></b><br>
<SELECT NAME="referral">
<OPTION VALUE="print" SELECTED>Print Ads
<OPTION VALUE="visit"> In-Store Visit
<OPTION VALUE="rec"> Friend's Recommendation
<OPTION VALUE="internet"> Sources on the Internet
<OPTION VALUE="other"> Other
</SELECT>
<P><h4>Comments</h4><BR>
<TEXTAREA NAME="comments" COLS="40" ROWS="5">
Please type any comments here
</TEXTAREA>
<BR><INPUT TYPE="SUBMIT" VALUE="Submit"><INPUT TYPE="RESET"
VALUE="Start Over">
</FORM>
</BODY>
</HTML>
0 comments:
Post a Comment