Professional Documents
Culture Documents
List of Experiments
List of Experiments
4 Introduction to CSS.
6 Introduction to JavaScript.
12 Introduction to Ajax.
15 Introduction to php.
HTML is a markup language. It tells the web browser what content to display. HTML separates
"content" (words, images, audio, video, and so on) from "presentation" (the definition of the type of
content and the instructions for how that type of content should be displayed). HTML uses a pre-defined
set of elements to identify content types. Elements contain one or more "tags" that contain or express
content. Tags are surrounded by angle brackets, and the "closing" tag (the one that indicates the end of
the content) is prefixed by a forward slash.
For example, the paragraph element consists of the start tag "<p>" and the closing tag "</p>". The
following example shows a paragraph contained within the HTML paragraph element:
<p>You are beginning to learn HTML.</p>
When this content is displayed in a web browser, it looks like this:
You are beginning to learn HTML.
Elements — the basic building blocks
HTML consists of a set of elements. Elements define the semantic meaning of their content. Elements
include everything between two matching element tags, including the tags themselves.
A very simple but complete web page looks like this:
<html>
<body>
<p> you are in your begining stage of HTM</p> </body>
</html>
Tags
HTML documents are written in plain text. They can be written in any text editor that allows content to
be saved as plain text, such as Notepad, Notepad++, or Sublime, but most HTML authors prefer to use
a specialized editor that highlights syntax and shows the DOM. Tag names may be written in either
upper or lower case.
This is an an example of valid code:
XHTML
XHTML stands for Extensible HyperText Markup Language and is the next step in the evolution of the
Internet. The XHTML 1.0 is the first document type in the XHTML family.
XHTML was developed by the W3C to help web developers make the transition from HTML to XML.
By migrating to XHTML today, web developers can enter the XML world with all of its attendant
benefits, while still remaining confident in their content's backward and future compatibility.
Developers who migrate their content to XHTML 1.0 will realize the following benefits:
XHTML documents are XML conforming. As such, they are readily viewed, edited, and validated with
standard XML tools. XHTML documents can be written to operate better than they did before in
existing browsers as well as in new browsers. XHTML documents can utilize applications like scripts
and applets that rely upon either the HTML Document Object Model or the XML Document Object
Model.
1. All tag and attribute names must be in lowercase. Thus, you can't write
<A HREF="foo.html">...</A>
but must instead write this in lowercase, as :
<a href="foo.html">...</a>
3. You can never omit an end tag. With HTML, you could
sometimes leave off an end tag, as in
<p> ..... paragraph text
<p> ..... more paragraph text
With XHTML, you must always put in the end tag, so that the preceding must be written as:
<p> ..... paragraph text </p>
<p> ..... more paragraph text </p>
4. Attributes must always have a value. In HTML you can sometimes omit atttibute values, as in
<hr size="2" noshade>
in XHTML, this would need to be written as:
<hr size="2" noshade="noshade" />
5. Attributes values must always be quoted.. In HTML you can sometimes omit the quotes,as in
<hr size=2>
in XHTML, this would need to be written as:
<hr size="2" />
Experiment-02
AIM: Basic Tags in HTML
<html>
<head>
bold</b><br/>
<i>tag for italic</b><br/> <u>tag for underline</u><br/> <del>tag for delete</del><br/> <h2>creating
</table>
checkbox<br/>
submit button<br/>
<select>
</select>
</body>
</html>
Experiment-03
AIM: Write a program to create lists.
<html>
<body>
<p><b><u> Ordered List</b></u> </p> <ol>
<li>a</li>
<li>s</li>
</ol>
<p><b><u> Unordered List</b></u> </p> <ul>
<li>a</li>
<li>s</li>
</ul>
<p><b><u> Nested List</b></u> </p> <OL TYPE = A START =3>
<LI> Fruits
<OL TYPE = I>
<LI> Apple
<LI> MANGO
<LI> Orange
Page 20 of 115 </OL>
<LI> VEGETABLES <OL TYPE = I>
<LI> Brinjal
<LI> Cabbage
<LI> Tomato </OL>
</OL>
<p><b><u> Definition List </b></u></p> <dl>
<dt> Coffee </dt>
<dd> Black Hot Drink </dd> <dt> Milk </dt>
<dd> White Cold Drink </dd>
</dl>
</body>
</html>
Experiment-04
AIM: Introduction to CSS.
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting
of a document written in a markup language. While most often used to style web pages and interfaces
written in HTML and XHTML, the language can be applied to any kind of XML document, including
plain XML, SVG and XUL.
CSS is designed primarily to enable the separation of document content from document presentation,
including elements such as the layout, colors, and fonts.[1] This separation can improve content
accessibility, provide more flexibility and control in the specification of presentation characteristics,
enable multiple pages to share formatting, and reduce complexity and repetition in the structural content
(such as by allowing for table less web design
Example:-
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="cs.css" />
<style type="text/css">
.di
{
background-color:#99FF00; margin-left:300px; width:100px;
height:100px;
}
.mm
{
background-color:#660099; width:200px; height:100px;
}
#mn
{
background-color:#3333FF; margin-left:500px; width:300px;
height:300px;
}
#ss
{
background-color:#3333FF;
width:300px;
height:100px;
}
</style>
</head>
<body>
<div id="container">
<h1>Inline CSS</h1>
<html>
<head> <title>menu</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body> <ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li> <li>Web Development</li> <li>Illustrations</li>
</ul>
</li> <li>Blog
<ul>
<li>Web Design</li> <li>Web Development</li> <li>Illustrations</li>
</ul></li> <li>Contact</li>
<li>Facilities</li> <li>Downloads
<ul><li>apendix c</li> <li>apendix d</li> <li>apendix g</li>
</ul>
</li>
</ul>
</body>
</html>
External CSS Coding.
body {
font-family: Arial, Helvetica, sans-serif, Helvetica, Arial, sans-serif; padding: 20px 50px 150px;
font-size: 13px; text-align: center; background: #E3CAA1;
}
ul {
text-align: left; display: inline; margin: 0;
padding: 15px 4px 17px 0; list-style: none;
}
ul li {
font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px;
position: relative; padding: 15px 20px; background: #fff; cursor: pointer;
}
ul li:hover { background: #555; color: #fff;
}
ul li ul { padding: 0;
position: absolute; top: 48px;
left: 0; width: 150px; opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #CCCC33; display: block;
color: #FF0000; text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #9966CC; } ul li:hover ul {
display: block; opacity: 1; visibility: visible;}
Experiment-06
AIM: Introduction to JavaScript.
JavaScript is a scripting language designed primarily for adding interactivity to Web pages and
creating Web applications. The language was first implemented by Netscape Communications Corp. in
Netscape Navigator 2 beta (1995). JavaScript is different from the Java language (developed in the
1990s at Sun Microsystems). However, the two languages can interoperate well. Client-side JavaScript
programs, or scripts, can be embedded directly in HTML source of Web pages. (Note: There is also
server-side JavaScript, but it's beyond the scope of this FAQ collection.) Depending on the Web
developer's intent, script code may run when the user opens the Web page, clicks or drags some page
element with the mouse, types something on the keyboard, submits a form, or leaves the page.
JavaScript is an object-oriented language with prototypal inheritance. The language supports several
built-in objects, and programmers can create or delete their own objects. Prototypal inheritance makes
JavaScript very different from other popular programming languages such as C++, C#, or Java featuring
classes and classical inheritance. JavaScript does not have classes in the C++ or Java sense. In
JavaScript, objects can inherit properties directly from each other, forming the object prototype chain.
</body>
</html>
Experiment-08
AIM: Write a program to Sum and multiply two numbers using JavaScript.
<html>
<head>
<script>
function myFunction() {
var y = document.getElementById("txt1").value; var z = document.getElementById("txt2").value; var
x = +y + +z; document.getElementById("demo").innerHTML = x;
}
function mul() {
var y = document.getElementById("txt1").value; var z = document.getElementById("txt2").value; var
x = +y * +z; document.getElementById("demo").innerHTML = x;
}
</script>
</head>
<body>
<p>Click the button to calculate.</p>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1" size="6px">Enter second number:
<input type="text" id="txt2" name="text2" size="6px"><br>
<button onClick="myFunction()">SUM</button> <button
onClick="mul()">Multiply</button>
<p id="demo"></p> </body>
</html>
Experiment-09
AIM: Write a program to Show use of alert, confirm and prompt box.
<html>
<head>
<title>java script</title>
<script type="text/javascript"> <!--
function confirmation() {
var answer = confirm("Welcome Fb.com?") if (answer){
alert("Welcome!") window.location =
"http://www.fb.com/hatemyself90";
}
else{
alert("Bye bye!!")
}
}
function prompter() {
var reply = prompt("What's your name?", "") alert ( "Nice to see you" + reply + "!")
}
//--> </script>
</head>
<body>
<h1 align="center"> Java Script Alert, Confirm and Prompt Box. </h1>
<form style="height:200px; width:200px; background-color:#CC3366;">
<h3> Java Script Alert Box.</h3>
<input type="button" onclick="alert('Are you sure you want to give us the deed to your house?')"
value="Confirmation Alert"> </form>
<form style="height:200px; width:210px; background-color:#FF9999; margin-top:-220px; margin-
left:300px"> <h3> Java Script Confirm Box.</h3>
<input type="button" onClick="confirmation()" value="Fb Login">
</form>
<div style=" margin-top:-220px; background-color:#00FF66; height:200px; width:200px; margin-
left:600px;">
<h3> Java Script Prompt Box.</h3>
<input type="button" onclick="prompter()" value="Say my name!">
</div>
</body>
</html>
Experiment-10
AIM: Write a program to redirect, popup and print function in JavaScript.
<html>
<head>
<title>java script</title>
</head>
<body onLoad="setTimeout('delayer()', 5000)"> <h1> Redirect, Popup and Print Function using java
script</h1>
<h2>Prepare to be redirected!</h2>
<p>This page is a time delay redirect, please update your bookmarks to our new
location!</p>
<form>
<input type="button" value="Print This Page" onClick="window.print()" />
</form>
</body>
</html>
Experiment-11
AIM: Create validation Form in JavaScript.
<html>
<head>
<script type='text/javascript'>
function formValidator(){
// Make quick references to our fields
var firstname = document.getElementById('firstname'); var addr = document.getElementById('addr');
var zip = document.getElementById('zip');
var state = document.getElementById('state');
var username = document.getElementById('username'); var email =
document.getElementById('email');
// Check each input in the order that it appears in the form!
if(isAlphabet(firstname, "Please enter only letters for your name")){
if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
if(isNumeric(zip, "Please enter a valid zip
code")){
if(madeSelection(state, "Please Choose
a State")){
if(lengthRestriction(username, 6,
8)){
if(emailValidator(email, "Please enter a valid
email address")){
return true;
}
}
}
}
}
}
return false;
}
Experiment-12
AIM: Introduction to Ajax.
AJAX is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading
the whole page.
AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the
server behind the scenes. This means that it is possible to update parts of a web page, without reloading
the whole page.
Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.
Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.
In essence, Ajax is an efficient way for a web application to handle user interactions with a web page
- a way that reduces the need to do a page refresh or full page reload for every user interaction. This
enables rich behavior (similar to that of a desktop application or plugin-based web application) using a
browser. Ajax interactions are handled asynchronously in the background. As this happens, a user can
continue working with the page. Ajax interactions are initiated by JavaScript code. When the Ajax
interaction is complete, JavaScript updates the HTML source of the page. The changes are made
immediately without requiring a page refresh. Ajax interactions can be used to do things such as validate
form entries (while the user is entering them) using server-side logic, retrieve detailed data from the
server, dynamically update data on a page, and submit partial forms from the page.
AJAX is Based on Internet Standards
AJAX is based on internet standards, and uses a combination of:
XMLHttpRequest object (to exchange data asynchronously with a server) JavaScript/DOM (to
display/interact with the information)
CSS (to style the data)
XML (often used as the format for transferring data)
Google Suggest
AJAX was made popular in 2005 by Google, with Google Suggest.
Google Suggest is using AJAX to create a very dynamic web interface: When you start typing in
Google's search box, a JavaScript sends the letters off to a server and the server returns a list of
suggestions.
As you type in the search box, you can find information quickly by seeing searches that might be similar
to the one you're typing. For example, as you start to type [google], you may see searches for other
popular google-related searches.
Syntax for creating an XMLHttpRequest object:
variable=new XMLHttpRequest();
Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object:
variable=new ActiveXObject("Microsoft.XMLHTTP");
Experiment-13
AIM: Write a program to change content of web page using ajax.
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();
}
</script>
</head>
<body>
</body>
</html>
Experiment-14
AIM: Write a program to create XML Http Request.
variable=new XMLHttpRequest();
Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object: variable=new
ActiveXObject("Microsoft.XMLHTTP");
<html>
<head>
<script>
function loadXMLDoc()
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();
else
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();
</script>
</head>
<body>
</html>
Experiment-15
PHP started out as a small open source project that evolved as more and more people found out how
useful it was. Rasmus Lerdorf unleashed the first version of PHP way back in 1994.
PHP performs system functions, i.e. from files on a system it can create, open, read, write, and close
them.
PHP can handle forms, i.e. gather data from files, save data to a file, thru email you can send data, return
data to the user.
You add, delete, modify elements within your database thru PHP. Access cookies variables and set
cookies.
Using PHP, you can restrict users to access some pages of your website. It can encrypt data.
Experiment-16
AIM: Write a program to Addition of two numbers using php.
<html>
<head>
<title>Addition of Numbers Using Forms</title> </head>
<?php error_reporting(0);
<br>
<input type="submit" name="submit" value="Add"> <input type="submit" name="submit2"
value="Clear">
</form>
<?php
if ($_REQUEST['submit']){
echo $add.".";
?>
</body>
</html>
Experiment-17
AIM: Write a program to show data types in php.
<html>
<head>
<title>PHP data types</title> </head>
<body>
<?php
// declare a string, double and integer $testString = "3.5 seconds"; $testDouble = 79.2;
$testInteger = 12; ?>
<br />
Now, converting to other types:<br /> <?php
<?php
class Programmer {
// Class Properties
}
function get_name() { return $this->name;
function set_name($newname) {
$this->name = $newname;
}
function set_lang($newlang) { $this->lang = $newlang;
}
function get_education() { return $this->education;
}
function set_education($neweducation) {
$this->education = $neweducation;
function output() {
// Instantiating a programmer
$paul = new Programmer('Pardeep Joshi',4,'C++','MCA'); $paul->output();
$paul->set_experience(7); $paul->output();
?>
Experiment-19
AIM: What is Java Server Page.
JavaServer Pages (JSP) is a technology for developing web pages that support dynamic content which
helps developers insert java code in HTML pages by making use of special JSP tags, most of which
start with <% and end with %>.
A JavaServer Pages component is a type of Java servlet that is designed to fulfill the role of a user
interface for a Java web application. Web developers write JSPs as text files that combine HTML or
XHTML code, XML elements, and embedded JSP actions and commands.
Using JSP, you can collect input from users through web page forms, present records from a database
or another source, and create web pages dynamically.
JSP tags can be used for a variety of purposes, such as retrieving information from a database or
registering user preferences, accessing JavaBeans components, passing control between pages and
sharing information between requests, pages etc.
Why Use JSP?
JavaServer Pages often serve the same purpose as programs implemented using the Common Gateway
Interface (CGI). But JSP offer several advantages in comparison with the CGI.
• Performance is significantly better because JSP allows embedding Dynamic Elements in HTML Pages
itself instead of having a separate CGI files.
• JSP are always compiled before it's processed by the server unlike CGI/Perl which requires the server
to load an interpreter and the target script each time the page is requested.
• JavaServer Pages are built on top of the Java Servlets API, so like Servlets, JSP also has access to all
the powerful Enterprise Java APIs, including JDBC, JNDI, EJB, JAXP etc.
• JSP pages can be used in combination with servlets that handle the business logic, the model supported
by Java servlet template engines.
Finally, JSP is an integral part of Java EE, a complete platform for enterprise class applications. This
means that JSP can play a part in the simplest applications to the most complex and demanding.
Advantages of JSP:
Following is the list of other advantages of using JSP over other technologies:
• vs. Active Server Pages (ASP): The advantages of JSP are twofold. First, the dynamic part is written
in Java, not Visual Basic or other MS specific language, so it is more powerful and easier to use. Second,
it is portable to other operating systems and non-Microsoft Web servers.
• vs. Pure Servlets: It is more convenient to write (and to modify!) regular HTML than to have plenty
of println statements that generate the HTML.
• vs. Server-Side Includes (SSI): SSI is really only intended for simple inclusions, not for "real"
programs that use form data, make database connections, and the like.
• vs. JavaScript: JavaScript can generate HTML dynamically on the client but can hardly interact with
the web server to perform complex tasks like database access and image processing etc.
• vs. Static HTML: Regular HTML, of course, cannot contain dynamic information.
JSP - Architecture
The web server needs a JSP engine ie. container to process JSP pages. The JSP container is responsible
for intercepting requests for JSP pages. This tutorial makes use of Apache which has built-in JSP
container to support JSP pages development.
A JSP container works with the Web server to provide the runtime environment and other services a
JSP needs. It knows how to understand the special elements that are part of JSPs.
Following diagram shows the position of JSP container and JSP files in a Web Application.
JSP Processing:
The following steps explain how the web server creates the web page using JSP:
• As with a normal page, your browser sends an HTTP request to the web server.
• The web server recognizes that the HTTP request is for a JSP page and forwards it to a JSP engine. This
is done by using the URL or JSP page which ends with .jsp instead of .html.
• The JSP engine loads the JSP page from disk and converts it into a servlet content. This conversion is
very simple in which all template text is converted to println( ) statements and all JSP elements are
converted to Java code that implements the corresponding dynamic behavior of the page.
• The JSP engine compiles the servlet into an executable class and forwards the original request to a
servlet engine.
• A part of the web server called the servlet engine loads the Servlet class and executes it. During
execution, the servlet produces an output in HTML format, which the servlet engine passes to the web
server inside an HTTP response.
• The web server forwards the HTTP response to your browser in terms of static HTML content.
• Finally web browser handles the dynamically generated HTML page inside the HTTP response exactly
as if it were a static page.
All the above mentioned steps can be shown below in the following diagram:
Experiment-20
AIM: JSP Syntax.
JSP – Syntax
The Scriptlet:
A scriptlet can contain any number of JAVA language statements, variable or method declarations, or
expressions that are valid in the page scripting language.
Following is the syntax of Scriptlet:
<% code fragment %>
You can write XML equivalent of the above syntax as follows:
<jsp:scriptlet>
code fragment
</jsp:scriptlet>
Any text, HTML tags, or JSP elements you write must be outside the scriptlet. Following is the simple
and first example for JSP:
<html>
<head><title>Hello World</title></head>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
</body>
</html>
JSP Declarations:
A declaration declares one or more variables or methods that you can use in Java code later in the JSP
file. You must declare the variable or method before you use it in the JSP file.
Following is the syntax of JSP Declarations:
<%! declaration; [ declaration; ]+ ... %>
JSP Expression:
A JSP expression element contains a scripting language expression that is evaluated, converted to a
String, and inserted where the expression appears in the JSP file.
Because the value of an expression is converted to a String, you can use an expression within a line of
text, whether or not it is tagged with HTML, in a JSP file.
The expression element can contain any expression that is valid according to the Java Language
Specification but you cannot use a semicolon to end an expression.
Following is the syntax of JSP Expression:
<%= expression %>
You can write XML equivalent of the above syntax as follows:
<jsp:expression>
expression
</jsp:expression>
Following is the simple example for JSP Expression:
<html>
<head><title>A Comment Test</title></head>
<body>
<p>
Today's date: <%= (new java.util.Date()).toLocaleString()%>
</p>
</body>
</html>
This would generate following result:
Today's date: 11-Sep-2010 21:24:25
JSP Comments:
JSP comment marks text or statements that the JSP container should ignore. A JSP comment is useful
when you want to hide or "comment out" part of your JSP page.
Following is the syntax of JSP comments:
<%-- This is JSP comment --%>
Following is the simple example for JSP Comments:
<html>
<head><title>A Comment Test</title></head>
<body>
<h2>A Test of Comments</h2>
<%-- This comment will not be visible in the page source --%>
</body>
</html>