html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }
to structure content. It explains that XHTML is a stricter version of HTML that is defined as an XML application. Some key differences between HTML and XHTML are that XHTML requires elements to be properly nested, closed, and in lowercase with attribute values in quotes. The document then provides examples of basic HTML tags like ,
,, , WT Practical WT Practical 181243107004 PRACTICAL: 1 What is HTML? INPUT: <!DOCTYPE html> OUTPUT: My First Heading EXAMPLE EXPLAINED: XHTML Why XHTML? <html> XHTML Elements XHTML Attributes PRACTICAL: 2 <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and </head> <h1>Sidebar Heading</h1> <p>Sidebar text</p> </div> PRACTICA: 3 OUTPUT: <html> </body> OUTPUT: PRACTICAL: 4 Each declaration includes a CSS property name and a value, separated by a colon. EXAMPLE: OUTPUT: Hello World! PRACTICAL: 5 margin-right: -4px; ul li ulli:hover <li>Downloads</li> OUTPUT: PRACTICAL: 6 </td> </tr> OUTPUT: PRACTICAL: 7 An Introduction to JavaScript Why JavaScript? JavaScript can easily communicate over the net to the server where the current page came from. But its ability Such limits do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers PRACTICAL: 8 OUTPUT: PRACTICAL: 9 PRACTICAL: 10 PRACTICAL: 11 document.write(b + "<br>"); OUTPUT: PRACTICAL: 12 break; OUTPUT: PRACTICAL: 13 } alert(helperMsg); bhatt.focus(); OUTPUT: PRACTICAL: 14 PHP – INTRODUCTION PHP started out as a small open source project that evolved as more and more people found out how useful it PHP performs system functions, i.e. from files on a system it can create, open, read, write, and close them. Characteristics of PHP: Simplicity To get a feel for PHP, first start with simple PHP scripts. Since "Hello, World!" is an essential example, first As mentioned earlier, PHP is embedded in HTML. That means that in amongst your normal HTML (or <html> <head> <body> </html> Hello, World! If you examine the HTML output of the above example, you'll notice that the PHP code is not present in the All PHP code must be included inside one of the three special markup tags ATE are recognized by the PHP 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 PRACTICAL: 15 OUTPUT: PRACTICAL: 16 OUTPUT: PRACTICAL: 17 </body> OUTPUT: PRACTICAL: 18 OUTPUT: PRACTICAL: 19 <?php if ($result) { OUTPUT: DELETE DATA: if (isset($_POST['delete'])) OUTPUT: UPDATE DATA: { <?php OUTPUT: Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages. Alternative Proxies:, and
Uploaded by
NirmalUploaded by
NirmalSARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
AIM: Introduction to HTML and XHTML.
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:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
My first paragraph.Web Technology (2160708) Page 1
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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.
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.
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)
<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.
Web Technology (2160708) Page 2
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
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 must be properly nested
XHTML elements must always be closed
XHTML elements must be in lowercase
XHTML documents must have one root element
Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbiddenWeb Technology (2160708) Page 3
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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">
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">
Web Technology (2160708) Page 4
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
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.Web Technology (2160708) Page 5
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
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"> <p>More sidebar text</p>
Web Technology (2160708) Page 6
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004 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>Web Technology (2160708) Page 7
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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>Web Technology (2160708) Page 8
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004 <dd> Black Hot Drink </dd>
<dt> Milk </dt>
<dd> White Cold Drink </dd>
</dl>
</body>
</html>Web Technology (2160708) Page 9
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004 AIM:(B)Write a program to create following table.
<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>Web Technology (2160708) Page 10
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
</html>Web Technology (2160708) Page 11
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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.Web Technology (2160708) Page 12
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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:
<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>
These paragraphs are styled with CSS.Web Technology (2160708) Page 13
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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;Web Technology (2160708) Page 14
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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;
}Web Technology (2160708) Page 15
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
{
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>Web Technology (2160708) Page 16
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
</ul>
</li>
</ul>
</body>
</html>Web Technology (2160708) Page 17
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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>Web Technology (2160708) Page 18
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
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">Web Technology (2160708) Page 19
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
</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>Web Technology (2160708) Page 20
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
<tr>
<td colspan="2" align="center"><input type="submit"></button></td>
</tr>
</table>
</form>
</body>
</html>
Web Technology (2160708) Page 21
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004 AIM: 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.
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.Web Technology (2160708) Page 22
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
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.Web Technology (2160708) Page 23
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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.
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.Web Technology (2160708) Page 24
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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>Web Technology (2160708) Page 25
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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:Web Technology (2160708) Page 26
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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;">
Web Technology (2160708) Page 27
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
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:Web Technology (2160708) Page 28
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
Web Technology (2160708) Page 29
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
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>Web Technology (2160708) Page 30
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
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>");
Web Technology (2160708) Page 31
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
document.write(c + "<br>");
document.write(d + "<br>");
</script>
</br>
</body>
</html>Web Technology (2160708) Page 32
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
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));Web Technology (2160708) Page 33
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
default:
document.write("<b> You have entered Wrong operator </b>");
document.write("<br \> Please enter Correct operator such as +, -, *, /, %");
}
</script>
</body>
</html>Web Technology (2160708) Page 34
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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;Web Technology (2160708) Page 35
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
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
{Web Technology (2160708) Page 36
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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);Web Technology (2160708) Page 37
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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;
}
}Web Technology (2160708) Page 38
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
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 />
Web Technology (2160708) Page 39
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
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> AIM: Introduction to php.
Web Technology (2160708) Page 40
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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 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. Five important characteristics make PHP's practical nature possible −
Efficiency
Security
Flexibility
Familiarity "Hello World" Script in PHP:
Web Technology (2160708) Page 41
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
we will create a friendly little "Hello, World!" script.
XHTML if you're cutting-edge) you'll have PHP statements like this −
<title>Hello World</title>
</head>
<?php echo "Hello, World!";?>
</body> It will produce following result –
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.
Parser. <?php PHP code goes here ?>
<? PHP code goes here ?>
<scriptlanguage="php"> PHP code goes here </script>
almost all concepts related to PHP to make you comfortable with the PHP language.Web Technology (2160708) Page 42
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
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>Web Technology (2160708) Page 43
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004Web Technology (2160708) Page 44
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004 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());
?>Web Technology (2160708) Page 45
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004 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";
?>
</html>Web Technology (2160708) Page 46
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004 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";
?>Web Technology (2160708) Page 47
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004AIM: Write a program to insert, update, delete data in database.
INSERT DATA:
$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);Web Technology (2160708) Page 48
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
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>Web Technology (2160708) Page 49
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
<?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);
}
Web Technology (2160708) Page 50
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
{
$name = $_POST['name'];
$query = "DELETE FROM student WHERE firstname='$name'";
$result = mysqli_query($conn, $query);
if ($result)
{
echo "<br> Your Data Deleted.";
}else{
echo mysqli_error($conn);
}
}
?>
<html>
<head>
<title>Insert Data</title>
</head>
<body>
<h1>Students Data</h1>
<form action="pre24.php" method="post">
Name:<br><br><input type="text" name="name"><br><br>
<input type="submit" name="delete" value="Delete">
</form>
</body>
</html>Web Technology (2160708) Page 51
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
<?php
$server = "localhost";
$userid = "root";
$password = "";
$db = "school";
$conn = mysqli_connect($server, $userid, $password, $db);
if ($conn)
{
echo "You connect with ".$db." database.";
}
elseWeb Technology (2160708) Page 52
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
echo mysqli_connect_error($conn);
}
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'";
$result = mysqli_query($conn, $query);
if ($result)
{
echo "<br> Your Data Updated.";
}
else
{
echo mysqli_error($conn);
}
}
?>
<html>
<head>
<title>Update Data</title>
</head>
<body>
<h1>Students Data</h1>Web Technology (2160708) Page 53
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004
$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'];
?>
<form action="pre25.php" method="post">
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>Web Technology (2160708) Page 54
SARDAR PATEL COLLEGE OF ENGINEERING, BAKROL.
181243107004Web Technology (2160708) Page 55
You might also like
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.