HTML

Web Technologies
1.Web Programming, Building Internet Applications, Chris Bates 2nd

Edition, Wiley Dreamtech Pub. (I,II,III)
2.Java Server Pages by Hans Bergsten, SPD O’Really pub. (V,VI,VII,VIII)
The World Wide Web (Web) is a system of interlinked hypertext

documents accessed via the Internet.
•With a Web browser, a user views Web pages that may contain text,
images, videos, and other multimedia and navigates between them using
hyperlinks.
•The World Wide Web was created in 1989 by Tim Berners-Lee, working at
the European Organization for Nuclear Research (CERN) in Geneva,
Switzerland and released in 1992.
•Tim Berners Lee is the father of WWW
•Introduced first web browser (Netscape Navigator)
WWW
•The World Wide Web Consortium (W3C) develops interoperable
technologies (specifications, guidelines, software, and tools) to lead the
Web to its full potential.
•W3C is a forum for information, commerce, communication, and

collective understanding.
Introduction
•Script : is a program which runs directly without pre-compilation
Program:
Program  compile  Output
Script :
HTML  Browser  Output
•Browser: is a piece of software that enables you to view pages on the
internet.
Ex:- Netscape Navigator, Internet Explorer, Mozilla Firefox, Konquoorer.

•Protocol : HTTP, FTP
•HTTP: The Hypertext Transfer Protocol (HTTP) is a generic, stateless,
protocol. Is used for hypertext, name servers and distributed object
management systems.
•A feature of HTTP is the typing and negotiation of data representation,
allowing systems to be built independently of the data being transferred.
•FTP : stands for file transfer protocol. Used for sending files over the
internet. Sending files to another location is called uploading.
•URL: uniform resource locator is used to describe the address of the file,
the browser is displaying or loading.
HTML
•Tim- Berners –Lee introduced HTML
•Hyper Text Mark up Language
•Markup:- Tags are used to mark the information
•Provides non-linear access to the information (direct Access)
•It is simple for developers and users
•File has .html extension
•HTML files are generally created in notepad and other text editors.
•Tools generate .htm files
•Web browser display the information present in the html document
HTML
•It is used to format text and information.
•The text is marked up with elements called as tags. Ex:- <p>
•Every html element begin with a start tag and end with an end tag
Ex:- <p> hello world </p>

•Content of the web page: Title, body, image, hyper links, audio, video,
pointers
Structure of the HTML document
<html>
<head>
<title> Introduction to HTML </title>
</head>
<body>
<p> Body of the document </p>
</body>
</html>
HTML Tag Types
•HTML tags may tell a WWW browser to:
–format the text (bold, italicize, etc.)
–have an in-line image
•make it into a header
•have it be a link to another document
•or any number of other things

How the Tags Work
•The first part of the tag <tag name> turns the tag on
•The ending part of the tag, </tag name>, contains the "/" slash character.
•This "/" slash tells a WWW browser to stop tagging the text. Many HTML
tags are paired this way. Think of the tag as a container.
•If you forget the backslash, a WWW browser will continue the tag for the
rest of the text in your document,producing undesirable results.
Steps to Creating a HTML Document
•Open a text editor
•Create your HTML document

•Head - not displayed with body
•Body
•Save the HTML (extension of .htm or .html)
•Display your HTML document in WWW browser window (Open File rather
than Open Location)
•Check your work and modify as necessary
•Place it on the Web

HTML Examples
•<title>The Title of the Page</title>
•<h1>First level header</h1>
•<html>All of your file goes here</html>
•<head>What you are not going to see on the page </head>
•<body>What you are going to see</body>
•<ul>Unordered List
– <li>first item
– <li>second item
•</ul>
Common Tags Used
•<HTML> </HTML> Opens and closes the HTML document.
•<title> </title> This is the title of your page and will appear at the top of
your browser’s window.
•<h1> </h1> to <h5> </h5> Header sizes for titles and larger text
formats. Or specify font size: <font size=“4”> </font>
Common Tags Used
•<img src=“filename.gif”>
–Sources an image file and needs no closing tag.
•<a href=“filename.html”> Place URL </a>
– Links text or images to the designated file.
•<b> text </b> Bold text.
•<i> text </i> Italic text.
•<u> text </u> Underline text.
•<br> (no closing) Line break.
•<hr> (no closing) Horizontal line.

conclusion
•<Html>
•<head>
•<title>
•<body>
•<h1> --- <h5>
•<p>
•<font>
•<br>
•<hr>
•<img>
•<ul>,<ol>, <a href>, <center> ,<b>, <i>, <u>
•<center> causes all the material between its <center> and </center> tags
to be centered horizontally in the browser window.
•Closing tag : when contents are to be presented closing tag is required.
Otherwise no closing tag.
Ex:- <p> hello world </p>

<br> <hr> <img src=“file.gif”>
Intoduction to HTML Tags
Header Tags
<h1> <h2> …..<h5>
Image tag :
<img src=“sample.gif” border=“1” height=“144” width=“200” alt=“sitams
image”>
Body background color:
<body bgcolor=“#cdcdcd”>
Body background :
<body background=“sample.gif”>
Srolling text
<marquee> sitams college </marquee>
Nested list
•<ul>
<li> CSE </li>

<ul>
<li> I cse </li>
<li> II cse </li>
<li> iii cse </li>
</ul>
<li> ECE </li>
<ul>
<li> I ECE </li>
<li> II ECE </li>
</ul>
</ul>
•<ol>
<li> CSE </li>

<ol>
<li> I cse </li>
<li> II cse </li>
<li> iii cse </li>
</ol>
<li> ECE </li>
<ol>
<li> I ECE </li>
<li> II ECE </li>
</ol>
</ol>
Type attribute :- a, A, i, I.
DEFINITION LIST
•A definition list is a list of terms and corresponding definitions.
•Definition lists are typically formatted with the term on the left with the
definition following on the right or on the next line.
•The definition text is typically indented with respect to the term.
•The opening list tag must be <DL>. It is followed by an optional list header
(<LH>caption</LH>) and then by term names (<DT>) and definitions
(<DD>).
EXAMPLE :-
<DL>
<LH>List Header</LH>
<DT>Term 1<dd>This is the definition of the first term
<DT>Term 2<dd>This is the definition of the second term.
</DL>
which could be rendered as:
List Header
Term 1
This is the definition of the first term.
Term 2
This is the definition of the second term.
table
<table>
<thead>
<th> </th> //represents heading content
</thead>
<tbody>
<tr> </tr> //represents row content
</tbody>
</table>
Data in table is represented by using <td> tag
Ex:- <td> reg no </td>

<td><img src=“./file1.gif”> </td>
Attributes of <td>
Colspan, Rowspan
Ex:- <td colspan=2 rowspan=3> merge 2 cols and 3 rows for the data
element
Example program
<html>
<head>
</head>
<body>
<table border=1>
<thead>
<tr> <th> reg no</th> <th> name</th> </tr>
</thead>
<tbody>
<tr>
<td> 1</td>
<td> a </td>
</tr>
<tr>
<td> 2</td>
<td> b </td>
</tr>
</tr>
</tbody>
</table>
<table border=1>
<tr> <th> reg no</th> <th> name</th> </tr>
<tr>
<td> 1</td>
<td> a </td>
</tr>
<tr>
<td> 2</td>
<td> b </td>
</tr>
</tr>
</table>
</body>
</html>
Some more attributes
<colgroup> specifies the format of the group of columns
Ex:-
<colgroup> //specified before the <thead> tag
<col align=“right”>
<col span=“3” align=“center” valign=“top” width=“20”>
</colgroup>
The first <col> specifies the alignment for the first column in the table
The second <col> specifies the alignment for the span of 4 colums in the table
<align> specifies the data alignment in the table
<valign> specifies the vertical alignment (top, bottom, middle) of the data. It
if effective when the rowspan of the col is more than 1.
<html>
<head> <title> table example using colgroup </title>
</head>
<body>
<table border=1>
<colgroup>
<col align="right">
<col span=4 align="center" width=10 height=200 valign="top">
</colgroup>
<thead>
<tr><td>reg</td><td>name</td><td>branch</td><td>%</
td><td>credits</td></tr>
</thead>
<tbody>
<tr>
<td>1</td><td>a</td><td>cse</td><td>80</td><td>56</td>
</tr>
</tbody>
</body>
</html>
Example Program
FRAMES
•Frame allows the user to view multiple html documents at a time.
Syntax:-
<frameset cols=“10%,90%”>
<frame name=“f1” src=“./file1.html”>
</frameset>
Note:- <frameset> appear after the <head> of the html document
Nested frame
<frameset cols=“10%,90%”>
<frameset rows=“30%,50%,20%”>
<frameset cols=“20%,40%,40%”>
</frameset>
</frameset>
</frameset>
The target attribute of <a href=“./file2.html” target=“f21”> tag specifies the

name of the frame where the contents is to displayed
Meta tag
•It is a html element that interacts with the search engine
•Meta elements are not visible to the user of the site and should be placed
inside the header section of the html document.
Syntax:-
•<meta name=“keywords” content=“html, introduction, tags, table, frame”>
-- Diplay the list of key aspects of the site. It gives precise information about
the site to the search engine.
•<meta name=“description” content=“this site gives the basic information
about the html tags”>
-- The description is a 4 to 5 line of text and is used by the search engine to

catalog and display your site
Html forms
•It collects information from the people viewing the site.
Ex:- username, password

Syntax <form method=“get” ></form> or <form method=“post” ></form>
Method indicates the way the web server organize and send you the output.
“Post” causes changes to server data, ex:- updating a database
“get” is used when the form does not cause any changes to the server
database. Ex:- requesting database
<input> tag is used to create appropriate input elements on the form
Ex:- textbox, textarea, buttons etc..
•Syntax for <input>
<input name=“name” type=“text” value=“enter the text” size=“25”>
Name indicates the name of the form element.

Type indicates the type of the input element
Value indicate the value that the input button sends to the server upon
submission.
Creating form elements
•Textbox
<input type=“text” name=“t1” size=25>

•Submit button
<input type=“submit” name=“sb” value=“submit”>

•Reset button
<input type=“reset” name=“rb” value=“reset” >

•Textarea
<textarea name=“comments” rows=“4” cols=“30”> </textarea>

•Password element
<input type=“password” name=“p” size=“10”>

•Hidden element
<input name="h" type="hidden" value="sitams" >

•Check box
<input type=“checkbox” name=“cbox” value=“wt”>

Example:-
<p>
WT
<input type=“checkbox” name=“cbox” value=“wt”>
SPM
<input type=“checkbox” name=“cbox” value=“spm”>
MC
<input type=“checkbox” name=“cbox” value=“mc”>
ACA
<input type=“checkbox” name=“cbox” value=“ACA”>
</p>
Name attribute categorise the checkboxes under the same group or different
group.
•Radio Button
<input type=“radio” name=“rb” value=“wt”>

Example:-
<p>
WT
<input type=“radio” name=“rb” value=“wt”>
SPM
<input type=“radio” name=“rb” value=“spm”>
MC
<input type=“radio” name=“rb” value=“mc”>
ACA
<input type=“radio” name=“rb” value=“ACA”>
</p>
Name attribute categorise the checkboxes under the same group or different
group.
<select> button
<select name=“sel”>
<option> 1
<option>2
<option> 3
</select>
Cascading Style Sheets (CSS)
•Css allow you to specify the style of the page elements separately from the
structure of the document
•The separation of structure from content allows greater manageability and

makes changing the style of your document easier
Creating styles
•Using Style attribute (Inline styles)
Ex:- <p STYLE=“color:red; font-family: arial “>

•Using style element
<style type=“text/css”>
p { color:red; font-family: arial }
•Using external style sheets ( external style)
Ex:- Specifying style in .css file

Inline style
<p STYLE=“font-size: 20pt; color: #0000ff” > sitams </p>
<h1 STYLE=“font-family: arial, sans-serif; font-size: 18pt; text-decoration:

underline”> sitams college </h1>
Using style element
<style type=“text/css”>
P { font-size: 20pt; color: #0000ff }
H1{ font-family: arial, sans-serif;

font-size: 18pt;
text-decoration: underline
}
</style>
Note: style tag appear in the head part of the html
Using external link files
•The syntax for including the external style sheet
A { text-decoration : overline; }
Li em { color : red;
font-weight : bold;
}
Ul { margin-left : 2em ; }
Note: The above specification is to be stored in a .css file like example.css

Linking the .css file in a html file
• the .css file is invoked in the html file by using the <link> tag
Synatx :
<link rel = “stylesheet” type=“text/css” href=“example.css”>
Note : the <link> tag appear in the <head> of the html document
An example
<html>
<head>
<link rel = “stylesheet” type=“text/css” href=“example.css”>
</head>
<body>
<a href=“example.html” > sitams </a>
</body>
</html>
more style attributes
p, h1 { color: yellow;
text-decoration: blink;
font-weight: 10pt;
font-size: 12px;
}
Here <h1> is the child element of <p>.
So this style is applicable all <h1> children of <p>
Font-size
•Font-size is represented in two ways
1.Relative-length measurement
(vary based on the screen resolution)

ex:- px, em, ex, %
•em: the 'font-size' of the relevant font
•ex: the 'x-height' of the relevant font
•px: pixels, relative to the viewing device
2.Absolute length measurement
(do not vary based on the system)

Ex:- in(inches), cm, mm, pt (1pt=1/72in),
Pc(picas 1pc=12pt)
•Font-weight : bold/normal/light/lighter/thick/thicker
•Font-style : none/italic/oblique(similar to italic)
•color : red/green/yellow
•Font-family: arial, sans serif

Body background
•Background-image : url
•Background-position : bottom right/center/top left/…
•Background-repeat : no-repeat
•Background-attachment : fixed
Text
•Text-indent : 1em
•Text-align : center/left/right/justify
Margin
•Width : 20%
•Height : 10%
•Overflow : scroll
•Margin-bottom/margin-left/margin-right/margin-top
ex:- margin-left: 0.3 em

•Padding (distance between the content inside an element and the edge of
the element.
Padding-top/padding-bottom/padding-left/padding-right
Ex:- padding-left:0.5em
example
Div
{ background-color : red;
margin-bottom : 0.5em
font-size: 1.5em
width : 50%
overflow: scroll;
padding-left : 0.5em
}
•The <div> tag defines a division or a section in an HTML document.
•The <div> tag is often used to group block-elements to format them with
style
<div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a

paragraph.</p> </div>
•The <span> tag provides no visual change by itself.
•The <span> tag provides a way to add a hook to a part of a text or a part of a
document.
•When the text is hooked in a span element you can add styles to the
content, or manipulate the content with for example JavaScript.
<p>sky is <span name=“id” class="blue">light blue</span> in color.</p>

•The <pre> tag defines preformatted text.
•Text in a pre element is displayed in a fixed-width font (usually Courier), and
it preserves both spaces and line breaks.
<pre> Text in a pre element is displayed in a fixed-width font, and it preserves

both spaces and line breaks </pre>
JavaScript
•Developed by netscape
•Is a client side scripting language
•No relation with java
•Other scripting languages : JavaScript, Jscript, VBScript
•Jscript is a product of Microsoft
•Scripting languages are under ECMA
( European Computer Manufacturers Association) script standard.

JavaScript
JAVA
•Object-oriented lang.
•Support inheritance, polymorphism
•Support different data-types
•Case-sensitive
•General purpose prog. Lang.
•Uses applets to interact with web applications
•Product of sun-micro systems
•Java has both Compiler/interpreter
JavaScript
•Object-based lang
•Does not support inheritance and polymorphism
•Variables are treated as Strings only
•Case-sensitive
•client-side scripting lang.
•Uses html to interact with web applications
•Product of Netscape
•Javascript is a interpreter
JavaScript introduction
•The code is written in the <script> tag of the <html> document.
•JavaScript treat the elements of the web-page as objects.
•Objects in javascript
document, window, string, math etc…

•The methods of the class are invoked by the Objects.
Ex:- document.writeln(“hello”);
•HTML tags can be used within the “ “ to invoke the functionality of the tag
Ex:-
document.writeln(“<h1 style=“color:red”>hello</h1>”);
•variables are declared by using “var”
Ex:- var x,y,z; (treated as string data types)

•User Input :- To take input from the user prompt() is used
Synatx:- prompt(“Enter the value”,default value);

Usage: - window.prompt(“enter x”,0);
•User output :- To display output alert() is used
Syntax :- alert(“javascipt program);

Usage :- window.alert(“Hello”);
Example program (The sum of two numbers)
<html>
<head>
<script language="javascript">
var a,b,c;
a=window.prompt("enter a",0);
b=window.prompt("enter b",0);
c=parseInt(a)+parseInt(b);
window.alert("The sum is: "+c);
document.writeln("<h1>The Sum is: "+c+"</h1>");
</script>
</head>
<body>
<p> The sum of two numbers in javascript</p>
</body>
</html>
Control structures
•for (var i=0;i<10;i++)
{
statement1;
statement2;
}
•While(condition)
{
statement1;
statement2;
}
•do
{
statement1;
statement2;
}
while(condition);
Control structures
•if(condition)
statement;
•if(condition)
statement1;
else If(condition)
statement2;
Example for average
<html>
<head>
<script language=“javascript”>
var total,count,sum,avg,n;
count=1; total=0;
while(count <10)
{ n=window.prompt(“enter n”,0);
total=total+parseInt(n);
count=count+1;
}
avg=total/count;
document.writeln(“average of n is:”+avg);
</script>
</head>
<body>
Click to get average of n numbers </p>
</body>
</html>
Switch-case
Switch(choice)
{
case option1 : statement1;
break;
break;
break;
default : statement 4;
break;
}
•Arithmetic operators
+,-,*,/,%,++,--
•Logical operators
&&, || , !
•Relational operators
<,<=,>,>=,==,!=
Squares of the numbers
<html>
<head>
document.writeln("Square of numbers between 1 to 10");
for(var i=0;i<=10;i++)
{
document.writeln(" the square of "+i+" is : "+square(i));
}
function square(j)
{
return j*j;
}
</script>
</head>
<body>
</body>
</html>
Functions()
Syantax:-
function function-name(parameters list)
{
declarations;
statement1;
statement2;
}
Ex:- function fun(x,y,z)
{ return x+y+z;
}
Note:- function either return value/ does not return value
Square of a numbers
<html>
<head>
var a;
document.writeln(“the square of “+i+” is : “+square(i)):
function square(x)
{
return x*x;
}
</script>
</head>
<body></body>
</html>
Exercise : - Program to find biggest of three numbers
Hint :- Math.max(x,Math.max(y, z));

Program for rolling dice using Random number generation
•Math.random() generates number between 0 and up to 1 but not including 1.
Example:-
<html>
<head>
for(var i=0;i<10;i++)
{
var x=Math.floor(1+Math.random()*6); //generates number between 1 to 6
document.writeln("the random nummber is: "+x);
}
</script>
</head>
<body> </body>
</html>
recursion
•Function which calls by itself either directly or indirectly.
•Program to generate the factorial of series of numbers
<html>
<head>
document.writeln(“<br>Factorial of “+i+” is: “+factorial(i));
function factorial(x)
{
if( x<=1) return 1;
else return (x * factorial(x-1));
}
</script>
</head>
<body></body>
</html>
Arrays
•An array is a group of memory locations that all have the same name and are
of same type.
•Array commences from zero index.
•The length of the array is obtained using length method
Ex:- array_name.length
•Declaration of one dimensional array
var a=new Array(10); // 10 elements

•Initialization of arrays
var a=[10,20,30,40,50];
(or)
var a=new Array(10,20,30,40,50);
var a=new Array[5];

a=[10,20,30,40,50];
•Accessing the elements of the array
Using index from for-loop or for-in loop

Ex:-
for ( var i=0;i<10;i++) sum += a[ i ];

(or)
for (var i in a) sum += a[i]; //where a is the name of the array
Passing Arrays to Functions
•The array is passed to a function by its name without brackets
ex:-
var a=new Array(10);
sort(a); //where sort is a user defined function
Exercise:-
•Program to sort numbers using function
•Program to search for an element in an array
Multi-dimensional Arrays
•Declaration of a two-dimensional array
Ex:- var a;
a=new Array(2); //allocate 2 rows
a[0]=new Array(3); // 3 elements in 1st row
a[1]=new Array(4); // 4 elemets in 2nd row
•Initialization
var a=[ [1,2,3], // 1st row elements

[4,5,6,7] ]; //2nd row elements
•Accessing the elements of an array
for (var i in a)
for( var j in a[i] ) document.writeln( a[i][j] );
(or)
for( var i=0; i<a.length; i++) //to access rows
for(var j=0;j<a[i].length;j++) // to access elements in each row
document.writeln( a[i][j] );
Exercise :-
Program to perform matrix multiplication
JavaScript : Objects Math Object
•Math.random() generates number between 0 and up to 1 but not including 1.
•Math.floor()
•Math.ceil()
•Math.square()
•Math.max(x,y)
•Math.min(x,y)
•Math.abs(x)
•Math.pow(x,y) // xy
•Math.round(x)
•Math.log(x);
•Math.sin(x), Math.cos(x), Math.tan(x)
•Math.sqrt(x)
•Math.exp(x) // ex
•Math.random()
String Object
•The String object encapsulates the attributes and behavior of a string of
characters.
•The string object provides many methods for selecting characters from a
string, combination of strings, obtaining substring of a string, searching for
substring within a string, tokenizing strings, conversion to lowercase or
uppercase etc…
Methods
•Let String s=“I am a javascript learner”;
•charAt(index) – returns a string containing the character at the specified
index. It returns null if there is no character at the specified index.
•charCodeAt( index) – Returns Unicode value of the character at the specified
index. If there is no character at the index, charCodeAt returns NaN (Not a
Number).
•Concat(string) – Concatenates its argument to end of the string that invokes
the method.
•fromCharCode(value1,value2 …) – converts a list of Unicode values into a
string containing the corresponding characters.
•indexOf(substring) – method returns the position of the first occurrence of a
specified substring starting from the begining
•indexOf(substring,index) – method returns the position of the first occurrence
of a specified substring starting from position index towards the beginning
•lastIndexOf(substring) – searches for the last occurrence of substring The
method returns the starting index of substring in the source string or -1 if
substring is not found.
•lastIndexOf(substring, index) – searches for the last occurrence of substring
starting from position index and searching toward the beginning of the string
that invokes the method. The method returns the starting index of substring in
the source string or -1 if substring is not found.
•Slice(start,end) – returns a string containing the portion of the string from
index start through index end. If end index is not specified, it go up to end of
the string.
•Split(string) – splits the source string into an array of strings (tokens) where its
string argument specifies the delimiter.
•Substr(start,length) – returns a string containing length characters starting
from index start in the source string. It goes up to the end, if the length is not
specified.
•toLowerCase() – returns a string in which all uppercase letters are converted
to lowercase letters.
•toUpperCase() – returns a string in which all lowercase letters are converted
to uppercase letters.
•toString() – returns same string as the source string.
•valueOf() – returns the same string as the source string.
•isNaN() – returns true if the value is not a number
Ex:- var s=f.t.innerText();

if( s.isNaN()) { document.writeln(“Not a number”); }
Wrapping strings into html tags
•anchor( name) – wraps the source string into anchor element with name as
the anchor name
•blink() wraps the source string in a <blink></blink> element.
•Link (url) wraps the source stirng in an anchor element with url as the
hyperlink location.
•strike() wraps the source string in a <strike></strike> element.
•sub() wraps the source string in a <sub></sub> element. //substript
•sup() wraps the source string in a <sup></sup> element. //superstript
Boolean Object
•Javascript provides wrappers for creating a boolean object.
•Boolean object stores true/false value
•To cerate a boolean number
syntax :- var b=new boolean(booleanvalue);

•booleanvalue specifies whether the value of the boolean object is true or
false.
•toString() – returns the string “true” if the value of the boolean object is true,
otherwise returns the string “false”.
•valueOf() – returns the value true if the boolean object is true; otherwise
returns false.
Number Object
•Javascript automatically creates number objects to store numeric values in a
javascript program.
•var n=new Number(numeric value);
•Methods :-
toString(radix) – returns the string representation of the number. The radix is

optional and represents the radix of the number. 2 represents binary, 8
represents octal and 10 represents decimal, 16 represents hexa
valueOf() – returns numeric value
Number.MAX_VALUE – property represents the maximum value that can be
stored in javascript.
Number.MIN_VALUE – property represents the maximum value that can be
stored in javascript.
Number.NaN – this property represents not a number. If the value returned
from the arithmetic does not result in a number.
Ex:- if(parseInt(s))==Number.NaN) return true; else return false;
(Or)
if(s.valueOf()==Number.NaN) return true; else return false;
Example
<html>
<head>
var s1="SITAMS";
var s2="ColleGE";
document.writeln("<h3> String s1: "+s1+" String s2: "+s2+"</h3>");
document.writeln("<p>character at index 0 in "+s1+" is "+s1.charAt(0));
document.writeln("<p>character Code at index 0 in "+s1+" is
"+s1.charCodeAt(0));
document.writeln("<p>Word from character code 65, 67,80, 56
is"+String.fromCharCode(65,67,80,56));
document.writeln("<p>Lower Case of string "+s2+" is: "+s2.toLowerCase());
document.writeln("<p>Upper Case of string "+s2+" is: "+s2.toUpperCase());
document.writeln("<p>2-4 slice of string "+s1+" is: "+s1.slice(2,4));
//s1.substring(2,4);
document.writeln("<p>Last index of S in"+s1+" is: "+s1.lastIndexOf("S",3)); //
search from index 3 to the begining of the string
document.writeln("<p>2-4 substring of "+s1+" is: "+s1.substr(2,4)); // from
index 2 displays 4 characters
Document.writeln("<p>subscript of "+s1+" is: "+s1.sub());
document.writeln("<p>superstript of "+s1+" is: "+s1.sup());
document.writeln("<p>strike through of "+s1+" is: "+s1.strike());
</script>
</head>
<body>
</body>
</html>
Login validation
<html>
<head>
function validate()
{
var un=login.ln.value;
var pwd=login.pwd.value;
var c=un.charAt(0);
if( un!=" " && pwd!=" ")
{
if( c >= 'a' && c<='z' || c>='A' && c<='Z' )
{
if(pwd.length > 6)
{
//document.login.submit();
//alert("succ");
return true;
}
else
{
alert ("password must be atleast 6 chars");
return false;
}
}
else if (un!=" ")
{
alert (" username firt character must be a letter");
return false;
}
}
contd…
else
{
alert ("enter all the fields");
return false;
}
}
</script>
</head>
<body>
<form name="login“ action=“./ex1.html” onsubmit=“return validate()”>
Login: <input type=text name=ln><br>
Password: <input type=password name=pwd>
<input type=submit value="submit" onclick="validate()">
</form>
</body>
</html>
Note :- on successful validation, the control goes to ex1.html
excercise
Registration form validation
•Validate phone number ( must be 10 digits)
•Validate email id
sitams@yahoo.com
Check for the position of @ ( it should be >0)
Check for the position of . (it should be > pos(@)+1)
The length of email_id > pos(.)
•Validate credit card number ( 16 digit number)
User Profile validation
•Date of Birth
•Validate age (numeric between 1-100)
•Alternate email_id
Credit Card Validation

•Credit card Number validation
•Pin number/ Username
•Password
•Address ( door number, street, city, state)
•Amount ( some limit 10000-50000)
Date object
•Provides methods for date and time manipulations.
•Date and time processing can be performed based on the computer’s local
time zone or based on the worlds standard time called Coordinated Universal
Time (UTC) or Greenich Mean Time (GMT).
•The methods are available in local time zone version and in UTC version.
Methods in Date object
•getDate() / getUTCDate() //returns a number from 1 to 31 representing the
day of the month in local time or UTC
•getDay() / getUTCDay() //returns a number from 0(Sunday) to 6(Saturday)
representing day of the week in local time or UTC
•getFullYear() / getUTCFullYear() //returns a 4 digit number as year in local
time or UTC
•getHours() / getUTCHours() //returns a number between 0 to 23
representing hours since since midnight in local time or UTC
•getMilliseconds() / getUTCMilliseconds() //returns a number from 0 to 999
representing number of millseconds in local time or UTC. The time is stored in
hours, minutes, seconds and milliseconds
•getSeconds() / getUTCSeconds() //returns a number from 0 to 59
representing number of seconds in local time or UTC.
•getMinutes() / getUTCMinutes() //returns a number from 0 to 59
representing number of minutes in local time or UTC.
•getMonth() / getUTCMonth() //returns a number from 0 to 11 representing
month in local time or UTC.
•getTime () //returns the number of milliseconds between january 1, 1970
and the time in the Date object.
•getTimezoneOffset() //returns the difference in minutes between the current
time on the local computer and UTC.
•setDate(val) / set UTCDate(val) // sets the date of the month (1 to 31) in local
Time or UTC
•setMonth(m,d) / setUTCMonth(m,d)
•setFullYear(y,m,d) / setUTCFullYear(y,m,d)
•setHours(h,m,s,ms) /setUTCHours(h,m,s,ms)
•setMinutes(m,s,ms) /setUTCMinutes(m,s,ms)
•setSeconds(s,ms) /setUTCSeconds(s,ms)
•setMilliSeconds(ms) /setUTCMilliSeconds(ms)
•setTime(ms) // sets elapsed milliseconds since january 1, 1970
•toLocalString() // returns string equivalent of the the date and time specific to
local computer time setting
Ex:- 9/8/2009 15:30:35 for august 9, 2009 at 3:30:35 pm

•toUTCString() // returns string equivalent of the date and time
Ex:- august 9, 2009 at 3:30:35 pm for

9/8/2009 15:30:35
•toString() // returns the string representation of the date and time in a form
specific to the local computer.
•valueOf() – the time in number of milliseconds since midnight, january 1,1970.
Usage:-
var d=new Date();
d.getTime();
example
<html>
<head>
var current=new Date();
document.writeln("toString: "+current.toString()+"<br>");
document.writeln("toLocalString: "+current.toLocalString()+"<br>");
document.writeln("toUTCString: "+current.toUTCString()+"<br>");
document.writeln("tovalueOf: "+current.valueOf()+"<br>");
document.writeln("getDate: "+current.getDate()+"<br>");
document.writeln("getMonth: "+current.getMonth()+"<br>");
document.writeln("getFullYear: "+current.getFullYear()+"<br>");
document.writeln("getHours: "+current.getHours()+"<br>");
document.writeln("getMinutes: "+current.getMinutes()+"<br>");
document.writeln("getSeconds: "+current.getSeconds()+"<br>");
document.writeln("getMilliseconds: "+current.getMilliseconds()+"<br>");
document.writeln("getTimezoneOffset: "+current.getTimezoneOffset()
+"<br>");
</script>
</head> <body> </body>
</html>
Dynamic HTML
(DHTML)
Event Model
•onload – uses this event to call javascript function when document loading
completes.
Usage :- <body onload=“start()”>

•onclick – uses this event to call javascript function when the element in the
document is pressed.
Usage :- <input type=submit onclick=“validate()” >

<input type=submit onclick=“alert(“hello”)” >
•onmousemove – fires repeatedly whenever the user moves the mouse over
the web page.
Usage :- <body onmousemove=“move()”>

•onmouseover – occurs when the mouse cursor moves over an element
•onmouseout – occurs when the mouse cursor moves out from an element
•Onfocus – useful for form elements that allow user input. Onfocus fires when
an element gains focus
•Onblur – fires when an element loses focus
Usage:- <input type=text name=“t” onfocus=“alert(“hello”)

onblur=alert(“bye”)>
•onsubmit – occurs when the user submits a form
•Onreset –occurs when the user resets a form
Usage :- <form name=“f” onsubmit=“hello()” onreset=“bye()”>

onload event
<html>
<head>
function load()
{
window.alert("the document is loaded");
}
</script>
</head>
<body onload="load()">
<h3> the demo of onload event </h3>
</body>
</html>
<html>
<head>
function validate()
{
alert("validation successful");
function bye()
{
alert("the form is cleared");
}
</script>
</head>
<body>
<form>
username : <input type="text" name="un"> <br>
password :<input type="password" name="pwd" onfocus=alert("pwd must be
6 chars") onblur=alert("bye") > <br>
<input type="submit" value="submit" onclick="validate()">

<input type="reset" value="reset" onclick="bye()">
</form>
</body>
</html>
<html> </script>
<head> </head>
<script
language="javascript"> <body>
<form onsubmit="validate()" onreset=alert("form not submitted")>
function validate() username : <input type="text" name="un"> <br>
{ password :<input type="password" name="pwd" > <br>
alert("validation
successful"); <input type="submit" value="submit" >
<input type="reset" value="reset" >
} </form>
</body>
</html>
Mouse coordinates
•event.offsetX
•event.offsetY
•event.srcElement
•event.srcElement.tagName
•elementname.innerText
Ex:- <span id=“s”>span tag content</span>

s.innerText=data;
Mousemove event
•<html>
•<head>
•<script language="javascript">
•function mouse_move()
•{
• coordinates.innerText=event.srcElement.tagName+"("+event.offsetX+","+event.offsetY+")";
•}
•</script>
•</head>
•<body onmousemove="mouse_move()">
•<span id="coordinates">(0,0)</span>
•<img src="./picture.gif" width=60 height=100>
•</body>
•</html>
onmouseover & onmouseout
<html>
<head>
function change()
{
event.srcElement.style.color="RED";
}
function nochange()
{
event.srcElement.style.color="black";
}
</script>
</head>
<body onmouseover="change()" onmouseout="nochange()">
<span id="coordinates">(0,0)</span>
<img src="./picture.gif" width=40 height=60>
<h1> SITAMS college </h1>
<ul>
<li> CSE
<li>IT
</ul>
</body>
</html>
DHTML: Filters & Transitions
Filters & Transitions
•Many visual effects are implemented directly in the client-side browser
•Filters and transitions do not add content to the web page, rather they present existing content in an engaging
manner to capture the user’s attention.
•Applying filters to text or an image causes changes that are persistent (permanent)
•Transitions are temporary; applying a transition allows you to transfer from one page to another page with a
pleasant visual effect ex:- random dissolve
•Filters and transitions are applied to the web page elements using CSS filter property.
filters
•Flip : flip filters are applied to the text
•Types : flipv and fliph
•Fliph – flips the text horizontally
•Flipv – flips the text vertically
•Usage :-
<span style=“filter: mask(color=red)> SITAMS </span>

<span style=“filter: fliph”> SITAMS </span>
<span style=“filter: flipv fliph”> SITAMS </span>
example
<html>
<head>
s.filters(“revealTrans”).apply();
s.filters(“revealTrans”).transition=1;
s.filter.item(0). enabled=true;
s.filters(“blur”).strength=10;
</script>
</head>
<body>
<span style="filter: fliph"> sitams</span>
<span id=“s”> sitams</span>
</body>
</html>
•Filter types
Mask filter
Glow filter
Blur filter
Wave filter
Invert filter
Gray filter
Xray filter
chroma filter

HTML

Uploaded by

HTML

Uploaded by

Web Technologies

1.Web Programming, Building Internet Applications, Chris Bates 2nd

The World Wide Web (Web) is a system of interlinked hypertext

•W3C is a forum for information, commerce, communication, and

Ex:- Netscape Navigator, Internet Explorer, Mozilla Firefox, Konquoorer.

•The text is marked up with elements called as tags. Ex:- <p>

Ex:- <p> hello world </p>

•have it be a link to another document

•or any number of other things

•Create your HTML document

•Check your work and modify as necessary

•Place it on the Web

•<h1>First level header</h1>

•<html>All of your file goes here</html>

•<head>What you are not going to see on the page </head>

•<body>What you are going to see</body>

•<i> text </i> Italic text.

•<u> text </u> Underline text.

•<br> (no closing) Line break.

•<hr> (no closing) Horizontal line.

Ex:- <p> hello world </p>

<li> CSE </li>

<li> CSE </li>

Ex:- <td> reg no </td>

<tr> <th> reg no</th> <th> name</th> </tr>

The target attribute of <a href=“./file2.html” target=“f21”> tag specifies the

-- The description is a 4 to 5 line of text and is used by the search engine to

Ex:- username, password

•Syntax for <input>

<input name=“name” type=“text” value=“enter the text” size=“25”>

Name indicates the name of the form element.

<input type=“text” name=“t1” size=25>

<input type=“submit” name=“sb” value=“submit”>

<input type=“reset” name=“rb” value=“reset” >

<textarea name=“comments” rows=“4” cols=“30”> </textarea>

<input type=“password” name=“p” size=“10”>

<input name="h" type="hidden" value="sitams" >

<input type=“checkbox” name=“cbox” value=“wt”>

<input type=“radio” name=“rb” value=“wt”>

•The separation of structure from content allows greater manageability and

Ex:- <p STYLE=“color:red; font-family: arial “>

Ex:- Specifying style in .css file

<h1 STYLE=“font-family: arial, sans-serif; font-size: 18pt; text-decoration:

H1{ font-family: arial, sans-serif;

Note: The above specification is to be stored in a .css file like example.css

<link rel = “stylesheet” type=“text/css” href=“example.css”>

(vary based on the screen resolution)

2.Absolute length measurement

(do not vary based on the system)

•Font-style : none/italic/oblique(similar to italic)

•Font-family: arial, sans serif

•Background-position : bottom right/center/top left/…

ex:- margin-left: 0.3 em

<div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a

<p>sky is <span name=“id” class="blue">light blue</span> in color.</p>

<pre> Text in a pre element is displayed in a fixed-width font, and it preserves

( European Computer Manufacturers Association) script standard.

document, window, string, math etc…

Ex:- var x,y,z; (treated as string data types)

Synatx:- prompt(“Enter the value”,default value);

Syntax :- alert(“javascipt program);

Exercise : - Program to find biggest of three numbers

Hint :- Math.max(x,Math.max(y, z));

var a=new Array(10); // 10 elements

var a=new Array[5];

Using index from for-loop or for-in loop

for ( var i=0;i<10;i++) sum += a[ i ];

var a=[ [1,2,3], // 1st row elements

•Accessing the elements of an array

Ex:- var s=f.t.innerText();

syntax :- var b=new boolean(booleanvalue);

toString(radix) – returns the string representation of the number. The radix is

Credit Card Validation

Ex:- 9/8/2009 15:30:35 for august 9, 2009 at 3:30:35 pm

Ex:- august 9, 2009 at 3:30:35 pm for

Usage :- <body onload=“start()”>