Scribd
Upload
7 views91 pages

Web Technologies

The document provides an introduction to HTML, explaining its purpose as a markup language for creating web pages and detailing its structure, including essential tags like <html>, <head>, <title>, and <body>. It highlights the advantages of HTML, such as its small size and cross-platform compatibility, and discusses various HTML tags and attributes used for formatting text and creating lists. Additionally, it includes examples to illustrate the use of different HTML elements and their attributes.

Uploaded by

jayashree
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views91 pages

Web Technologies

The document provides an introduction to HTML, explaining its purpose as a markup language for creating web pages and detailing its structure, including essential tags like <html>, <head>, <title>, and <body>. It highlights the advantages of HTML, such as its small size and cross-platform compatibility, and discusses various HTML tags and attributes used for formatting text and creating lists. Additionally, it includes examples to illustrate the use of different HTML elements and their attributes.

Uploaded by

jayashree
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 91

WEB TECHNOLOGIES

UNIT I
INTRODUCTION TO HTML
INTRODUCTION:
HTML stands for Hypertext Markup Language. It is a Language used to createWeb Pages
or Hypertext document. A Markup Language is a set of instructions often called TAGS which
can be addedto text files. HTML is only a formatting language are not a programming language.
The idea behind hypertext is that instead of reading text in a right linear structure we can easily
jump from one point to another point.HTML is all about specifying the structure and format of
our webpage i.e, it is mainly used for describing the structure document.
HTML is platform independent i.e, for example if we can access internet, we can access
WORLD WIDE WEB (WWW) irrespective of client OS and OS of the webserver are accessing.
So, we can view one download HTML files on www throughbrowser.
Elements of a web document are labelled through the usage of HTML tags. It is the tags
that describe the document. Anything that is not a tag will bedisplayed in the document itself.
HTML does not describe any page layout i.e, for example, word for windows havedifferent styles
for headings, font size etc. But HTML doesn’t have all these. Based on the Platforms, appearance
of any element will change. The formatted text will appear differently on different machines /
Platforms. By separating the Structure of the document and appearance, a Program that reads and
Understands HTML can make formatting decision based on capabilities of individual Platform.
Web Browsers are best examples of HTML formatters.
Advantages of HTML:-
• A HTML document is small and hence easy to send over the net. It is smallbecause it
doesn’t include format information.
• HTML documents are cross platform compatible and device independent.We need a
HTML readable browser to view them.

Basic HTML tags:-


(1) <!doctype> :
This tag formally starts an HTML document and it also indicates theversion of HTML
used.

RGMCET CSE DEPT 2


WEB TECHNOLOGIES

<!doctype HTML PUBLIC “//w3c//DTDHTML Q.o//EN”>


(2) <HTML>:
Every HTML document starts with a <html> tag and it is always the firsttag in a html
page and indicates that the document is a HTML document.The end tag <html> is
</html>.
Example:
<html>……..</html>
(3) <head>:
It contains the head of an html document, which holds about the document such as title.
Each property defined html page should have a head which we create with <head> tag.
It has header information and it isdisplayed at the top of the browser. Each tag for
<head> is </head>.
<head>…….</head>
(4) <title>:
It contains the title of the html document which includes the content thatwill actually
appear in the web browser. The entire content of the web page is placed in the pages
<body> tag. The end tag <body> is </body>
<title>…….</title>
(5) <body>:
It contains the body of the HTML Document , which includes the contentthat will
actuall appear in the web browser. The entire content of the webpage will be placed in
the pages <body> tag. The end tag of the
<body> tag will be </body>.
<body>………</body>
STRUCTURE OF THE HTML PROGRAM:-
The HTML Program is generally divided into two sections i.e head and body. Weuse
<head> and <body> tags to indicate these two sections. <head> section holds the header
information of a webpage document indicated by a title that is provided by using <title> tag in
the <head>. The title helps us to referto the webpage. <body> section contains the content which

RGMCET CSE DEPT 3


WEB TECHNOLOGIES

we want to display which the webpage.Anything that is not a tag will be displayed within the
webpage.
Example:
<html>
<head>
<title>First Webpage</title>

</head>
<body>
This is my first page
</body>
</html>
Output:

Attribute:
An Attribute is a Keyword we use in an opening tag to give more information tothe web
browser. HTML tags tell the web browsers how to format and organizeour webpages. But we
can customize tags using attributes. The Format of an attribute is:
<tagname Attribute=value>
Attributes of the <body> tag:
(1) Background:

RGMCET CSE DEPT 4


WEB TECHNOLOGIES

The URL or a graphic file to be used in the filling the browser’sBackground.


(2) Bgcolor:
The color of the browser’s background.
(3) Bgproperties:
It Indicates if the background should scroll when text does. If we set it to“FIXED”,
the background will not scroll when the text does.
(4) Bottommargin:
Specifies the bottom margin ,the empty space at the bottom of the documentin pixels.

(5) Id:
It is a unique alphanumeric identifier for the tag which we can use to refer toit.
(6) Language:
Scripting language used for the tag.
(7) Leftmargin:
Specifies the left margin, the empty space at the left of the document.
(8) Marginheight:
Gives the height of the margin at the top and bottom of the page in pixels.
(9) MarginWidth:
Gives the width of the left and right margins of the page in pixels.
(10) Rightmargin:
It specifies the right margin, the empty space to the right margin of thedocument in pixels.
(11) Scroll:
It specifies whether a vertical scrollbar appears to the right of the documentcan be yes
(or) no.
(12) Style:
Inline style indicating how to render the element.

(13) Text:
Color of the in the document.

RGMCET CSE DEPT 5


WEB TECHNOLOGIES

(14) Topmargin:
It specifies the top margin the space at the top of the document in pixels.
(15) Link:
It specifies the color of hyperlinks that have not yet been visited.
(16) Alink:
It specifies the color of hyperlinks as they are being clicked.
(17) Vlink:
It specifies the color of hyperlinks as they have been visited.
(18)<!-- --> Comment tag:
Annotates a web page with a comment. In the HTML that we can by lookingat the HTML
but it will not be displayed in the web browser.
<! ------ This is a comment --------- >
Formatting with HTML tags:
To set the actual style of text as displayed in a web page we can text style tags. There are a
number of ways to apply styles to text.
(1) <b>:
It creates a bold text i.e, sets the text style to bold.
Attributes:
a. Id:
It is a unique alphanumeric identifier for the tag which we can use to refer toit.
b. Style:
The Inline style indicating how to render the element.
Example:
<html>
<head>
<title>Using Bold Tag </title>
</head>
<body bgcolor=”pink”>
Here is some text displayed as <b> Bold Text </b>

RGMCET CSE DEPT 6


WEB TECHNOLOGIES

</body>
</html>
Output:

(2) <I>:
It displays text in Italics.(3)
<U>:
It displays text in Underlined text. (4)
<P>:
It displays the Paragraph text.
Example:
<html>
<head>
<title> Using Styles </title>
</head>
<body bgcolor=”pink”>
<p> This is a paragraph <br>
Here is some text that is <i> Displayed in Italics </i>
<br>Here is some <u> Underlined text </u>
</body>
</html>

RGMCET CSE DEPT 7


WEB TECHNOLOGIES

Output:

(5) <s> and <strike>:


It Displays text in smile through style. The <s> and <style> tags are used forthe same
effect. HTML 2 used <strike> , HTML 3 called it <s>, HTML 3.2 caused it <strike> again.
(6) <big>:
Renders text in a bigger font than the current default.
(7) <small>:
Renders text in a smaller font than the current default.
Example:
<html>
<head>
<title> Using Big and small tags </title>
</head>
<body>
Here is some text that is <big> Bigger than the normal </big> <br>and here is
some text that is <small> smaller than normal </small>
</body>
</html>

RGMCET CSE DEPT 8


WEB TECHNOLOGIES

Output:

(8) <sub>: It Styles the text as a subscript.


(9) <sup>: It Styles the text as a superscript.
(10)<strong>: Emphasizes text strongly, usually rendered in bold.
Example:
<html>
<head>
<title>Using Styles </title>
</head>
<body bgcolor=”pink”>
H <sub> 2 </sub> SO <sub> 4 </sub> H
<sub> 2 </sub> O
<br>
<b>Here is some text that appears as a <sup> Super </sup> Script <br>Here is some
<strong> strong </strong> text.
</body>
</html>
Output:

RGMCET CSE DEPT 9


WEB TECHNOLOGIES

(11)Headings:
<h1>,<h2>,<h3>,<h4>,<h5> & <h6>
The heading element tags are <h1>,<h2>,<h3>,<h4>,<h5><h6>. These elements create
the headings in our web pages by displaying bold text in avariety of sizes <h1> being
larger <h6> being smaller.
Example:
<html>
<head>
<title> Heading tags </title>
</head>
<body bgcolor=”pink”>
<center>
<h1> Using Heading Tags</h1><br>
<h1> RGMCET </h1><br>
<h2> RGMCET </h2><br>
<h3> RGMCET </h3><br>
<h4> RGMCET </h4><br>
<h5> RGMCET </h5><br>

RGMCET CSE DEPT 10


WEB TECHNOLOGIES

<h6> RGMCET </h6><br>


</center>
</body>
</html>
Output

(12)<font>:
This tag will give us an option to select text size, color and face.
Attributes:
a. color: Color of the text.
b. Size: Size of the text in points
c. Face: The font face can be a list of names separated by commas.
d. Id: Unique alphanumeric identifier for a tag, which we can use to refer to it.
Example:

RGMCET CSE DEPT 11


WEB TECHNOLOGIES

<html>
<head>
<title> Using Font Styles </title>
</head>
<body bgcolor=”pink”>
<center>
<font size=”1” color=”red”> The Font Size is 1 </font> <br>
<font size=”10” color=”yellow”> The Font Size is 10 </font> <br>
<font size=”20” color=”orange”> The Font Size is 20</font> <br>
<font size=”30” color=”aqua”> The Font Size is 30 </font> <br>
</center>
</body>
</html>
Output

(13)<marquee> tag:
Displays scrolling text in a marquee style.
Attributes:
a. Align:
Sets the alignment of the text relative to marquee.Set to:

RGMCET CSE DEPT 12


WEB TECHNOLOGIES

Top(default), middle (or) bottom.


b. behavior:
Sets how the text in the marquee should move can be scroll (default), slide(text enters
from one side and stops at the other side), alternate (text seemsto bounce from one side
to the other).
c. bgcolor:
It sets the background color for the marquee box.
d. Direction:
Sets the direction the text should scroll can be left, right, down or up.
e. Height:
It specifies the height of the marquee.
f. Loop:
Sets how many times we want the marquee to cycle. Is set to positive integeror -1 for
continuous cycling.
g. Scrolldelay:
Sets the number of the milliseconds between each successive display text.
Example:
<html>
<head>
<title> Marquee tag </title>
</head>
<body bgcolor=”pink”>
<marquee align=”top” loop=”infinite” behavior=”scroll” bgcolor=”red”
direction=”right”> <h3> The Text Scrolls </h3></marquee>
<marquee align=”middle” loop=”infinite” behavior=”slide” bgcolor=”blue”
direction=”left”> <h3> The Text Scrolls </h3></marquee>
</body>
</html>
Output

RGMCET CSE DEPT 13


WEB TECHNOLOGIES

(14) <pre> tag(preformatted text):


<pre> marks the text as preformatted text i.e, all the spaces and carriage returns as
rendered exactly as you type them.
Example:
<html>
<head>
<title> Pre Tag </title>
</head>
<body bgcolor=”pink”>
<center>
<h4> Example of preformatted text </h4> <br> <br>
<pre>

SNo Name Designation


1. aaaa Manager
2. bbbb Project Lead
3. cccc Team Lead
4. dddd S/w Engineer
</pre>

RGMCET CSE DEPT 14


WEB TECHNOLOGIES

</center>
</body>
</html>
Output:

Lists:
Lists lets us display information in a compact, right format. There are three kindsof lists:
1. Unordered List
2. Ordered List
3. Definition List
Unordered List:
An Unordered list is a list of items that are marked with burden. The Unordered list is
created by using <ul>tag are the list items in the list are createdby </ul> tag and the list items in
the list are created by <li> tag.
<ul>
<li>List Item 1 </li>
<li>List Item 2 </li>
</ul>
Example:
<html>

RGMCET CSE DEPT 15


WEB TECHNOLOGIES

<head>
<title> Creating Unorder List </title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”> Creating Unorder List</h1>
<h1 align=”center”>List of Colleges in Kurnool</h1>
<ul>
<li>GPREC</li>
<li>RGMCET</li>
<li>GPCET</li>
</ul>
</body>
</html>
Output

Creating Customized Unordered Lists:


We customized unordered lists by setting the “Type” attribute to three different values. DISC
(default), SQUARE and CIRCLE which sets the type of bullet thatappears before the list item.

RGMCET CSE DEPT 16


WEB TECHNOLOGIES

Example:
<html>
<head>
<title> Creating Unorder List </title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”> Creating Unorder List</h1>
<h1 align=”center”>List of Colleges in Kurnool</h1>
<ul type=”square”>
<li>GPREC</li>
<li>RGMCET</li>
<li>GPCET</li>
</ul>
</body>
</html>
Output

Ordered List:
While the unordered lists display simple bullet before each list item. Ordered lists use a number
system / lettering scheme to indicate that the items are ordered in some ways, ordered lists are

RGMCET CSE DEPT 17


WEB TECHNOLOGIES

created by <ol> tag and the list items are created using
<li> tag.
Example:
<html>
<head>
<title> Creating Order List </title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”> Creating Order List</h1>
<h1 align=”center”>List of branches in RGMCET</h1>
<ol>
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
<li>EEE</li>
<li>CIVIL</li>
<li>ME</li>
</ol>
</body>
</html>
Output

RGMCET CSE DEPT 18


WEB TECHNOLOGIES

Creating Customized Ordered Lists:-


We can customize the numbering system used in ordered lists by using the TYPEattribute, which
we can set to these values:
1. Default numbering system (1, 2, 3, ….)
A. Uppercase Letters (A, B, C, …..)
a. Lowercase Letters (a, b, c, …)
I. Large Roman Numerals (I, II , III, ….)
i. Small Roman Numerals (i, ii, iii, …..)
Example:
<html>
<head>
<title> Creating Order List </title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”> Creating Order List</h1>
<h1 align=”center”>List of branches in RGMCET</h1>

RGMCET CSE DEPT 19


WEB TECHNOLOGIES

<ol type=”A”>
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
<li>EEE</li>
<li>CIVIL</li>
<li>ME</li>
</ol>
</body>
</html>
Output

Definition List:-
These lists include both definition terms as well as their definition. To create the definition lists
we use <dl> tag. For creating definition terms we use <dt> tag andfor data definitions we use
<dd> tag.
Example:
<html>
<head>
<title>Creating Definition List</title>

RGMCET CSE DEPT 20


WEB TECHNOLOGIES

</head>
<body bgcolo=”pink”>
<h1 align=”center”>Definition List</h1>
<dl>
<dt>CSE<dd>Computer Science & Engineering
<dt>ECE<dd>Electronics & Communication Engineering
<dt>IT<dd>Information Technology
<dt>EEE<dd>Electrical & Electronics Engineering
<dt>CE<dd>Civil Engineering
</dl>
</body>
</html>
Output

Nesting Lists:-

RGMCET CSE DEPT 21


WEB TECHNOLOGIES

We have the capability of nesting lists inside other lists.


Example:
<html>
<head>
<title>Nested Lists</title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”>List of Colleges in Kurnool</h1>
<ol>
<li>Kurnool</li>
<ul>
<li>GPREC</li>
<li>BITS</li>
<li>GPCET</li>
</ul>
<li>Nandyala</li>
<ul>
<li>RGMCET</li>
<li>SREC</li>
</ul>
</ol>
</body>
</html>
Output

RGMCET CSE DEPT 22


WEB TECHNOLOGIES

Creating Hyperlinks:
What makes the web so effective is the ability to define links from one page to another. In web
terms, a “hyperlinks” is a reference on the web. Hyperlinks can point to any resources on the
web. An anchor is a term used to define a hyperlinkdestination inside a document. Format of
anchor tag is:
<a href=”address”> Line Text </a>
The <a> anchor tag has the following attributes.
1. href: It holds the target URL of the hyperlink.
2. Id: A unique alphanumeric identifier for the tag, which we can use to refer toit.
3. name: It specifies an anchor name, the name we want to use when referringto enclose
items.
4. Target: This attribute defines where the linked document will be opened.
Example:
<html>
<head>
<title>Creating Hyper Links</title>

RGMCET CSE DEPT 23


WEB TECHNOLOGIES

</head>
<body bgcolor="pink">
<center><h1>This is page 1</h1>
<a href=”page2.html”>Click here</a>to goto page2
</center>
</body>
</html>
Output

RGMCET CSE DEPT 24


WEB TECHNOLOGIES

Setting hyperlink colors:


The default color of hyperlinks in a page is blue. Hyperlink that we have already visited are
displayed in violet and when we click a hyperlink,it turns red when themouse button is down.We
can set these colos in <body> tag attributes link,vlink(visited link),alink(active link).
Example
<html>
<head>
<title>Setting Hyperlink colors</title>
</head>
<body bgcolor="pink" link=”green” vlink=”blue” alink=”red”>
<center><h1>Setting Hyperlink colors</h1>
<a href=”login.html”>Click here</a>to goto login page
</body>
</html>
Output

RGMCET CSE DEPT 25


WEB TECHNOLOGIES

Providing navigation with in the page:


<html>
<head>
<title>Nested Lists</title>
</head>
<body bgcolor="pink">
<center><h1>Linking to a section in a page</h1>
<a name=”top”>This is the top of the page</a>
Click here to goto the <a target=”#bottom”>bottom</a>of the page
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br>
<a name=”bottom”>This is the bottom of the page</a> Click here to
goto <a target=”#top”>top</a>of the page
</center>
</body>
</html>
Output

RGMCET CSE DEPT 26


WEB TECHNOLOGIES

Creating HML tables:


A HTML table arranges data/information in terms of rows and columns.Tables are defined in
HTML using <table> tag.A table is divided into rows and each row each divided into data
cells(columns).The rows of table are created using <tr> tag and data cells are created by <td> tag.
<tr> - Table row
<td> - Table data
Format
<table>
<tr>
<td>row1,col1</td>
<td>row1,col2</td>
</tr>
<tr>
<td>row2,col1</td>
<td>row2,col2</td>
</tr>
</table>
• Heading in a table are defined with <th> tag
Format
<table>
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>
Attributes of <table> tag:

RGMCET CSE DEPT 27


WEB TECHNOLOGIES

• align : specifies the horizontal alignment of the table in the browserwindow,set


to ”left,center,right”.
• background : specifies the URL of a background image to be used asbackground
for the table.
• bgcolor : sets the background color of the table cells.
• border : sets the border width.
• bordercolor : sets the external border color of the entire table.
• cellpadding : sets the spacing between cell walls and content.
• cellspacing : sets the spacing between table cells.
• height : sets the height of the whole table.
• width : sets the width of the table.
Attributes of <tr> tag:
• align : specifies the horizontal alignment content in the table cells set to
“left,center,right”.
• bgcolor : sets the background color of the table cells.
• bordercolor : sets the external border color of the entire table.
• Valign : sets the vertical alignment of data,set to top,middle,bottom.
Alignment of <td> tag
• align : specifies the horizontal alignment content in the table cells set to
“left,center,right”.
• bgcolor : sets the background color of the table cells.
• bordercolor : sets the external border color of the entire table.
• colspan : indicates the how many cell columns of the table this cell shouldspan.
• rowspan : indicates the how many cell rows of the table this cell shouldspan.
Example
<html>
<head>

RGMCET CSE DEPT 28


WEB TECHNOLOGIES

<title>Creating Tables</title>
</head>
<body bgcolor="pink">
<center><h1>Creating tables</h1>
<table border=”1” cellpadding=”3” cellspacing=”3”>
<tr>
<th colspa=”2”>Websites</th>
</tr>
<tr>
<td>Mail sites</td>
<td>Job sites</td>
</tr>
<tr>
<td>Gmail.com</td>
<td>Frushersworld.com</td>
</tr>
<tr>
<td>Yahoo.com</td>
<td>Nauted.com</td>
</tr>
</center>
</table> </body></html>

RGMCET CSE DEPT 29


WEB TECHNOLOGIES

Output

Advanced Table elements :


• <caption> : the element is an ptional element and it used to provide a string which
describes,the contern of the table ,it must follow the table element.
• <thead> : The rows in a table can bc groudated one are more time we cancreate a table
by using this <thead>.
• <tbody> : creates a table body when grouping rows.
• <tfoot> : Creates a table foot when groupin rows
Example:
<html>
<head>
<title>Advance Table Elements</title>
</head>
<body bgcolor="pink">
<h1 align="center">Contents of Web Technologies</h1>
<center>
<table border="2">

RGMCET CSE DEPT 30


WEB TECHNOLOGIES

<caption>Subject Description</caption>
<thead>
<tr> <td colspan="2">Advance Java Programming</td>
</thead>
<tbody>
<tr> <td>Units</td>
<td>Contents</td>
</tr>
<tr> <td>I</td>
<td>HTML & CSS</td>
</tr>
<tr> <td>II</td>
<td>JavaScript</td>
</tr>
<tr> <td>III</td>
<td>XML</td>
</tr>
</tbody>
<tfoot align="center">
<tr>
<td colspan="2">The table foot</td>
</tr>
</tfoot>
</table>
</center>
</body>
</html>
Output

RGMCET CSE DEPT 31


WEB TECHNOLOGIES

Nesting of Tables:
<html>
<head>
<title>Nesting of Tables</title>
</head>
<body bgcolor="pink">
<center><h1>Nested tables</h1>
<table border="1" cellpadding="3" cellspacing="3">
<tr>
<td>
<table border="2">
<tr>
<th>Mail sites</th>
<th>Job sites</th>
</tr>

RGMCET CSE DEPT 32


WEB TECHNOLOGIES

<tr>
<td>Gmail.com</td>
<td>Frushersworld.com</td>
</tr>
<tr>
<td>Yahoo.com</td>
<td>Nauted.com</td>
</tr>
</table>
</td>
<td>
<table border="2">
<tr>
<th>Number</th>
<th>Words</th>
</tr>
<tr>
<th>1</th>
<th>One</th>
</tr>
<tr>
<th>2</th>
<th>Two</th>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>

RGMCET CSE DEPT 33


WEB TECHNOLOGIES

</html>
Output

Images in HMTL:
In HTML we have the capability of displaying images in a webpage.This imagesmust be in a
format that the web browser can handle , such as Graphics Interchange Format(GIF) , Joint
Photograph Expert Group(JPEG) , and for some browser Portable Network Graphics(PNG)
formats.
Displaying images in webpage is done by using <img> tag
Format
<img src=”URL of image source”>
Attributes of <img> tag:
• alt : this attribute is used to specify text to be displayed in place of image forbrowser that
cannot handle graphics.
• src : specifies the URL of the image to display.
• border : sets the border for the image.
• height : indicates the height of the image.
• width : indicates the width of the image.

RGMCET CSE DEPT 34


WEB TECHNOLOGIES

• hspace : sets the horizontal space around the image.


• vspace : sets the vertical space around the image.
Example
<html>
<head>
<title>Images</title>
</head>
<body bgcolor="pink">
<center>
<h1>Images Example</h1>
<h3>Here is an image</h3>
<img src="one.jpg" alt="here is an image" width="300" height="150">
</center>
</body>
</html>
Output

RGMCET CSE DEPT 35


WEB TECHNOLOGIES

Adding borders and spaces around image:


<html>
<head>
<title>Borders & Spaces</title>
</head>
<body bgcolor="pink">
<center>
<h1>Adding border & spacing image</h1>
<h3>Here is an image</h3>
<img src="one.jpg" alt="here is an image" width="100" height="100"
hspace="50" vspace="50" border="8">
<img src="two.png" alt="here is an image" width="100" height="100"
hspace="50" vspace="50" border="8">
<img src="three.png" alt="here is an image" width="100" height="100"
hspace="50" vspace="50" border="8">
</center>
</body>
</html>
Output:

RGMCET CSE DEPT 36


WEB TECHNOLOGIES

Creating HTML Forms:


Form is a collection of various HTML control files , buttons ,checkboxes , radio buttons ,text
fields et., and they use to send the data to the server. There are severalform elements.
• Button : <input type=”button”> :- are the standard clickable buttons.
• Checkbox : <input type=”checkbox”> :- displayed usually as a small boxwith a check
mark in it. The use can toggle the checkbox on or off by checking the checkbox
• Customizable Buttons : <button> :- display images one other HMTL insideitself.
• File uploading controls : <input type=”file”> :- allow the user to upload filesto the server.
• Hidden controls : store data that is not visible to users unless they view theweb page
source code.
• Image controls : <input type=”image”> :- are like submit buttons except that they are
images the user can click.
• Password controls : <input type=”password”> :- are like text fields , buteach typed
character displaying by an asterisk or instead any character.

RGMCET CSE DEPT 37


WEB TECHNOLOGIES

• Radio buttons : <input type=”radio”> :- displaying usually as a circle whichwhen selected


displayed a dot in the middle. These controls are much like checkboxes except that they
work int mutually exclusive at a time.
• Reset button : <input type=”reset”> : - allow the user to clear all the data they has
entered.When the user click reset button all controls in the form are removed to that
original state displaying the data they had when they first appeared.
• Selection : Works much like drop down list boxes also called select controlsFormat is:
<select>
<option>Item1</option>
<option>Item1</option>
<option>Item1</option>
</select>
• Submit button : when we click the button all the data in the form will be sentto web server
for processing.
• Text area : are two dimensional text fields allowing user to enter more thanone line of
text.
Format is: <textarea>
• Text fields : allow the user to enter one line of text also called a textboxFormat is :
<input type=”text”>
In order to create form we use <form> tagFormat
is :
<form>
|
|
</form>
Attributes of <form> tag:
• name : gives the name of the form so that we can return it in code . Set to analphanumeric
string.
• target : indicates a named frame for browser to display the form results.

RGMCET CSE DEPT 38


WEB TECHNOLOGIES

• method : indicates a method or protocol for sending data to the target actionURL.
• action : gives the URL that that will handle the form data.
Example
Registration.html
<html>
<head>
<title>HTML Form</title>
</head>
<body bgcolor="pink">
<center>
<form name="form1">
<table border="0" cellpadding="4" cellspacing="4">
<caption>Registration form</caption>
<tr>
<th>Name</th>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password"/></td>
</tr>
<tr>
<th>Enter your address</th>
<td><textarea rows="5" cols="10"></textarea></td>
</tr>
<tr>
<th>Enter your email</th>
<td><input type="email"/></td>
</tr>
<tr>

RGMCET CSE DEPT 39


WEB TECHNOLOGIES

<th>Enter your mobile</th>


<td><input type="number"/></td>
</tr>
<tr>
<th>Select your gender</th>
<td>
male<input type="radio" name="g" value="m"/>
female<input type="radio" name="g" value="f"/>
</td>
</tr>
<tr>
<th>Language prference</th>
<td>
English<input type="checkbox" value=" "/>
Telugu<input type="checkbox" value=" "/>
Hindi<input type="checkbox" value=" "/>
</td>
</tr>
<tr>
<th>Select your DOB</th>
<td><input type="date"/></td>
</tr>
<tr>
<td ><input type="submit" value="Register"/></td>
<td><input type="reset" value="Cancel"/></td>
</td>
</tr>
</table>
</form>
</body>

RGMCET CSE DEPT 40


WEB TECHNOLOGIES

</html>
Output

Working with Frames:


HMTL frames allow user to present documents in multiple views which may beindependent
windows or sub windows. To divide a webpage into multiple parts and load different pages in a
single web page we use the concept of frames. To dothis we use “<frameset>” tag which indicates
the browser that the webpage window has a frame. We can divide it into rows and columns by
using attributes such as ‘rows’ & ‘cols’. In order to provide definition or each frame we use
“<frame>” tag.
Format is :
<frameset rows=”30%,70%”>
<frame src=”source page URL” name=”frame name”>
<frame src=”source page URL” name=”frame name”>
</frameset>
• <frameset> element actually takes place of <body> tag.

RGMCET CSE DEPT 41


WEB TECHNOLOGIES

Attributes of <frameset> tag:


• border : used in the outermost <frameset> tag to set the border thickness forframes.
• bordercolor : set the color of the borders for all frames in the frameset.
• frameborder : set whether or not border for all frames in the frameset.Can be set
to ‘yes’ or ‘no’ or ‘1’ or ‘0’.
• framespacing : set the pixel spacing between frames. set to the positiveintegers.
• cols : set the number of columns in the frameset. Separate the values assigned to this
attribute with comma(,) each value represents width of acolumn. Can be set to pixel
values,percentages.
• Rows : set the number of rows in the frameset. Separate the values assigned to this attribute
with comma(,) each value represents width of a column. Can be set to pixel
values,percentages.
Attributes of <frame> tag:
• bordercolor : set the color used for the frmae border. This setting overridesthe color
specified in the surrounding <frameset> element.
• frameborder : sets whether or not border surround the frame. Can be set to‘yes’ or ‘no’
or ‘1’ or ‘0’.
• name : sets the name of the frame we can use named frames as target for <a>tag.
• scrolling : determines scrolling possible values are : auto,yes or no.
• src : specifies the URL of the frame document. If we don’t specify a URLthe frame
will appear blank.
Creating vertical frames:
In order to display vertical frame we have use of ‘cols’ attribute.
Example
<html>
<head>
<title>Vertical Frames</title>
</head>

RGMCET CSE DEPT 42


WEB TECHNOLOGIES

<frameset cols="30%,70%">
<frame src=frame1.html>
<frame src=frame2.html>
</frameset>
</html>
Frame1.html
<html>
<head>
<title>page1</title>
</head>
<body>
<h1>Web Technologies</h1>
</body>
</html>
Frame2.html
<html>
<head>
<title>page2</title>
</head>
<body>
<h1>Web Technologies</h1>
</body>
</html>

Output

RGMCET CSE DEPT 43


WEB TECHNOLOGIES

Creating horizontal frames:


In order to display horizontal frame we have use of ‘cols’ attribute.
Example
<html>
<head>
<title>Horizontal Frames</title>
</head>
<frameset cols="50%,50%">
<frame src=page1.html>

RGMCET CSE DEPT 44


WEB TECHNOLOGIES

<frame src=page2.html>
</frameset>
</html>
page1.html
<html>
<head>
<title>page1</title>
</head>
<body>
<h1 align=”center”>This is page1</h1>
</body>
</html>
page2.html
<html>
<head>
<title>page2</title>
</head>
<body>
<h1 align=”center”>This is page2</h1>
</body>
</html>
Output

RGMCET CSE DEPT 45


WEB TECHNOLOGIES

Creating horizontal & vertical frames :


<html>
<head>
<title>Horizontal Frames</title>
</head>
<frameset cols="30%,70%">
<frameset cols="25%,50%,25%">
<frame src=page1.html>
<frame src=page2.html>
<frame src=page3.html>
</frameset>
<frameset cols="25%,50%,25%">
<frame src=frame1.html>
<frame src=frame2.html>
<frame src=frame3.html>
</frameset>
</frameset> </html>

RGMCET CSE DEPT 46


WEB TECHNOLOGIES

Output

<noframes> tag:
When the browser does not support frameset use <noframes> element to indicateto users that
the browser doesnot support frames.The <noframes> element is ignored that handle frames.
Example
<html>
<head>
<title>Vertical Frames</title>
</head>
<frameset cols="30%,70%">
<noframes>Your browser does not support frames...</noframes>
<frame src=on.html>
<frame src=two.html>
</frameset>

RGMCET CSE DEPT 47


WEB TECHNOLOGIES

</html>
Output

Named frames:
One important aspect of working with frames is using named frames. When wegive frmae a
name , we can use as a target to load new page into the frame.
Example
<html>
<head>
<title>Vertical Frames</title>
</head>
<frameset cols="40%,60%">
<frame src=menu.html>
<frame src=default.html name="display">
</frameset>
</html>

RGMCET CSE DEPT 48


WEB TECHNOLOGIES

menu.html
<html>
<head>
<title>Menu</title>
</head>
<body bgcolor="green">
<center><b>Click on below link</b>
<br><a href="page1.html" target="display">Page1
<br><a href="page2.html" target="display">Page2
</center>
</body>
</html>
Defual.html
<html>
<head>
<title>Vertical Frames</title>
</head>
<frameset cols="40%,60%">
<frame src=menu.html>
<frame src=default.html name="display">
</frameset>
</html>
Output

RGMCET CSE DEPT 49


WEB TECHNOLOGIES

RGMCET CSE DEPT 50


WEB TECHNOLOGIES

Cascading Style Sheets:


Style sheets represent the World Wide Web consortium‟s effort to improve on the tag
andattribute based style of formatting. Style sheets provide a way of customizing whole pages
all at once and in much richer detail than the simple use of tags and attributes. The format of
style sheet will be:
<style type=”text/css”>
selector{property:value;property:value;}
selector{property:value;property:value;}
</style>
Every line in <style> tag is called as a „Rule‟ and a style rule has two parts:
a. Selector.
b. Set of declarations.
A selector is used to create a link between the rule and the HTML tag. The declaration has two parts
again:
a. Property.
b. Value.
A property specifies additional information and value specifies property value. For example:
<style type=”text/css”>
body {background-color: #d0e4fe;}
h1 {
color: orange;
text-align: center;
}
p{
font-family: "Times New Roman";
font-size: 20px;
}
</style>
If we add above code in the <head> element of web page , entire web page will be displayed in

RGMCET CSE DEPT 51


WEB TECHNOLOGIES

various styles given in style element.


Style sheets are implemented with cascading style sheets specification. Conventionally styles are
cascaded i.e., we don‟t have to use just a single set of styles inside a document, but we can import
as many styles as we like. There are three mechanisms by which we can apply styles to our HTML
documents:
1. Inline Style sheets.
2. Embedded Style sheets.
3. External Style sheets.
Inline Style Sheets:
Inline style sheets mix content with presentation. To use inline styles we use style
attribute in the relevant tag.
Example:
<html>
<head>
<title>HTML Tables</table>
</head>
<body bgcolor=‟pink‟>
<center>
<h1>Creating HTML Tables</h1><br>
<table border=”2” cellpadding=”4” cellspacing=”4”>
<tr>
<th colspan=”2” style=”background-color:red”> WebSites</th>
</tr>
<tr>
<th style=”background-color:blue”>MailSites</th>
<th style=”background-color:green”>JobSites</th>
</tr>
<tr>
<td style=”background-color:grey”>Gmail</td>
<td style=”background-color:aqua”>Naukri</td>

RGMCET CSE DEPT 52


WEB TECHNOLOGIES

</tr>
<tr>
<td style=”background-color:yellow”>Yahoo</td>
<td style=”background-color:purple”>JobStreet</td>
</tr>
</table>
</center>
</body>
</html>
Output:

Embedded Style sheets:


An embedded style sheet is used when a single document has a unique style. We
define internal styles in the head section of a HTML page by using „<style>‟ tag. The styles
defined using embedded style sheets are applied throughout the page and we put the
styles into oneplace.

RGMCET CSE DEPT 53


WEB TECHNOLOGIES

Example:
<html>
<head>
<title>Embedded Style sheets</title>
<style type=”text/css”>
body{background-color:
pink;}
h1 {
color:orang
e;
text-align:
center;
}
p{
font-family: "Times New
Roman";
font-size: 20px;
}
</style>
</head>
<body>
<h1>Embedded Style Sheets</h1><br>
<p>This is a paragraph
</body>
</html>
Output:

RGMCET CSE DEPT 54


WEB TECHNOLOGIES

External Style Sheets:


External style sheets are just that the style sheets are stored separately from our web
page.These are useful especially if we are setting the styles for an entire website. When we
change the styles in external style sheet we change the styles of all pages. We use „<link>‟
element to access the style sheet file defined into our web page. The format of <link> element
is:
<link rel=”stylesheet” type=”text/css” href=”extstylesheet.css”>
Example:
extern.css:
body {background-color: #d0e4fe;}
h1 {
color: orange; text-align: center;
}
p{
font-family: "Times New Roman"; font-size: 20px;
}
extern.html:
<html>
<head>
<title>External Style Sheets</title>

RGMCET CSE DEPT 55


WEB TECHNOLOGIES

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


</head>
<body>
<h1>External Style Sheets</h1><br>
<p>This is a paragraph
</body>
</html>
Output:

RGMCET CSE DEPT 56


WEB TECHNOLOGIES

UNIT – II
JAVASCRIPT
INTRODUCTION TO JAVASCRIPT:
Static web pages are useful and can be informative. A number of technologies have been
developed that enable the creation of web applications rather than static web pages. The java
programming language is probably the best known such technology. Few programming languages
other than java have been adapted for use in client-side web applications. One such language that is
used in programming client-side web applications is javascript.
Javascript originates from a language called Live Script and was developed by Sun
microsystems and Netscape navigator. Scripts are small pieces of code which accomplish a single
relatively simple task. Javascript is a scripting language that is used for the development of Client-
side-in-browser applications. Javascript is a simple script based language which is only suitable for
fairly simple tasks. Javascript is a language that is best suited to tasks that run for a short time. Most
of the developers experience problems when they try to build web pages which have embedded
javascript.
Important things about Javascript:
1. Javascript is embedded into HTML:
Javascript code is usually embedded into HTML code and is executed within the HTML
document. Javascript has no user interface and it relies on HTML to provide a means of
interaction with the users. Most of the javascript objects have HTML tags and provide event-
driven code to execute it.
2. Javascript is browser dependent:
Javascript depends on the web browser to support it. If the browser does not support it
javascript will be ignored. Javascript was given support from I.E 3.0 & N.N 2.0 onwards.
3. Javascript is an interpreted language:
Javascript is interpreted at runtime by the browser before it is executed. It is not compiled
into a separate program like .exe but remains part of HTML file.
4. Javascript is a loosely typed language:
Javascript is very flexible when compared to java. There is no need to specify the data
type of a variable while declaring it. We can declare variables whenever it is necessary i.e.,

RGMCET CSE DEPT 57


WEB TECHNOLOGIES

variables can be declared explicitly.


5. Javascript is an object-based language:
Javascript is an object-based language that means that we can work with objects that
encapsulate data and behaviour. However, javascript object model is instance based and there
is no inheritance.
6. Javascript is Event-Driven:
HTML objects such as buttons are enhanced to support event handlers. We can specify
functionality.
7. Javascript is not Java:
Java is object oriented language, whereas javascript is object-based, interpreted, loosely-
typed language meant for creating scripts.
8. Javascript is multi functional:
Javascript can be used to:
• Enhance HTML pages.
• Develop client-side applications.
• Build to a certain extent client/server web applications.
• Create extensions to a web server.
• Provide database connectivity without using CGI.
9. Javascript language spans context:
Javascript can be used in server side Netscape live wire pro environment and microsoft’s
Active X server framework. It is not just a client side scripting tool.
Benefits of Javascript:
• It is widely supported in web browsers.
• It gives easy access to the document objects and can manipulate most of them.
• Javascript can give interesting animations without long download times associated with any
multimedia data types.
• Web surfers do not need any special plug-in to use your scripts.
• Javascript is relatively secure i.e., javascript can neither read from a local hard drive nor write
to it and we cannot get a virus directly from javascript.

RGMCET CSE DEPT 58


WEB TECHNOLOGIES

Problems with Javascript:


• If our script does not work then our page is useless.
• Most of the web surfers disable javascript support in their browsers because of the problems
of broken scripts.
• Scripts can run slowly and complex scripts can take a long time to start up.
Javascript Basics:
Javascript programs contain variables, objects and functions. The key points that we need to
apply in all scripts are:
• Each line of code is terminated by semicolon.
• Blocks of code must be surrounded by a pair of curly braces. A block of code is a set of
instructions that are to be executed together as a unit.
• Functions have parameters which are passed inside parentheses.
• Variables are declared using keyword “var”.
• Scripts neither require a main function nor an exit condition. Execution of scripts starts with
the first line of code and runs until there is no more code.
Javascript and HTML page:
Javascript need to be included in a HTML page. We cannot execute these scripts from a
command line as the interpreter is part of the browser. The script is included in the web page and
run by the browser, usually as soon as the page has been loaded. The browser is able to debug the
script and can display errors.
Javascript is embedded in HTML using <SCRIPT> element. Usually <SCRIPT> is
included in <HEAD> element. A simple javascript code:
<html>
<head>
<title>Javascript</title>
<script language=“javascript”>
document.write(“Welcome to Javascript”);
</script>
</head>
<body>

RGMCET CSE DEPT 59


WEB TECHNOLOGIES

<h1>Javascript First Page</h1>


</body>
</html>
If javascript is written as a separate file, then it must be saved with .js extension. External
javascript file is included into HTML by using src attribute of <SCRIPT> element. Then also the
script is evaluated when page loads and before any script action takes place.
In case of functions, all javascript statements within the function block are interpreted but
executed only when the function is called from a javascript event. Javascript statements which are
not in a function block are executed after document loads into browser.
JavaScript alert()
• The alert() method in JavaScript is used to display a virtual alert box. It is mostly used to
give a warning message to the users. It displays an alert dialog box that consists of some
specified message (which is optional) and an OK button. The syntax is:
alert(“message”);
JavaScript prompt()
The prompt() method in JavaScript is used to display a prompt box that prompts the user for the
input. It is generally used to take the input from the user before entering the page. When the prompt
box pops up, we have to click "OK" or "Cancel" to proceed. Syntax is:
prompt(“message”, “default”)
Javascript Statements:
Programs are composed of data and code which manipulates that data. Program instructions
are grouped into units called statements. We create programs from lot of statements.
If-else:
The JavaScript if-else statement is used to execute the code whether condition is true or false. There
are three forms of if statement in JavaScript.
• if Statement
• if else statement
• if else if statement

RGMCET CSE DEPT 60


WEB TECHNOLOGIES

If statement:
It evaluates the content only if expression is true. The signature of JavaScript if statement
is:
if(expression){
//content to be evaluated
}
Example:
<html>
<head>
<title>If statement</title>
</head>
<body bgcolor="pink">
<script type="text/javascript">
var age=parseInt(prompt("Enter age of the person",""));
if(age>60){
document.write("<h1>Senior Citizen</h1>");
}
</script>
</body>
</html>
Output:

RGMCET CSE DEPT 61


WEB TECHNOLOGIES

JavaScript If...else Statement:


It evaluates the content whether condition is true of false. The syntax of JavaScript if-else
statement is:
if(expression){
//content to be evaluated if condition is true
}
else{
//content to be evaluated if condition is false
}
Example:
<html>
<head>
<title>If statement</title>
</head>
<body bgcolor="pink">
<script language="javascript">
var n=parseInt(prompt("Enter a value"," "));
if(n%2==0){
document.write(n+"is even number");
}
else{
document.write(n+"is odd number");
}
</script>
</body>
</html>
Output:

RGMCET CSE DEPT 62


WEB TECHNOLOGIES

JavaScript If...else if statement:


It evaluates the content only if expression is true from several expressions. The signature of
JavaScript if else if statement is:
if(expression1){
//content to be evaluated if expression1 is true
}
else if(expression2){
//content to be evaluated if expression2 is true
}
else if(expression3){
//content to be evaluated if expression3 is true
}
else{
//content to be evaluated if no expression is true
}

RGMCET CSE DEPT 63


WEB TECHNOLOGIES

Example:
<html>
<head>
<title>if statement</title>
</head>
<body bgcolor="pink">
<script language="javascript">
var m1=parseInt(prompt("Enter Marks1","0"));
var m2=parseInt(prompt("Enter Marks2","0"));
var m3=parseInt(prompt("Enter Marks3","0"));
var avg=parseInt((m1+m2+m3)/3);
if(avg>70){
document.write("<h1>Distinction</h1>");
}
else if(avg<70&&avg>60){
document.write("<h1>First Class</h1>");
}
else if(avg<60&&avg>50){
document.write("<h1>Second class</h1>");
}
else{
document.write("<h1>Fail</h1>");
}
</script>
</body>
</html>
JavaScript Switch:
The JavaScript switch statement is used to execute one code from multiple expressions. The
signature of JavaScript switch statement is :
switch(expression){

RGMCET CSE DEPT 64


WEB TECHNOLOGIES

case value1:
code to be executed;
break;
case value2:
code to be executed;
break;
......

default:
code to be executed if above values are not matched;
}
Example:
<html>
<head>
<title>Switch</title>
</head>
<body bgcolor="pink">
<script language="javascript">
var a=parseInt(prompt("Enter a value"," "));
var b=parseInt(prompt("Enter b value"," "));
var ch=parseInt(prompt("Enter your choice"," "));
switch(ch){
case 1: document.write("<h1>Addition is:"+(a+b)+"<h1>");
break;
case 2: document.write("<h1>Subtraction is:"+(a-b)+"<h1>");
break;
case 3: document.write("<h1>Multiplication is:"+(a*b)+"<h1>");
break;
case 4: document.write("<h1>Division is:"+(a/b)+"<h1>");
break;

RGMCET CSE DEPT 65


WEB TECHNOLOGIES

default: document.write("<h1>Invalid Choice</h1>");


}
</script>
</body>
</html>
Javascript Loops:
The JavaScript loops are used to iterate the piece of code. Various types of loops are:
1. for loop
2. while loop
3. do-while loop
JavaScript For loop:
The JavaScript for loop iterates the elements for the fixed number of times. Syntax is:
for (initialization; condition; increment)
{
code to be executed
}
JavaScript while loop:
The JavaScript while loop iterates the elements for the infinite number of times. Syntax is:
while (condition)
{
code to be executed
}
JavaScript do while loop:
The JavaScript do while loop iterates the elements for the infinite number of times like while loop.
But, code is executed at least once whether condition is true or false. Syntax is:
do{
code to be executed
}while (condition);

RGMCET CSE DEPT 66


WEB TECHNOLOGIES

Example:
<html>
<head>
<title>Multiplication</title>
</head>
<body bgcolor="pink">
<script language="javascript">
var n=parseInt(prompt("Enter a number",""));
var i;
for(i=1;i<=10;i++){
document.write("<b>"+n+"*"+i+"="+(n*i)+"<br>");
}
</script>
</body>
</html>
Javascript Events:
JavaScript's interaction with HTML is handled through events that occur when the user or the
browser manipulates a page. When the page loads, it is called an event. When the user clicks a button,
that click too is an event. Events are a part of the Document Object Model (DOM) Level 3 and every
HTML element contains a set of events which can trigger JavaScript Code.
Mouse events:

RGMCET CSE DEPT 67


WEB TECHNOLOGIES

Keyboard events:

Form Events:

Window/Document events:

RGMCET CSE DEPT 68


WEB TECHNOLOGIES

Javascript Functions:
A javascript function contains code that will be executed by an event or by a call to function.
We may call a function from anywhere within a page. Functions can be defined both in <head> and
<body> section of a document. Syntax to define a function is:
function function_name(var1, var2,…..,varn)
{
//Block of code
}
• A function with no parameters must include the parentheses () after function name.
• The keyword function must be written in lower case, otherwise javascript error occurs.
Example:
<html>
<head>
<title>functions</title>
<script language="javascript">
function displayMessage(){
alert("This is a function");
}
</script>
</head>

RGMCET CSE DEPT 69


WEB TECHNOLOGIES

<body bgcolor="pink">
<form>
<input type="button" value="Click Me" onClick="displayMessage()">
</form>
</body>
</html>
Function with parameters:
<html>
<head>
<title>Function</title>
</head>
<body onLoad="pinfo('abc',30)">
<script language="javascript">
function pinfo(name,age){
document.write("<center><h1>User Information</h1><br>");
document.write("<h3>Name is:"+name+"</h3>");
document.write("<br><h3>Age is:"+age+"</h3>");
document.write("</center>");
document.close();
}
</script>
</body>
</html>
Objects in Javascript:
Window object:
Various properties & methods supported by window object are:
• open(): It is used to open a new window. Two arguments are provided. URL that specifies
the path of documents which should be loaded in the window and Name of window.
• close(): This method is used to close the current window.
• scroll(): By using this method contents of a given window can be easily scrolled.

RGMCET CSE DEPT 70


WEB TECHNOLOGIES

Apart from above methods, window object may also have properties such as toolbar,
location, menubar, scrollbar, resizeable etc..
Examples:
Creating a new window and loading existing page:
<html>
<head>
<title>Window</title>
<script language="javascript">
function showNewPage(){
window.open("login.html");
}
</script>
</head>
<body bgcolor="pink">
<center>
<form>
<input type="button" value="SeeLogin" onClick="showNewPage()">
</form>
</center>
</body>
</html>
Creating a new window:
<html>
<head>
<title>Window</title>
<script language="javascript">
function showNewPage(){
var newWindow=window.open("window.html","height=200,width=450");
newWindow.document.write("<center><h1>This is a new Window</h1></center>");
}

RGMCET CSE DEPT 71


WEB TECHNOLOGIES

</script>
</head>
<body bgcolor="pink">
<center>
<form>
<input type="button" value="Open page" onClick="showNewPage()">
</form>
</center>
</body>
</html>
Document object:
Document refers to page which will be displayed as soon as the browser window is opened. Various
methods/properties supported by the document object are:
• write()/writeln(): We can create HTML pages using javascript by using write()/writeln()
methods. Data can also be inserted.
• bgcolor/fgcolor: These are the same properties that can be set in the <body> tag. The only
difference here is that the values can be set from javascript.
• anchors: It is an array holding the names of anchor elements appearing on web page.
• links: It is an array holding all links appearing on web page.
• forms: It is an array that contains all of the HTML forms.
• close(): The document is not completely written until the close() method is called. The
browser keep waiting for more data if user do not call this method.
Form object:
Two aspects of form can be manipulated through javascript.
• Most commonly the data that is entered onto the form can be checked at submission.
• We can actually build forms through javascript.
Various form events are:
• onClick: This event is triggered when the user clicks on an element.
• onSubmit: This event can only be triggered when the form is submitted.
• onReset: This event is triggered when the form is reset by the user.

RGMCET CSE DEPT 72


WEB TECHNOLOGIES

Simple form validation:


<html>
<head>
<title>Validation</title>
<script language="javascript">
function validate(){
var value=document.forms[0].elements[0].value;
if(value!="abc"){
document.forms[0].reset();
}
else{
alert("Hi abc");
}
}
</script>
</head>
<body bgcolor="pink">
<form>
Name:<input type="text" name="txt1" value=""><br>
<input type="submit" value="Submit" onClick="validate()">
</form>
</body>
</html>
Math object:
Methods supported by math object are:
• min(): Displays minimum of two numeric values entered. (min(45,65)).
• max(): Displays maximum of two numeric values entered. (min(45,65)).
• abs(): Displays the absolute value of numeric entity entered into it.
• ceil(): Displays the rounded value of the integer entered into it. (ceil(5.2)=6)
• round(): It rounds the value entered to its nearest integer. (round(5.2)=5)

RGMCET CSE DEPT 73


WEB TECHNOLOGIES

• sqrt(): Displays the square root of the value entered into it.
• sin(): Displays the trigonometric sine value.
• cos(): Displays the trigonometric cosine value.
• tan(): Displays the trigonometric tangent value.
• log(): Displays the logarithmic equivalent value.
Browser object:
The browser object is also called as navigator object. Methods supported by browser
object are:
• navigator.appcodeName: The internal name for the browser.
• navigator.appName: This is the public name of the browser.
• navigator.appversion: The version number, platform on which the browser is running and
the version of navigator with which it is compatible.
• navigator.userAgent: The strings appcodeName and appVersion concatenated together.
• navigator.plugins: An array containing details of all installed plugins.
• navigator.mimeTypes: An array of all supported MIME types.
Date object:
Javascript Date provides functions to perform many different date manipulations. In
javascript dates and times represent the number of milliseconds since 01/01/1970 UTC.
Javascript like most programming systems has two separate notions of time:
• UTC is universal time, also known as Greenwich Mean Time, which is the standard time
throughout the world.
• Local time is the time on the machine which is executing the script.
Date object Methods:
1. Date(): Construct an empty date object.
2. Date(milliseconds): Construct a new date object based upon the number of milliseconds
which have elapsed since 00:00:00 hours on 01/01/1970.
3. Date(String): Create a date object based upon the contents of a text string.
4. Date(year,month,day[hour,minute,second]): Create a new date object based upon numeric
values for year, month and day. Optional time values may also be supplied.
5. Parse(string): Returns the number of milliseconds since midnight on 01/01/1970.

RGMCET CSE DEPT 74


WEB TECHNOLOGIES

6. getDate(): Return the day of the month.


7. getDay(): Return the day of the week.
8. getHours(): Return the hours.
9. getMilliseconds(): Return the milliseconds.
10. getMinutes(): Return the minutes.
11. getSeconds(): Return the seconds.
12. getMonth(): Return the month.
13. getFullYear(): Return the year as a four digit number.
14. getTime(): Return the number of milliseconds since midnight on 01/01/1970.
15. setDate(day): Set the day value of the object. Accept values in the range 1 to 31.
16. setFullYear(year[,month,day]): sets the year value of the object.
17. setHours(hours[,mins,secs,ms]): Set the hours value of the object to an integer in the range
0 – 23.
18. setMilliseconds(ms): Set the milliseconds value of the object in the range 0 - 999.
19. setMinutes(min[,secs,ms]): Set the minutes value of the object in the range 0 - 59.
20. setSeconds(secs[,ms]): Set the seconds value of the object to an integer in the range 0 - 59.
21. setMonth(month[,day]): Set the month value of the object to an integer in the range 0 - 11.
Example:
<html>
<head>
<title>Date</title>
</head>
<body onLoad=“Dater()”>
<script language=“javascript”>
function Dater(){
var today=new Date();
var yesterday=new Date();
var diff=today.getDate()-1;
Yesterday.setDate(diff);
document.write(“<h3>The date is:”+today+”</h3>”);

RGMCET CSE DEPT 75


WEB TECHNOLOGIES

document.write(“<h3>The date yesterday was:”+yesterday+”</h3>”);


document.close();
}
</script>
</body>
</html>
Javascript Arrays:
The basic array operations are:
• Creation of Arrays.
• Adding elements.
• Accessing individual elements.
• Removing elements.
Creating Arrays:
Javascript arrays can be created in three different ways:
1. The easiest way is simply to declare a variable and pass it some elements in array format.
var days=[“Monday”,”Tuesday”,”Wednesday”];
2. The second approach is to create an array object using the keyword new and a set of elements
to store:
var days=new Array(“Monday”,”Tuesday”,”Wednesday”);
3. Finally, an empty array object which has a space for a number of elements can be created:
var days=new Array(3);
Adding elements to Arrays:
Adding an element to an array can be done as shown below:
var days[4]=“Thursday”;
In javascript we have a benefit. If the array is full, then also we can add elements to array.
The interpreter simply extends the array and inserts new item. For example:
Accessing Array elements:
The elements in the array are accessed through their index. The same access method is
used to find elements and to change their values.
Length:

RGMCET CSE DEPT 76


WEB TECHNOLOGIES

When accessing array elements we need to know how many elements have been stored
into the array. This is done through the length attribute. The index number runs from 0 – length-1.
Example:
<html>
<head>
<title>Arrays</title>
</head>
<body>
<script language=“javascript”>
document.write(“<h1> Looping through the Array</h1>”);
var data =[10,20,30,40];
var len=data.length;
for(var count=0;count<len;count++){
document.write(data[count]+”,”);
}
document.close();
</script>
</body>
</html>
Removing Array elements:
Javascript does not provide a built-in function to remove array members. To remove array elements
we use the following procedure:
1. Read each element in the array.
2. If the element is not the one which we want to delete, copy it to temporary array.
3. If the element is the one we want to delete, do nothing.
4. Increment loop counter.
5. Repeat the process and copy the array elements again into original array.
Example:
<html>
<head>

RGMCET CSE DEPT 77


WEB TECHNOLOGIES

<title>Arrays</title>
</head>
<body>
<script language=“javascript”>
document.write(“<h1> Removing Array elements</h1>”);
var data =[10,20,30,40];
var len=data.length;
for(var count=0;count<len;count++){
document.write(data[count]+”,”);
}
var rem=prompt(“Enter item to remove”,””);
var tmp=new Array(data.length-1);
var count2=0;
for(count=0;count<len;count++){
if(data[count]==rem){
}
else{
tmp[count2]=data[count];
count2++;
}
}
data=tmp;
var len=data.length;
for(var count=0;count<len;count++){
document.write(data[count]+”,”);
}
document.close();
</script>
</body>
</html>

RGMCET CSE DEPT 78


WEB TECHNOLOGIES

Dynamic HTML using Javascript:


In case of HTML dynamic means subject to change at any time. The DHTML is simply
HTML that has the ability to change after the browser has loaded the page. DHTML is also called
as “Animated HTML” i.e., anything that is written in HTML can be redone after the page loads.
This dynamic capability is achieved through a combination of several key DHTML
components that work in conjunction with HTML. DHTML can also be described as the combination
of HTML, stylesheets and scripts that allow documents to be animated. The features of dynamic
HTML are:
1. Changing tags and contents:
In this we deal with technology of changing the contents and tags of text using the concept
of DOM.
2. Live positioning of elements:
In this DHTML has introduced a concept of dynamically positioning tags in the
document.
3. Dynamic fonts:
We can increase the font of text dynamically.
4. Data Binding:
This enables page elements such as table cells to attach themselves to data records.
Changes to a record are updated on page, and user modification updated on data record.
Example:
<html>
<head>
<title>DHTML</title>
</head>
<body bgcolor="pink">
<center>
<h1 onMouseOver="this.style.color='red';" onMouseOut="this.style.color='blue';">
Text changes to red with the mouse
</h1>
</center>

RGMCET CSE DEPT 79


WEB TECHNOLOGIES

</body>
</html>
Dynamic content – Changing web pages:
There are several methods that insert HTML in pages:
1. insertAdjacentHTML.
2. insertAdjacentText.
3. innerText.
4. outerText.
5. innerHTML.
6. outerHTML.
insertAdjacentHTML & insertAdjacentText:
The insertAdjacentHTML method lets us to insert HTML next to an element that already
exists and insertAdjacentText method lets us insert text in the same way.
We can determine where the new text or HTML will go with respect to existing element
by passing the constraints “BeforeBegin, AfterBegin, BeforeEnd or AfterEnd”.
innerText: Let us change the text between the start and end tags.
outerText: Let us change all the text including start and end tags.
innerHTML: Changes the contents of elements between start and end tags.
outerHTML: Changes contents of an element including the start and end tags.
createElement: It is used to create new web page elements and use methods like insertBefore() and
insertAfter() to insert those elements into web page.
Examples:
insertAdjacentHTML():
<html>
<head>
<title>InsertAdjacentHTML</title>
<script language="javascript">
function showMore(){
div1.insertAdjacentHTML('afterend','A New Textfield:<input type="text" value="Hello!">');
}

RGMCET CSE DEPT 80


WEB TECHNOLOGIES

</script>
</head>
<body bgcolor="pink">
<div id="div1">
<input type="button" value="Click Me" onClick="showMore()">
</div>
</body>
</html>
Output:

innerText:
<html>
<head>
<title>InnerText</title>
<script language="javascript">
function changeHeader(){
header.innerText="This is new Header";
}
</script>
</head>

RGMCET CSE DEPT 81


WEB TECHNOLOGIES

<body bgcolor="pink">
<center>
<h1 id="header" onClick="changeHeader()">Dynamic HTML</h1>
</center>
</body>
</html>
innerHTML:
<html>
<head>
<title>InnerText</title>
<script language="javascript">
function changeHeader(){
header.innerHTML="<marquee>This is new Header</marquee>";
}
</script>
</head>
<body bgcolor="pink">
<center>
<h1 id="header" onClick="changeHeader()">Dynamic HTML</h1>
</center>
</body>
</html>
outerHTML:
<html>
<head>
<title>InnerText</title>
<script language="javascript">
function changeHeader(){
header.outerHTML="<marquee style='font-size:50'>This is new Header</marquee>";
}

RGMCET CSE DEPT 82


WEB TECHNOLOGIES

</script>
</head>
<body bgcolor="pink">
<center>
<h1 id="header" onClick="changeHeader()">Dynamic HTML</h1>
</center>
</body>
</html>
createElement() & createTextNode():
<html>
<head>
<title>createElement</title>
<script language="javascript">
function showMore(){
var newDiv,newTextfield,newText;
newDiv=document.createElement("DIV");
newDiv.id="div1";
newTextfield=document.createElement("INPUT");
newTextfield.type="text";
newTextfield.value="Hello!";
newText=document.createTextNode("A New Textfield");
newDiv.insertBefore(newText,null);
newDiv.insertBefore(newTextfield,null);
document.body.insertBefore(newDiv,null);
}
</script>
</head>
<body bgcolor="pink">
<h1 align="center">CreateElement Method</h1><br>
<input type="button" value="Click Me" onClick="showMore()">

RGMCET CSE DEPT 83


WEB TECHNOLOGIES

</body>
</html>
Output:

Creating Dynamic Tables:


<html>
<head>
<title>Dynamic Tables</title>
<script language="javascript">
function addRow(){
var newRow=table1.insertRow(3);
var newCell=newRow.insertCell(0);
newCell.innerText="aaa";
var newCell=newRow.insertCell(1);
newCell.innerText="bbb";
var newCell=newRow.insertCell(2);
newCell.innerText="ccc";
}
</script>
</head>

RGMCET CSE DEPT 84


WEB TECHNOLOGIES

<body bgcolor="pink">
<center>
<h1>Dynamic Tables</h1>
<table id="table1" border="2">
<tr>
<th>ABC</th>
<th>DEF</th>
<th>GHI</th>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</table>
<input type="button" value="Add Row" onClick="addRow()">
</center>
</body>
</html>
Output:

RGMCET CSE DEPT 85


WEB TECHNOLOGIES

Data Validation using Javascript:


Data validation is a process of verifying/validating the data entered by the user. Data
validation can be done in two ways:
1. Client-side data validation.
2. Server-side data validation.
Client-side data validation is a process of verifying the data entered by the user before it
is submitted to the server.
Server-side data validation is a process of verifying the data at server side with the
database data.
Example:
Registration Form Validation:
<html>
<head>
<title>JavaScript sample registration from validation</title>
<script type='text/javascript'>
function formValidation()

RGMCET CSE DEPT 86


WEB TECHNOLOGIES

{
var uid = document.form1.userid;
var passid = document.form1.passid;
var uname = document.form1.username;
var uadd = document.form1.address;
var uzip = document.form1.zip;
var uemail = document.form1.email;
if(userid_validation(uid,5,12))
{
if(userid_validation(passid,7,12))
{
if(allLetter(uname))
{
if(alphanumeric(uadd))
{
if(allnumeric(uzip))
{
if(ValidateEmail(uemail))
{
}
}
}
}
}
}
return false;
}
function userid_validation(uid,mx,my)
{
var uid_len = uid.value.length;

RGMCET CSE DEPT 87


WEB TECHNOLOGIES

if (uid_len == 0 || uid_len >= my || uid_len < mx)


{
alert("It should not be empty / length be between "+mx+" to "+my);
uid.focus();
return false;
}
return true;
}
function allLetter(uname)
{
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert('Please input alphabet characters only');
uname.focus();
return false;
}
}
function alphanumeric(uadd)
{
var letters = /^[0-9a-zA-Z]+$/;
if(uadd.value.match(letters))
{
return true;
}
else

RGMCET CSE DEPT 88


WEB TECHNOLOGIES

{
alert('Please input alphanumeric characters only');
uadd.focus();
return false;
}
}
function allnumeric(uzip)
{
var numbers = /^[0-9]+$/;
if(uzip.value.match(numbers))
{
return true;
}
else
{
alert('Please input numeric characters only');
uzip.focus();
return false;
}
}
function ValidateEmail(uemail)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");

RGMCET CSE DEPT 89


WEB TECHNOLOGIES

uemail.focus();
return false;
}
}
</script>
</head>
<body>
<form name='form1' onsubmit='return formValidation()' >
<table width="500" cellpadding="3" style="border-collapse: collapse;">
<tr>
<td>User id </td>
<td><input type="text" name="userid" size="12" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="passid" size="12" /></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" name="username" size="50" /></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address" size="50" /></td>
</tr>
<tr>
<td>ZIP Code </td>
<td><input type="text" name="zip" /></td>
</tr>
<tr>

RGMCET CSE DEPT 90


WEB TECHNOLOGIES

<td>Email</td>
<td><input type="text" name="email" size="50" /></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="msex" value="Male" /> Male
<input type="radio" name="fsex" value="Female" /> Female</td>
</tr>
<tr>
<td>Language preference</td>
<td><input type="checkbox" name="en" value="en" checked />English
<input type="checkbox" name="nonen" value="noen" />Non English</td>
</tr>
<tr>
<td>Write about yourself<br>
(optional)</td>
<td><textarea name="desc" rows="4" cols="40"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="submit" value="Submit" /></td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>
Output:

RGMCET CSE DEPT 91


WEB TECHNOLOGIES

RGMCET CSE DEPT 92

You might also like