WEB DEVELOPMENT

Introduction:
How to connect wed development in our daily life:
Now a days Technology plays an integral part in our day-to-day lives. All
the web pages and software that we use to make our lives easier are
developed by Web Developers.
It refers to developing and maintaining web pages, including concepts
like web design, web programming, web publishing, and database
management. Further, it includes various types of web development
tools and techniques such as text editors for manually coding the
websites, Dreamweaver for developing a web page, using a blogging
website to update blogs, and more.
From basic and simple websites to complex web applications and social
media platforms and from numerous online shopping web pages to even
content management systems (CMS), all the online tools and websites
that we use regularly are part of Web Development. Besides, all these
tools and websites are built by Web Developers.

Why Web Development?

[With the rapid development of information technology, web application
and android application have been increasing in recent years.
Compared with the desktop application. The advantages of web
application for users they are:
 No need to install and update
 Easily visit through browers
 Web application (Web app):It is an application program that is
stored on a remote server and delivered over the Internet through
a browser interface.
 Android Application: It is a software designed to run on an
Android device or emulator.
 desktop application: It is a software program that can be run on
locally (or) standalone computer to perform a specific task by an
end-user.
WEB DEVELOPMENT

What is Web development?

Web development is the work involved in developing a website for
the Internet (World Wide Web) or an intranet (a private network).
Web development can range from developing a simple single static page
of plain text to complex web applications, electronic businesses, and
social network services.
Web development refers to the creating, building, and maintaining of
websites. It includes aspects such as web design, web publishing, web
programming, and database management. It is the creation of an
application that works over the internet i.e. websites.
The word Web Development is made up of two words, that is:
 Web: It refers to websites, web pages or anything that works
over the internet.
 Development: It refers to building the application from
scratch.

Scratch is a visual programming language that allows students or

developers to create their own interactive stories, games and
animations.

What Languages are used to Web development

The Most Popular Web Development Languages

According to developers JavaScript, Angular js, Python, Ruby, Swift,
HTML, CSS and PHP( Hypertext Pre-processor) are the most popular
languages across web developers.

Web Development Platforms

Some of the most popular website development platforms are:

 WordPress
 Wix
 Weebly
 Jimdo
WEB DEVELOPMENT

Web Development can be classified into two ways:

 Frontend Development
 Backend Development
 Full Stack Web Development

Frontend Development
The part of a website that the user interacts directly is termed as front
end. It is also referred to as the ‘client side’ of the application.
 HTML: HTML stands for Hypertext Markup Language. It is
used to design the front-end portion of web pages using
markup language. It acts as a skeleton for a website since it is
used to make the structure of a website.
 CSS: Cascading Style Sheets fondly referred to as CSS is a
simply designed language intended to simplify the process of
making web pages presentable. It is used to style our website.
 JavaScript: JavaScript is a scripting language used to provide
a dynamic behavior to our website.
 Bootstrap: Bootstrap is a free and open-source tool collection
for creating responsive websites and web applications. It is the
most popular CSS framework for developing responsive,
mobile-first websites. Nowadays, the websites are perfect for
WEB DEVELOPMENT

all the browsers (IE, Firefox, and Chrome) and for all sizes of
screens (Desktop, Tablets, Phablets, and Phones).
 Types of Bootstraps
 Bootstrap 4
 Bootstrap 5

Backend Development

Backend is the server side of a website. It is the part of the website that
users cannot see and interact. It is the portion of software that does not
come in direct contact with the users. It is used to store and arrange data.
 PHP: PHP is a server-side scripting language designed
specifically for web development.
 Java: Java is one of the most popular and widely used
programming language. It is highly scalable.
 Python: Python is a programming language that lets you work
quickly and integrate systems more efficiently.
 Node.js: Node.js is an open source and cross-platform
runtime environment for executing JavaScript code outside a
browser.
 Back End Frameworks: The list of back end frameworks
are: Express, Django, Rails, Laravel, Spring, etc.

Full Stack Web Development

Full Stack development is the combined development of the frontend

and the backend of a web page. It includes the development of the
graphics and design of the web page, along with managing the database
for data organization and storage.
WEB DEVELOPMENT

What are the different types of web development?

 Front-end web development. Front-end web development is
responsible for the look and feel of a website. ...
 Back-end web development. ...
 Full-stack web development. ...
 Web designer. ...
 Web programmer. ...
 Content developer. ... and Webmaster.

The OSI Model

In the OSI reference model, the communications between a computing
system are split into seven different abstraction layers: Physical, Data
Link, Network, Transport, Session, Presentation, and Application.

The 7 Layers of the OSI Model

Physical Layer:
The lowest layer of the OSI Model is concerned with electrically or
optically transmitting raw unstructured data bits across the network from
the physical layer of the sending device to the physical layer of the
receiving device. It can include specifications such as voltages, pin
layout, cabling, and radio frequencies. At the physical layer, one might
find “physical” resources such as network hubs, cabling, repeaters,
network adapters or modems.

Data Link Layer:

At the data link layer, directly connected nodes are used to perform
node-to-node data transfer where data is packaged into frames. The
data link layer also corrects errors that may have occurred at the
physical layer.
The data link layer encompasses two sub-layers of its own. The first,
media access control (MAC), provides flow control and multiplexing for
device transmissions over a network. The second, the logical link control
(LLC), provides flow and error control over the physical medium as well
as identifies line protocols.
WEB DEVELOPMENT

Network Layer:
The network layer is responsible for receiving frames from the data link
layer, and delivering them to their intended destinations among based
on the addresses contained inside the frame. The network layer finds
the destination by using logical addresses, such as IP (internet protocol).
At this layer, routers are a crucial component used to quite literally route
information where it needs to go between networks.

Transport Layer:
The transport layer manages the delivery and error checking of data
packets. It regulates the size, sequencing, and ultimately the transfer of
data between systems and hosts. One of the most common examples of
the transport layer is TCP or the Transmission Control Protocol.

Session Layer:
The session layer controls the conversations between different
computers. A session or connection between machines is set up,
managed, and termined at layer 5. Session layer services also include
authentication and reconnections.

Presentation Layer:
The presentation layer formats or translates data for the application layer
based on the syntax or semantics that the application accepts. Because
of this, it at times also called the syntax layer. This layer can also handle
the encryption and decryption required by the application layer.

Application Layer:
At this layer, both the end user and the application layer interact directly
with the software application. This layer sees network services provided
to end-user applications such as a web browser or Office 365. The
WEB DEVELOPMENT

application layer identifies communication partners, resource availability,

and synchronizes communication.

Most Popular Web Development Tools:

To build functioning websites efficiently and easily, there are various
tools that Web Developers can use. These tools allow them to build well-
functioning websites with friendly user interfaces. Some of the widely
used Web Development tools are as follows:

 GitHub
 Sass
 CodePen
 AngularJS
 TypeScript
 Sketch
 JQuery
 Sublime Text
 Bootstrap
 Grunt
 Chrome DevTools
 NPM
 Visual Studio Code

 GitHub an open-source, cloud-based Git repository hosting

service that offers a web-based graphical interface. GitHub is an
online software development platform. It's used for storing,
tracking, and collaborating on software projects.
 Sass stands for Syntactically Awesome Stylesheet. Sass is an
extension to CSS. Sass is a CSS pre-processor. Sass is
completely compatible with all versions of CSS. Sass reduces
repetition of CSS and therefore saves time.
 AngularJS is a Javascript open-source front-end framework that is
mainly used to develop single-page web applications(SPAs). It is a
WEB DEVELOPMENT

continuously growing and expanding framework which provides

better ways for developing web applications.
 TypeScript is a free and open source programming language .
It is a strict syntactical superset of JavaScript and adds optional
static typing to the language. It is designed for the development of
large applications and transpiles to JavaScript.
 jQuery is an open-source JavaScript library that simplifies the
interactions between an HTML/CSS document, or more precisely
the Document Object Model (DOM), and JavaScript. Elaborating
the terms, it simplifies HTML document traversing and manipulation,
browser event handling, DOM animations, Ajax interactions, and
cross-browser JavaScript development.
 Asynchronous JavaScript and XML (Ajax) refer to a group of
technologies that are used to develop web applications.
By combining these technologies, web pages appear more
responsive since small packets of data are exchanged with
the server and web pages are not reloaded each time that a
user makes an input change.
 Event Handling is the mechanism that controls the event
and decides what should happen if an event occurs.
 Cross-browser compatibility can be defined as the ability of
a website, application or script to support various web
browsers identically.

 Sublime Text is a shareware text and source code editor

available for Windows, macOS, and Linux. It natively supports
many programming languages and markup languages. Users can
customize it with themes and expand its functionality with plugins,
typically community-built and maintained
 A plug-in is a piece of software that adds new features or
extends functionality on an existing application.
 Bootstrap is a free, open source front-end development
framework for the creation of websites and web apps
WEB DEVELOPMENT

 Sketch is one of the best web development tools for designing

pixel-perfect graphics. It includes a robust vector-based design
toolkit that makes it easy to create all kinds of interfaces and
prototypes.
 A pixel is the smallest building block of a graphical
display like a computer screen.

 Grunt is a powerful JavaScript task runner for automating

repetitive tasks like unit testing, minification, and compilation. It
enables users to improve project efficiency by reducing
development time.
 Chrome Developer Tools are a set of web editing and
debugging tools built into the Google Chrome browser.
Using it, developers can easily view and update web pages’
styles, debug JavaScript code, and optimize website speed.
 Debugging is the process of finding and fixing errors or
bugs in the source code of any software.

 Node Package Manager(npm) is a JavaScript software registry

for sharing and deploying local or global packages.JavaScript
developers can use npm to find and install code packages for
their networking applications or server-side projects.
 Visual Studio Code is an open-source code editor that runs on
Windows, Linux, and macOS. It includes built-in features such
as syntax highlighting, auto-complete, and Git commands to
make coding faster and easier.
WEB DEVELOPMENT

Web Development Technologies:

To learn ‘What is Web Development?’ in-depth, you need to understand
and have knowledge of the technologies used in Web Development.
Below are some of the most common Web Development technologies
that every Web Developer should learn to work with:

 HTML
 Browsers
 Programming languages
 CSS
 Frameworks
 Databases
 Libraries
 Servers
 Clients
 Frontend Development
 Backend Development
 Protocols
 Data formats
 API

 HTML stands for HyperText Markup Language. It is used to

design web pages using the markup language. HTML is the
combination of Hypertext and Markup language. Hypertext
defines the link between the web pages and markup language
defines the text document within the tag that define the structure of
web pages.

HTML is used to create the structure of web pages that are displayed on
the World Wide Web (www). It contains Tags and Attributes that are used
to design the web pages. Also, we can link multiple pages using
Hyperlinks.
WEB DEVELOPMENT

The <a> tag defines a hyperlink, which is used to link from one page
to another.

HTML elements are represented by <>tags

This is the basic example of HTML that display the heading

<!DOCTYPEhtml>
<html>

<!-- Head Section content -->

<head>

<!-- Page title -->

<title>Basic Web Page</title>
</head>

 CSS (Cascading Style Sheets)is used to apply styles to web

pages. Cascading Style Sheets are fondly referred to as CSS. It is
used to make web pages presentable. The reason for using this is
to simplify the process of making web pages presentable. It allows
you to apply styles on web pages. More importantly, it enables you
to do this independently of the HTML that makes up each web
page.

Basic Format: It is the basic structure of CSS style of an webpage.

body {
background-color: lightgray;
}
h1{
color: green;
text-align: center;
}
p {
font-family: sans-serif;
font-size: 16px;
}
WEB DEVELOPMENT

 Languages:The Most Popular Web Development Languages

According to developers JavaScript, Angular js, Python, Ruby,
Swift, HTML, CSS and PHP( Hypertext Preprocessor) are the
most popular languages across web developers.
 A database is organized information stored in a dedicated
system. To process the data stored in the system,
 MySQL. ...
 MS SQL Server. ...
 PostgreSQL. ...
 MongoDB. ...
 IBM DB2. ...
 Redis. ...

 Libraries:The Web Development Library is a general

encompassing knowledge-base.
 jQuery library.
 React library.

 Servers: On the hardware side, a web server is a computer that

stores web server software and a website's component
files (for example, HTML documents, images, CSS stylesheets,
and JavaScript files). A web server connects to the Internet and
supports physical data interchange with other devices connected
to the web.
 Data formats: The three common data formats that we will
discuss are XML, JSON, and YAML, all of which are meant to
store and exchange data. XML stands for extensible markup
language, it is a markup language similar to HTML, that makes up
the internet webpages. JSON is short for JavaScript object
notation.
 API: Application Programming Interfaces (APIs) are constructs
made available in programming languages to allow
developers to create complex functionality more easily.
WEB DEVELOPMENT

Web Development Frameworks:

Web Development frameworks are created by Developers to make it
easier to develop and work with various programming languages. These
frameworks remove all the redundant and difficult tasks that are involved
in the process of setting up a web page. The frameworks either do the
tasks themselves or make it easier for Developers to complete those
tasks.

Below are a few frameworks that Web Developers generally use:

 Node.js: A JavaScript framework for server-side.

Node.js is an open-source and cross-platform runtime environment

built on Chrome’s V8 JavaScript engine for executing JavaScript
code outside of a browser. Node.js for building back-end services
like APIs, Web App, or Mobile App. It’s utilized in production by
large companies like Paypal, Uber, Netflix, Walmart, etc

 Ruby on Rails: A full-stack framework developed with the help

of Ruby.

Ruby on Rails or also known as rails is a server-side web

application development framework that is written in the Ruby
programming language.

It supports MVC(model-view-controller) architecture that provides

a default structure for database, web pages, and web services, it
also uses web standards like JSON or XML for transfer data
and HTML, CSS, and JavaScript for the user interface.

 Ionic: A mobile framework.

Ionic framework is an open-source UI toolkit for building

performant, high-quality mobile apps, desktop apps, and
WEB DEVELOPMENT

progressive web apps using web technologies such as HTML,

CSS, and JavaScript.

 Django: A full-stack framework developed in Python.

Django is a high-level Python web framework that enables rapid

development of secure and maintainable websites.

 Bootstrap: A user interface (UI) framework to develop using

CSS/HTML/JavaScript
 Cordova/PhoneGap: A mobile framework used to expose
native Android and iOS APIs to use while writing JavaScript
 WordPress: A CMS developed on PHP.

WordPress is an open-source content management system

(CMS) used to build websites.

 .NET: A full-stack framework developed by Microsoft.

.NET is a free, cross-platform, open source developer platform

for building many different types of applications. With . NET,
you can use multiple languages, editors, and libraries to build for
web, mobile, desktop, games, IoT, and more.

 Foundation: A UI framework used to build with

JavaScript/CSS/HTML.

Foundation is a free and open-source responsive front-end

framework, providing a responsive grid and HTML and CSS UI
components, templates, and code snippets, including typography,
forms, buttons, navigation and other interface elements, as well as
optional functionality provided by JavaScript extensions.

 Angular.js, Backbone.js, and Ember.js: Front-end

JavaScript frameworks.
WEB DEVELOPMENT

AngularJS is a Javascript open-source front-end framework that is

mainly used to develop single-page web applications(SPAs). It is a
continuously growing and expanding framework which provides
better ways for developing web applications. It changes the static
HTML to dynamic HTML.

 Drupal: A CMS framework developed using PHP.

Drupal is free, open source software that can be used by

individuals or groups of users -- even those lacking technical
skills -- to easily create and manage many types of Web sites.
The application includes a content management platform and a
development framework.

Front-End Technology:
HTML Introduction
The Most Popular Web Development LanguagesAccording to
developers HTML, CSS, JavaScript. These are the Front-End
Developing Languages. So Let’s have a look on HTML.

What is HTML ?
HTML stands for HyperText Markup Language. It is used to design web
pages using the markup language. HTML is the combination
of Hypertext and Markup language. Hypertext defines the link between
the web pages and markup language defines the text document within the
tag that define the structure of web pages.

 HTML consists of a series of elements

 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
WEB DEVELOPMENT

What is HTML used for?

HTML is used to create the structure of web pages that are displayed on
the World Wide Web (www). It contains Tags and Attributes that are used
to design the web pages. Also, we can link multiple pages using
Hyperlinks.

HTML Basic Format Page Structure

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Example Explained
 The <!DOCTYPE html> declaration defines that this document is
an HTML document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML
page
 The <title> element specifies a title for the HTML page
 The <body> element defines the document's body, and is a
container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a heading tag
 The <p> element defines a paragraph tag

Note: The content inside the <body> section will be displayed in a

browser. The content inside the <title> element will be shown in
the browser's title bar or in the page's tab.
WEB DEVELOPMENT

HTML Editors:
HTML text editors are used to create and modify web pages. HTML
codes can be written in any text editors including the notepad.
notepad One just
needs to write HTML in any text editor and save the file with an
extension “.html” or “.htm”. Some of the popular HTML text editors are
given below:
 Notepad
 Notepad++
 Sublime Text 3
 Atom
 Brackets

Notepad
Notepad is a simple text editor. It is an inbuilt desktop application
available in Windows OS.
WEB DEVELOPMENT

HTML Elements
The HTML element is everything from the start tag to the end tag:

<tagname>Content goes here...</tagname>

Examples of some HTML elements:

<h1>My First Heading</h1>

<p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>

HTML Attributes:
HTML attributes provide additional information about HTML elements.

 All HTML elements can have attributes

 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute:

The <a> tag defines a hyperlink. The href attribute specifies the URL of
the page the link goes to:

Example:

<a href="https://www.google.com">Visit google</a>

HTML Headings:
HTML headings are titles or subtitles that you want to display on a
webpage.

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

WEB DEVELOPMENT

<h1> defines the most important heading. <h6> defines the least
important heading.

CODE:
<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

OUTPUT:

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

HTML Styles:
The HTML style attribute is used to add styles to an element, such as
color, font, size, and more.
WEB DEVELOPMENT

Example
I am Red

I am Blue

I am Big
The HTML style attribute has the following syntax:

<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
CODE:
<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
</html>
WEB DEVELOPMENT

OUTPUT:

I am normal

I am red

I am blue

I am big
Background Color:
The CSS background-color property defines the background color for an
HTML element.

Example
Set the background color for a page to powderblue:

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

OUTPUT:

This is a heading
This is a paragraph.
WEB DEVELOPMENT

Another Example
Set background color for two different elements:
<body>

<h1 style="background-color:powderblue;">This is a
heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>
OUTPUT:

This is a heading

This is a paragraph.

Text Color:
The CSS color property defines the text color for an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
OUTPUT:

This is a heading

This is a paragraph.
WEB DEVELOPMENT

Fonts:
The CSS font-family property defines the font to be used for an HTML
element:

Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
OUTPUT:

This is a heading
This is a paragraph.

Text Size:
The CSS font-size property defines the text size for an HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
OUTPUT:

This is a heading
This is a paragraph.
Text Alignment:
The CSS text-align property defines the horizontal text alignment for an
HTML element:

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
WEB DEVELOPMENT

OUTPUT:

Centered Heading
Centered paragraph.

CSS Introduction
 CSS stands for Cascading Style Sheets.

 CSS is the language we use to style a Web page.

 CSS saves a lot of work. It can control the layout of multiple web
pages all at once.

 Cascading Style Sheets (CSS) is used to format the layout of a

webpage.

 CSS describes how HTML elements are to be displayed on

screen, paper, or in other media.
 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 Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}

h1 {
color: white;
WEB DEVELOPMENT

text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>

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

</body>
</html>
OUTPUT:

My First CSS Example

This is a paragraph.
WEB DEVELOPMENT

CSS Syntax

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.

Multiple CSS declarations are separated with semicolons, and

declaration blocks are surrounded by curly braces.

Example
In this example all <p> elements will be center-aligned, with a red text
color:
p{
color: red;
text-align: center;
}
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
WEB DEVELOPMENT

</style>
</head>
<body>

<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>

</body>
</html>
OUTPUT:
Hello World!

These paragraphs are styled with CSS.