Chapter 1

1. WEB DEVELOPING

Website is a collection of related web pages, including multimedia content, typically identified
with a common domain name, and published on at least one web server. A website may be
accessible via a public Internet Protocol (IP) network, such as the Internet, or a private local
area network (LAN), by referencing a uniform resource locator (URL) that identifies the site.

Websites can have many functions and can be used in various fashions; a website can be a
personal website, a commercial website for a company, a government website or a non-profit
organization website. Websites are typically dedicated to a particular topic or purpose, ranging
from entertainment and social networking to providing news and education. All publicly
accessible websites collectively constitute the World Wide Web, while private websites, such
as a company's website for its employees, are typically a part of an intranet.

Web development is a broad term for the work involved in developing a web site for the
Internet (World Wide Web) or an intranet (a private network). Web development can range
from developing the simplest static single page of plain text to the most complex web based
internet applications (or just web apps') electronic businesses, and social network services. A
more comprehensive list of tasks to which web development commonly refers, may include
web engineering, web design, web content development, client liaison, client side/server-side
scripting, web server and network security configuration, and e commerce development.
Among web professionals, "web development" usually refers to the main non-design aspects
of building web sites: writing markup and coding..

1.1 Several Aspects Of Web Developing

Before developing a web site once should keep several aspects in mind like:

➢ What to put on the web site?

➢ Who will host it?

➢ How to make it interactive?

 ➢ How to secure the source code frequently?

➢ Will the web site design display well in different browsers?

➢ Will the navigation menus be easy to use?

➢ Will the web site loads quickly?

➢ How easily will the site pages print?

1.2 Process
These are the steps considered while developing a webpage:

Decide Purpose

Planning

Designing

Gather Content

Building

Testing

Upload to Server

Marketing and Maintenance

Fig 1- Web Developing Process

 Chapter 2

2. HARDWARE AND SOFTWARE REQUIREMENT

2.1 Hardwares Required:

Table 1-Hardwares Required

Number Descriptions
1. Pentium 4,Window XP/WindT
2. 256 MB RAM

2.2 Softwares Required:

Table 1-Softwares Required

Number Descriptions
1. Windows XP 7
2. Php 5.1
3. MySQL
4. HS Server/XAMPP
5. HTML/CSS/Javascript
 Chapter 3

3. TOOLS

3.1 Introduction
The Trandate and Bt application had been planned so ist of parts-f-end and back-end
development. The fo-end is the part of the wah that you can see and interas with (g. Che
side programming). While front-end code interacts with the user in real time, the back-end
imetic with a server to retire et realy salt. The f-end is a combination of HTML CSS and
Jadeipt coding. By using JavaScript modificatums of the design of a b page can be made
immediately, however only ampary and visible only by the user.

Neemally the user would not have rights to modify with comes dynamically in the server
side Logically, almanates are the ones who deal with hack-end modification of duabus for
example, they often als semitive data which shinild wo be available in or modify by the
general publ. These from end and fuck-end tools includes languages The HTML CSS,
JavaScript PHP MYSQL We will discs all these languages in brief as:

3.2 Features
➢ Wih Per Auests
➢ Proding and Audring
 Chapter 4

4. HTML

4.1 Introduction
HTML (HyperText Mark-Up Language) is what is known as a "mark-up language"
whose role is to prepare written documents using formatting tags. The tags indicate how
the document is presented and how it links to other documents.
The World Wide Web (WWW for short), or simply the Web, is the worldwide network
formed by all the documents (called "web pages") which are connected to one another by
hyperlinks.
Web pages are usually organised around a main page, which acts as a hub for browsing
other pages with hyperlinks. This group of web pages joined by hyperlinks and centred
around a main page is called a website. The Web is a vast living archive composed of a
myriad of web sites, giving people access to web pages that may contain formatted text,
images, sounds, video, etc.

4.2 What is the Web?

The Web is composed of web pages stored on web servers, which are machines that are
constantly connected to the Internet and which provide the pages that users request. Every
web page, and more generally any online resource, such as images, video, music, and
animation, is associated with a unique address called a URL. The key element for viewing
web pages is the browser, a software program which sends requests to web servers, then
processes the resulting data and displays the information as intended, based on instructions
in the HTML page. The most commonly used browsers on the Internet include:
➢ Mozilla Firefox

➢ Microsoft Internet Explorer

➢ Netscape Navigator

➢ Safari

➢ Opera
4.3 Versions Of HTML
HTML was designed by Tim Berners-Lee, at the time a researcher at CERN (Chinese
Ecosystem Research Network), beginning in 1989. He officially announced the creation of
the Web on Usenet in August 1991. However, it wasn't until 1993 that HTML was
considered advanced enough to call it a language (HTML was then symbolically christened
HTML 1.0).
RFC 1866, dated November 1995, represented the first official version of HTML, called
HTML 2.0. After the brief appearance of HTML 3.0, which was never officially released.
HTML 3.2 became the official standard on January 14, 1997. The most significant changes
to HTML 3.2 were the standardization of tables, as well as many features relating to the
presentation of web pages.
On December 18, 1997, HTML 4.0 was released. Version 4.0 of HTML was notable for
standardizing style sheets and frames. HTML version 4.01, which came out on December
24, 1999, made several minor modifications to HTML 4.0.
Example
<HTML>

<HEAD>

</HEAD>

<BODY>

<H5>THIS IS AN EXAMPLE</H5>

</BODY>

</HTML>
 Chapter 5

5. CSS

5.1 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.

➢ CSS describes how HTML elements should be displayed. CSS Saves a Lot of
Work! The style definitions are normally saved in external .css files.

➢ With an extemal stylesheet file, we can change the look of an entire website by
changing

➢ just one file!

➢ CSS can be either external or internal.

5.2 CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

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

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

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.

The External CSS can be declared in the required HTML page as:

<link rel="stylesheet" href="CSS_file_name".css">

The External CSS file is saved by using the .ess extension, whereas the internal CSS is
saved in corresponding HTML file using the <style> tag. Using External CSS is much
better than using

Internal. Here are a few reasons this is better.

 ➢ Easier Maintenance

➢ Reduced File Size

➢ Reduced Bandwidth

➢ Improved Flexibility

The selectors that can be used to select the HTML part are

➢ Id selector

➢ Class selector

5.2.1 Id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select
one unique element! To select an element with a specific id, write a hash (#) character,
followed by the id of the element. The style rule below will be applied to the HTML
element with id="paral":
Example
Suppose the HTML content is as follow,
<hl id="para">content</h1>

Then Id will be declared as

#paral (

text-align: center;

color:blue;

font-family:jokerman;

5.2.2 The class Selector

The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the
name of the class.
Example
-paral
text-align: center;
 color:blue;
font-family: Jokerman;

5.3 CSS Comments

Comments are used to explain the code, and may help when you edit the source code at a
later date. Comments are ignored by browsers. A CSS comment starts with / and ends with
*/ Comments can also span multiple lines.
Example

paral
text-align: center;
color:blue
font-family: Jokerman;
/this is the single line comment "/
}
In the example above, all HTML elements with class-paral" will be blue and center-aligned.

5.4 CSS Styles

➢ Background properties

➢ Border properties

➢ Padding > Margin

➢ Colo

➢ Font properties

➢ Text propertiesLink properties/Navigation bar properties

 Chapter 6

6. JAVASCRIPT

6.1 What is JavaScript?

JavaScript is an object-based scripting language that is lightweight and cross-platform.

JavaScript is not compiled but translated. The JavaScript Translator (embedded in browser)
is responsible to translate the JavaScript code.

It is mainly used for:

➢ Client-side validation

➢ Dynamic drop-down menus.

➢ Displaying data and time.

➢ Displaying popup windows and dialog boxes (like alert dialog box, confirm dialog

box and prompt dialog box).

➢ Displaying clocks etc.

Example of JavaScript

<h2>Welcome to JavaScript</h2>

<script>

document.write("Hello JavaScript by JavaScript");

</script>

Here, <script> tag is used to initialize the script and document.write() is a function used to
write.
 Like CSS, JavaScript also can be can be placed in:

1. Between the body tag of html

2. In js file (external javaScript)

3. Between the head tag of html

6.1.1 JavaScript Example: code between the body tag

In the given example, we have displayed the dynamic content using JavaScript. Let's
see the simple example of JavaScript that displays alert dialog box.

<script type="text/javascript">

alert("Hello Javatpoint");

</script>

6.1.2 JavaScript Example: code in JS file

➢ message.js file
function msg()

alert("Hello Javatpoint")

➢ index.html
<head>

<script type="text/javascript" src="message.js"></script>

</head>

<body>

<p>Welcome to JavaScript</p>

<form>

<input type="button" value="click" onclick="msg()"/>

</form>
 </body>

We can create external JavaScript file and embed it in many html page.
It provides code re usability because single JavaScript file can be used in several html pages.
An external JavaScript file must be saved by is extension. It is recommended to embed all
JavaScript files into a single file. It increases the speed of the webpage.

6.1.3 Between the head tag of html

<head>

<script type="text/javascript">

function msgo

alert("Hello Javatpoint")

</script>

</head>

<body>

<p>Welcome to JavaScript</p>

<form

<input type="button" value="click" onclick="msg()"/>

</form>

</body>

6.2 How To Change Content Of HTML using a JavaScript?

One of many JavaScript HTML methods is getElementById().
This example uses the method to "find" an HTML element (with id="demo") and changes
the element content (innerHTML) to "Hello JavaScript":
Example
document.getElementById("demo").innerHTML = "Hello JavaScript";
document.getElementById("demo").style.fontSize = "25px";
 <html>

<head>

<script

function myFunction()

document.getElementById("demo").innerHTML

"Paragraph

changed.";

</script>

<head>

<body>

<h1>My Web Page</h1>

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

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

</body>

<</html>

6.3 Comments In JavaScript

The JavaScript comments are meaningful way to deliver message. It is used to add
information about the code, wamings or suggestions so that end user can easily interpret
the code. The JavaScript comment is ignored by the JavaScript engine i.e. embedded in the
browser.
6.3.1 Advantages of JavaScript comments:

There are mainly two advantages of JavaScript comments.

➢ To make code easy to understand: It can be used to elaborate the code so that end

user can easily understand the code.

 ➢ To avoid the unnecessary code: It can also be used to avoid the code being

executed. Sometimes, we add the code to perform some action. But after sometime,

there may be need to disable the code. In such case, it is better to use comments.

Example

<script type="text/javascript">

function ms

alert("Hello Javatpoint"); / this is a comment"/

</script>

6.4 JavaScript Variable

A JavaScript variable is simply a name of storage location. There are two types of variables
in JavaScript: local variable and global variable. There are some rules while declaring a
JavaScript variable (also known as identifiers).

➢ Name must start with a letter (a to z or A to Z), underscore(), or dollar( S) sign.

After first letter we can use digits (0 to 9), for example valuel.
➢ JavaScript variables are case sensitive, for example x and X are different variables.

6.5 JavaScript Form Validation

It is important to validate the form submitted by the user because it can have
inappropriate values. So validation is must.

The JavaScript provides you the facility the validate the form on the client side so processing
will be fast than server-side validation. So, most of the web developers prefer JavaScript form
validation.

Through JavaScript, we can validate name, password, email, date, mobile number etc fields.
Example

<script>

function validateform()

var name=document.myform.name.value;

var password=document.myform.password.value:

if (name= null | name=="")

alert("Name can't be blank");

return false;

else if(password.length<6)

alert("Password must be at least 6 characters long.");

return false;

</script>

<body>

<form name="myform" method="post" action="abc.jsp" onsubmit="return validatefor m()">

Name: <input type="text" name="name"><br/>

Password: <input type="password" name="password"><br/>

<input type="submit" value="register">

<</form>

<</body>

In this example, we are going to validate the name and password. The name can't be empty and
password can't be less than 6 characters long.Here, we are validating the form on form submit.
The user will not be forwarded to the next page until given values are correct.
6.5.1 JavaScript Retype Password Validation
<script type="text/javascript">

function matchpass()

var firstpassword=document.fl.password value;

var secondpassword=document.fl.password2.value;

if(first password=secondpassword)

return true;

else

alert("password must be same!");

return false;

<</script>

<form name="fl" action="register.jsp" onsubmit="return matchpass()">

Password:<input type="password" name="password" /><br/>

Re-enter Password:<input type="password" name="password2"/><hr/>

<input type="submit">

</form>

6.6 JavaScript Functions

JavaScript functions are used to perform operations. We can call JavaScript function m
times to reuse the code.

6.6.1 Advantage of JavaScript function

There are mainly two advantages of JavaScript functions.
➢ Code reusability

➢ Less coding

6.6.2 6.5.2 JavaScript Function Syntax

The syntax of declaring function is given below:

 function functionName([arg1, arg2,...argN])

//code to be executed

JavaScript Functions can have 0 or more arguments.

Example

<script>

function msg()

alert("hello! this is message");

</script>

<input type="button" onclick="msg()" value="call function"/>

Output of the above example:

hello! this is message

6.7 JavaScript Control Statements:

6.7.1 If-else:

It evaluates the content whether condition is true or false. The syntax of JavaScript if-

else statement is given below.

if(expression)

content to be evaluated if condition is true

Else

content to be evaluated if condition is false

Example -
 <script>

var a=20:

if (a%2==0)

document.write("a is even number");

else

document.write("a is odd number");

</script>

6.7.2 JavaScript Switch

The JavaScript switch statement is used to execute one code from multiple
expressions. It is just like else if statement that we have learned in previous page. But
it is convenient than if..else..if because it can be used with numbers, characters etc. The
signature of JavaScript switch statement is given below.

switch(expression){

case value1:

code to be executed;

break;

case value2:

code to be executed;

break;

default: code to be executed if above values are not matched;