UNIT3 – WEB DEVELOPMENT BASICS

SOFTWARE DEVELOPMENT LIFECYCLE

1. Planning: The planning phase involves defining the scope, objectives, and goals of the software
project. This includes identifying the project requirements, budget, timeline, and resources
required. Project managers and stakeholders collaborate to establish a project plan, determine
the project's feasibility, and assess potential risks.
2. Analysis: In the analysis phase, the development team gathers and analyzes the requirements
of the software system. They conduct interviews, workshops, and discussions with
stakeholders to understand their needs. This phase focuses on identifying functional and non-
functional requirements, documenting use cases, and creating a detailed system specification.
3. Design: The design phase involves creating a blueprint for the software system based on the
requirements gathered in the analysis phase. It includes defining the system architecture, data
structures, algorithms, and user interfaces. This phase also covers database design,
component design, and the creation of system flowcharts or diagrams.
4. Implementation: In the implementation phase, the development team translates the design
specifications into actual code. Programmers write code using the selected programming
languages, frameworks, and tools. This phase focuses on writing clean, modular, and
maintainable code that follows coding standards and best practices. It also involves integrating
different components or modules of the software.
5. Testing and Integration: The testing and integration phase aims to identify and fix defects or
issues in the software. It involves various levels of testing, including unit testing, integration
testing, system testing, and acceptance testing. Test cases are executed, and the software's
behavior and functionality are validated. Integration testing ensures that all components work
together seamlessly.
6. Maintenance: The maintenance phase begins after the software is deployed. It involves
monitoring the software's performance, addressing user-reported issues or bugs, and making
necessary updates or modifications. Maintenance may include applying patches, releasing
updates, enhancing features, and ensuring the software remains secure and compatible with
new technologies.

PROF.MANOJ KUMAR N 1
UNIT3 – WEB DEVELOPMENT BASICS

ELEMENTS OF WEB DEVELOPMENT

Web development encompasses various elements that work together to create functional and
visually appealing websites. Here are some key elements of web development:

1. HTML (Hypertext Markup Language): HTML is the standard markup language used to structure
and present content on the web. It defines the elements and layout of a webpage, such as
headings, paragraphs, images, links, and more.
2. CSS (Cascading Style Sheets): CSS is used to describe the presentation and visual styling of
HTML elements. It allows you to control the colors, fonts, layout, and overall design of a
webpage. CSS can be applied inline within HTML, in separate CSS files, or via CSS frameworks.
3. JavaScript: JavaScript is a programming language that enables interactivity and dynamic
behavior on websites. It allows you to create features such as form validation, image sliders,
interactive maps, and much more. JavaScript can be embedded directly in HTML or stored in
separate JavaScript files.
4. Backend Development: Backend development involves working with server-side technologies
and databases. Common backend languages include Python, PHP, Ruby, and Node.js. It focuses
on handling data, processing requests, and managing the logic behind the scenes to deliver
dynamic content to the user.
5. Frontend Development: Frontend development focuses on the user-facing aspects of a
website. It involves implementing the HTML, CSS, and JavaScript to create an engaging and
intuitive user interface (UI). Frontend developers strive to make websites responsive,
accessible, and compatible across different devices and browsers.
6. Web Frameworks: Web frameworks provide a structured environment for web development,
making it easier to build complex applications. Examples include Django (Python), Ruby on
Rails (Ruby), Laravel (PHP), and Express.js (Node.js). Frameworks offer pre-built components,
libraries, and tools that speed up development and enhance security.
7. Responsive Design: With the increasing use of mobile devices, responsive design has become
crucial. It involves designing websites to adapt and provide an optimal experience across
various screen sizes and resolutions. Responsive design ensures that the content and layout
adjust automatically to fit desktops, tablets, and smartphones.
8. Web Accessibility: Web accessibility aims to make websites usable and accessible to people
with disabilities. It involves implementing design and development practices that
accommodate individuals with visual, auditory, cognitive, or physical impairments. Adhering
to accessibility guidelines ensures inclusivity and enhances user experience for all visitors.
9. Version Control: Version control systems like Git enable developers to manage and track
changes to their codebase effectively. They allow multiple developers to collaborate, maintain
different versions of the code, and roll back to previous versions if needed. Git repositories
provide a reliable way to manage and organize code during the development process.
10. Testing and Debugging: Testing and debugging are essential aspects of web development to
ensure the functionality and stability of a website. Various testing approaches, such as unit
testing, integration testing, and user acceptance testing, help identify and fix bugs, optimize
performance, and validate the user experience.
11. Deployment and Hosting: Once a website is developed, it needs to be deployed to a web server
for public access. Web developers work with hosting providers or set up their own servers to
make the website accessible to users. Deployment involves configuring the server, transferring
files, and ensuring proper functioning in the live environment.

PROF.MANOJ KUMAR N 2
UNIT3 – WEB DEVELOPMENT BASICS

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.
Web Development can be classified into two ways:
• Frontend Development
• Backend Development

Frontend Development

The part of a website where the user interacts directly is termed as front end. It is also
referred to as the ‘client side’ of the application.

Frontend Roadmap

Frontend Development Roadmap

Popular Frontend Technologies

PROF.MANOJ KUMAR N 3
UNIT3 – WEB DEVELOPMENT BASICS

• 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 all browsers (IE, Firefox, and Chrome) and for all
sizes of screens (Desktop, Tablets, Phablets, and Phones).
• Bootstrap 4
• Bootstrap 5

Frontend Libraries and Frameworks

HTML
CSS
• CSS Frameworks
• Bootstrap
• Tailwind CSS
• Bulma
• Foundation
• Primer CSS
• Spectre CSS
• Materialize CSS
• Onsen UI
• Semantic UI
• Blaze UI
• Pure CSS
• CSS Preprocessors
• SASS
• LESS
JavaScript
• JavaScript Technology
• ES6
• TypeScript
• JavaScript Frameworks
• AngularJS
• Angular ngx Bootstrap
• Angular PrimeNG
• VueJS
• NuxtJS
• script.aculo.us
• Ember.js

PROF.MANOJ KUMAR N 4
UNIT3 – WEB DEVELOPMENT BASICS

• Handlebar.js
• Backbone.js
• JavaScript Libraries
• jQuery
• jQuery UI
• jQuery Mobile
• jQWidgets
• jQuery EasyUI
• ReactJS
• NextJS
• Ant Design
• React Desktop
• React Rebass
• React Bootstrap
• React Reactstrap
• BlueprintJS
• React Suite
• React.js Evergreen
• React Material UI
• P5.js
• Fabric.js
• D3.js
• Collect.js
• Underscore.js
• Lodash
• TensorFlow.js

Backend Development

Backend is the server side of a website. It is part of the website that users cannot see and
interact with. It is the portion of software that does not come in direct contact with the
users. It is used to store and arrange data.

Backend Roadmap

PROF.MANOJ KUMAR N 5
UNIT3 – WEB DEVELOPMENT BASICS

Backend Development Roadmap

Popular Backend Technologies

• 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
languages. 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 and Technology:
PHP
• Framework: Laravel
• CMS: WordPress
NodeJS
• Framework: Express
Python
• Framework: Django
• Package Manager: Python PIP
Ruby
• Framework: Ruby on Rails
Java
• Framework: Spring, Hibernate
C#
• Framework: .NET
Database:
• Relation Database
• Postgre SQL
• MariaDB

PROF.MANOJ KUMAR N 6
UNIT3 – WEB DEVELOPMENT BASICS

• MySQL
• NOSQL

CLIENT SIDE AND SERVER SIDE SCRIPTING

Difference between client-side scripting and server-side scripting :

Client-side scripting Server-side scripting

Source code is not visible to the user because

its output
Source code is visible to the user.
of server-sideside is an HTML page.

Its primary function is to manipulate and

Its main function is to provide the
provide access to the respective database as
requested output to the end user.
per the request.

In this any server-side technology can be used

It usually depends on the browser and it does not
and its version. depend on the client.

It runs on the user’s computer. It runs on the webserver.

There are many advantages linked

The primary advantage is its ability to highly
with this like faster.
customize, response
response times, a more interactive
requirements, access rights based on user.
application.

It does not provide security for data. It provides more security for data.

It is a technique used in web It is a technique that uses scripts on the

development in which scripts run on webserver to produce a response that is
the client’s browser. customized for each client’s request.

PROF.MANOJ KUMAR N 7
UNIT3 – WEB DEVELOPMENT BASICS

Client-side scripting Server-side scripting

HTML, CSS, and javascript are

PHP, Python, Java, Ruby are used.
used.

No need of interaction with the

It is all about interacting with the servers.
server.

It reduces load on processing unit of

It surge the processing load on the server.
the server.

MVC Architecture
There is a lot of software design pattern used for developing any application. During early days
of application development, the approach of designing the User Interface, building the business
logic as well as coding the logic part for the application was programmed and prepared in a
single file which usually created lack of maintenance, make testing of application uneasy as
well as reduce the scalability of any application. To overcome this, a model came into existence
and gradually became popular. In this chapter, you will learn about the MVC architecture and
its benefits.
MVC is abbreviated as Model View Controller is a design pattern created for developing
applications specifically web applications. As the name suggests, it has three major parts. The
traditional software design pattern works in an "Input - Process - Output" pattern whereas MVC
works as "Controller -Model - View" approach. With the emergence of the MVC model,
creation of application takes different aspects individually into consideration. These aspects of
the application are:

• UI Logic
• Input logic
• Business Logic

But there is a loose coupling between these aspects or elements. According to this
model, each element needs to exist in an application but not tightly connected or
interlinked. The UI logic deals with the view or front end of the application. The Input
logic deals with the controller. Lastly, business logic deals with the model of an
application. This loosely coupled element helps developers handle development
complication when building any application. It helps users' enables in focus on one
specific element of the implementation at a time. Take a scenario where you are
working with business; you can specifically deal with that and focus on the business
logic building without depending on the view logic.

PROF.MANOJ KUMAR N 8
UNIT3 – WEB DEVELOPMENT BASICS

History of MVC

MVC was introduced by Dr. Trygve Reenskaug into Smalltalk-76 programming

language when he visited the Xerox Palo Alto Research Center (PARC) in mid-1970.
Later the implementation became popular in other versions of Small-Talk. Then in
the year 1988, the articles in "The Journal of Object Technology (JOT)" bring the
whole picture of MVC as a well-accepted concept.

The different versions of MVC later came into existence with the requirement for
application designing. These are:

• Hierarchical model-view-controller (HMVC).

• Model-view-presenter (MVP).
• Model-view-adapter (MVA).
• Model-view-viewmodel (MVVM) and some others.

Let us discuss the three components of MVC in brief:

1. Model: The Model encloses the clean application related data. But the model
does not deal with any logic about how to present the data.
2. View: The View element is used for presenting the data of the model to the
user. This element deals with how to link up with the model's data but doesn't
provide any logic regarding what this data all about or how users can use
these data.
3. Controller: The Controller is in between the model and the view element. It
listens to all the incident and actions triggered in the view and performs an
appropriate response back to the events.

Benefits of Using MVC Architecture

• Logical clustering of related acts on any controller can be achieved through

MVC.

PROF.MANOJ KUMAR N 9
UNIT3 – WEB DEVELOPMENT BASICS

• Various developers can work at the same time on different parts the same
application-controller, model, and the views part.
• In MVC, models can have numerous views.

Client-side Technologies

1. HTML (Hypertext Markup Language): HTML is the backbone of web pages. It

provides a structure for organizing content on a web page using elements such as
headings, paragraphs, lists, images, links, and more. HTML tags define the structure
and semantics of the content.
2. CSS (Cascading Style Sheets): CSS is used to style the HTML elements defined in the
markup. It allows developers to control the layout, colors, fonts, and other visual aspects
of a web page. CSS uses selectors to target specific elements and apply styles using
properties like color, font-size, margin, padding, and more.
3. JavaScript: JavaScript is a programming language that adds interactivity and dynamic
functionality to web pages. It can handle user events like button clicks, form
submissions, and mouse movements. JavaScript can manipulate HTML and CSS,
dynamically modify the content and appearance of web pages, and interact with servers
to fetch or send data.
4. DOM (Document Object Model): The DOM represents the structure of an HTML or
XML document as a tree-like model. It provides a way for JavaScript to access and
manipulate the elements and content of a web page. With the DOM, developers can
dynamically create, modify, or remove elements, change styles, and handle events.
5. jQuery: jQuery is a JavaScript library that simplifies DOM manipulation, event
handling, and AJAX interactions. It provides a concise and cross-browser compatible
syntax for common tasks, allowing developers to write less code. jQuery makes it easier
to traverse the DOM, handle events, animate elements, and perform AJAX requests.
6. Bootstrap: Bootstrap is a popular front-end framework that provides a collection of pre-
designed CSS and JavaScript components. It helps developers build responsive and
mobile-first web pages more easily. Bootstrap offers a grid system for responsive
layouts, typography, forms, buttons, navigation menus, modals, and other UI
components.
7. React: React is a JavaScript library for building user interfaces. It allows developers to
create reusable UI components and efficiently update and render them when the
underlying data changes. React follows a component-based architecture, where each
component manages its own state and can be composed to build complex UI
hierarchies.
8. Angular: Angular is a TypeScript-based framework for building web applications. It
provides a comprehensive set of features for developing scalable and maintainable
applications. Angular offers two-way data binding, dependency injection, routing, form
handling, and other tools for building complex UIs and managing application state.
9. Vue.js: Vue.js is a progressive JavaScript framework for building user interfaces. It
emphasizes simplicity and ease of integration into existing projects. Vue.js offers
reactive data binding, a component-based architecture similar to React, and a virtual
DOM for efficient rendering. It can be used for both small and large-scale applications.
10. TypeScript: TypeScript is a superset of JavaScript that adds static typing and additional
features to the language. It helps catch errors during development and provides better
tooling and code organization. TypeScript allows developers to write more

PROF.MANOJ KUMAR N 10
UNIT3 – WEB DEVELOPMENT BASICS

maintainable and scalable code, especially in larger projects, by enforcing type checks
and providing enhanced editor support.

HYPER TEXT MARKUP LANGUAGE

What is HTML?
HTML is the abbreviation for Hypertext Markup Language. This standard markup language is
used for the creation of web pages. HTML consists of the elements that guide the browser about
how to display the content, and a simple HTML document consists of the tags.
HTML is the standard language that is used for designing the content on the website. Cascading
Style Sheets (CSS) and Javascript (JS) are the technologies that help the HTML perform better
while designing a website. Hence these technologies can be used along with the HTML.
HTML is responsible for rendering the HTML documents from the local memory locations and
web servers to the multimedia pages. HTML includes cues of the actual document.
Additionally, it also describes the structure of the web page.

History and Development of HTML

• Elements in HTML act as the building blocks for HTML pages. Interactive forms can
also be added to the rendered page, including constructs, images, and other objects.
Structured documents can be created with the help of HTML, and it is possible with the
help of structural semantics like headings, lists, paragraphs, quotes, links, and other
items. Angle bracket is used for the tags that form the HTML elements. Some tags can
directly input content to the page, for example tags like <img/> and <input/>. However,
many tags like <p> surround the content and provide the information of a document.
Such tags may include sub-elements. The task of the browser is not to display the tags
but interpret the page's content and display it to the user.
• Programs written in other scripting languages, such as JavaScript, can be embedded in
the HTML. The look and layout of the content can also be changed by the inclusion of
CSS. The use of CSS is encouraged by the World Wide Consortium (W3C), which
currently maintains CSS standards and is formerly responsible for the HTML standards.
• Tim Berners-Lee was a physicist and a contractor at CERN. He proposed a system for
using and sharing information; the prototype was known as ENQUIRE. Berners went
on to propose an internet-based system which was a hypertext system in 1989. In 1990,
Berners-Lee wrote browser and server software along with specifying HTML. Berners
Lee and Robert Cailliau collaborated for funding; however, CERN didn't adopt their
project formally. Robert Cailliau was a data system engineer at CERN. He also listed
the areas in which hypertext can be used, and the encyclopedia was first. It was the list
stated in his notes.
• "HTML Tags" was the first description of the HTML document that was available
publicly, and it was mentioned by Tim Berners-Lee for the first time in 1991. There
were about 18 elements that consisted of initial and simple HTML design.

PROF.MANOJ KUMAR N 11
UNIT3 – WEB DEVELOPMENT BASICS

• Some of the elements still exist in HTML 4, and these are about 11. These were
influenced by the Standard Generalized Markup Language (SGML)-based
documentation. SGML is in house documentation format at CERN.
• HTML is used to compose text, images, etc. into web pages; it is used to interpret the
content as a markup language.
Tags in HTML
There are many tags in HTML which facilitate the process of describing web page to the server.
These tags are arranged in a specific manner to get the desired output. Some of the important
tags of HTML are discussed below -
• <!Doctype> - It describes the type of document
• <html> - describes that the document is an html document
• <title> - describes title of the document
• <body> - describes the body of the document
• <h1> to <h6> - describes the headings in html
• <p> - describes a paragraph
• <br> - produces a line break of single line
• <hr> - describes a thematic content change
• <!--?--> - Describes a comment
Tags in html are useful entities that allow a developer to manipulate the look and functionalities
of a web page. Additionally, some of the tags have closing tags that include a forward slash,
indicating a closing tag. Examples of the closing tags are body, title, and html. However, some
tags do not have closing tags; examples of such tags are <br> and <img>. Such elements are
often known as empty or void elements in HTML.
Other useful tags in html are -
1. <b> - It is used to bold the written text.
2. <i> - It is used to make the written text italic.
3. <u> - It is used to underline the content written in the tag.
4. <li> - It is used to form a list in the content.
5. <ol> - It is used to form an ordered list in the content.
6. <ul> - It is used to form an unordered list in the content.
7. <marquee> - Adds scrolling effect to the text or image in the content.
Elements in HTML
HTML elements are enclosed by a starting tag and a closing tag and contain other content in
them. The closing tags are closed using a forward slash. However, some elements do not require
closing tags, and these are known as void elements.

PROF.MANOJ KUMAR N 12
UNIT3 – WEB DEVELOPMENT BASICS

HTML Tags HTML Elements

Tags in HTML hold the HTML element. Elements in HTML hold the content.

Tags in HTML start with '<' and end with HTML elements are described as
'>'. anything that is written within the tags.

Tags in HTML are similar to the keywords, General content is specified by the
and each tag has a specific meaning. HTML element.

Uses of HTML
HTML acts as the markup language which is used for the creation of web pages and web
applications. It is excessively utilized in web development when combined with JavaScript and
CSS.
Some of the most important applications of HTML are listed below
• Web Development:
Creating web pages is one of the most used applications of HTML. All pages contain
some tags, and these tags define the pages and hyperlinks are used to connect the pages.
Every page is written with the help of HTML code.
• Web Document Creation:
Another use of HTML is in document creation. Document creation is done using the
basic tags and Document Object Model (DOM). There are three sections of the web
document: title, head, and body. The information that identifies the document, such as
the title and important keywords, is included in the head. The title is visible in the
browser, whereas the body section contains the main content viewed by the consumer.
These sections are created using HTML tags, and it is done using specific tags for a
purpose. Hence the title, head, and body are kept in a loop.
• Internet Navigation:
Internet navigation is possible through hypertext functionality. It is one of the most
widely used functions of HTML. It is the text that refers the user to another webpage,
facilitating the user to navigate easily. It makes navigation within the web pages and
easy, even if these are on different servers.
• Cutting Edge Feature:
HTML5 is the game-changer in the website development business. HTML5 has the
latest set of standards and APIs that can be perfectly implemented using Google
Chrome.
• Responsive images on web pages:
Responsive images can be set up using queries. The developer can fully control how
the user can render the image, and it can be done using the srcset attribute of the img
element by combining it with picture elements. Hence images with size variations can
be uploaded.

PROF.MANOJ KUMAR N 13
UNIT3 – WEB DEVELOPMENT BASICS

• Use in Game Development:

The advent of HTML5 and CSS3 and a light-fast JavaScript engine provide a rich
experience to the user. For game development, most of the API features can be utilized
while others can be eliminated.
• Data Entry Support with HTML:
Data entry work can be easily carried out using HTML5. Using the HTML5 standards
and APIs, the fields such as text, data, etc., can be added. It is useful for data entry, and
end-user will have better data entry.

Cascading Style Sheets

Like HTML, CSS is not a programming language. It's not a markup language either. CSS is a
style sheet language. CSS is what you use to selectively style HTML elements. For example,
this CSS selects paragraph text, setting the color to red:
p{
color: red;
}

To make the code work, we still need to apply this CSS (above) to your HTML document. Otherwise,
the styling won't change the appearance of the HTML. (If you haven't been following our project, pause
here to read Dealing with files and HTML basics.)
Open your index.html file. Paste the following line in the head (between the <head> and </head> tags):
HTML
<link href="styles/style.css" rel="stylesheet" />
Save index.html and load it in your browser. You should see something like this:

PROF.MANOJ KUMAR N 14
UNIT3 – WEB DEVELOPMENT BASICS

Anatomy of CSS Ruleset

PROF.MANOJ KUMAR N 15
UNIT3 – WEB DEVELOPMENT BASICS

The whole structure is called a ruleset. (The term ruleset is often referred to as just
rule.) Note the names of the individual parts:

• Selector
This is the HTML element name at the start of the ruleset. It defines the element(s) to
be styled (in this example, <p> elements). To style a different element, change the
selector.
• Declaration
This is a single rule like color: red;. It specifies which of the element's properties you
want to style.
• Properties
These are ways in which you can style an HTML element. (In this example, color is a
property of the <p> elements.) In CSS, you choose which properties you want to
affect in the rule.
• Property value
To the right of the property—after the colon—there is the property value. This
chooses one out of many possible appearances for a given property. (For example,
there are many color values in addition to red.)

Note the other important parts of the syntax:

• Apart from the selector, each ruleset must be wrapped in curly braces. ({})
• Within each declaration, you must use a colon (:) to separate the property from its value
or values.
• Within each ruleset, you must use a semicolon (;) to separate each declaration from
the next one.

To modify multiple property values in one ruleset, write them separated by semicolons,
like this:

CSS –

p{
color: red;
width: 500px;
border: 1px solid black;
}

Selecting multiple elements

You can also select multiple elements and apply a single ruleset to all of them. Separate
multiple selectors by commas. For example:

PROF.MANOJ KUMAR N 16
UNIT3 – WEB DEVELOPMENT BASICS

CSS

p,
li,
h1 {
color: red;
}

Different types of selectors

There are many different types of selectors. The examples above use element selectors, which
select all elements of a given type. But we can make more specific selections as well. Here
are some of the more common types of selectors:

Selector name What does it select Example

Element selector
All HTML elements of the p
(sometimes called a selects <p>
specified type.
tag or type selector)
The element on the page with the
#my-id
specified ID. On a given HTML
ID selector selects <p id="my-id"> or <a id="my-
page, each id value should be id">
unique.
The element(s) on the page with
.my-class
the specified class. Multiple
Class selector selects <p class="my-class"> and <a
instances of the same class can class="my-class">
appear on a page.
img[src]
The element(s) on the page with selects <img
Attribute selector
the specified attribute. src="myimage.png"> but not <img>
The specified element(s), but only a:hover
when in the specified state. (For selects <a>, but only when the
Pseudo-class selector mouse pointer is hovering over
example, when a cursor hovers
over a link.) the link.

CSS Types –
Cascading Style Sheets (CSS) is a stylesheet language used to control the presentation and
layout of HTML documents. There are different types of CSS that can be applied to web
pages. Here are the main types:

1. Inline CSS: Inline CSS is applied directly to individual HTML elements using the
style attribute. It is specified within the HTML tag and affects only that specific
element. Inline CSS has the highest level of specificity, which means it takes
precedence over other types of CSS.
Example:

PROF.MANOJ KUMAR N 17
UNIT3 – WEB DEVELOPMENT BASICS

<p style="color: blue; font-size: 16px;">This is a paragraph with inline CSS.</p>

Internal or Embedded CSS: Internal CSS is defined within the <style> element in the <head>
section of an HTML document. It affects all elements on the same page and is useful when
you want to apply styles to multiple elements without using inline CSS.
Example:

<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Hello, Internal CSS!</h1>
<p>This is a paragraph styled using internal CSS.</p>
</body>
</html>

External CSS: External CSS is placed in a separate file with a .css extension. This file
contains CSS rules that can be linked to multiple HTML pages. Using external CSS promotes
better organization and maintainability, as it allows you to separate the structure (HTML)
from the presentation (CSS).
Example (styles.css file):

/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: green;
}

Example (HTML file):

/* styles.css */
body {
font-family: Arial, sans-serif;

PROF.MANOJ KUMAR N 18
UNIT3 – WEB DEVELOPMENT BASICS

background-color: #f0f0f0;
}
h1 {
color: green;
}

Using cascading style sheets, you can apply consistent styling across your website, making it
more visually appealing and easier to maintain.

JavaScript Introduction:
JavaScript is a high-level, interpreted programming language primarily used for web
development. It is a versatile language that allows developers to add interactivity and
dynamic content to websites. Originally created by Brendan Eich at Netscape in 1995,
JavaScript has since become one of the most popular and widely used programming
languages.

Features of JavaScript:

1. Client-Side Scripting: JavaScript runs on the client-side (in the web browser),
allowing it to manipulate the Document Object Model (DOM) and interact with web
page elements dynamically.
2. Versatility: JavaScript can be used for various purposes, such as creating web
applications, games, server-side applications (Node.js), mobile apps, and more.
3. Event-Driven: JavaScript is event-driven, meaning it can respond to user actions like
clicks, form submissions, and keyboard events.
4. Lightweight and Interpreted: JavaScript does not require compilation and is
lightweight, making it easy to integrate into web pages.
5. Object-Oriented: JavaScript supports object-oriented programming, allowing
developers to create reusable code through objects and classes.
6. Wide Community and Libraries: JavaScript has a vast and active community, and
there are many libraries and frameworks (e.g., React, Angular, Vue.js) that extend its
capabilities and make development faster and more efficient.
Why Use JavaScript:
Enhanced User Experience: JavaScript enables dynamic content and interactivity on web
pages, making the user experience more engaging and responsive.
Client-Side Validation: JavaScript can validate user input on the client-side, reducing the
need to send requests to the server for validation.
Asynchronous Operations: With asynchronous programming, JavaScript allows you to
perform tasks without blocking other operations, improving page performance.
Cross-Browser Compatibility: JavaScript is supported by all major web browsers, ensuring
your code works consistently across different platforms.

PROF.MANOJ KUMAR N 19
UNIT3 – WEB DEVELOPMENT BASICS

Extensibility: You can use various libraries and frameworks to extend JavaScript's
functionality and streamline development.
Example JavaScript Program:
Here's a simple JavaScript program that prompts the user for their name and then displays a
personalized greeting:

html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Greeting Example</title>
</head>
<body>
<script>
// Prompt the user for their name
var userName = prompt("What is your name?");

// Check if the user provided a name

if (userName) {
// Display the personalized greeting
var greeting = "Hello, " + userName + "! Welcome to our website!";
alert(greeting);
} else {
// If the user didn't provide a name, display a default greeting
alert("Hello, guest! Welcome to our website!");
}
</script>
</body>
</html>

PROF.MANOJ KUMAR N 20
UNIT3 – WEB DEVELOPMENT BASICS

Bootstrap
Bootstrap is a popular and widely used front-end framework for building responsive and mobile-first
websites and web applications. It was originally developed by Twitter and is now an open-source
project, maintained by a community of developers. Bootstrap provides a set of pre-designed HTML,
CSS, and JavaScript components, making it easier for developers to create attractive, consistent, and
functional user interfaces.

Key Features of Bootstrap:

Responsive Grid System: Bootstrap's grid system allows developers to create responsive layouts that
adapt to various screen sizes, ensuring that websites look great on both desktops and mobile devices.

CSS Components: Bootstrap includes a wide range of reusable CSS components, such as buttons,
forms, navigation bars, modals, cards, and more, that can be easily customized and integrated into
your project.

JavaScript Plugins: Bootstrap comes with a set of JavaScript plugins that add interactivity and
functionality to the components. Examples include carousels, dropdowns, modals, tooltips, and
popovers.

Extensive Documentation: Bootstrap has well-documented guidelines and examples that help
developers understand how to use its features effectively.

Browser Compatibility: Bootstrap is designed to work consistently across different browsers, ensuring
a smooth user experience for all users.

Customizable: While Bootstrap provides a default theme, it is highly customizable. Developers can
easily change colors, fonts, and other styles to match their project's design requirements.

Community and Support: As an open-source project, Bootstrap benefits from a large and active
community of developers, providing ongoing support, bug fixes, and continuous improvement.

Advantages of Using Bootstrap:

Faster Development: Bootstrap's pre-designed components and responsive grid system speed up the
development process, allowing developers to focus more on application logic rather than spending
time on UI development from scratch.
PROF.MANOJ KUMAR N 21
UNIT3 – WEB DEVELOPMENT BASICS

Consistency: Bootstrap ensures a consistent look and feel across different pages and devices,
providing a better user experience.

Responsive Design: With Bootstrap's responsive grid system, your website will automatically adapt to
various screen sizes, making it mobile-friendly and accessible to a wider audience.

Well-Tested and Proven: Being widely used and extensively tested, Bootstrap is a stable and reliable
framework with excellent browser compatibility.

Community Support: The active Bootstrap community ensures that developers can find solutions to
common issues and access a wide range of third-party resources, themes, and plugins.

Example of Bootstrap Usage:

Below is a simple example of a Bootstrap-based HTML template:

html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<!-- Add the Bootstrap CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Hello, Bootstrap!</h1>
<p>This is a simple Bootstrap example.</p>
<button class="btn btn-primary">Click me!</button>
</div>

PROF.MANOJ KUMAR N 22
UNIT3 – WEB DEVELOPMENT BASICS

<!-- Add the Bootstrap JavaScript -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

AngularJS Introduction
AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.
AngularJS extends HTML attributes with Directives, and binds data to HTML with
Expressions.
• AngularJS is a JavaScript Framework
• AngularJS is a JavaScript framework written in JavaScript.
AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

AngularJS Extends HTML

AngularJS extends HTML with ng-directives.
The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML controls (input, select, textarea) to
application data.
The ng-bind directive binds application data to the HTML view.

AngularJS Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>

PROF.MANOJ KUMAR N 23
UNIT3 – WEB DEVELOPMENT BASICS

</html>

AngularJS Directives
As you have already seen, AngularJS directives are HTML attributes with an ng prefix.
The ng-init directive initializes AngularJS application variables.

AngularJS Example
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>

Alternatively with valid HTML:

AngularJS Example
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>

AngularJS Expressions
AngularJS expressions are written inside double braces: {{ expression }}.

AngularJS will "output" data exactly where the expression is written:

AngularJS Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>

AngularJS Applications
AngularJS modules define AngularJS applications.

PROF.MANOJ KUMAR N 24
UNIT3 – WEB DEVELOPMENT BASICS

AngularJS controllers control AngularJS applications.

The ng-app directive defines the application, the ng-controller directive defines the controller.
AngularJS Example
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>

Advantages of AngularJS:
1. Easy synchronization: AngularJS automatically keeps the data and the user interface
in sync, so when you change something in your code, it updates the webpage
instantly.
2. Reusable code: It allows developers to create small pieces of code that can be used in
different parts of the application, saving time and effort.
3. Simple data management: AngularJS helps manage data more efficiently, making it
easier to build complex web applications.
4. Lots of community support: Many developers use AngularJS, so there are plenty of
online resources and help available.
5. Easier coding: You focus on what you want to do, and AngularJS takes care of how
to do it, making coding less complicated.
Disadvantages of AngularJS:
1. Slower performance: For large applications, AngularJS might become slower due to
the way it manages data updates.
2. Steeper learning: It can be more challenging for beginners to grasp all the concepts
and use AngularJS effectively.
3. Outdated technology: AngularJS is not the latest version of Angular, so it might not
have the latest features and improvements.

PROF.MANOJ KUMAR N 25
UNIT3 – WEB DEVELOPMENT BASICS

4. Not the best for mobile apps: While it can work for mobile development, other
frameworks are better suited for building mobile applications.
5. Difficult to maintain: Without proper planning, the code can become messy and
harder to manage as the project grows.
6. Security concerns: If not handled carefully, AngularJS applications might be more
vulnerable to security risks.

CLIENT-SIDE VS SERVER-SIDE SCRIPTING

Working –
Client-side scripting and server-side scripting are two essential components of web
development that work together to create dynamic and interactive web applications.
Let's explain the working steps of each:
Client-side scripting:
1. Requesting the webpage: When a user opens a web page in their browser, the browser
sends a request to the server for the webpage's HTML, CSS, and JavaScript files.
2. Receiving HTML and CSS: The server responds by sending the HTML markup and
CSS styles to the user's browser.
3. Parsing HTML and rendering the page: The browser interprets the received HTML
and CSS and renders the webpage accordingly, displaying the content and layout to the
user.
4. Executing client-side scripts: When the browser encounters JavaScript code within
the HTML or included in separate script files, it executes the scripts. These scripts can
perform various tasks, such as manipulating the webpage's content, handling user
interactions, and making AJAX requests to the server to fetch additional data without
reloading the entire page.
5. User interactions: As the user interacts with the webpage, such as clicking buttons,
filling out forms, or scrolling, the client-side scripts respond to these actions, updating
the UI or performing other actions accordingly.

PROF.MANOJ KUMAR N 26
UNIT3 – WEB DEVELOPMENT BASICS

6. DOM manipulation: Client-side scripts interact with the Document Object Model
(DOM), a representation of the webpage's structure in the browser memory. They can
add, modify, or remove elements from the DOM, leading to dynamic changes in the
displayed content.
7. Validation and input processing: Client-side scripts often perform input validation to
ensure data entered by the user is correct before submitting it to the server. This can
help improve user experience by providing instant feedback on errors.
Server-side scripting:
1. Receiving client requests: When a user interacts with the webpage, such as submitting
a form or requesting additional data, the browser sends a request to the server.
2. Processing the request: The server receives the client's request and processes it based
on the server-side scripts and application logic. This may involve validating the data,
interacting with databases, or performing other necessary operations.
3. Database interaction: Server-side scripts often interact with databases to retrieve or
update data based on the client's request. This allows dynamic content to be served to
the user, personalized based on their interactions.
4. Generating HTML and data: After processing the request and gathering the required
data, the server-side scripts generate the appropriate HTML markup and possibly
additional JavaScript or CSS code to be sent back to the client.
5. Sending the response: The server sends the generated HTML, CSS, and JavaScript
files as a response to the client's request.
6. Rendering the updated page: The client's browser receives the server's response and
renders the updated webpage with the new content and modifications as needed.
7. Repeat and update: The client and server interactions can repeat as the user continues
to interact with the webpage, allowing for dynamic and interactive user experiences.

PROF.MANOJ KUMAR N 27
UNIT3 – WEB DEVELOPMENT BASICS

PERSONAL HOME PAGES

Personal Home Pages, commonly referred to as "personal websites" or "personal webpages,"
are individual websites created and maintained by individuals to showcase their interests, skills,
accomplishments, and personal information. These pages serve as a digital representation of
the individual's identity and can take various forms, depending on the owner's preferences and
objectives.
Features of Personal Home Pages:
1. About Me Section: Personal home pages typically include an "About Me" section,
providing information about the website owner, such as their name, background,
interests, hobbies, and professional accomplishments.
2. Resume or Portfolio: Many personal websites serve as online resumes or portfolios,
showcasing the owner's work, projects, skills, and experiences. This can be especially
beneficial for individuals in creative fields like web development, design, photography,
writing, etc.
3. Blog or Journal: Some personal websites feature a blog or journal where the owner
shares their thoughts, experiences, and updates regularly. This helps establish a
connection with visitors and can act as a platform for self-expression.
4. Contact Information: Personal home pages often include contact information, such as
an email address or contact form, allowing visitors to get in touch with the website
owner.
5. Social Media Links: Website owners may provide links to their social media profiles,
enabling visitors to connect with them on various social platforms.
6. Interactivity: Depending on the owner's skills and preferences, personal websites may
incorporate interactive elements, such as contact forms, surveys, or interactive widgets.
7. Design and Customization: Personal websites can be designed to reflect the owner's
personality and style. They may use various design elements, color schemes, fonts, and
layouts to create a unique look and feel.
8. Personal Projects: If the owner is involved in personal projects, they might showcase
them on the website. This could include writing samples, art projects, open-source
contributions, or any other work that reflects their interests and abilities.
Advantages of Personal Home Pages:
1. Online Presence: Having a personal website allows individuals to establish an online
presence and showcase their skills and accomplishments to a global audience.
2. Personal Branding: A well-designed personal website can contribute to personal
branding, creating a positive and professional image for the individual.
3. Networking and Opportunities: Personal websites can attract potential employers,
clients, collaborators, or like-minded individuals, leading to networking opportunities
and new professional or personal connections.
4. Creativity and Expression: Personal home pages offer a platform for creative
expression, allowing individuals to experiment with web design and content creation.

PROF.MANOJ KUMAR N 28
UNIT3 – WEB DEVELOPMENT BASICS

5. Centralized Information: Personal websites provide a centralized location for all the
relevant information about the website owner, making it easy for others to learn more
about them.
Disadvantages of Personal Home Pages:
1. Time and Effort: Creating and maintaining a personal website requires time, effort,
and sometimes technical knowledge, which can be a barrier for some individuals.
2. Privacy Concerns: Putting personal information online can raise privacy concerns, and
website owners must be cautious about what they share and with whom.
3. Limited Reach: Unless actively promoted or well-optimized for search engines,
personal websites may have limited visibility, reaching only a small audience.
4. Outdated Content: If not regularly updated, personal home pages can become
outdated, which might give a negative impression to visitors.
5. Costs: While some platforms offer free hosting, advanced features or a personalized
domain might come with additional costs.
Overall, personal home pages can be valuable tools for self-expression, personal branding, and
networking, but they require careful consideration and effort to be effective and relevant in
today's digital landscape.

Node.js
Node.js is an open-source, server-side JavaScript runtime environment that allows developers
to execute JavaScript code on the server. Traditionally, JavaScript was mainly used for client-
side scripting, running in web browsers to create interactive web pages. However, Node.js
extends JavaScript's capabilities to run on servers, enabling developers to build scalable and
high-performance server applications.
Key Features of Node.js:
1. Asynchronous and Non-Blocking I/O: Node.js uses an event-driven, non-blocking
I/O model, which allows it to handle multiple concurrent connections efficiently. This
makes it particularly suitable for real-time applications, such as chat applications,
online gaming, and streaming platforms.
2. Fast and Scalable: Thanks to its non-blocking I/O model, Node.js can handle a large
number of simultaneous connections without significant performance degradation,
making it highly scalable.
3. V8 JavaScript Engine: Node.js is built on Google's V8 JavaScript engine, which
compiles JavaScript code into machine code, resulting in fast execution.
4. NPM (Node Package Manager): Node.js comes with NPM, a powerful package
manager that provides access to thousands of open-source packages and libraries. This
simplifies the process of integrating third-party modules into Node.js applications.
5. Cross-Platform: Node.js is cross-platform, meaning it can run on various operating
systems, such as Windows, macOS, and Linux.

PROF.MANOJ KUMAR N 29
UNIT3 – WEB DEVELOPMENT BASICS

Common Use Cases of Node.js:

1. Web Servers: Node.js can be used to create web servers to handle HTTP requests and
serve dynamic content. It is particularly well-suited for building lightweight, fast web
servers.
2. Real-Time Applications: Asynchronous nature of Node.js makes it an excellent choice
for building real-time applications like chat applications, online gaming servers, and
collaborative tools.
3. APIs and Microservices: Node.js is commonly used to build APIs and microservices,
providing a backend for web and mobile applications.
4. Command Line Tools: Node.js can be used to create command-line tools for tasks like
code compilation, file processing, and automation.
5. Data Streaming: With its non-blocking I/O, Node.js is ideal for handling data
streaming applications, such as file uploads, video streaming, and data processing.
Advantages of Node.js:
1. Efficient and Fast: The asynchronous, non-blocking I/O model of Node.js allows for
efficient handling of concurrent connections, resulting in fast and responsive
applications.
2. Unified Language: Developers can use the same language (JavaScript) for both client-
side and server-side development, reducing the learning curve and promoting code
reusability.
3. Active Community and Ecosystem: Node.js has a vibrant and active community,
contributing to a vast ecosystem of open-source libraries and modules available through
NPM.
4. Scalability: Node.js is designed to be scalable, allowing applications to handle a large
number of concurrent users without performance degradation.
5. Developer Productivity: Node.js enables developers to be productive by providing a
simple and consistent programming interface for various tasks.
Disadvantages of Node.js:
1. Not Ideal for CPU-Intensive Tasks: Node.js is best suited for I/O-bound tasks. It may
not be the best choice for CPU-intensive tasks due to its single-threaded nature.
2. Callback Hell: The asynchronous nature of Node.js can lead to "callback hell," making
the code harder to read and maintain.
3. Newer Language Features: Node.js may not immediately support the latest
ECMAScript (JavaScript) features, as it relies on the V8 engine for JavaScript
execution, which might have a slight lag in adopting new language features.
Overall, Node.js is a powerful and popular server-side technology that has transformed the
landscape of web development, allowing developers to build fast, scalable, and real-time
applications using JavaScript.

PROF.MANOJ KUMAR N 30