WT Practical

SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
PRACTICAL: 1
AIM: Introduction to HTML and XHTML.
What is HTML?
 HTML is the standard markup language for creating Web pages.
 HTML stands for Hyper Text Markup Language.
 HTML describes the structure of Web pages using markup.
 HTML elements are the building blocks of HTML pages.
 HTML elements are represented by tags.
 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on.
 Browsers do not display the HTML tags, but use them to render the content of the page.
A SIMPLE HTML DOCUMENT:

EXAMPLE:
INPUT:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
OUTPUT:
My First Heading
My first paragraph.
Web Technology (2160708) Page 1

181243107004
EXAMPLE EXPLAINED:
 The <!DOCTYPE html> declaration defines this document to be HTML5.
 The <html> element is the root element of an HTML page.
 The <head> element contains meta information about the document.
 The <title> element specifies a title for the document.
 The <body> element contains the visible page content.
 The <h1> element defines a large heading.
 The <p> element defines a paragraph.
XHTML
What is XHTML?
 XHTML stands for Extensible Hypertext Markup Language.
 XHTML is almost identical to HTML.
 XHTML is stricter than HTML.
 XHTML is HTML defined as an XML application.
 XHTML is supported by all major browsers.
Why XHTML?
 Many pages on the internet contain "bad" HTML.
 This HTML code works fine in most browsers (even if it does not follow the HTML rules)
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>
 Today's market consists of different browser technologies. Some browsers run on computers, and some
browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to
interpret "bad" markup.
 XML is a markup language where documents must be marked up correctly (be "well-formed").
 If you want to study XML, please read our XML tutorial.
181243107004
 By combining the strengths of HTML and XML, XHTML was developed.

 XHTML is HTML redesigned as XML.
THE MOST IMPORTANT DIFFERENCES FROM HTML:
Document Structure
 XHTML DOCTYPE is mandatory
 The xmlns attribute in <html> is mandatory
 <html>, <head>, <title>, and <body> are mandatory
XHTML Elements
 XHTML elements must be properly nested
 XHTML elements must always be closed
 XHTML elements must be in lowercase
 XHTML documents must have one root element
XHTML Attributes
 Attribute names must be in lower case
 Attribute values must be quoted
 Attribute minimization is forbidden

181243107004
PRACTICAL: 2
AIM: Basic Tags in HTML.
1. <html> ... </html> — The root element

All web pages start with the html element. It's also called the root elementbecause it's at the root of the tree of
elements that make up a web page.
The html element sits at the root of the tree of elements in a web page.
To create the html element, you write an opening <html> tag followed by a closing </html> tag. Everything
else in your web page then goes between these 2 tags:
<html>
(all other page elements go here)
</html>
2. <head> ... </head> — The document head
The head element contains information about the web page, as opposed to the web page content itself. There
are many elements that you can put inside the head element, such as:
o title (described below)
o link, which you can use to add style sheets and favicons to your page
o meta, for specifying things like character sets, page descriptions, and keywords for search engines
o script, for adding JavaScript code to the page
Here's a typical head element:
<head>
<title>The Adventures of My Cat Lucky</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and
movies.">
<meta name="keywords" content="cat,Lucky,pet,animal">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="shortcut icon" href="/favicon.ico">
</head>
181243107004
3. <title> ... </title> — The page title

The title element contains the title of the page. The title is displayed in the browser's title bar (the bar at the top
of the browser window), as well as in bookmarks, search engine results, and many other places.
The title should describe the page's content succinctly and accurately. Try to give each page of your site its
own unique title.
Here's an example:
<title>The Adventures of My Cat Lucky</title>
4. <body> ... </body> — The page's content
The body element appears after the head element in the page. It should contain all the content of your web
page: text, images, and so on. All web pages have 1 single body element, with the exception of frameset pages,
which contain frame elements instead.
Here's the general format of the body element:
<body> (all page content goes here) </body>
5. <h1> ... </h1> — A section heading
Headings let you break up your page content into readable chunks. They work much like headings and
subheadings in a book or a report.
HTML actually supports 6 heading elements: h1, h2, h3, h4, h5, and h6. h1 is for the most important headings,
h2 is for less important subheadings, and so on. Typically you won't need to use more than h1, h2and h3,
unless your page is very long and complex.
Here's an example of an h1 heading element:
<h1>The Adventures of My Cat Lucky</h1>
6. <p> ... </p> — A paragraph
The p element lets you create paragraphs of text. Most browsers display paragraphs with a vertical gap
between each paragraph, nicely breaking up the text.
While you can create "paragraphs" of text just by using <br> tags to insert blank lines between chunks of text,
it's better to use p elements instead. Not only is it neater, but it gives browsers, search engines and other non-
humans a better idea of how your page is structured.
Here's an example of a paragraph:
<p>My cat Lucky has a lot of adventures. Yesterday she caught a mouse, and this morning she caught two!
</p>
A good rule of thumb when writing text for the web is to make sure that each paragraph contains a single point,
topic or thought. If you want to talk about 2 different things, use 2 paragraphs.

181243107004
7. <a> ... </a> — A link

One of the most important elements in a web page, the a element lets you create links to other content. The
content can be either on your own site or on another site.
To create a link, you wrap <a> and </a> tags around the content you want to use for the link, and supply the
URL to link to in the <a> tag's reattribute.
Here's how to create some text that links to www.example.com:
<a href="http://www.example.com/">Visit this great website!</a>
8. <img> — An image
The img element lets you insert images into your web pages. To insert an image, you first upload the image to
your web server, then use an <img>tag to reference the uploaded image filename. Here's an example:
<imgsrc="myphoto.jpg" alt="My Photo">
The alt attribute is required for all img tags. It's used by browsers that don't display images to give alternative
text to the visitor. Find out more about using images in web pages.
9. <div> ... </div> — A block-level container for content
The div element is a generic container that you can use to add more structure to your page content. For
example, you might group several paragraphs or headings that serve a similar purpose together inside a
development. Typically, div elements are used for things like:
o Page headers and footers
o Columns of content and sidebars
o Highlighted boxes within the text flow
o Areas of the page with a specific purpose, such as ad spots
o Image galleries
By adding class and/or id attributes to your div elements, you can then use CSS to style and position the divs.
This is the basis for creating CSS-based page layouts.
Here's an example that uses a div to contain the content for a sidebar in the page:
<div id="sidebar">
<h1>Sidebar Heading</h1>
<p>Sidebar text</p>
<p>More sidebar text</p>

181243107004
</div>
10. <span> ... </span> — An inline container for content

The span element is similar to div in that it's used to add structure to your content. The difference is that div is
a block-level element, while span is an inline element:
Block-level elements, such as div, h1, and p, are elements that are designed to hold relatively large or stand-
alone blocks of content, such as paragraphs of text. A block-level element always starts on a new line.
Inline elements, such as span, a, and img , are designed to hold smaller pieces of content — such as a few
words or a sentence — within a larger block of content. Adding an inline element doesn't cause a new line to
be created. Block-level elements can contain inline elements, but inline elements can't contain block-level
elements. As with a div, you often add a class and/or id attribute to a span so that you can style it using CSS.
The following example uses span elements to indicate product names within a paragraph. These product names
could then be highlighted using CSS. A custom search engine could also potentially use the information
provided by the span elements to identify the products within the page.
<p>Some of our products include <span class="product">Super Widgets</span>, <span
class="product">Mega Widgets</span>,and <span class="product">Wonder Widgets</span>.</p>

181243107004
PRACTICA: 3
AIM:(A)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> Bike
<OL TYPE = I>
<LI> FZ
<LI> Honda
<LI> R15
</OL>
<LI> Cars
<OL TYPE = I>
<LI> i10
<LI> i20
<LI> swift
</OL>
</OL>
<p><b><u> Definition List </b></u></p>
<dl>
<dt> Drinks </dt>

181243107004
<dd> Black Hot Drink </dd>

<dt> Milk </dt>
<dd> White Cold Drink </dd>
</dl>
</body>
</html>
OUTPUT:

181243107004
AIM:(B)Write a program to create following table.
<html>
<head><META http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div>
<table border="5" bgcolor="gray">
<caption>A Test table with merged cells</caption>
<tr>
<td rowspan="2">
</td>
<td colspan="2"><b><center>Average</center></b></td>
<td rowspan="2"><b>Red Eyes</b></td>
</tr>
<tr>
<td><b>Height</b></td>
<td><b>Weight</b></td>
</tr>
<tr>
<td><b>Males</b></td>
<td>1.9</td>
<td>0.003</td>
<td>40%</td>
</tr>
<tr>
<td><b>Females
</b></td>
<td>1.7</td>
<td>0.002</td>
<td>43%</td>
</tr>
</table>
</div>

181243107004
</body>
</html>
OUTPUT:

181243107004
PRACTICAL: 4
AIM: Introduction to CSS.
What is CSS?
 CSS stands for Cascading Style Sheets.
 CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
 CSS saves a lot of work. It can control the layout of multiple web pages all at once.
 External stylesheets are stored in CSS files.
Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for
different devices and screen sizes.
CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare
for web developers. Development of large websites, where fonts and color information were added to every
single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

181243107004
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
In the following example all <p> elements will be center-aligned, with a red text color:
EXAMPLE:
<html>
<head>
<style>
p
{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
OUTPUT:
Hello World!
These paragraphs are styled with CSS.

181243107004
PRACTICAL: 5
AIM: Write a program to create menu using HTML and CSS.
<html>
<head>
<title>menu</title>
<link rel="stylesheet" type="text/css" href="E:\SPEC\Even term 16-17\Web Tech\Practical
solution\style.css" />
<head>
<style type="text/css">
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;

181243107004
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;
}

181243107004
ul li ulli:hover
{
background: #9966CC;
}
ulli:hoverul
{
display: block;
opacity: 1;
visibility: visible;
}
</style>-
</head>
<body>
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Designing</li>
<li>Development</li>
</ul>
</li>
<li>Blog
<ul>
<li>Development</li>
<li>Illustrations</li>
</ul></li>
<li>Contact</li>
<li>Facilities</li>

181243107004
<li>Downloads</li>
</ul>
</li>
</ul>
</body>
</html>
OUTPUT:

181243107004
PRACTICAL: 6
AIM: Design a simple form to register for new user including user_name,
password, email, mobile number, gender, hobbies and address.
<html>
<head>
<title>Form</title>
<style type="text/css">
table,td {border: 0px solid black; border-collapse: collapse;padding: 5px;}
td {padding: 5px;}
input.in,textarea,select
{
padding: 5px;
border-width: 2px;
border-color: #00ccff;
border-radius: 2px;
border-style: solid;
}
</style>
</head>
<body>
<h1 align="center">register form</h1>
<form>
<table align="center">
<tr>
<td>User_name</td>

181243107004
<td><input name="name" class="in" type="text" size="10" placeholder="First Name"

pattern="[a-zA-Z]+" required></input class="in">
</td>
</tr>
<tr>
<td>Password:</td>
<td><input class="in" name="pwd" type="password" placeholder="password"size="43"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required></input class="in"><br><font
color="red">(length:8-20 | must contain a upper case,lower case,<br>number,special
symbol,number)</font></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input name="cpwd" class="in" type="password" placeholder="password"size="43"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required></input class="in"></td>
</tr>
<tr>
<td>Email:</td>
<td><input name="email" class="in" type="text"
placeholder="abc@example.com"size="43" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]
{2,3}$" required></input class="in"></td>
</tr>
<tr>
<td>Mobile No.:</td>
<td>+<input class="in" name="ccode" type="text" size="1" minlength="2" maxlength="3"
value="91" pattern="[0-9]+" required></input class="in">
<input name="Mob" class="in" type="text" size="34 " maxlength="10" placeholder="10
digit Number" pattern="[0|1|2|3|4|5|6|7|8|9]{10}"></input class="in">

181243107004
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select name="dropdown" >
<option value="Male" selected>Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Hobbies:</td>
<td>
<input name="music" class="in" type="checkbox" name="music" checked>Music</input
class="in">
<input name="sports" class="in" type="checkbox" name="Sports">Sports</input
class="in">
<input name="games" class="in" type="checkbox" name="Games">Games</input
class="in">
<input name="others" class="in" type="checkbox" name="other">other</input class="in">
</td>
</tr>
<tr>
<td>Address:</td>
<td><textarea name="addr" rows="5" cols="45" required></textarea></td>

181243107004
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"></button></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT:
PRACTICAL: 7
181243107004
AIM: Introduction to JavaScript.
An Introduction to JavaScript
Let’s see what’s so special about JavaScript, what we can achieve with it and which other technologies play
well with it.
What is JavaScript?
Java Script was initially created to “make Webpages alive”.
The programs in this language are called scripts. They can be written right in the HTML and execute
automatically as the page loads.
Scripts are provided and executed as a plain text. They don’t need a special preparation or a compilation to run.
In this aspect, JavaScript is very different from another language called Java.
Why JavaScript?
When JavaScript was created, it initially had another name: “Live Script”. But Java language was very popular
at that time, so it was decided that positioning a new language as a “younger brother” of Java would help.
But as it evolved, JavaScript became a fully independent language, with its own specification called ECMA
Script, and now it has no relation to Java at all.
At present, JavaScript can execute not only in the browser, but also on the server, or actually on any device
where there exists a special program called the JavaScript engine.
The browser has an embedded engine, sometimes it’s also called a “JavaScript virtual machine”.
Different engines have different “codenames”, for example:
 V8 – in Chrome and Opera.
 Spider Monkey – in Firefox.
 There are other codenames like “Trident”, “Chakra” for different versions of IE, “Chakra Core” for
Microsoft Edge, “Nitro” and “Squirrelfish” for Safari etc.
The terms above are good to remember, because they are used in developer articles on the internet. We’ll use
them too. For instance, if “a feature X is supported by V8”, then it probably works in Chrome and Opera.
How engines work?
Engines are complicated. But the basics are easy.
 The engine (embedded if it’s a browser) reads (“parses”) the script.
 Then it converts (“compiles”) the script to the machine language.
 And then the machine code runs, pretty fast.
The engine applies optimizations on every stage of the process. It even watches the compiled script as it
runs, analyzes the data that flows through it and applies optimizations to the machine code based on that
knowledge. At the end, scripts are quite fast.

181243107004
What can in-browser JavaScript do?

The modern JavaScript is a “safe” programming language. It does not provide low-level access to memory or
CPU, because it was initially created for browsers which do not require it.
The capabilities greatly depend on the environment that runs JavaScript. For instance, Node.JS supports
functions that allow JavaScript to read/write arbitrary files, perform network requests etc.
In-browser JavaScript can do everything related to webpage manipulation, interaction with the user and the
web server.
For instance, in-browser JavaScript is able to:
 Add new HTML to the page, change the existing content, and modify styles.
 React to user actions, run on mouse clicks, pointer movements, key presses.
 Send requests over the network to remote servers, download and upload files (so-
called AJAX and COMET technologies).
 Get and set cookies, ask questions to the visitor, show messages.
 Remember the data on the client-side (“local storage”).
What CAN’T in-browser JavaScript do?

JavaScript’s abilities in the browser are limited for the sake of the user’s safety. The aim is to prevent an evil
webpage from accessing private information or harming the user’s data.
The examples of such restrictions are:
JavaScript on a webpage may not read/write arbitrary files on the hard disk, copy them or execute programs. It
has no direct access to OS system functions.
Modern browsers allow it to work with files, but the access is limited and only provided if the user does certain
actions, like “dropping” a file into a browser window or selecting it via an <input> tag.
There are ways to interact with camera/microphone and other devices, but they require a user’s explicit
permission. So a JavaScript-enabled page may not sneakily enable a web-camera, observe the surroundings
and send the information to the NSA.
Different tabs/windows generally do not know about each other. Sometimes they do, for example when one
window uses JavaScript to open the other one. But even in this case, JavaScript from one page may not access
the other if they come from different sites (from a different domain, protocol or port).
This is called the “Same Origin Policy”. To work around that, both pages must contain a special JavaScript
code that handles data exchange.
The limitation is again for user’s safety. A page from http://anysite.com which a user has opened must not be
able to access another browser tab with the URL http://gmail.com and steal information from there.

181243107004
JavaScript can easily communicate over the net to the server where the current page came from. But its ability
to receive data from other sites/domains is crippled. Though possible, it requires explicit agreement (expressed
in HTTP headers) from the remote side. Once again, that’s safety limitations.
Such limits do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers
also allow installing plug-in/extensions which may get extended permissions.
What makes JavaScript unique?

There are at least three great things about JavaScript:
 Full integration with HTML/CSS.
 Simple things done simply.
 Supported by all major browsers and enabled by default.
Combined, these three things exist only in JavaScript and no other browser technology.
That’s what makes JavaScript unique. That’s why it’s the most widespread tool to create browser interfaces.
While planning to learn a new technology, it’s beneficial to check its perspectives. So let’s move on to the
modern trends that include new languages and browser abilities.

181243107004
PRACTICAL: 8
AIM: Write a program to print date using JavaScript.
<html>
<body>
<h1>My First JavaScript</h1>
<p>Click the button to display the date.</p>
<p id="demo"></p>
<button type="button" onclick="myFunction()">print date</button>
<script>
functionmyFunction()
{
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
OUTPUT:

181243107004
PRACTICAL: 9
AIM: Write a program to Sum
and Multiply two numbers using
JavaScript.
<html>
<head>
<title>Practical 13</title>
</head>
<body>
<script type="text/javascript">
document.write("The Addition of 5 and 7 is "+(5+7));
document.write("<br>The multiplication of 5 and 7 is "+(5*7));
</script>
</body>
</html>
OUTPUT:

181243107004
PRACTICAL: 10
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 spectera 7E2")
if (answer)
{
alert("Welcome!")
window.location = "http://spectera.accit.in";
}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;">
181243107004
<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>
OUTPUT:

181243107004
PRACTICAL: 11
181243107004
AIM: Write a program to use various string methods length, indexOf(),

lastIndexOf(), toUpperCase, toLowerCase(), substring().
<html>
<body>
<h2>JavaScript String Properties</h2>
<br>
<p> 1: The length:</p>
<p id="demo1"></p>
<script>
var txt1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo1").innerHTML = txt1.length;
</script>
<br>
<p> 2. The indexOf() method:</p>
<p id="demo2"></p>
<script>
var str1 = "Please locate where 'locate' occurs!";
var pos = str1.indexOf("locate");
document.getElementById("demo2").innerHTML = pos;
</script>
<br>
<p> 3. The lastIndexOf() method :</p>
<p id="demo3"></p>
<script>
var str2 = "Please locate where 'locate' occurs!";
var pos = str2.lastIndexOf("locate");
document.getElementById("demo3").innerHTML = pos;
</script>
<br>

181243107004
<p>4. upper case</p>

<script>
function func()
{
var str = 'It iS a Great Day.';
var string = str.toUpperCase();
document.write(string);
}
func();
</script>
<br>
<p> 5. lower case </p>
<script>
function func()
{
var s1 = 'It iS a Great Day.';
var string = s1.toLowerCase();
document.write(string);
}
func();
</script>
<br>
<p> 5. substring </p>
<script>
var string = "tirucirapallis";
a = string.substring(0, 4)
b = string.substring(1, 6)
c = string.substring(5)
d = string.substring(0)
document.write(a + "<br>");
181243107004
document.write(b + "<br>");
document.write(c + "<br>");
document.write(d + "<br>");
</script>
</br>
</body>
</html>
OUTPUT:
PRACTICAL: 12

181243107004
AIM: Write a program that performs various arithmetic operation using

switch and function.
<html>
<head>
<title> JavaScript Switch Case </title>
</head>
<h1> JavaScript Switch Case </h1>
<body>
<script>
var opertor = '*';
var number1 = 10, number2 = 2;
switch (opertor)
{
case '+':
document.write("Addition of two numbers is: " + (number1 + number2));
break;
case '-':
document.write("Subtraction of two numbers is: " + (number1 - number2));
break;
case '*':
document.write("Multiplication of two numbers is: " + (number1 * number2));
break;
case '/':
document.write("Division of two numbers is: " + (number1 / number2));
break;
case '%':
document.write("Module of two numbers is: " + (number1 % number2));

181243107004
break;
default:
document.write("<b> You have entered Wrong operator </b>");
document.write("<br \> Please enter Correct operator such as +, -, *, /, %");
}
</script>
</body>
</html>
OUTPUT:

181243107004
PRACTICAL: 13
AIM: Create validation Form in JavaScript.
<html>
<head>
<script type='text/javascript'>
function formValidator()
{
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');
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;

181243107004
}
}
}
}
}
}
return false;
}
function notEmpty(bhatt, helperMsg)
{
if(bhatt.value.length == 0)
{
alert(helperMsg);
bhatt.focus();
return false;
}
return true;
}
function isNumeric(bhatt, helperMsg)
{
var numericExpression = /^[0-9]+$/;
if(bhatt.value.match(numericExpression))
{
return true;
}
else
{

181243107004
alert(helperMsg);
bhatt.focus();
return false;
}
}
function isAlphabet(bhatt, helperMsg)
{
var alphaExp = /^[a-zA-Z]+$/;
if(bhatt.value.match(alphaExp)){
return true;
}
Else
{
alert(helperMsg);
hatt.focus();
return false; }
}
function isAlphanumeric(bhatt, helperMsg)
{
var alphaExp = /^[0-9a-zA-Z]+$/;
if(bhatt.value.match(alphaExp))
{
return true;
}
else
{
alert(helperMsg);

181243107004
bhatt.focus();
return false;
}
}
function lengthRestriction(bhatt, min, max)
{
var uInput = bhatt.value;
if(uInput.length >= min && uInput.length <= max)
{
return true;
}else{
alert("Please enter between " +min+ " and " +max+ " characters");
bhatt.focus();
return false;
} \
}
function madeSelection(bhatt, helperMsg)
{
if(bhatt.value == "Please Choose"){
alert(helperMsg);
bhatt.focus();
return false;
}else{
return true;
}
}

181243107004
function emailValidator(bhatt, helperMsg)

{
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(bhatt.value.match(emailExp))
{
return true;
}
else
{
alert(helperMsg);
bhatt.focus();
return false;
}
}
</script>
</head>
<body>
<form onsubmit='return formValidator()' >
First Name: <input type='text' id='firstname' /><br />
Address: <input type='text' id='addr' /><br />
Zip Code: <input type='text' id='zip' /><br />
State: <select id='state'>
<option>Please Choose</option>
<option>Delhi</option>
<option>Gujarat</option>
<option>Kerala</option>
</select><br />
181243107004
Username(6-8 characters): <input type='text' id='username' /><br />

Email: <input type='text' id='email' /><br />
<input type='submit' value='Check Form' />
</form>
</body>
</html>
OUTPUT:
PRACTICAL: 14
AIM: Introduction to php.

181243107004
PHP – INTRODUCTION
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 is a recursive acronym for "PHP: Hypertext Preprocessor".

 PHP is a server side scripting language that is embedded in HTML. It is used to manage dynamic content,
databases, session tracking, even build entire e-commerce sites.
 It is integrated with a number of popular databases, including MySQL, PostgreSQL, Oracle, Sybase,
Informix, and Microsoft SQL Server.
 PHP is pleasingly zippy in its execution, especially when compiled as an Apache module on the Unix side.
The MySQL server, once started, executes even very complex queries with huge result sets in record-setting
time.
 PHP supports a large number of major protocols such as POP3, IMAP, and LDAP. PHP4 added support for
Java and distributed object architectures (COM and CORBA), making n-tier development a possibility for the
first time.
 PHP is forgiving: PHP language tries to be as forgiving as possible.
 PHP Syntax is C-Like.
Common uses of PHP:
 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, through email you can send data,
return data to the user.
 You add, delete, modify elements within your database through PHP.
 Access cookies variables and set cookies.
 Using PHP, you can restrict users to access some pages of your website.
 It can encrypt data.
Characteristics of PHP:
Five important characteristics make PHP's practical nature possible −
 Simplicity
 Efficiency
 Security
 Flexibility
 Familiarity
"Hello World" Script in PHP:

181243107004
To get a feel for PHP, first start with simple PHP scripts. Since "Hello, World!" is an essential example, first
we will create a friendly little "Hello, World!" script.
As mentioned earlier, PHP is embedded in HTML. That means that in amongst your normal HTML (or
XHTML if you're cutting-edge) you'll have PHP statements like this −
<html>
<head>
<title>Hello World</title>
</head>
<body>
<?php echo "Hello, World!";?>
</body>
</html>
It will produce following result –
Hello, World!
If you examine the HTML output of the above example, you'll notice that the PHP code is not present in the
file sent from the server to your Web browser. All of the PHP present in the Web page is processed and
stripped from the page; the only thing returned to the client from the Web server is pure HTML output.
All PHP code must be included inside one of the three special markup tags ATE are recognized by the PHP
Parser.
<?php PHP code goes here ?>
<? PHP code goes here ?>
<scriptlanguage="php"> PHP code goes here </script>
A most common tag is the <?php...?> and we will also use the same tag in our tutorial.
From the next chapter we will start with PHP Environment Setup on your machine and then we will dig out
almost all concepts related to PHP to make you comfortable with the PHP language.
PRACTICAL: 15

181243107004
AIM: Write a program to Addition, Subtraction, Multiplication, Division of

two numbers using php.
<html>
<head>
<title>Arithmetical Operators</title>
</head>
<body>
<?php
$a = 40;
$b = 20;
$c = $a + $b;
echo "Addtion Operation Result: $c <br/>";
$c = $a - $b;
echo "Substraction Operation Result: $c <br/>";
$c = $a * $b;
echo "Multiplication Operation Result: $c <br/>";
$c = $a / $b;
echo "Division Operation Result: $c <br/>";
$c = $a % $b;
echo "Modulus Operation Result: $c <br/>";
$c = $a++;
echo "Increment Operation Result: $c <br/>";
$c = $a--;
echo "Decrement Operation Result: $c <br/>";
?>
</body>
</html>
OUTPUT:

181243107004

181243107004
PRACTICAL: 16
AIM: Write a program to show data types in php.

<?php
echo gettype(102).'<br>';
echo gettype(true).'<br>';
echo gettype(' ').'<br>';
echo gettype(null).'<br>';
echo gettype(array()).'<br>';
echo gettype(new stdclass());
?>
OUTPUT:

181243107004
PRACTICAL: 17
AIM: Write a program to find out factorial using function in php.

<html>
<body>
<?php
$num = 4;
$factorial = 1;
for ($x=$num; $x>=1; $x--)
{
$factorial = $factorial * $x;
}
echo "Factorial of $num is $factorial";
?>
</body>
</html>
OUTPUT:

181243107004
PRACTICAL: 18
AIM: Write a program to connect to database.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$conn = new mysqli($servername, $username, $password);
if ($conn->connect_error)
{
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
?>
OUTPUT:

181243107004
PRACTICAL: 19
AIM: Write a program to insert, update, delete data in database.

INSERT DATA:
<?php
$server = "localhost";
$userid = "root";
$password = "";
$db = "school";
$conn = mysqli_connect($server, $userid, $password, $db);
if ($conn)
{
echo "You connect with ".$db." database.";
}
else
{
echo mysqli_connect_error($conn);
}
if (isset($_POST['insert']))
{
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$gender = $_POST['gender'];
$class = $_POST['class'];
$query = "INSERT INTO student VALUES ('$fname', '$lname', '$gender', '$class')";
$result = mysqli_query($conn, $query);

181243107004
if ($result) {
echo "<br> Your Data Inserted.";
}else{
echo mysqli_error($conn);
}
}
?>
<html>
<head>
<title>Insert Data</title>
</head>
<body>
<h1>Students Data</h1>
<form action="pre23.php" method="post">
Firstname:<br><br><input type="text" name="fname"><br><br>
Lastname:<br><br><input type="text" name="lname"><br><br>
Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="other">Other
<br><br>
Class:<input type="number" name="class"><br><br>
<input type="submit" name="insert" value="Insert">
</form>
</body>
</html>

181243107004
OUTPUT:
DELETE DATA:
<?php
$userid = "root";
$password = "";
$db = "school";
if ($conn) {
}else{
}
181243107004
if (isset($_POST['delete']))
{
$name = $_POST['name'];
$query = "DELETE FROM student WHERE firstname='$name'";
if ($result)
{
echo "<br> Your Data Deleted.";
}else{
}
}
?>
<html>
<head>
<title>Insert Data</title>
</head>
<body>
Name:<br><br><input type="text" name="name"><br><br>
<input type="submit" name="delete" value="Delete">
</form>
</body>
</html>

181243107004
OUTPUT:
UPDATE DATA:
<?php
$userid = "root";
$password = "";
$db = "school";
if ($conn)
{
}
else

181243107004
{
}
if (isset($_POST['update']))
{
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$gender = $_POST['gender'];
$class = $_POST['class'];
$query = "UPDATE student SET firstname='$fname', lastname='$lname', gender='$gender', class='$class'
WHERE firstname='$fname'";
if ($result)
{
echo "<br> Your Data Updated.";
}
else
{
}
}
?>
<html>
<head>
<title>Update Data</title>
</head>
<body>

181243107004
<?php
$query = "SELECT * FROM student WHERE firstname='Jai'";
$res = mysqli_query($conn,$query);
while ($row = mysqli_fetch_array($res,MYSQLI_BOTH)) {
$firstname = $row['firstname'];
$lastname = $row['lastname'];
$gender = $row['gender'];
$class = $row['class'];
?>
Firstname:<br><br><input type="text" name="fname" value="<?php echo $firstname; ?
>"><br><br>
Lastname:<br><br><input type="text" name="lname" value="<?php echo $lastname; ?
>"><br><br>
Gender:<br><br><input type="text" name="gender" value="<?php echo $gender; ?>"><br><br>
Class:<br><br><input type="number" name="class" value="<?php echo $class; ?>"><br><br>
<input type="submit" name="update" value="Update">
</form>
<?php
}
?>
</body>
</html>

181243107004
OUTPUT:

WT Practical

Uploaded by

Copyright:

Available Formats

WT Practical

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WT Practical

Uploaded by

Copyright:

Available Formats

SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.

AIM: Introduction to HTML and XHTML.

A SIMPLE HTML DOCUMENT:

Web Technology (2160708) Page 1

 By combining the strengths of HTML and XML, XHTML was developed.

Web Technology (2160708) Page 3

1. <html> ... </html> — The root element

<title>The Adventures of My Cat Lucky</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="keywords" content="cat,Lucky,pet,animal">

<link rel="stylesheet" type="text/css" href="/style.css">

<link rel="shortcut icon" href="/favicon.ico">

3. <title> ... </title> — The page title

Web Technology (2160708) Page 5

7. <a> ... </a> — A link

<p>More sidebar text</p>

Web Technology (2160708) Page 6

10. <span> ... </span> — An inline container for content

Web Technology (2160708) Page 7

Web Technology (2160708) Page 8

<dd> Black Hot Drink </dd>

Web Technology (2160708) Page 9

AIM:(B)Write a program to create following table.

Web Technology (2160708) Page 10

Web Technology (2160708) Page 11

Why Use CSS?

The selector points to the HTML element you want to style.

Web Technology (2160708) Page 12

Web Technology (2160708) Page 13

Web Technology (2160708) Page 14

Web Technology (2160708) Page 15

Web Technology (2160708) Page 16

Web Technology (2160708) Page 17

Web Technology (2160708) Page 18

<td><input name="name" class="in" type="text" size="10" placeholder="First Name"

Web Technology (2160708) Page 19

Web Technology (2160708) Page 20

AIM: Introduction to JavaScript.

Web Technology (2160708) Page 22

What can in-browser JavaScript do?

What CAN’T in-browser JavaScript do?

Web Technology (2160708) Page 23

What makes JavaScript unique?

Web Technology (2160708) Page 24

Web Technology (2160708) Page 25

Web Technology (2160708) Page 26

<h3> Java Script Alert Box.</h3>

Web Technology (2160708) Page 28

AIM: Write a program to use various string methods length, indexOf(),

Web Technology (2160708) Page 30

<p>4. upper case</p>

Web Technology (2160708) Page 32

AIM: Write a program that performs various arithmetic operation using

Web Technology (2160708) Page 33

Web Technology (2160708) Page 34

Web Technology (2160708) Page 35

Web Technology (2160708) Page 36

Web Technology (2160708) Page 37