LAB MANUAL

WEB TECHNOLOGY

SEMESTER 5: COMPUTER ENGINEERING

EXPERIMENT:1
AIM: To familiarize with the common web terminologies.
DESCRIPTION:

WEB BROWSER:A web browser (commonly referred to as a browser) is a software

application for retrieving, presenting and traversing information resources on the World Wide
Web. An information resource is identified by a Uniform Resource Identifier (URI/URL) and may be
a web page, image, video or other piece of content. Hyperlinks present in resources enable users
easily to navigate their browsers to related resources. Although browsers are primarily intended to
use the World Wide Web, they can also be used to access information provided by web
servers in private networks or files in systems. The major web browsers are Google
Chrome, Mozilla Firefox, Internet Explorer, Opera, and Safari.

SEARCH ENGINE:A web search engine is a software system that is designed to search for
information on the World Wide Web. The search results are generally presented in a line of
results often referred to as search engine results pages (SERPs). The information may be a
specialist in web pages, images, information and other types of files. Some search engines
also mine data available in databases or open directories. Unlike web directories, which are
maintained only by human editors, search engines also maintain real-time information by
running an algorithm on a web crawler.
A search engine operates in the following order:

1. Web crawling
2. Indexing
3. Searching
Web search engines work by storing information about many web pages, which they
retrieve from the HTML markup of the pages. These pages are retrieved by a Web
crawler (sometimes also known as a spider) — an automated Web crawler which follows
every link on the site. The site owner can exclude specific pages by using robots.txt.
The search engine then analyzes the contents of each page to determine how it should
be indexed (for example, words can be extracted from the titles, page content, headings, or
special fields called meta tags). Data about web pages are stored in an index database for
use in later queries. A query from a user can be a single word. The index helps find
information relating to the query as quickly as possible. Some search engines, such
as Google, store all or part of the source page (referred to as a cache) as well as information
about the web pages, whereas others, such as AltaVista, store every word of every page
they find. This cached page always holds the actual search text since it is the one that was
actually indexed, so it can be very useful when the content of the current page has been
updated and the search terms are no longer in it. This problem might be considered a mild
form of linkrot, and Google's handling of it increasesusability by satisfying user
expectations that the search terms will be on the returned webpage. This satisfies
the principle of least astonishment, since the user normally expects that the search terms
will be on the returned pages. Increased search relevance makes these cached pages very
useful as they may contain data that may no longer be available elsewhere.

High-level architecture of a standard Web crawler

When a user enters a query into a search engine (typically by using keywords), the engine
examines its index and provides a listing of best-matching web pages according to its
criteria, usually with a short summary containing the document's title and sometimes parts
of the text. The index is built from the information stored with the data and the method by
which the information is indexed. From 2007 the Google.com search engine has allowed
one to search by date by clicking 'Show search tools' in the leftmost column of the initial
search results page, and then selecting the desired date range. Most search engines support
the use of the boolean operators AND, OR and NOT to further specify the search query.
Boolean operators are for literal searches that allow the user to refine and extend the terms
of the search. The engine looks for the words or phrases exactly as entered. Some search
engines provide an advanced feature called proximity search, which allows users to define
the distance between keywords.[12] There is also concept-based searching where the
research involves using statistical analysis on pages containing the words or phrases you
search for. As well, natural language queries allow the user to type a question in the same
form one would ask it to a human. A site like this would be ask.com.
The usefulness of a search engine depends on the relevance of the result set it gives back.
While there may be millions of web pages that include a particular word or phrase, some
pages may be more relevant, popular, or authoritative than others. Most search engines
employ methods to rank the results to provide the "best" results first. How a search engine
decides which pages are the best matches, and what order the results should be shown in,
varies widely from one engine to another.[12] The methods also change over time as
Internet usage changes and new techniques evolve. There are two main types of search
engine that have evolved: one is a system of predefined and hierarchically ordered
keywords that humans have programmed extensively. The other is a system that generates
an "inverted index" by analyzing texts it locates. This first form relies much more heavily
on the computer itself to do the bulk of the work.
Most Web search engines are commercial ventures supported by advertising revenue and
thus some of them allow advertisers to have their listings ranked higher in search results
for a fee. Search engines that do not accept money for their search results make money by
running search related ads alongside the regular search engine results. The search engines
make money every time someone clicks on one of these ads.[

WEB PORTAL:A web portal is most often one specially-designed Web page at
a website which brings information together from diverse sources in a uniform way.
Usually, each information source gets its dedicated area on the page for displaying
information (a portlet); often, the user can configure which ones to display. Variants of
portals include Mashup (web application hybrid) and intranet"dashboards" for executives
and managers. The extent to which content is displayed in a "uniform way" may depend on
the intended user and the intended purpose, as well as the diversity of the content. Very
often design emphasis is on a certain "metaphor" for configuring and customizing the
presentation of the content and the chosen implementation framework and/or code
libraries. In addition, the role of the user in an organization may determine which content
can be added to the portal or deleted from the portal configuration.
A portal may use a search engine API to permit users to search intranet content as opposed
to extranet content by restricting which domains may be searched. Apart from this
common search engines feature, web portals may offer other services such as e-mail, news,
stock quotes, information from databases and even entertainment content. Portals provide
a way for enterprises and organizations to provide a consistent look and feel with access
control and procedures for multiple applications and databases, which otherwise would
have been different web entities at various URLs. The features available may be restricted
by whether access is by an authorized and authenticated user (employee,member) or an
anonymous site visitor.Examples of early public web portals
Are AOL, Excite, Netvibes, iGoogle, MSN, Naver, Indiatimes, Rediff, Sify and Yahoo!. See for
example, the "My Yahoo!" feature of Yahoo! which may have inspired such features as the
later Google "iGoogle" (soon to be discontinued.) The configurable side-panels of, for
example, the modern Opera browser and the option of "Speed Dial" pages by most
browsers continue to reflect the earlier "portal" metaphor. Web portals are sometimes
classified as horizontal or vertical. A horizontal portal is used as a platform to several
companies in the same economic sector or to the same type of manufacturers or
distributors.[1] A vertical portal (also known as a "vortal") is a specialized entry point to a
specific market or industry niche, subject area, or interest. Some vertical portals are known
as "vertical information portals" (VIPs). VIPs provide news, editorial content, digital
publications, and e-commerce capabilities. In contrast to traditional vertical portals, VIPs
also provide dynamic multimedia applications including social networking, video posting,
and blogging.
E-COMMERCE:Electronic commerce, commonly known as e-commerce or eCommerce,
is a type of industry where the buying and selling of products or services is conducted over
electronic systems such as the Internet and other computer networks. Electronic
commerce draws on technologies such as mobile commerce, electronic funds
transfer, supply chain management, Internet marketing, online transaction
processing, electronic data interchange (EDI), inventory management systems, and
automated data collection systems. Modern electronic commerce typically uses the World
Wide Web at least at one point in the transaction's life-cycle, although it may encompass a
wider range of technologies such as e-mail, mobile devices, social media, and telephones as
well.
Electronic commerce is generally considered to be the sales aspect of e-business. It also
consists of the exchange of data to facilitate the financing and payment aspects of business
transactions. This is an effective and efficient way of communicating within an organization
and one of the most effective and useful ways of conducting business.
E-commerce can be divided into:

 E-tailing or "virtual storefronts" on websites with online catalogs, sometimes gathered

into a "virtual mall"
 Buying or Selling on various websites and/or online marketplaces
 The gathering and use of demographic data through Web contacts and social media
 Electronic Data Interchange (EDI), the business-to-business exchange of data
 E-mail and fax and their use as media for reaching prospective and established
customers (for example, with newsletters)
 Business-to-business buying and selling
 The security of business transactions

RESULT: Studied about common web terminologies

EXPERIMENT : 2

AIM: To study about HTML

DESCRIPTION:

HTML is a language for describing web pages.

 HTML stands for Hyper Text Markup Language

 HTML is a markup language
 A markup language is a set of markup tags
 The tags describe document content
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages

HTML markup tags are usually called HTML tags

 HTML tags are keywords (tag names) surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, with a forward slash before the tag name
 Start and end tags are also called opening tags and closing tags
<tagname>content</tagname>

"HTML tags" and "HTML elements" are often used to describe the same thing.

But strictly speaking, an HTML element is everything between the start tag and the end tag,
including the tags:

HTML Element:
<p>This is a paragraph.</p>
HTML Page Structure

Below is a visualization of an HTML page structure:

<html>
<body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Writing HTML Using Notepad or TextEdit

HTML can be edited by using a professional HTML editor like:

  Adobe Dreamweaver
 Microsoft Expression Web
 CoffeeCup HTML Editor

However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit
(Mac). We believe using a simple text editor is a good way to learn HTML.

Follow the 4 steps below to create your first web page with Notepad.
Step 1: Start Notepad

To start Notepad go to:

Start
All Programs
Accessories
Notepad
Step 2: Edit Your HTML with Notepad

Type your HTML code into your Notepad:

Step 3: Save Your HTML

Select Save as.. in Notepad's file menu.

When you save an HTML file, you can use either the .htm or the .html file extension. There
is no difference, it is entirely up to you.

Save the file in a folder that is easy to remember, like w3schools.

Step 4: Run the HTML in Your Browser
Start your web browser and open your html file from the File, Open menu, or just browse
the folder and double-click your HTML file.

The result should look much like this:

RESULT: STUDIED ABOUT HTML

EXPERIMENT :3

AIM: Familiarize with html tags

DESCRIPTION:
HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links

HTML links are defined with the <a> tag.

Example
<a href="http://www.w3schools.com">This is a link</a>

The link address is specified in the href attribute.

HTML Images

HTML images are defined with the <img> tag.

Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

The filename and the size of the image are provided as attributes.
HTML Elements:An HTML element is everything from the start tag to the end tag:
Start tag * Element content End tag *
<p> This is a paragraph </p>

<a href="default.htm"> This is a link </a>

<br>
* The start tag is often called the opening tag. The end tag is often called the closing tag.
HTML Element Syntax

 An HTML element starts with a start tag / opening tag

 An HTML element ends with an end tag / closing tag
 The element content is everything between the start and the end tag
 Some HTML elements have empty content
 Empty elements are closed in the start tag
 Most HTML elements can have attributes
Nested HTML Elements

Most HTML elements can be nested (can contain other HTML elements).

HTML documents consist of nested HTML elements.

HTML Document Example
<!DOCTYPE html>
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

The example above contains 3 HTML elements.

HTML Example Explained

The <p> element:

<p>This is my first paragraph.</p>

The <p> element defines a paragraph in the HTML document.

The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.

The <body> element:

<body>
<p>This is my first paragraph.</p>
</body>

The <body> element defines the body of the HTML document.

The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).
The <html> element:
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

The <html> element defines the whole HTML document.

The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).

Some HTML elements might display correctly even if you forget the end tag:
<p>This is a paragraph
<p>This is a paragraph

The example above works in most browsers, because the closing tag is considered optional.

Never rely on this. Many HTML elements will produce unexpected results and/or errors if
yOu forget the end tag .
Empty HTML Elements

HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag (the <br> tag defines a line break).

In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is
the proper way of closing empty elements in XHTML (and XML).
HTML Attributes

 HTML elements can have attributes

 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"
Attribute Example

HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
<a href="http://www.w3schools.com">This is a link</a>
HTML Headings

Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Lines

The <hr> tag creates a horizontal line in an HTML page.

The hr element can be used to separate content:

Example
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
HTML Comments

Comments can be inserted into the HTML code to make it more readable and
understandable. Comments are ignored by the browser and are not displayed.

Comments are written like this:

Example
<!-- This is a comment -->
HTML Paragraphs

Paragraphs are defined with the <p> tag.

Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML Text Formatting
This text is bold

This text is italic

This is computer output

This is subscript and superscript

HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
These HTML tags are called formatting tags (look at the bottom of this page for a complete
rOften <strong> renders as <b>, and <em> renders as <i>.

However, there is a difference in the meaning of these tags:

<b> or <i> defines bold or italic text only.

<strong> or <em> means that you want the text to be rendered in a way that the user
understands as "important". Today, all major browsers render strong as bold and em as
italics. However, if a browser one day wants to make a text highlighted with the strong
feature, it might be cursive for example and not bold.
HTML Hyperlinks (Links)

The HTML <a> tag defines a hyperlink.

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to
another document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red
HTML Link Syntax

The HTML code for a link is simple. It looks like this:

<a href="url">Link text</a>

The href attribute specifies the destination of a link.

Example
<a href="http://www.w3schools.com/">Visit W3Schools</a>

which will display like this: Visit W3Schools

Clicking on this hyperlink will send the user to W3Schools' homepage

The HTML <head> Element
The <head> element is a container for all the head elements. Elements inside <head> can
include scripts, instruct the browser where to find style sheets, provide meta information,
and more.

The following tags can be added to the head section: <title>, <style>, <meta>, <link>,
<script>, <noscript>, and <base>.
The HTML <title> Element

The <title> tag defines the title of the document.

The <title> element is required in all HTML/XHTML documents.

The <title> element:

 defines a title in the browser toolbar

 provides a title for the page when it is added to favorites
 displays a title for the page in search-engine results

A simplified HTML document:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

The HTML <base> Element

The <base> tag specifies the base URL/target for all relative URLs in a page:
<head>
<base href="http://www.w3schools.com/images/" target="_blank">
</head>

The HTML <link> Element

The <link> tag defines the relationship between a document and an external resource.

The <link> tag is most used to link to style sheets:

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

The HTML <style> Element

The <style> tag is used to define style information for an HTML document.

Inside the <style> element you specify how HTML elements should render in a browser:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

The HTML <meta> Element

Metadata is data (information) about data.

The <meta> tag provides metadata about the HTML document. Metadata will not be
displayed on the page, but will be machine parsable.

Meta elements are typically used to specify page description, keywords, author of the
document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search
engines (keywords), or other web services.

<meta> tags always go inside the <head> element.

<meta> Tags - Examples of Use

Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

Define a description of your web page:

<meta name="description" content="Free Web tutorials on HTML and CSS">

Define the author of a page:

<meta name="author" content="Hege Refsnes">

Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">
The HTML <script> Element

The <script> tag is used to define a client-side script, such as a JavaScript.

The <script> element will be explained in a later chapter.

HTML head Elements
Tag Description
<head> Defines information about the document

<title> Defines the title of a document

<base> Defines a default address or a default target for all links on a page

<link> Defines the relationship between a document and an external resource

<meta> Defines metadata about an HTML document

<script> Defines a client-side script

<style> Defines style information for a document

RESULT: studied about html tags.

EXPERIMENT:4

AIM : Familiarize with CSS

DESCRIPTION:

 CSS stands for Cascading Style Sheets

 Styles define how to display HTML elements
 Styles were added to HTML 4.0 to solve a problem
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files
CSS Syntax

A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style.

Each declaration consists of a property and a value.

The property is the style attribute you want to change. Each property has a value.
CSS Example

A CSS declaration always ends with a semicolon, and declaration groups are surrounded by
curly brackets:
p {color:red;text-align:center;}

To make the CSS more readable, you can put one declaration on each line, like this:
Example
p
{
color:red;
text-align:center;
}
CSS Comments

Comments are used to explain your code, and may help you when you edit the source code
at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
The id and class Selectors

In addition to setting a style for a HTML element, CSS allows you to specify your own
selectors called "id" and "class".
The id Selector

The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a "#".

The style rule below will be applied to the element with id="para1":
Example
#para1
{
text-align:center;
color:red;
}
The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector,
the class selector is most often used on several elements.

This allows you to set a particular style for many HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."

In the example below, all HTML elements with class="center" will be center-aligned:
Example
.center {text-align:center;}

You can also specify that only specific HTML elements should be affected by a class.

In the example below, all p elements with class="center" will be center-aligned:

Example
p.center {text-align:center;}
Three Ways to Insert CSS

There are three ways of inserting a style sheet:

 External style sheet

 Internal style sheet
 Inline style

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external
style sheet, you can change the look of an entire Web site by changing one file. Each page
must link to the style sheet using the <link> tag. The <link> tag goes inside the head
section:

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

An external style sheet can be written in any text editor. The file should not contain any
html tags. Your style sheet should be saved with a .css extension. An example of a style
sheet file is shown below:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You
define internal styles in the head section of an HTML page, by using the <style> tag, like
this:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with
presentation. Use this method sparingly!
To use inline styles you use the style attribute in the relevant tag. The style attribute can
contain any CSS property. The example shows how to change the color and the left margin
of a paragraph:

<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values
will be inherited from the more specific style sheet.

For example, an external style sheet has these properties for the h3 selector:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

And an internal style sheet has these properties for the h3 selector:

h3
{
text-align:right;
font-size:20pt;
}

If the page with the internal style sheet also links to the external style sheet the properties
for h3 will be:

color:red;
text-align:right;
font-size:20pt;

The color is inherited from the external style sheet and the text-alignment and the font-size
is replaced by the internal style sheet.

Multiple Styles Will Cascade into One

Styles can be specified:

 inside an HTML element

 inside the head section of an HTML page
  in an external CSS file

Tip: Even multiple external style sheets can be referenced inside a single HTML document.

Cascading order

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style
sheet by the following rules, where number four has the highest priority:

1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it
will override a style defined inside the <head> tag, or in an external style sheet, or in a
browser (a default value).

RESULT: STUDIED ABOUT CSS

EXPERIMENT:5

AIM: To study about java script

DESCRIPTION:
JavaScript is a Scripting Language

A scripting language is a lightweight programming language.

JavaScript is programming code that can be inserted into HTML pages.

JavaScript code can be executed by all modern web browsers.

JavaScript is easy to learn.

JavaScript: Writing Into HTML Output

Example
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
JavaScript: Reacting to Events
Example
<button type="button" onclick="alert('Welcome!')">Click Me!</button>
JavaScript: Changing HTML Content

Using JavaScript to manipulate the content of HTML elements is very common.

Example
x=document.getElementById("demo") //Find the element
x.innerHTML="Hello JavaScript"; //Change the content
JavaScript: Changing HTML Styles

Changing the style of an HTML element, is a variant of changing an HTML attribute.

Example
x=document.getElementById("demo") //Find the element
x.style.color="#ff0000"; //Change the style
JavaScript: Validate Input

JavaScript is commonly used to validate input.

Example
if isNaN(x) {alert("Not Numeric")};
avaScripts in HTML must be inserted between <script> and </script> tags.

JavaScripts can be put in the <body> and in the <head> section of an HTML page.

The <script> Tag

To insert a JavaScript into an HTML page, use the <script> tag.

The <script> and </script> tells where the JavaScript starts and ends.

The lines between the <script> and </script> contain the JavaScript:

<script>
alert("My First JavaScript");
</script>
JavaScript in <body>

In this example, JavaScript writes into the HTML <body> while the page loads:

Example
<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
.
.
</body>
</html>
A JavaScript Function in <head>

In this example, a JavaScript function is placed in the <head> section of an HTML page.

The function is called when a button is clicked:

Example
<!DOCTYPE html>
<html>

<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

External JavaScripts

Scripts can also be placed in external files. External files often contain code to be used by
several different web pages.

External JavaScript files have the file extension .js.

To use an external script, point to the .js file in the "src" attribute of the <script> tag:

Example
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
Writing to The Document Output

The example below writes a <p> element directly into the HTML document output:

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
document.write("<p>My First JavaScript</p>");
</script>

</body>
</html>
JavaScript Statements

JavaScript statements are "commands" to the browser.

The purpose of the statements is to tell the browser what to do.

This JavaScript statement tells the browser to write "Hello Dolly" inside an HTML element
with id="demo":

document.getElementById("demo").innerHTML="Hello Dolly";
JavaScript Comments

Comments will not be executed by JavaScript.

Comments can be added to explain the JavaScript, or to make the code more readable.

Single line comments start with //.

The following example uses single line comments to explain the code:

Example
// Write to a heading:
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// Write to a paragraph:
document.getElementById("myP").innerHTML="This is my first paragraph.";

JavaScript variables are "containers" for storing information:

Example
var x=5;
var y=6;
var z=x+y;
JavaScript Data Types

JavaScript variables can also hold other types of data, like text values (person="John Doe").

In JavaScript a text like "John Doe" is called a string.

There are many types of JavaScript variables, but for now, just think of numbers and
strings.

When you assign a text value to a variable, put double or single quotes around the value.

When you assign a numeric value to a variable, do not put quotes around the value. If you
put quotes around a numeric value, it will be treated as text.

RESULT: studied about java script

EXPERIMENT:6

AIM: To study about PHP

DESCRIPTION:
PHP is a server scripting language, and is a powerful tool for making dynamic and
interactive Web pages quickly.

PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.

 PHP is an acronym for "PHP Hypertext Preprocessor"

 PHP is a widely-used, open source scripting language
 PHP scripts are executed on the server
 PHP costs nothing, it is free to download and use
 PHP files can contain text, HTML, CSS, JavaScript, and PHP code
 PHP code are executed on the server, and the result is returned to the browser as
plain HTML
 PHP files have extension ".php"
 PHP can generate dynamic page content
 PHP can create, open, read, write, and close files on the server
 PHP can collect form data
 PHP can send and receive cookies
 PHP can add, delete, modify data in your database
 PHP can restrict users to access some pages on your website
 PHP can encrypt data

With PHP you are not limited to output HTML. You can output images, PDF files, and even
Flash movies. You can also output any text, such as XHTML and XML.

 PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)

 PHP is compatible with almost all servers used today (Apache, IIS, etc.)
 PHP supports a wide range of databases
 PHP is free. Download it from the official PHP resource: www.php.net
 PHP is easy to learn and runs efficiently on the server side
 Basic PHP Syntax
 A PHP script can be placed anywhere in the document.
 A PHP script starts with <?php and ends with ?>:
 <?php
// PHP code goes here
?>
 The default file extension for PHP files is ".php".
 A PHP file normally contains HTML tags, and some PHP scripting code.
 Below, we have an example of a simple PHP file, with a PHP script that uses a built-
in PHP function "echo" to output the text "Hello World!" on a web page:
 Example
  <!DOCTYPE html>
<html>
<body>

<h1>My first PHP page</h1>

<?php
echo "Hello World!";
?>

</body>
</html>

A comment in PHP code is a line that is not read/executed as part of the program. Its only
purpose is to be read by someone who is editing the code!

Comments are useful for:

 To let others understand what you are doing - Comments let other programmers
understand what you were doing in each step (if you work in a group)
 To remind yourself what you did - Most programmers have experienced coming
back to their own work a year or two later and having to re-figure out what they did.
Comments can remind you of what you were thinking when you wrote the code

PHP supports three ways of commenting:

Example
<!DOCTYPE html>
<html>
<body>

<?php
// This is a single line comment

# This is also a single line comment

/*
This is a multiple lines comment block
that spans over more than
one line
*/
?>

</body>
</html>
PHP Variables

As with algebra, PHP variables can be used to hold values (x=5) or expressions (z=x+y).

A variable can have a short name (like x and y) or a more descriptive name (age, carname,
total_volume).

Rules for PHP variables:

 A variable starts with the $ sign, followed by the name of the variable
 A variable name must start with a letter or the underscore character
 A variable name cannot start with a number
 A variable name can only contain alpha-numeric characters and underscores (A-z, 0-
9, and _ )
 Variable names are case sensitive ($y and $Y are two different variables)

Creating (Declaring) PHP Variables

PHP has no command for declaring a variable.

A variable is created the moment you first assign a value to it:

Example
<?php
$txt="Hello world!";
$x=5;
$y=10.5;
?>
PHP Variables Scope

In PHP, variables can be declared anywhere in the script.

The scope of a variable is the part of the script where the variable can be referenced/used.

PHP has three different variable scopes:

 local
 global
 static
 The PHP echo Statement
 echo is a language construct, and can be used with or without parentheses: echo or
echo().
 Display Strings
  The following example shows how to display different strings with the echo
command (also notice that the strings can contain HTML markup):
 Example
 <?php
echo "<h2>PHP is fun!</h2>";
echo "Hello world!<br>";
echo "I'm about to learn PHP!<br>";
echo "This", " string", " was", " made", " with multiple parameters.";
?>
 The PHP print Statement
 print is also a language construct, and can be used with or without parentheses:
print or print().
 Display Strings
 The following example shows how to display different strings with the print
command (also notice that the strings can contain HTML markup):
 Example
 <?php
print "<h2>PHP is fun!</h2>";
print "Hello world!<br>";
print "I'm about to learn PHP!";
?>

PHP Strings

A string is a sequence of characters, like "Hello world!".

A string can be any text inside quotes. You can use single or double quotes:

Example
<?php
$x = "Hello world!";
echo $x;
echo "<br>";
$x = 'Hello world!';
echo $x;
?>
PHP Integers

An integer is a number without decimals.

Rules for integers:

 An integer must have at least one digit (0-9)

 An integer cannot contain comma or blanks
  An integer must not have a decimal point
 An integer can be either positive or negative
 Integers can be specified in three formats: decimal (10-based), hexadecimal (16-
based - prefixed with 0x) or octal (8-based - prefixed with 0)

In the following example we will test different numbers. The PHP var_dump() function
returns the data type and value of variables:

Example
<?php
$x = 5985;
var_dump($x);
echo "<br>";
$x = -345; // negative number
var_dump($x);
echo "<br>";
$x = 0x8C; // hexadecimal number
var_dump($x);
echo "<br>";
$x = 047; // octal number
var_dump($x);
?>
PHP Floating Point Numbers

A floating point number is a number with a decimal point or a number in exponential form.

In the following example we will test different numbers. The PHP var_dump() function
returns the data type and value of variables:

Example
<?php
$x = 10.365;
var_dump($x);
echo "<br>";
$x = 2.4e3;
var_dump($x);
echo "<br>";
$x = 8E-5;
var_dump($x);
?>
PHP Booleans

Booleans can be either TRUE or FALSE.

$x=true;
$y=false;

Booleans are often used in conditional testing. You will learn more about conditional
testing in a later chapter of this tutorial.

PHP Arrays

An array stores multiple values in one single variable.

In the following example we create an array, and then use the PHP var_dump() function to
return the data type and value of the array:

Example
<?php
$cars=array("Volvo","BMW","Toyota");
var_dump($cars);
?>
PHP Conditional Statements

Very often when you write code, you want to perform different actions for different
decisions. You can use conditional statements in your code to do this.

In PHP we have the following conditional statements:

 if statement - executes some code only if a specified condition is true

 if...else statement - executes some code if a condition is true and another code if
the condition is false
 if...elseif....else statement - selects one of several blocks of code to be executed
 switch statement - selects one of many blocks of code to be executed

PHP - The if Statement

The if statement is used to execute some code only if a specified condition is true.

Syntax
if (condition)
{
code to be executed if condition is true;
}

The example below will output "Have a good day!" if the current time (HOUR) is less than
20:
Example
<?php
$t=date("H");
if ($t<"20")
{
echo "Have a good day!";
}
?>

PHP - The if...else Statement

Use the if....else statement to execute some code if a condition is true and another code if
the condition is false.

Syntax
if (condition)
{
code to be executed if condition is true;
}
else
{
code to be executed if condition is false;
}

The example below will output "Have a good day!" if the current time is less than 20, and
"Have a good night!" otherwise:

Example
<?php
$t=date("H");
if ($t<"20")
{
echo "Have a good day!";
}
else
{
echo "Have a good night!";
}
?>

PHP - The if...elseif....else Statement

Use the if....elseif...else statement to select one of several blocks of code to be executed.

Syntax
if (condition)
{
code to be executed if condition is true;
}
elseif (condition)
{
code to be executed if condition is true;
}
else
{
code to be executed if condition is false;
}

The example below will output "Have a good morning!" if the current time is less than 10,
and "Have a good day!" if the current time is less than 20. Otherwise it will output "Have a
good night!":

Example
<?php
$t=date("H");
if ($t<"10")
{
echo "Have a good morning!";
}
elseif ($t<"20")
{
echo "Have a good day!";
}
else
{
echo "Have a good night!";
}
?>

The PHP switch Statement

Use the switch statement to select one of many blocks of code to be executed.
Syntax
switch (n)
{
case label1:
code to be executed if n=label1;
break;
case label2:
code to be executed if n=label2;
break;
case label3:
code to be executed if n=label3;
break;
...
default:
code to be executed if n is different from all labels;
}

This is how it works: First we have a single expression n (most often a variable), that is
evaluated once. The value of the expression is then compared with the values for each case
in the structure. If there is a match, the block of code associated with that case is executed.
Use break to prevent the code from running into the next case automatically.
Thedefault statement is used if no match is found.

Example
<?php
$favcolor="red";
switch ($favcolor)
{
case "red":
echo "Your favorite color is red!";
break;
case "blue":
echo "Your favorite color is blue!";
break;
case "green":
echo "Your favorite color is green!";
break;
default:
echo "Your favorite color is neither red, blue, or green!";
}
?>

PHP Loops

Often when you write code, you want the same block of code to run over and over again in
a row. Instead of adding several almost equal code-lines in a script, we can use loops to
perform a task like this.

In PHP, we have the following looping statements:

 while - loops through a block of code as long as the specified condition is true
 do...while - loops through a block of code once, and then repeats the loop as long as
the specified condition is true
 for - loops through a block of code a specified number of times
 foreach - loops through a block of code for each element in an array

The PHP while Loop

The while loop executes a block of code as long as the specified condition is true.

Syntax
while (condition is true)
{
code to be executed;
}

The example below first sets a variable $x to 1 ($x=1;). Then, the while loop will continue to
run as long as $x is less than, or equal to 5. $x will increase by 1 each time the loop runs
($x++;):

Example
<?php
$x=1;
while($x<=5)
{
echo "The number is: $x <br>";
$x++;
}
?>

The PHP do...while Loop

The do...while loop will always execute the block of code once, it will then check the
condition, and repeat the loop while the specified condition is true.

Syntax
do
{
code to be executed;
}
while (condition is true);

The example below first sets a variable $x to 1 ($x=1;). Then, the do while loop will write
some output, and then increment the variable $x with 1. Then the condition is checked (is
$x less than, or equal to 5?), and the loop will continue to run as long as $x is less than, or
equal to 5:

Example
<?php
$x=1;
do
{
echo "The number is: $x <br>";
$x++;
}
while ($x<=5)
?>

The PHP for Loop

The for loop is used when you know in advance how many times the script should run.

Syntax
for (init counter; test counter; increment counter)
{
code to be executed;
}

Parameters:

 init counter: Initialize the loop counter value

 test counter: Evaluated for each loop iteration. If it evaluates to TRUE, the loop
continues. If it evaluates to FALSE, the loop ends.
 increment counter: Increases the loop counter value
The example below displays the numbers from 0 to 10:

Example
<?php
for ($x=0; $x<=10; $x++)
{
echo "The number is: $x <br>";
}
?>

RESULT:Familiarised with PHP

PROGRAMS:
1. Implement form validation using PHP
2. Implement file handling in php
3. Implement MySQL database connectivity using PHP
4. Implement session management using PHP
5. Design a web page to upload files
6. Send e mail using PHP
7. Develop a web site about yourselves.