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, and 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:

Fig 1- Web Developing Process

Web development is the building and maintenance of websites; it’s the work
that happens behind the scenes to make a website look great, work fast and
perform well with a seamless user experience.
Web developers, or ‘devs’, do this by using a variety of coding languages. The
languages they use depends on the types of tasks they are preforming and the
platforms on which they are working.
Web development skills are in high demand worldwide and well paid too –
making development a great career option. It is one of the easiest accessible
higher paid fields as you do not need a traditional university degree to become
qualified.
The field of web development is generally broken down into front-end (the
user-facing side) and back-end (the server side). Let’s delve into the details.
1.3 Frontend Web Development

Front-end web development, also known as client-side development is the

practice of producing HTML, CSS and JavaScript for a website or Web
Application so that a user can see and interact with them directly. The
challenge associated with front end development is that the tools and
techniques used to create the front end of a website change constantly and so
the developer needs to constantly be aware of how the field is developing.
The objective of designing a site is to ensure that when the users open up the
site they see the information in a format that is easy to read and relevant. This
is further complicated by the fact that users now use a large variety of devices
with varying screen sizes and resolutions thus forcing the designer to take into
consideration these aspects when designing the site. They need to ensure that
their site comes up correctly in different browsers (cross-browser), different
operating systems (cross-platform) and different devices (cross-device),
which requires careful planning on the side of the developer.
1.4 Backend Web Development

Back-end Development refers to the server-side development. It focuses on

databases, scripting, website architecture. It contains behind-the-scene activities
that occur when performing any action on a website. It can be an account login
or making a purchase from an online store. Code written by back-end
developers helps browsers to communicate with database information.
Most common example of Backend programming is when you are reading an
article on the blog. The fonts, colours, designs, etc. constitute the frontend of
this page. While the content of the article is rendered from a server and fetched
from a database. This is the backend part of the application.

Database and Cache:

Knowledge of various DBMS technology is one of the important Backend
developer skills. MySQL, MongoDB, Oracle, SQLServer, Redis are widely
used for this purpose. Knowledge of caching mechanisms like varnish,
Memcached, Redis is a plus.

Server:
Exposure to handling Apache, Nginx, IIS servers, Microsoft IIS

is desirable. A good background in Linux helps tremendously in administering

servers.

API (REST & SOAP):

Knowledge of web services or API is also important for full stack developers.
Knowledge of creations and consumption of REST and SOAP services is
desirable.
 Frontend Developer Vs. Backend Developer

Parameter Frontend Backend

The languages that a front-end
web developer should be familiar
Skillsets The database, Server, API, etc.
with are HTML, CSS, and
JavaScript.
Front-end developers design the Back-end developers develop an
look of the website, by taking application that supports the front-
Team
user’s inputs and modifying it end. It should also provide support,
through testing. security, and content management.
Back end development can be offered
Stand-alone Front-end development service
as an independent service in the form
Service can’t be offered independently.
of BaaS (Back-end as a service).
The back-end team may need to
Front-end developers should
create an application around the
make sure that the website is
front-end and support it. Moreover,
Goal accessible to all users, and it
they need to make sure that the
remains responsive in all views –
website opens up and functioning
mobile and desktop.
properly.
Average
$104,405 per year $120,798 per year
Salary
Most
popular jQuery, HTML5 MySQL, PHP
tools
 CHAPTER-2

2. HARDWARE AND SOFTWARE REQUIREMENT :

2.1 Hardwares Required :

 TABLE 1-HARDWARES REQUIRED

Number Description
1. Pentium 4 ,Window XP/Window7
2. 256 MB RAM

2.2 Softwares Required:

TABLE 2-SOFTWARES REQUIRED

Number Description
1. Windows XP ,7
2. MySql
3. IIS server/ XAMP
4. HTML/CSS/ JavaScript
5. API

CHAPTER-3

3. TOOLS

3.1 Introduction

The Translate and Edit application had been planned to consist of two parts-
front-end and back-end development. The front-end is the part of the web that
you can see and interact with (e.g. Client-side programming). While front-end
code interacts with the user in real time, the back-end interacts with a server to
return user ready results. The front-end is a combination of HTML,CSS and
JavaScript coding. By using JavaScript, modifications of the design of a web
page can be made immediately, however only temporary and visible only by the
user.

Normally the user would not have rights to modify web content dynamically on
the server side. Logically, administrators are the ones who deal with back-end
modification of databases for example, as they often contain sensitive data
which should not be available to see or modify by the general public. These
front-end and back-end tools includes languages like HTML, CSS,JavaScript
,PHP ,MYSQL etc. We will discuss all these languages in brief as given below.

3.2 Features

➢ Web Page Assests, Resources, and Network Information

➢ Profiling and Auditing

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.

Hyper Text: HyperText simply means "Text within Text." A text has a link
within it, is a hypertext. Whenever you click on a link which brings you to a
new webpage, you have clicked on a hypertext. HyperText is a way to link two
or more web pages (HTML documents) with each other.

Markup language: A markup language is a computer language that is used to

apply layout and formatting conventions to a text document. Markup language
makes text more interactive and dynamic. It can turn text into images, tables,
links, 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 external stylesheet file, we can change the look of an entire website
by changing just one file!

➢ CSS can be either external or internal.

CSS is designed to enable the separation of presentation and content,

including layout, colors, and fonts. This separation can improve
content accessibility; provide more flexibility and control in the specification of
presentation characteristics; enable multiple web pages to share formatting by
specifying the relevant CSS in a separate .css file, which reduces complexity
and repetition in the structural content; and enable the .css file to be cac hed to
improve the page load speed between the pages that share the file and its
formatting.
Separation of formatting and content also makes it feasible to present the same
markup page in different styles for different rendering methods, such as on-
screen, in print, by voice (via speech-based browser or screen reader), and
on Braille-based tactile devices. CSS also has rules for alternate formatting if
the content is accessed on a mobile device.
The name cascading comes from the specified priority scheme to determine
which style rule applies if more than one rule matches a particular element. This
cascading priority scheme is predictable.

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 .css 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="para1":

Example-

Suppose the HTML content is as follow,

<h1 id=”para1”>content</h1>

Then Id will be declared as

#para1 {

text-align: center;

color: blue; font-family: times new roman;

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.

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-

.para1

text-align: center;

color: blue;

font-family: Jokerman; /*this is the single line

comment */
 }

In the example above, all HTML elements with class=para1" will be blue and
center-aligned.

5.4 CSS Styles:

➢ Background properties

➢ Border properties

➢ Padding

➢ Margin

➢ Color

➢ Font properties

➢ Text properties Link Properties / Navigation bar Properties

Limitations

Some noted limitations of the current capabilities of CSS include:

 Selectors are unable to ascend

 Cannot explicitly declare new scope independently of position
 Pseudo-class dynamic behavior not controllable
 Cannot name rules
 Cannot include styles from a rule into another rule.
 Cannot target specific text without altering markup
 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.

JavaScript is a high-level, often just-in-time compiled language that conforms to

the ECMAScript standard. It has dynamic typing, prototype-based object-
orientation, and first-class functions. It is multi-paradigm, supporting event-
driven, functional, and imperative programming styles. It has application
programming interfaces (APIs) for working with text, dates, regular
expressions, standard data structures, and the Document Object Model (DOM).
The ECMAScript standard does not include any input/output (I/O), such
as networking, storage, or graphics facilities. In practice, the web browser or
other runtime system provides JavaScript APIs for I/O.
JavaScript engines were originally used only in web browsers, but are now core
components of some servers and a variety of applications. The most popular
runtime system for this usage is Node.js.
Although Java and JavaScript are similar in name, syntax, and
respective standard libraries, the two languages are distinct and differ greatly in
design.

JavaScript Example

JavaScript can be used in various activities like data validation, displaying

popup messages, handling events of HTML elements, modifying CSS, etc.
The following sample form uses JavaScript to validate data and change the
color of the form.
First Name:
Middle Name:
Last Name:
Date of Birth:
Address:
City:
Zip Code:
Submit
 

The responsive UI and menu of this website is also using JavaScript. There is
no website in this world that does not use JavaScript or JavaScript-based
frameworks.

JavaScript History

In early 1995, Brendan Eich from Netscape designed and implemented a new
language for non-java programmers to give newly added Java support in
Netscape navigator. It was initially named Mocha, then LiveScript, and
finally JavaScript.

Nowadays, JavaScript can execute not only on browsers but also on the server
or any device with a JavaScript Engine. For example, Node.js is a framework
based on JavaScript that executes on the server.

JavaScript and ECMAScript

Often you will hear the term ECMAScript while working with JavaScript.
Let's clear the confusion before it arises.

As you now know, JavaScript was primarily developed to execute on

browsers. There are many different browsers from different companies. So,
there was a need to standardize the execution of the JavaScript code to
achieve the same functionality in all the browsers.

Ecma International is a non-profit organization that creates standards for

technologies. ECMA International publishes the specification for scripting
languages is called 'ECMAScript'. ECMAScript specification defined
in ECMA-262 for creating a general-purpose scripting language.
JavaScript implements the ECMAScript standards, which includes features
specified in ECMA-262 specification as well as other features which are not
based on ECMAScript standards.

JavaScript Engine

JavaScript engine interprets, compiles, and executes JavaScript code. It also

does memory management, JIT compilation, type system, etc. Different
browsers use different JavaScript engines, as listed in the below table.

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 tags of html

2. In .js file (external java Script)

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" oneclick="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 .js extension. It
is recommended to embed all JavaScript files into a single file. It increases the
speed of the webpage.

The use of JavaScript has expanded beyond its web browser roots. JavaScript

engines are now embedded in a variety of other software systems, both
for server-side website deployments and non-browser applications.
Initial attempts at promoting server-side JavaScript usage were Netscape
Enterpries Server and Microsoft's Internet Information Services, but they were
small niches. Server-side usage eventually started to grow in the late 2000s,
with the creation of Node.js and other approaches.
Electron, Cordova, React Native, and other application frameworks have been
used to create many applications with behavior implemented in JavaScript.
Other non-browser applications include Adobe Acrobat support for
scripting PDF documents and GNOME Shell extensions written in JavaScript.
JavaScript has recently begun to appear in some embedded systems, usually by
leveraging Node.js

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":

6.3 Comments in JavaScript:

The JavaScript comments are meaningful way to deliver message. It is used to

add information about the code, warnings 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.

CHAPTER-8
8. MYSQL:

MySQL ( My S-Q-L, or "My sequel" ) is a relational database management

system (RDBMS) which has more than 6 million installations. MySQL stands
for "My Structured Query Language". The program runs as a server providing
multi-user access to a number of databases.

8.1 Uses:

MySQL is used in web applications and acts as the database component of the
LAMP software stack. Its popularity for use with web applications is closely
tied to the popularity of PHP, which is often combined with MySQL. Several
high-traffic web sites (including Flickr, Facebook, Wikipedia, Google (though
not for searches), Nokia, Auctionmarts and YouTube) use MySQL for data
storage and logging of user data.

8.2 Features:

➢ A broad subset of ANSI SQL 99, as well as extensions

➢ Cross-platform support

➢ Stored procedures

➢ Triggers

➢ Cursors

➢ Strict mode

➢ Updatable Views

➢ Query caching

➢ Sub- SELECTs (i.e. nested SELECTs)

➢ Replication with one master per slave, many slaves per master, no automatic
support for multiple masters per slave.

PROJECT
Live Weather Updatae using API

Introduction
Weather forecasting is the application of science and technology to predict the
conditions of the atmosphere for a given location and time. People have
attempted to predict the weather informally for millennia and formally since the
19th century. Weather forecasts are made by collecting quantitative data about
the current state of the atmosphere, land, and ocean and using meteorology to
project how the atmosphere will change at a given place.

This project provides us with real time weather updates for any location which
we want. It can also track our device location.
The interface of the website is quite simple and is easy to use. We have used
atom text editor for developing this project.
The person only needs to give access of the device location when asked or can
type the name of the place’s weather update he needs.
The website is made with the help of languages like HTML, CSS, JavaScript.