BCA–503

WEB DESIGN CONCEPT

After the completion of the course, students are expected to have the ability to:

1. CO-1. Understand the internet related concepts that are vital in understanding web
application

development.

2. CO-2. Analyze and apply the role of markup languages like HTML, DHTML, and
XML in the

workings of the web and web applications.

3. CO-3. Programming web pages with JavaScript.

4. CO-4. Design and implement dynamic web pages using client side programming
Java Script

and also develop the web application using servlet and JSP.

Unit-1 Introduction: Introduction and web development strategies, history of web and
internet, protocols governing web, introduction to client-server computing, web applications,
web project, and web team.

Unit-2 Web Page Designing: HTML: List, table, images, frames, forms, CSS, document
type definition, object Models, presenting and using XML, XML Processors: DOM and
SAX, and dynamic HTML.

Unit-3Java script: Introduction, documents, forms, statements, functions, objects,

introduction to AJAX, and VB script.

Unit-4 Server Site Programming: Introduction to active server pages (ASP), introduction to
Java Server Page (JSP), JSP application design, JSP objects, conditional processing, declaring
variables and methods, sharing data between JSP pages.

Text Books:

1. Burdman, Jessica, “Collaborative Web Development” Addison Wesley.

2. Xavier, “Web Technology and Design”, New Age International.
3. Ivan Bayross, “HTML, DHTML, Java Script, Perl & CGI”, BPB Publication.

Reference Books:

1. Ramesh Bangia, “Internet and Web Design”, New Age International.

2. Deitel, “Java for programmers”, Pearson Education.
3. Uttam k. Roy, “Web Technologies”, Oxford.

By: Mr. Amrit Jaiswal 1

 Unit-1

Introduc.on to Web Technology

• Web technology refers to the various tools and techniques that are u@lized in the
process of communica@on between different types of devices over the internet.
• A web browser is used to access web pages. Web browser can be defined as
programs that display text, data, pictures, anima@on, and video on the internet.
• Linked resources on the World Wide Web can be accessed using soIware interfaces
provided by Web browsers.

Web technology can be classified is different sec@ons:

• World Wide Web (WWW): It is usually known as the Web. It is an informa@on system
where web resources and documents can be accessed through Uniform Resource
Locators (URL). All those are accessible over the internet and maybe interlinked
through hyperlinks.
• Web Browser: The web browser is an applica@on soIware to explore WWW. It
provides an interface between the server and the client and request to the server for
web documents and services. Some web browsers are Google Chrome, Mozilla
Firefox, MicrosoI Edge, Opera Mini, etc.
• Web Server: A web server is a computer that stores, processes, and delivers site files
to web browsers.
• Web Pages: A webpage is a digital document that is linked to the World Wide Web
and viewable by anyone connected to the internet has a web browser.

World Wide Web (WWW)

The World Wide Web is a system of interlinked hypertext documents accessed via the
internet. Web is a huge collec@on of pages of informa@on linked to each other around the
globe.

History of WWW

• WWW is created by Sir Tim Berners Lee in 1989 at CERN (European Organiza.on for
Nuclear Research is an intergovernmental organiza@on that operates the
largest par@cle physics laboratory in the world) in Geneva.
• In 1990, the first text only browser were setup and CERN scien@st could access
hypertext files and other informa@on at CERN. HTML was based on a subset of the
standard generalized markup language (SGML). To transfer HTML document to
remote sites a new protocol was devised called HTTP.
• In 1993, there are only about 50 websites worldwide. A browser that allowed user to
take advantages of the web’s graphical capabili@es was developed at the Na@onal
Center for Super Compu@ng Applica@on (NCSA). NCSA called the browser Mosaic.
• Web editor (First web browser), first web server (h_p://info.cern.ch).

By: Mr. Amrit Jaiswal 2

 Web Development Strategies

• It is the crea@on of an applica@on that works over the internet i.e., websites.
• Web development is done in two ways:
o Frontend Development
o Backend Development
• Frontend Development: The part of the website that the user interacts directly is
termed as front end. Also refers as ‘client-side’ of the applica@on.
o HTML
o CSS
o JavaScript
o AJAX
• Backend Development: It is referred as ‘server-side’ of the applica@on. Backend
development covers server-side development, applica@on integra@on, and ac@vi@es
like crea@ng libraries and wri@ng APIs. The backend por@on is built by using some
languages. These are men@oned below:
o Java
o PHP
o Python
o Node.js
o Ruby

Protocols governing web

Protocol: A network protocol is a mechanism or a set of procedures that enables devices to

communicate back and forth across the internet. To communicate together, two devices
must support the same protocol, or a gateway will need to be used to translate the
communica@on.
Or
A protocol is a set of rules that is used to communicate applica@ons to each other.

Gateway: A gateway is a network node used in telecommunica@ons that connects two

networks with different transmission protocols together. Gateways serve as an entry and exit
point for a network as all data must pass through or communicate with the gateway prior to
being routed.

Types of Protocol

There are three main types of network protocols:

• Network management protocols: These protocols set out policies designed to
monitor, manage, and maintain a network. Examples include SNMP, FTP, POP3 and
Telnet.
• Network communica.on protocols: A group of protocols used to establish rules and
formafng (such as syntax, synchroniza@on, and seman@cs) for exchanging data

By: Mr. Amrit Jaiswal 3

 across a network. Types of network communica@on protocols include TCP, UDP, IP,
HTTP, IRC, BGP and ARP.
• Network security protocols: Security protocols are protocols that use security
measures such as cryptography and encryp@on to protect data. Examples include
SFTP, SSL and HTTPS.

Some of the following protocols is:

TCP/IP Protocol: TCP is a protocol that converts data into packets so that it can be sent
between a server and a client. Organiza@ons use TCP to transfer content such as files, text,
images, and emails because it guarantees that the packets will be delivered accurately and in
the correct order.
It’s worth no@ng that TCP will establish a connec@on between the origin and the des@na@on
devices before a_emp@ng to transfer data. This three-way handshake is outlined briefly
below:
• The client or web browser sends the des@na@on server a Synchronize Sequence
Number (SYN).
• The des@na@on server sends an acknowledgement message known as SYN-ACK.
• The origin device receives the SYN-ACK message and generates an ACK
acknowledgement message, which finalizes the connec@on.

User Datagram Protocol (UDP): UDP is a communica@on protocol that’s designed to send
packets from one device to another on a network. Many organiza@ons use UDP as an
alterna@ve to TCP because it offers higher transfer speeds.
While this increase in speed comes at the cost of accuracy, UDP be_er supports video/audio
streaming services, online games, or voice-over-internet-protocol (VoIP) calls, which can
handle some degree of data loss.
Another key difference between the two is that UDP won’t a_empt to establish a connec@on
before sending packets on to the des@na@on. At the same @me, it also doesn’t guarantee the
delivery of data to the other device.

File Transfer Protocol: FTP is a network protocol that’s used to transfer files from one device
to another over an unencrypted TCP/IP connec@on. With FTP, a user can load up a web
browser or FTP client such as FileZilla or FTP Voyager and send up to 2GB at once.
Many organiza@ons use FTP because of its ability to send large files or lots of files at once in
a way that’s fast and efficient. Unfortunately, this efficiency comes at the cost of security as
FTP transmits all data in plain text.
For this reason, many organiza@ons opt to use a secure version of FTP called File Transfer
Protocol Secure Sockets Layer (FTPS), which func@ons the same but uses SSL encryp@on to
obscure the transferred data.

Hypertext Transfer Protocol (HTTP): HTTP is a communica@on protocol that enables systems
to communicate on the World Wide Web. With HTTP, a client will send a hypertext message
request to a web server asking for access to the resources needed to load a web page.
The server hos@ng the content will then respond and enable the client to load all the
necessary text, images and videos featured on the page. HTTP’s request-response cycle is
outlined briefly below:

By: Mr. Amrit Jaiswal 4

 • The client sends an HTTP request message to the web server to request access to the
web page content.
• The web server processes the request message.
• The web server sends a response message that includes the requested content or
web page.
• The client receives the message and loads the content in the web browser for the
end user to view.
There is also an encrypted version of HTTP called HTTPS, which uses SSL/TLS encryp@on to
encrypt requests and responses so they can’t be accessed by third par@es.

Simple Network Management Protocol (SNMP):

SNMP is an applica@on layer protocol that’s used to collect management informa@on from
devices such as computers, routers, switchers, firewalls and printers.
Network monitoring planorms oIen use SNMP to monitor the performance and status of
devices throughout a network in real @me.
The protocol works with an SNMP manager or soIware client sending SNMP GET requests
to SNMP-enabled devices.

Post Office Protocol:

POP3 is a network protocol that enables a server to retrieve emails from a remote server
and download them to the local device. Whenever the client connects to the server via TCP,
it automa@cally downloads all the new messages to it, making them accessible to the user
both online and off-line.
Email planorms like MicrosoI Outlook can use POP3 to collect email messages from remote
servers via TCP/IP so that they’re available off-line.

Simple Mail Transfer Protocol:

SMTP is a mail delivery protocol that allows a device to send and deploy email to a remote
endpoint with a TCP connec@on. Many providers including MicrosoI Outlook, Gmail and
Yahoo Mail use SMTP to send messages to remote servers.
Briefly, an organiza@on will first create an SMTP server, which employees can connect to and
communicate with via a mail user agent (MUA) or email client such as Gmail. Through this
connec@on, they can deliver emails to the SMTP server and other users.
Unlike POP3, SMTP cannot retrieve emails from a mailbox, and unlike POP3, it doesn’t
automa@cally delete emails.

Client Server Compu.ng

Client-server compu@ng is a model of compu@ng in which tasks or workloads are divided

between two types of computers or programs: the client and the server. In client server
compu@ng, the clients request a resource, and the server provides that resource. A server
may serve mul@ple clients at the same @me while a client is in contact with only one server.

By: Mr. Amrit Jaiswal 5

Components:
1. Client:
• A client is a computing device (like a desktop, laptop, smartphone, or a
software application) that requests services or resources from another
computer, typically a server.
• Clients are usually responsible for the user interface and rely on servers for
data, content, or application logic.
2. Server:
• A server is a powerful computer that provides services or resources to
multiple clients. It processes client requests and sends back the required
data or services.
• Servers manage tasks like hosting websites, databases, applications, and
file storage.

How Client-Server Interaction Works:

• The client sends a request to the server (e.g., asking for a webpage or data).
• The server processes the request and sends back the required response (e.g., the HTML of
a webpage, a file, or data from a database).
• This interaction typically takes place over a network, such as the internet or a local area
network (LAN).

Examples of Client-Server Systems:

• Web Browsing: The browser (client) requests a webpage from a web server, which
returns the content of the page.
• Email: An email client (like Outlook or Gmail) sends and receives emails by
communica@ng with email servers.
• Database Access: A client applica@on requests informa@on from a database server,
which retrieves and returns the requested data.

By: Mr. Amrit Jaiswal 6

Advantages:

• Centraliza.on: Resources, applica@ons, and data are centralized on the server, which
simplifies maintenance, updates, and security.
• Scalability: Servers can handle mul@ple clients simultaneously, making it possible to
scale the system by adding more servers as demand increases.
• Security: Since data is stored on the server, access control and security measures can
be centrally enforced.

Disadvantages:

• Single Point of Failure: If the server goes down, all clients lose access to the services
it provides.
• Cost: Sefng up and maintaining a server infrastructure can be costly, especially for
large systems.

Web Applica.on

A web applica@on is a soIware applica@on that runs on a web server and is accessed by
users through a web browser over a network, typically the internet or an intranet. Unlike
tradi@onal desktop applica@ons, which are installed locally on a computer, web applica@ons
are hosted online and do not require installa@on on individual devices.

Key Characteris@cs of Web Applica@ons:

1. Cross-PlaTorm Access: Web applications can be accessed from any device with a web
browser and an internet connection, regardless of the operating system (Windows,
macOS, Linux, iOS, Android, etc.).
2. No Installa.on Needed: Users don't need to install software on their devices. They
simply navigate to a URL in their web browser to access the application.
3. Client-Server Architecture: Web applications typically follow the client-server
architecture, where the client (web browser) interacts with the server (web server
hosting the application). The server processes the requests, performs necessary
computations, and returns the appropriate responses.
4. Real-Time Updates: Web applications are centrally hosted, so updates or changes to
the application are deployed on the server, making them instantly available to all users
without needing manual updates on individual devices.
5. Interac.ve User Interface: Modern web applications often provide rich, interactive
user interfaces that are similar to desktop applications, using technologies like
HTML5, CSS, and JavaScript.

Technologies Used in Web Applica@ons:

• Frontend (Client-Side):
o Languages: HTML, CSS, JavaScript.
o Frameworks/Libraries: React, Angular, Vue.js, Bootstrap, jQuery.

By: Mr. Amrit Jaiswal 7

 o Responsible for the user interface and interac@ons.
• Backend (Server-Side):
o Languages: JavaScript (Node.js), Python, PHP, Ruby, Java, C#, etc.
o Frameworks: Django, Express, Ruby on Rails, Spring, Laravel, etc.
o Responsible for processing data, business logic, and communica@ng with the
database.
• Databases:
o Databases store the data needed by the web applica@on, and can be
rela@onal (e.g., MySQL, PostgreSQL) or non-rela@onal (e.g., MongoDB, Redis).
• APIs (Application Programming Interfaces):
o Web applica@ons oIen use RESTful APIs or GraphQL to interact with external
services, exchange data, and perform ac@ons like retrieving or storing
informa@on.

Examples of Web Applica@ons:

• Google Docs: A cloud-based word processor that allows users to create, edit, and
share documents online.
• Gmail: A web-based email client where users can send, receive, and organize their
emails via a web browser.
• Facebook/TwiUer: Social media planorms that are fully accessible through a web
browser, offering interac@ve features like pos@ng updates, messaging, and more.
• eCommerce Sites: Planorms like Amazon or eBay where users can browse products,
make purchases, and manage their accounts.

Advantages of Web Applica@ons:

• Accessibility: Available anywhere with internet access and a web browser.

• PlaTorm Independence: Works across different opera@ng systems and devices.
• Centralized Updates: Updates are made on the server side, ensuring all users have
the latest version without requiring individual installa@ons.
• Cost-Effec.ve: Users don’t need to purchase or install soIware; many web apps are
available for free or through subscrip@on models.

Disadvantages of Web Applica@ons:

• Internet Dependence: Web applica@ons require a stable internet connec@on, though

some modern web apps can work offline to a limited extent.
• Performance: Complex web applica@ons may run slower than na@ve applica@ons,
depending on the speed of the network and the browser.

Web Project

A web project refers to the process of planning, designing, and developing a website or web
application. It typically involves multiple stages, from conceptualizing the idea to deploying
the final product. Web projects can range from simple websites, like blogs or personal
portfolios, to complex web applications, such as eCommerce platforms or social networking
sites.

By: Mr. Amrit Jaiswal 8

Key Phases of a Web Project:
• Planning:

• Goal: Create a simple web app where users can add, edit, delete, and manage tasks.
• Target Audience: Users who need a lightweight and easy-to-use task manager.
• Technology Stack: HTML, CSS, JavaScript (frontend); Node.js/Express (backend);
MongoDB (database).
Design:
• Create wireframes showing how the task list will look and where buttons (e.g., "Add
Task," "Delete Task") will be placed.
• Focus on user experience (UX) and user interface (UI) design.
• Ensure responsive design for multiple devices.
• Development:
• Frontend development (HTML, CSS, JavaScript) for the visual and interactive
components.
• Backend development (server, database, APIs) for logic and data management.
• Integrate the frontend and backend components.
• Testing:
• Conduct functionality tests to ensure features work as expected.
• Perform usability and performance testing.
• Test cross-browser and cross-device compatibility.
• Deployment:
• Set up hosting and domain configurations.
• Deploy the web project to a live server.
• Implement search engine optimization (SEO) and analytics.
• Maintenance:
• Monitor the project for bugs and security issues.
• Update the web application with new features and improvements.
• Provide ongoing support and maintenance.

Web Team

A web team is a group of professionals with different skill sets working together to plan,
design, develop, test, and maintain a web project. The composition of a web team varies
depending on the complexity and scale of the project, but it typically includes the following
roles:

Roles in a Web Team:

1. Project Manager:
o Oversees the en@re project from start to finish.
o Manages @melines, budgets, communica@on, and the team’s workload.
o Acts as the liaison between the client and the web team.
2. Frontend Developer:
o Responsible for the visual and interac@ve aspects of the web project.
o Works with HTML, CSS, and JavaScript to build the user interface.
o Ensures responsive design and browser compa@bility.

By: Mr. Amrit Jaiswal 9

 3. Backend Developer:
o Manages server-side logic, database interac@ons, and applica@on
programming interfaces (APIs).
o Works with programming languages such as Node.js, Python, PHP, Ruby, or
Java.
o Ensures that the web applica@on is secure, scalable, and efficient.
4. UI/UX Designer:
o Designs the look and feel of the website or web applica@on.
o Focuses on user experience (UX) by ensuring the design is user-friendly,
intui@ve, and engaging.
o Creates wireframes, prototypes, and final design layouts.
5. Full-Stack Developer (optional):
o Skilled in both frontend and backend development.
o Capable of handling the complete development process from design to
deployment.
6. Quality Assurance (QA) Tester:
o Tests the web applica@on for bugs, usability issues, and performance
problems.
o Conducts both manual and automated tests to ensure quality before
deployment.
7. DevOps Engineer (optional):
o Manages the deployment, hos@ng, and infrastructure of the web project.
o Implements con@nuous integra@on and con@nuous deployment (CI/CD)
pipelines.
o Ensures smooth and efficient deployment and scaling of the applica@on.
8. Content Creator/Copywriter:
o Writes and manages the content for the website, including text, images, and
media.
o Ensures that the content aligns with the project’s goals and is op@mized for
SEO.
9. SEO Specialist (optional):
o Op@mizes the website for search engines.
o Ensures that the site follows best prac@ces for ranking higher in search
results.
10. Business Analyst (optional):
o Analyzes client requirements and translates them into technical specifica@ons
for the development team.
o Ensures that the project meets business goals and user needs.

Collabora@on Tools:

• Project Management: Jira, Trello, Asana.

• Design: Figma, Adobe XD, Sketch.
• Code Repositories: GitHub, GitLab, Bitbucket.
• Communica.on: Slack, MicrosoI Teams, Zoom.

By: Mr. Amrit Jaiswal 10

Each role in the web team is essen@al for delivering a successful web project, with
collabora@on and communica@on being key to ensuring the project's comple@on on @me
and within budget.

Topic- I

Web Casting

Webcas@ng refers to the process of broadcas@ng live or recorded audio or video content
over the internet. Webcas@ng is widely used for various purposes, including business
presenta@ons, webinars, live events, entertainment shows, and educa@onal content.

Various Web Cas-ng Techniques

1. Live Webcas.ng:
o Defini.on: Broadcas@ng live events in real @me over the internet.
o Use Cases: Sports events, conferences, concerts, webinars.
o Technology: Requires encoding soIware/hardware, content delivery
networks (CDNs), and streaming planorms like YouTube Live or Facebook Live.
o Pros: Instantaneous interac@on with the audience, real-@me engagement.
o Cons: Requires strong internet connec@on and technical setup to ensure
smooth delivery.
2. On-Demand Webcas.ng:
o Defini.on: Pre-recorded content that can be accessed by users at any @me.
o Use Cases: Training videos, recorded webinars, product demos.
o Technology: Media is stored on servers and streamed using planorms like
Vimeo, YouTube, or company-specific planorms.
o Pros: Flexibility for users to access content whenever they want.
o Cons: Limited real-@me interac@on with the audience.
3. Interac.ve Webcas.ng:
o Defini.on: Broadcas@ng that includes interac@ve features such as polls,
quizzes, or live chats to engage viewers ac@vely.
o Use Cases: Educa@onal webinars, corporate mee@ngs, online conferences.
o Technology: Webcas@ng planorms with built-in engagement tools (Zoom
Webinars, Webex).
o Pros: High engagement and par@cipa@on from the audience.
o Cons: Requires more prepara@on and planorm capabili@es.
4. Social Media Live Webcas.ng:
o Defini.on: Broadcas@ng live video content directly via social media planorms.
o Use Cases: Social media influencers, businesses reaching out to customers,
marke@ng events.
o Technology: Facebook Live, Instagram Live, LinkedIn Live, etc.
o Pros: Easy access to a wide audience through familiar planorms.
o Cons: Limited control over planorm features and data.
5. 360-Degree and VR Webcas.ng:
o Defini.on: A more immersive webcas@ng experience using 360-degree
cameras and virtual reality.

By: Mr. Amrit Jaiswal 11

 o Use Cases: Virtual tours, immersive live events, gaming, and experien@al
marke@ng.
o Technology: Specialized cameras, VR headsets, and planorms that support
360-degree streaming (YouTube VR, Facebook 360).
o Pros: Enhanced viewer experience with immersion.
o Cons: Requires advanced equipment and a robust internet connec@on.

Topic- II

TCP/IP

TCP/IP (Transmission Control Protocol/Internet Protocol) is a suite of communica@on

protocols used to interconnect network devices on the internet. It defines how data should
be forma_ed, addressed, transmi_ed, routed, and received at the des@na@on. TCP/IP is the
founda@on of the internet and enables communica@on between computers, routers, and
servers.

The TCP/IP model is divided into four layers, each responsible for specific aspects of data
transmission.

TCP/IP Layers and Their Func-ons

1. Application Layer
o Func.on: The Applica@on Layer is the top layer and is responsible for
interac@ng with the user and providing network services directly. It defines
protocols that allow soIware to communicate over a network, providing
interfaces for end-users.
o Protocols: HTTP (Hypertext Transfer Protocol), FTP (File Transfer Protocol),
SMTP (Simple Mail Transfer Protocol), DNS (Domain Name System), and
more.
o Examples: Web browsers, email clients, and file transfer applica@ons work at
this layer.
o Purpose: It allows users to interact with network services and applica@ons,
such as browsing the web, sending emails, or accessing files.
2. Transport Layer
o Func.on: The Transport Layer ensures reliable data transmission between
devices. It is responsible for error detec@on and correc@on, flow control, and
data segmenta@on.
o Protocols:
§ TCP (Transmission Control Protocol): Ensures reliable, ordered, and
error-checked delivery of data.
§ UDP (User Datagram Protocol): Provides faster, connec@onless
transmission without error checking or ordering.
o Purpose: The Transport Layer controls the flow of data and ensures that data
packets are transmi_ed correctly, received in order, and are error-free. TCP
provides acknowledgment, while UDP priori@zes speed over reliability.
3. Internet Layer

By: Mr. Amrit Jaiswal 12

 oFunc.on: The Internet Layer is responsible for rou@ng packets across
different networks. It handles logical addressing and the encapsula@on of
data into packets. This layer ensures that data reaches the correct des@na@on
by naviga@ng through various intermediate networks.
o Protocols: IP (Internet Protocol), ICMP (Internet Control Message Protocol),
and ARP (Address Resolu@on Protocol).
o Purpose: It manages the delivery of packets to their intended IP address,
choosing the best path for data transmission across interconnected networks.
The Internet Layer is also responsible for error repor@ng and diagnos@cs (via
ICMP).
4. Network Access Layer (Link Layer)
o Func.on: The Network Access Layer controls the physical transmission of
data on the network, including hardware addressing, frame transmission, and
data formafng for the physical media. It encompasses both the physical and
data link layers in the OSI model.
o Protocols: Ethernet, Wi-Fi, PPP (Point-to-Point Protocol), and more.
o Purpose: It ensures that the data is physically transmi_ed across the network
medium (e.g., cables, wireless). It controls the framing, physical addressing
(MAC addresses), and error detec@on within the local network segment.

Conclusion

The TCP/IP model is the backbone of modern internet communication. Each layer plays a
critical role in ensuring that data is transmitted, routed, and received correctly across a
network, enabling seamless communication between devices.

Topic- III

Web browser and Web server

Web browser:
• Function: A web browser is a client-side application that allows users to access and view
content on the internet. It sends requests to web servers and displays the returned content
(e.g., websites, web apps) to users.
• Examples: Google Chrome, Mozilla Firefox, Safari, Microsoft Edge.
• Role:

• Interprets and renders HTML, CSS, JavaScript, and other web content.
• Provides a user interface for navigating websites, managing bookmarks, and
interacting with web apps.
• Uses HTTP/HTTPS protocols to communicate with web servers.

Web Server:

• Func.on: A web server is a server-side soIware or hardware that hosts websites,

web apps, and other online services. It listens for requests from web browsers (or

By: Mr. Amrit Jaiswal 13

 other clients) and responds by sending the requested resources (e.g., HTML files,
images, data).
• Examples: Apache, Nginx, MicrosoI IIS, LiteSpeed.
• Role:
o Stores, processes, and delivers web pages to browsers via the HTTP/HTTPS
protocols.
o Manages requests for dynamic content (e.g., PHP scripts, databases) and
sta@c content (e.g., images, CSS files).
o Can host and serve mul@ple websites and handle concurrent requests.

Topic- IV

Website and the steps for developing a website with suitable example.

Website: A website is a collec@on of web pages that are accessed via the internet, typically
through a web browser like Chrome, Firefox, or Safari. Websites can serve various purposes,
such as providing informa@on, selling products, offering services, or facilita@ng
communica@on.

Steps to Develop a Website

1. Plan Your Website

o Purpose & Goals: Determine the purpose of your website (e.g., blog, e-
commerce, pornolio) and define the goals you want to achieve.
o Target Audience: Iden@fy who will visit your site and what they need.
o Content Planning: Decide on the content that will be included, like text,
images, videos, and func@onality (e.g., contact forms, search bars).
2. Choose a Domain Name
o Domain Name: Select a unique and relevant domain name
(e.g., www.yourwebsite.com).
o Domain Registra.on: Register your domain through a domain registrar like
GoDaddy or Namecheap.
3. Select a Web Hosting Provider
o Hos.ng: Choose a hos@ng service that fits your needs (shared hos@ng, VPS,
dedicated server, etc.).
o Setup: Configure your hos@ng account and link it to your domain name.
4. Design Your Website
o Wireframes: Create basic sketches or digital wireframes to outline the
structure of your web pages.
o UI/UX Design: Design the look and feel of your site, focusing on user
experience (UX) and user interface (UI).
o Tools: Use design tools like Adobe XD, Figma, or Sketch.
5. Develop the Website
o Front-End Development:
§ HTML: Structure the content.
§ CSS: Style the content.
§ JavaScript: Add interac@vity.
o Back-End Development:

By: Mr. Amrit Jaiswal 14

 § Server-Side Scrip.ng: Use languages like PHP, Python, or Node.js to
handle logic, databases, and server communica@on.
§ Database Management: Set up a database (e.g., MySQL, MongoDB) if
needed.
6. Content Management System (CMS)
o CMS Selec.on: If you prefer not to code everything manually, use a CMS like
WordPress, Joomla, or Drupal.
o Installa.on: Install the CMS on your hos@ng server.
o Themes & Plugins: Choose a theme and install plugins to extend func@onality.
7. Test Your Website
o Cross-Browser Tes.ng: Ensure your site works on different browsers
(Chrome, Firefox, Safari).
o Responsive Design: Test on various devices (mobile, tablet, desktop).
o Func.onality Tes.ng: Verify that all features (forms, links, etc.) work as
intended.
o Performance Tes.ng: Op@mize load @mes and performance.
8. Launch Your Website
o Final Review: Double-check everything before going live.
o Go Live: Publish your website by making it accessible to the public.
9. Maintenance & Updates
o Content Updates: Regularly update content to keep it fresh.
o Security: Apply security updates and patches to keep your site secure.
o Analy.cs: Use tools like Google Analy@cs to track visitor behaviour and make
improvements.

Example: Crea@ng a Personal Blog Website

1. Plan: Decide to create a personal blog to share your thoughts on technology.

2. Domain Name: Choose a domain like techthoughts.com and register it.
3. Hos.ng: Select a shared hos@ng plan suitable for a small blog.
4. Design: Sketch out a simple layout with a homepage, blog posts, and an about page.
5. Development: Use HTML, CSS, and a bit of JavaScript to build the pages.
6. Test: Ensure the blog looks good on mobile devices and loads quickly.
7. Launch: Publish your blog and share it on social media.
8. Maintenance: Regularly post new ar@cles and monitor the site's performance.

This example outlines the basic steps for developing a simple website. More complex sites,
like e-commerce planorms or social networks, will require addi@onal considera@ons like
advanced security measures, payment gateways, and custom func@onality.

Topic- V

Role of Internet Protocol(IP) in internet

The Internet Protocol (IP) is a fundamental communica@on protocol in the Internet Protocol
Suite that enables the transfer of data across the internet. IP is responsible for addressing,
rou@ng, and delivering data packets from the source host to the des@na@on host based on
their IP addresses.

By: Mr. Amrit Jaiswal 15

Func.ons of IP:

1. Addressing: IP assigns unique addresses to devices on the network, ensuring that

data is sent to the correct recipient.
2. Rou.ng: IP determines the best path for data to travel across the network, passing
through mul@ple intermediate devices (routers) to reach its des@na@on.
3. Fragmenta.on: IP handles the division of large data packets into smaller fragments
to accommodate the maximum transmission unit (MTU) of the network.
4. Packet Delivery: IP ensures that data packets are delivered to the correct des@na@on,
even if they need to traverse different networks with varying configura@ons.

IPv4 (Internet Protocol Version 4)

IPv4 is the fourth version of the Internet Protocol and the first widely deployed IP protocol. It
uses a 32-bit address scheme, allowing for approximately 4.3 billion unique IP addresses.

• Address Format: IPv4 addresses are typically wri_en in do_ed-decimal nota@on,

consis@ng of four 8-bit numbers separated by dots (e.g., 192.168.1.1).
• Address Space: 32 bits, allowing for 2^32 (about 4.3 billion) unique addresses.
• Example: 192.168.0.1, 10.0.0.1
• Header Size: 20-60 bytes (depending on op@ons)
• Limita.ons: The limited number of IP addresses, coupled with the rapid growth of
internet-connected devices, led to the exhaus@on of IPv4 addresses.

IPv6 (Internet Protocol Version 6)

IPv6 is the successor to IPv4, designed to address the limitations of IPv4, particularly the
exhaustion of IP addresses. IPv6 uses a 128-bit address scheme, vastly expanding the number
of available addresses.

• Address Format: IPv6 addresses are wri_en in hexadecimal and separated by colons,
consis@ng of eight 16-bit blocks (e.g., 2001:0db8:85a3:0000:0000:8a2e:0370:7334).
• Address Space: 128 bits, allowing for 2^128 (about 3.4×10^38) unique addresses,
which is a virtually limitless supply.
• Example: 2001:0db8:85a3:0000:0000:8a2e:0370:7334, fe80::1
• Header Size: 40 bytes (fixed)

By: Mr. Amrit Jaiswal 16

 Unit- II

HTML Introduction

HTML (HyperText Markup Language) is the standard markup language used to

create web pages. It defines the structure and layout of a web document by
using various tags and aBributes. HTML works in conjuncDon with CSS
(Cascading Style Sheets) and JavaScript to build modern websites.

Basic Structure of an HTML Document:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<section id="home">
<h2>Home Section</h2>
<p>This is the home section of the website.</p>
</section>

<section id="about">
<h2>About Section</h2>
<p>Information about this site and its purpose.</p>
</section>

<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>

By: Mr. Amrit Jaiswal 17

Key Components:

• <!DOCTYPE html>: Defines the document type and version of HTML.

• <html>: The root element that contains the enDre HTML document.
• <head>: Contains metadata such as the page's Dtle, character encoding,
and links to external resources.
• <body>: Contains the visible content of the webpage like headings,
paragraphs, images, and links.
• Tags like <header>, <secDon>, and <footer> help structure the content of
the page.

HTML History

HTML has a rich history that spans several decades. Here’s a brief overview of
its development:

1. Early Beginnings (1990-1991)

• Tim Berners-Lee: HTML was invented by Tim Berners-Lee, a BriDsh

scienDst, while working at CERN (European OrganizaDon for Nuclear
Research). He proposed a system to enable researchers to share
documents and data across the internet.
• HTML 1.0: The first version of HTML was released in 1991. It included
basic elements like headings, paragraphs, links, lists, and images. HTML
1.0 was quite simplisDc and focused on creaDng a framework for linking
documents.

2. HTML 2.0 (1995)

• W3C: The World Wide Web ConsorDum (W3C) was established in 1994
to manage the development of web standards. HTML 2.0 was published
in 1995, and it added new features such as forms and tables, enhancing
the ability to create interacDve and structured web pages.

3. HTML 3.2 (1997)

• Improvements: HTML 3.2 introduced support for style sheets (CSS) and
scripDng languages like JavaScript. This version allowed for more
complex and visually appealing web designs, including the ability to
integrate mulDmedia elements such as audio and video.

By: Mr. Amrit Jaiswal 18

4. HTML 4.0 (1999)

• SeparaVon of Concerns: HTML 4.0 emphasized the separaDon of content

(HTML) from presentaDon (CSS) and behavior (JavaScript). It introduced
new elements like <div>, <span>, and the concept of semanDc elements,
although semanDc tagging was sDll quite limited at this Dme.

5. HTML 4.01 (2000)

• Refinements: This was a minor revision of HTML 4.0, offering

improvements and correcDons to the exisDng standard.

6. HTML5 (2014)

• Major Overhaul: HTML5 was officially finalized as a W3C

RecommendaDon in October 2014. It introduced a host of new features
including:
o New Elements: <header>, <footer>, <arDcle>, <secDon>,
and <aside> for beBer semanDc structure.
o MulVmedia: NaDve support for audio and video
with <audio> and <video> elements.
o APIs: New APIs for offline storage, geolocaDon, and drawing
graphics with <canvas>.
o Improved Parsing Rules: HTML5 is designed to be backward-
compaDble with previous versions and includes a more consistent
parsing model.

List

HTML provides several ways to create lists, allowing you to organize content
in a structured manner. There are three main types of lists in HTML:

• Ordered List (<ol>): Items are numbered.

• Unordered List (<ul>): Items are bulleted.
• Definition List (<dl>): Items are terms with their definitions.

1. Ordered List (<ol>)

An ordered list displays items in a specific sequence, typically numbered.

Syntax:
<ol>
<li>First item</li>
<li>Second item</li>

By: Mr. Amrit Jaiswal 19

 <li>Third item</li>
</ol>
Output:
1. First item
2. Second item
3. Third item

Common A]ributes:

• type: Specifies the type of numbering (e.g., numbers, leBers, or Roman

numerals).
o 1: Default numbering (1, 2, 3, ...).
o A: Uppercase leBers (A, B, C, ...).
o a: Lowercase leBers (a, b, c, ...).
o I: Uppercase Roman numerals (I, II, III, ...).
o i: Lowercase Roman numerals (i, ii, iii, ...).

2. Unordered List (<ul>)

An unordered list displays items with bullet points, without any specific
sequence.

Syntax:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

Output:

• First item
• Second item
• Third item

Common A]ributes:

• type: Specifies the type of bullet point.

o disc: Default bullet style (•).
o circle: Hollow circle (○).
o square: Solid square (▪).

By: Mr. Amrit Jaiswal 20

3. DefiniVon List (<dl>)
A definition list pairs terms with their corresponding definitions.

Syntax:
<dl>
<dt>Term 1</dt>
<dd>Defini@on of term 1</dd>
<dt>Term 2</dt>
<dd>Defini@on of term 2</dd>
</dl>

Output:
Term 1
Definition of term 1
Term 2
Definition of term 2

Table

In HTML, tables are used to organize and display data in rows and columns. A
table consists of several elements, each playing a role in defining the structure
of the data.

Basic Table Structure:

The basic elements of an HTML table are:

• <table>: Defines the table.

• <tr>: Defines a row in the table.
• <th>: Defines a header cell.
• <td>: Defines a data cell.

Example:

<table border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>

By: Mr. Amrit Jaiswal 21

 <td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
</table>

Output:
First Name Last Name Age
John Doe 30
Jane Smith 25

Key Table Elements:

1. <table>: The container for all table elements.

2. <tr> (Table Row): Defines a row inside the table.
3. <th> (Table Header): Used to define header cells, typically bold and
centered.
4. <td> (Table Data): Represents a regular data cell in the table.

AddiVonal A]ributes and Features:

1. Table Borders:
By default, HTML tables do not display borders. You can add borders using
the border attribute or CSS:

Syntax:

<table border="1">
<!-- Table content -->
</table>

2. Column Span (colspan) and Row Span (rowspan):

• colspan: Merges two or more columns into a single cell.

• rowspan: Merges two or more rows into a single cell.

By: Mr. Amrit Jaiswal 22

3. Table Head, Body, and Foot:

You can divide a table into three parts using <thead>, <tbody>, and <tfoot> to
help structure complex tables.

Syntax:
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Footer Information</td>
</tr>
</tfoot>
</table>

Output:

First Name Last Name Age

John Doe 30
Jane Smith 25
Footer Information (spanning all columns)

Images

In HTML, the <img> tag is used to embed images into a webpage. Unlike other
elements, the <img> tag is self-closing, meaning it doesn't need a closing tag.

By: Mr. Amrit Jaiswal 23

Basic Syntax:

<img src="image.jpg" alt="Description of the image">

A]ributes:

1. src (Source): Specifies the path to the image file. This can be a relative
path (for images stored locally) or an absolute URL (for images hosted
online).
o Example: src="images/picture.jpg"
o Example: src="hBps://example.com/picture.jpg"
2. alt (Alternate Text): Provides a text description of the image, which is
useful for accessibility and displayed if the image cannot load.
o Example: alt="A scenic view of a mountain"
3. width and height: Specifies the dimensions of the image (in pixels or
percentage).
o Example: width="500" (sets width to 500 pixels)
o Example: height="300" (sets height to 300 pixels)

Example with Width and Height:

<img src="image.jpg" alt="A description of the image" width="300" height="200">

Example of Embedding an Image from a URL:

<img src="https://www.example.com/image.jpg" alt="Sample image" width="400">

Responsive Images:

You can create responsive images that automatically resize based on the
device's screen size. This is done using CSS or by setting the width to a
percentage:

<img src="image.jpg" alt="Responsive image" style="width: 100%; height: auto;">

This will make the image scale proporDonally to fit its container.

Image as a Link:
You can also make an image clickable by wrapping it inside an <a> tag:

<a href="https://example.com">
<img src="image.jpg" alt="Clickable image" width="300">
</a>

By: Mr. Amrit Jaiswal 24

 Frames

In HTML, frames were originally used to divide a web page into multiple
sections where each section could display a different HTML document.
The <frameset> element was used to define a set of frames, and
the <frame> element would define each individual frame within the set.

However, frames are now obsolete in HTML5 due to their drawbacks:

• They create usability issues, like confusing navigation and difficulty in

bookmarking pages.
• Search engines struggle to index content within frames properly.
• They complicate the website's layout and reduce flexibility for
responsive design.

Example: Simple HTML Frameset

<!DOCTYPE html>
<html>
<head>
<title>Frames Example</title>
</head>
<frameset cols="50%,50%">
<frame src="https://example.com" name="leftFrame">
<frame src="https://www.wikipedia.org" name="rightFrame">
</frameset>
</html>

ExplanaDon:

• <frameset cols="50%,50%">: This creates a layout where the page is

divided into two columns (50% width each).
• <frame src="...">: Specifies the content (a webpage or local HTML file) to
be displayed in each frame.
• The example displays example.com in the lep frame and wikipedia.org in
the right frame.

Forms

HTML forms are used to collect user input and send it to a server for
processing. A form is created using the <form>element, and it can contain

By: Mr. Amrit Jaiswal 25

various input fields such as text fields, radio buttons, checkboxes, and submit
buttons.

Basic Structure of an HTML Form

Here is an example of a simple form with different input elements:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Form Example</title>
</head>
<body>
<h1>Contact Form</h1>
<form action="/submit_form" method="POST">

<!-- Text Input -->

<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<!-- Email Input -->

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>

<!-- Radio Buttons -->

<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>

<!-- Checkbox -->

<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes"><br><br>

<!-- Dropdown Select -->

<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select><br><br>

<!-- Submit Button -->

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

By: Mr. Amrit Jaiswal 26

 </form>
</body>
</html>

Key Elements Explained:

1. <form action="/submit_form" method="POST">:

o acDon: Specifies where the form data should be sent (typically a
URL).
o method: Specifies the HTTP method (GET or POST) to be used
when sending the form data.
2. <label> and <input> elements:
o <label>: Provides a label for an input field, making it more
accessible.
o <input type="text">: A text input field for user data.
o <input type="email">: A specialized input for email addresses,
with built-in validaDon.
o <input type="radio">: Allows users to select one opDon from a
group.
o <input type="checkbox">: Allows users to select or unselect a
given opDon.
3. <select> and <option> elements:
o These create a dropdown menu where users can choose one
opDon from a list.
4. <input type="submit">: The submit button that sends the form data to
the server.

Form Methods: GET vs POST

• GET: Appends form data to the URL, visible in the browser (good for
simple searches).
• POST: Sends data in the body of the request, more secure for sending
sensiDve informaDon (like passwords).

CSS

CSS (Cascading Style Sheets) is a cornerstone technology in web design that

controls the visual presentation of web pages. It allows web developers to
separate content (HTML) from design and layout, enabling more flexibility,
maintainability, and control over how a website looks across different devices
and screen sizes.

By: Mr. Amrit Jaiswal 27

Key Concepts of CSS in Web Design

1. Selectors: CSS uses selectors to target HTML elements that need to be

styled.
o Type Selector: Targets all elements of a specific type.

h1 {
color: blue;
}

o Class Selector: Targets elements with a specific class.

.menu {
background-color: #f2f2f2;
}

o ID Selector: Targets a single element with a unique ID.

#header {
font-size: 24px;
}

2. Properties and Values: CSS rules are made up of properties

(e.g., color, font-size, margin) and their corresponding values.

body {
background-color: #fff;
font-family: Arial, sans-serif;
line-height: 1.6;
}

3. Cascading and Inheritance:

o Cascading: When mulDple rules apply to the same element, the
cascade determines which rule is applied (e.g., based on
specificity, source order).
o Inheritance: Certain properDes, such as font and color, are
inherited by child elements.
4. Box Model: Every HTML element is considered a rectangular box.
Understanding the box model is essential for laying out and aligning
elements.
o Content: The actual content of the element.
o Padding: Space between the content and the border.
o Border: The line surrounding the padding.
o Margin: Space outside the border.

By: Mr. Amrit Jaiswal 28

 p{
padding: 10px;
margin: 20px;
border: 1px solid black;
}

5. Responsive Design: CSS enables responsive design, allowing websites to

adapt to different screen sizes and devices. Techniques like media
queries are used to apply different styles based on the viewport size.

@media (max-width: 600px) {

body {
font-size: 14px;
}
}

6. Layouts with CSS:

o Flexbox: A layout model that provides an efficient way to align and
distribute space among items in a container.

.container {
display: flex;
justify-content: center;
align-items: center;
}

o CSS Grid: A powerful layout system that allows the creaDon of

complex, responsive grid-based layouts.

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
Benefits of Using CSS in Web Design:

1. SeparaVon of Content and PresentaVon: HTML focuses on structure,

while CSS is responsible for visual design.
2. Maintainability: Styles can be applied consistently across mulDple pages
by linking a single CSS file.
3. Improved Performance: External CSS files are cached by the browser,
reducing load Dmes for returning visitors.
4. Responsive and AdapVve Designs: Using CSS, web pages can be
opDmized for different devices and screen sizes.

By: Mr. Amrit Jaiswal 29

 5. CustomizaVon and Flexibility: CSS gives web designers control over
every aspect of presentaDon, including fonts, colors, layouts, and
animaDons.

CSS Proper)es:

Comment: CSS
• Single line comment
• Multi line comment
/* This is a comment */

Color Property: CSS

• color:red;
• color:rgb(255,0,0); (Red green blue)
• color:rgba(255,0,0,0.3); Here ‘a’ means alpha which show the transparency/opacity
• color: #ff0000; (Hex color code)
• color:hsl(0,100%,50%); (Hue saturation lightness)
• color:hsla(0,100%,50%,0.700);
• color:transparent;

Background Property: CSS

• Background-color
• Background-image
• Background-repeat
• Background-position
• Background-size
• Background-attachment

Background-color: Sets the background color of an element.

Example: background-color: hsl(0,0%,94%);

Background-image: Specifies an image to be used as the background.

Example: background-iamge: url(“image.png”);

e.g.
background-image: linear-gradient: (to top right , #051937, #004d7a, #008793,
#00bf72, #a8eb12);

Background-repeat: Determines how the background image repeats.

Values: repeat, repeat-x, repeat-y, no-repeat

By: Mr. Amrit Jaiswal 30

Example: background-repeat: repeat-x;

Background-posiDon: Sets the starting position of the background image.

Values: Coordinates like top left, center center, bottom right, percentage or length
Example: background-position: center center;

Background-size: Defines the size of background image.

Values: auto, cover, contain, percentage or length
Example: background-size: cover;
Example: background-size: 100% 100%;

Background-aBachment: Specifies if the background image scrolls with the content.

Value: scroll, fixed, local
Example: background-attachment:fixed;

Background-blend-mode: Applies blending modes to the background image and colors.

Values: multiply, screen, overlay
Example: background-image: url(“image1.png”),url(“image2.png”);
Background-blend-mode: screen;

Lengths: CSS
There are two types of length in CSS which are:
1) Absolute length
a) px(Pexel)
b) in(Inches)
c) pt(Points)
2) Relative length
a) em
b) rem(Root em)
c) %(Percentage)

Absolute length: The absolute length units are fixed, and a length expressed in any of
these will appear as exactly that size.

RelaDve length: Relative length units specify a length relative to another length property.
Relative length units scale better between different rendering medium.

Pixel(px): px is an absolute unit of measurement in CSS, representing the smallest unit of

screen space. It provides a fixed and consistent size on all devices and screens.

Percentage(%): Percentage are relative units based on the parent element’s size or the
containing block. Widely used in creating responsive layouts.(100%=16px)

By: Mr. Amrit Jaiswal 31

Em(em): em is relative unit that is calculated based on the font size of the parent element.
When you set an element’s size in em, it’s relative to the font size of its nearest parent with
a specified font size.(1em=16px)

Root Em(rem): rem is also a relative unit like em, but it’s based on the font size of the root
(html). Using rem ensures that the size is consistent throughout the entire document,
making it especially user responsive design.(1rem=16px or 1rem=10px)

Font Proper)es: CSS

• Font Family
• Font Size
• Font Weight
• Font Style
• Font Variant

Font Family: The ‘font family’ property allows you to specify the font used for text.

Font Size: The ‘font size’ property controls the size of text.
Value: px, em, rem, %, keywords(small,medium,large).

Font Weight: The ‘font weight’ property defines the thickness of text characters, ranging
from ‘100’ (thin) to ‘900’ (bold).

Font Style: The ‘font style’ property allows you to apply styles like italic to text.
Value: normal(default), italic, oblique.

Font Variant: The ‘font variant’ property is used to control the appearance of text
characters by modifying their variant forms.
Value: normal, small-caps.

Text Property: CSS

• Text Alignment
• Text Decoration
• Text Transform
• Text Spacing
• Text Shadow

Text Alignment: The ‘text alignment’ property controls the horizontal alignment of text
within an element’s box.
Value: left, right, center, and justify.

By: Mr. Amrit Jaiswal 32

Text DecoraDon: The ‘text decoration’ property allows you to add decorations like
underline, overline, or line through to text.

Text-decoraDon-line: The text decoration-line property specifies which type of

line should be used as decoration for text, such as underline, overline, line-through or none.

Text-decoraDon-color: The ‘text-decoration-color’ property sets the color of the

text decoration line, like underline or overline.

Text-decoraDon-style: The ‘text-decoration-style’ property is used to set the style

of the decoration line.

Text-decoraDon-thickness: Specifies the thickness of the text decoration line.

Text Transform: The ‘text transform’ property allows you to control the capitalization of
text.
Value: lowercase, uppercase, capitalize.

Text Spacing: For spaces.

LeBer-spacing property: The letter spacing property controls the spacing

between characters in a text.

Word-spacing property: The word spacing property controls the spacing between
words in a text.

The line-height property: The line height property is used to specify the space
between lines.

Text shadow: The text shadow property allows you to add a shadow effect to text
characters.
Value: horizontal shadow offset, ver@cal shadow offset, and shadow color.

Border Property:

1.Border style:
e.g.
border-style: solid;

Values: solid, ridge, dotted, dashed, double, groove, inset, outset.

2.Border width:

By: Mr. Amrit Jaiswal 33

e.g.
border-width:15px;

3.Border color:
e.g.
border-color: #003180;

Other proper@es:

e.g.
border-top-width: 15px;
border-top-style: solid;
border-top-color: #003b99;

4.Border radius:
e.g.
border-radius: 10px;

Padding:
e.g.
padding: 10px; /* Apply to all four sides */
padding: 10px 20px; /* top and bo_om | leI and right */
padding: 5px 10px 15px 20px; /* top | right | bo_om | leI */
padding: 5px 10px 15px; /* top | right-leI | bo_om
padding-leI:5px;

Margin:
e.g.
margin: 10px;
margin: 10px 20px; /* top and bo_om | leI and right */
margin: 10px 20px 30px; /* top | right | bo_om | leI */

Document Type DefiniVon (DTD)

A Document Type Definition (DTD) in web design refers to a set of rules that defines the
structure, elements, and attributes that can be used in an HTML or XML document. The DTD
specifies how the document should be formatted and ensures that it follows certain
standards, making it easier for browsers to correctly interpret and display the content.

Importance of DTD in Web Design:

1. Defines Document Structure: It tells the web browser the rules the HTML or XML
document follows, such as the types of elements allowed and their relationship to
one another.

By: Mr. Amrit Jaiswal 34

 2. Ensures Compatibility: DTD helps ensure that web pages are compatible across
different browsers and platforms.
3. Validation: It allows HTML or XML documents to be validated against the specified
rules, ensuring correct markup usage.

Types of DTD in Web Design:

There are different types of DTDs used in HTML, each providing different rules and flexibility
in writing the document.

1. HTML 4.01 DTDs:

• Strict DTD: It does not allow deprecated elements or attributes (those no longer
recommended in modern HTML). Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"h_p://www.w3.org/TR/html4/strict.dtd">

• Transitional DTD: Allows deprecated elements, making it easier to use older HTML
elements. Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transi@onal//EN"

"h_p://www.w3.org/TR/html4/loose.dtd">

• Frameset DTD: Used for documents containing frames. Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"h_p://www.w3.org/TR/html4/frameset.dtd">
2. XHTML DTDs:

XHTML is a stricter, XML-based version of HTML.

• XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• XHTML 1.0 Frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

By: Mr. Amrit Jaiswal 35

3. HTML5 DTD:

HTML5 doesn’t require a formal DTD declaration because it simplifies the syntax, but the
following declaration is still recommended:

<!DOCTYPE html>

How to Use DTD:

The DTD is declared at the very beginning of an HTML or XML document. It helps the
browser or parser to understand which version of HTML or XML is being used, thus ensuring
proper rendering of the page

XML

XML (Extensible Markup Language) is widely used in web design and development to store,
transport, and organize data. Unlike HTML, which is focused on displaying data, XML is
designed to store and transport data in a structured and self-descriptive format.

Uses of XML in Web Designing:

1. Data Storage and Transfer: XML is commonly used to store and transport data
between servers and clients or between different systems. It provides a flexible and
readable format for data that can be processed and displayed dynamically by web
applications.
2. Separation of Data from HTML: XML allows designers to separate the content (data)
from the presentation (HTML). This promotes cleaner design and makes it easier to
update or reuse data without changing the presentation layer.
3. Interoperability between Systems: XML is platform-independent and language-
neutral, allowing different systems and applications (like web services) to
communicate and exchange data seamlessly. It is often used in APIs and web
services (SOAP, REST) for data exchange.
4. Configuration Files: XML is used for configuration files in web applications. These
files define settings, preferences, and other parameters for the web app, making it
easy to update or modify the behavior of the app without changing the code.
5. Custom Markup Language: XML allows developers to define their own custom tags.
This flexibility is beneficial when there is a need to create domain-specific markup
languages, for example, RSS feeds or SVG (Scalable Vector Graphics).
6. Data Exchange in Web Services: XML is commonly used in SOAP (Simple Object
Access Protocol) for exchanging structured information in web services, where XML
messages are sent over HTTP.

Presenting XML in Web Design:

XML by itself does not have a predefined way of displaying data like HTML. Therefore,
additional technologies are used to present or style XML data.

By: Mr. Amrit Jaiswal 36

1. Using XSLT (Extensible Stylesheet Language Transformations):

XSLT is used to transform XML documents into other formats, such as HTML, PDF, or
another XML document. XSLT can be used to apply style rules to the XML data, making it
presentable on the web.

Example of an XSLT transforming XML data into HTML:

<!-- XML File (data.xml) -->

<bookstore>
<book>
<title>Web Design with XML</title>
<author>John Doe</author>
</book>
</bookstore>

#Style Sheet

<!-- XSLT File (style.xsl) -->

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Bookstore Data</h2>
<xsl:for-each select="bookstore/book">
<p>Title: <xsl:value-of select="title"/></p>
<p>Author: <xsl:value-of select="author"/></p>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

To apply the XSLT transformation in an XML document:

<?xml-stylesheet type="text/xsl" href="style.xsl"?>

<bookstore>
<book>
<title>Web Design with XML</title>
<author>John Doe</author>
</book>
</bookstore>

By: Mr. Amrit Jaiswal 37

 DOM (Document Object Model)

The Document Object Model (DOM) is a programming interface for web documents. It
represents the structure of an HTML or XML document as a tree of objects. Through the
DOM, developers can interact with, manipulate, and update the content, structure, and
style of a webpage in a dynamic manner.

Key Features of DOM:

• Tree Structure: Every HTML or XML document is represented as a tree of nodes

(elements, attributes, text, etc.).
o Example: The <html> tag is the root, with child nodes like <head>, <body>,
and each element within them.
• Manipulation: The DOM allows adding, removing, and modifying elements in a
document dynamically through JavaScript.
o Example: Changing the text of an HTML element with JavaScript:

<p id="myParagraph">Original Text</p>

<script>
document.getElementById("myParagraph").innerHTML = "Updated Text";
</script>

• Platform-Independent: DOM works across different programming languages and

can be manipulated using JavaScript, Python, Java, etc.

Advantages:

• Direct access to elements for dynamic changes.

• Ideal for complex, interactive web pages.
• Can be used for both HTML and XML.

SAX (Simple API for XML)

SAX is an event-driven model for parsing XML documents, typically used in scenarios where
memory efficiency is crucial. Unlike DOM, SAX doesn’t load the entire document into
memory but instead parses the document sequentially and triggers events when it
encounters specific components (e.g., opening tags, closing tags, text content).

Key Features of SAX:

• Event-Driven: SAX generates events as it parses the document, such as "start

element" and "end element" events, which the program can handle dynamically.
• Forward-Only: SAX reads through the document once, from start to finish, and
doesn’t allow backward navigation or random access.
• Memory Efficient: Since SAX processes the document as a stream, it’s suitable for
parsing large XML files without loading the entire document into memory.

By: Mr. Amrit Jaiswal 38

Example SAX Parsing (Python Example):

import xml.sax

class MyHandler(xml.sax.ContentHandler):
def startElement(self, name, attrs):
print(f"Start element: {name}")

def endElement(self, name):

print(f"End element: {name}")

parser = xml.sax.make_parser()
parser.setContentHandler(MyHandler())
parser.parse("example.xml")

Advantages:

• Uses less memory than DOM, making it ideal for large documents.
• Simple for parsing sequential data without needing random access.

Disadvantages:

• Doesn’t allow for easy manipulation of the document.

• No random access or backward navigation through the document.

Dynamic HTML (DHTML)

Dynamic HTML (DHTML) is a combination of technologies used to create interactive and

dynamic web pages. It includes HTML, CSS, JavaScript, and the DOM to manipulate web
content on-the-fly without reloading the entire page. DHTML allows for real-time changes to
the content, style, and structure of a webpage.

Key Components of DHTML:

• HTML: Provides the structure of the webpage.

• CSS: Controls the style and appearance.
• JavaScript: Used to interact with the DOM and CSS, enabling dynamic updates.
• DOM: The interface through which JavaScript interacts with the webpage.

Example of Dynamic HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic HTML Example</title>

By: Mr. Amrit Jaiswal 39

 <style>
#myDiv {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>

<div id="myDiv"></div>
<button onclick="changeColor()">Change Color</button>

<script>
function changeColor() {
document.getElementById("myDiv").style.backgroundColor = "blue";
}
</script>

</body>
</html>

Explanation:

• JavaScript dynamically manipulates the CSS of the element with the ID myDiv,
changing its background color from red to blue when the button is clicked.

Features:

• Real-time content updates without reloading the page.

• Interactive elements like animations, transitions, form validation, and more.
• Combines JavaScript and DOM manipulation for dynamic effects.

Uses of DHTML:

• Interactive Websites: DHTML enables interactivity such as animations, pop-up

windows, or forms that respond to user actions.
• Content Updates: Allows part of a webpage (like a news feed or stock ticker) to
update without refreshing the entire page.

By: Mr. Amrit Jaiswal 40

 Unit-II

JavaScript is a high-level, interpreted programming language that is one of the core

technologies of the web, alongside HTML and CSS. It enables developers to create dynamic,
interactive content on websites, such as animated graphics, form validation, and data
processing.

Key Features of JavaScript:

1. Lightweight and Interpreted: JavaScript is easy to learn and runs in the browser
without needing compilation.
2. Dynamic Typing: Variables in JavaScript are not bound to any specific type, meaning
their types can change during execution.
3. Prototype-based Object Orientation: JavaScript uses prototypes rather than classes
for inheritance, giving it unique object-oriented capabilities.
4. Event-driven and Asynchronous: JavaScript can handle events and perform tasks
asynchronously, making it well-suited for web interactions.
5. Cross-platform: JavaScript can run in various environments, from web browsers to
servers (via Node.js), desktop apps, and more.

Common Use Cases:

• DOM Manipulation: JavaScript interacts with the HTML DOM to update, remove, or
add elements in real time.
• Form Validation: Before sending data to the server, JavaScript can validate user
inputs (like email, passwords, etc.).
• Asynchronous Programming (AJAX): JavaScript can fetch data from a server without
needing to reload the page.
• Animations and Effects: JavaScript is used in conjunction with CSS to add transitions,
animations, and effects.

Example of Basic JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Example</title>
<script>
function showMessage() {
alert("Hello, JavaScript!");
}
</script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>

By: Mr. Amrit Jaiswal 41

</body>
</html>

Document Object Model

In JavaScript, when we talk about "documents," we’re typically referring to the Document
Object Model (DOM), which is the programming interface for web documents. The DOM
represents the structure of a webpage as a tree of objects, where each part of the
document (like elements, attributes, and text) is a node.

JavaScript interacts with the DOM to modify the structure, style, and content of a webpage
dynamically. Here are key concepts and methods related to working with documents in
JavaScript.

2. Common DOM Manipulation Methods

Here are some essential methods for interacting with the DOM:

• document.getElementById():
This method returns an element by its unique ID.

e.g.

var element = document.getElementById("myElement");

element.style.color = "blue";

• document.getElementsByClassName()

This method returns a live HTMLCollection of elements that match a specific class
name.

e.g.
var elements = document.getElementsByClassName("myClass");
elements[0].style.backgroundColor = "yellow";

• document.getElementsByTagName()

This method returns an HTMLCollection of elements with the given tag name.

e.g.
var paragraphs = document.getElementsByTagName("p");
paragraphs[0].innerHTML = "New content in the first paragraph.";

• document.querySelector()

This method returns the first element that matches a specified CSS selector.

By: Mr. Amrit Jaiswal 42

 e.g.
var firstDiv = document.querySelector("div");
firstDiv.style.border = "1px solid red";

• document.querySelectorAll()

This method returns all elements that match a specified CSS selector.

e.g.
var allDivs = document.querySelectorAll("div");
allDivs.forEach(div => div.style.color = "green");

Modifying DOM Elements

Once you have accessed elements, you can modify their properties, content, or even their
structure.

• Changing Text Content

You can modify the text inside an element using innerHTML or textContent.

e.g.
document.getElementById("myElement").innerHTML = "New text content!";

• Changing CSS Styles

You can change the CSS styles of elements dynamically using the style property.

e.g.
document.getElementById("myElement").style.backgroundColor = "lightblue";

• Adding and Removing Classes

JavaScript allows you to add or remove CSS classes, which can alter the styling.

e.g.
document.getElementById("myElement").classList.add("newClass");
document.getElementById("myElement").classList.remove("oldClass");

• Adding or Removing Elements

You can also add or remove elements dynamically from the DOM.

e.g.
// Create a new element

By: Mr. Amrit Jaiswal 43

 var newElement = document.createElement("div");
newElement.innerHTML = "This is a new div!";
document.body.appendChild(newElement); // Adds the element to the body

// Remove an element
var elementToRemove = document.getElementById("myElement");
elementToRemove.remove();

Handling Events

JavaScript allows you to attach event listeners to elements to respond to user interactions,
such as clicks or key presses.

• Adding an Event Listener

document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});

• Inline Event Handling

You can also attach events directly to HTML elements using attributes.

e.g.

<button onclick="alert('Button clicked!')">Click Me</button>

Traversing the DOM

JavaScript allows you to navigate or traverse through the DOM tree.

• Accessing Child Elements

You can access child elements of an element using properties

like firstChild, lastChild, and children.

e.g.
var parent = document.getElementById("parentElement");
var firstChild = parent.firstChild;
var childNodes = parent.children; // Returns all child elements

• Accessing Parent or Sibling Elements

e.g.
var element = document.getElementById("myElement");
var parent = element.parentElement; // Access parent element

By: Mr. Amrit Jaiswal 44

 var nextSibling = element.nextElementSibling; // Access the next sibling

Working with Forms

JavaScript makes form manipulation easy with methods to get and set form values.

• Accessing Form Values

e.g.
var inputValue = document.getElementById("myInput").value;
• Form Validation

JavaScript is commonly used to validate form data before it is submitted to the

server.

e.g.
function validateForm() {
var input = document.getElementById("myInput").value;
if (input == "") {
alert("Input cannot be empty!");
return false;
}
return true;
}

Putting It All Together

Here’s a simple example demonstrating DOM manipulation and event handling:

e.g.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Example</title>
<style>
.highlight { background-color: yellow; }
</style>
</head>
<body>
<h1 id="title">Hello, JavaScript!</h1>
<button id="changeText">Change Text</button>
<button id="addClass">Highlight Text</button>

<script>
document.getElementById("changeText").addEventListener("click", function() {
document.getElementById("title").innerHTML = "Text Changed!";

By: Mr. Amrit Jaiswal 45

 });

document.getElementById("addClass").addEventListener("click", function() {
document.getElementById("title").classList.add("highlight");
});
</script>
</body>
</html>

Conclusion

The document in JavaScript represents the webpage and allows developers to interact with
it. By manipulating the DOM, developers can create dynamic and responsive user interfaces.
Whether you’re modifying text, handling user input, or altering styles, JavaScript is a
powerful tool for web development.

By: Mr. Amrit Jaiswal 46

 Unit-III

JavaScript

JavaScript is a versa@le, high-level, and interpreted programming language primarily used to

make web pages interac@ve and dynamic. It is one of the core technologies of web
development, alongside HTML and CSS.

What is JavaScript?

• Client-Side Scrip.ng: JavaScript is mostly used for front-end development, running in

the user's browser to control webpage behavior.
• Dynamic and Interac.ve: It enables interac@ve features like sliders, forms valida@on,
anima@ons, and real-@me content updates without requiring a page reload.
• Lightweight: JavaScript syntax is straighnorward and allows rapid development.
• Versa.le: It can also be used for server-side programming (with Node.js), mobile app
development, game development, and more.

Features of JavaScript

1. Interac.vity: Add features like dropdown menus, modals, and tool@ps.

2. DOM Manipula.on: JavaScript can access and modify the Document Object Model
(DOM) to update page content dynamically.
3. Event Handling: Detect and respond to user interac@ons like clicks, hovers, and key
presses.
4. Cross-PlaTorm: Works on most modern web browsers and opera@ng systems.
5. Asynchronous Programming: JavaScript supports asynchronous opera@ons using
callbacks, promises, and async/await.

Variables

In JavaScript, variables are used to store and manipulate data. They allow you to label values
for later use. JavaScript provides three ways to declare variables: var, let, and const. Each has
different characteris@cs, and choosing the right one is important for wri@ng clear,
maintainable code.

1. var (Old Declara.on)

• var is the tradi@onal way to declare variables in JavaScript, and it is func@on-scoped

or globally scoped.
• Variables declared with var can be redeclared and updated within their scope.
• Scope: var is func.on-scoped, meaning it is available throughout the en@re func@on
if declared inside a func@on, or globally if declared outside of a func@on.

Example:

var name = "Alice";

By: Mr. Amrit Jaiswal 47

 console.log(name); // "Alice"

var name = "Bob"; // Redeclara@on is allowed

console.log(name); // "Bob"

Drawbacks:

• var has issues with hois.ng (variables declared with var are moved to the top of their
scope but ini@alized with undefined).
• The scope of var can some@mes lead to unexpected behavior, especially in loops or
when variables are redeclared.

2. let (Modern Declaration)

• let is a modern way to declare variables in JavaScript.

• Scope: let is block-scoped, meaning it is confined to the block (e.g., inside loops, if
statements, etc.) in which it is declared.
• let allows for reassigning the value of a variable but does not allow redeclaring a
variable in the same scope.

Example:
let age = 30;
console.log(age); // 30

age = 35; // Reassigning is allowed

console.log(age); // 35

// let age = 40; // Error: Cannot redeclare block-scoped variable

Benefits:

• Block scoping makes the variable's scope easier to manage and reduces errors.
• Unlike var, let avoids hois.ng issues and provides more predictable behavior.

3. const (Constant Declaration)

• const is used to declare constants, i.e., values that cannot be reassigned.

• Scope: const is also block-scoped, like let.
• Variables declared with const must be ini@alized when declared, and their
value cannot be reassigned aIer ini@aliza@on.

Example:
const pi = 3.14;
console.log(pi); // 3.14

// pi = 3.14159; // Error: Assignment to constant variable.

By: Mr. Amrit Jaiswal 48

 Datatypes

In JavaScript, a data type defines the kind of value that a variable can hold. JavaScript has a
set of built-in data types, which are used to store and manipulate values in a program. There
are two main categories of data types in JavaScript:

1. Primitive Data Types (also known as basic types or value types)

2. Non-Primitive Data Types (also known as reference types)

1. Primitive Data Types

Primitive types are immutable and represent a single value.

a. Number : Represents numerical values, including integers and floa@ng-point numbers.

Example:

let age = 25; // Integer

let price = 19.99; // Floa@ng-point
let infinity = Infinity; // Infinity
let notANumber = NaN; // "Not a Number"
b. String: Represents text enclosed in single, double, or back@cks.

Example:

let name = "John"; // Double quotes

let gree@ng = 'Hello'; // Single quotes
let template = `Hi, ${name}!`; // Template literals
c. Boolean: Represents logical values: true or false.

Example:

let isOnline = true;

let isLoggedIn = false;
d. Null: Represents an inten@onal absence of value (a null object reference).

Example:

let data = null;

e. Undefined: Indicates a variable that has been declared but not assigned a value.

Example:

let x;
console.log(x); // undefined

By: Mr. Amrit Jaiswal 49

f. Symbol (ES6): Represents a unique iden@fier. Useful for crea@ng private proper@es or keys.

Example:

let id = Symbol("uniqueID");
console.log(id); // Symbol(uniqueID)

2. Non-Primitive (Reference) Data Types

Non-primitive types are objects, which are mutable and can store collections of values.

a. Object: Used to store key-value pairs.

Example:

let person = {
name: "Alice",
age: 30
};
console.log(person.name); // "Alice"

b. Array: Special type of object for storing ordered lists.

Example:

let numbers = [1, 2, 3, 4];

console.log(numbers[0]); // 1
c. Func@on: Func@ons in JavaScript are also treated as objects.

Example:

func@on greet() {
console.log("Hello");
}
d. Date: Represents dates and @mes.

Example:

let today = new Date();

console.log(today); // Current date and @me

Special Cases and Type Checking

Dynamic Typing

JavaScript is dynamically typed, meaning variables can hold any data type.

By: Mr. Amrit Jaiswal 50

 let value = 42; // Number
value = "Hello"; // String

Type Checking

Use typeof to determine the type of a variable.

console.log(typeof 42); // "number"

console.log(typeof "Hello"); // "string"
console.log(typeof null); // "object" (a known quirk in JavaScript)
console.log(typeof undefined); // "undefined"

Type Conversions

JavaScript can convert types implicitly or explicitly.

Implicit Conversion (Type Coercion)

JavaScript automatically converts between types in some contexts.

let result = "5" - 2; // 3 (String "5" converted to Number)

Explicit Conversion

Use functions like Number(), String(), or Boolean().

let num = Number("42"); // Convert string to number

let str = String(42); // Convert number to string
let bool = Boolean(1); // Convert to Boolean

Document Object Model

In JavaScript, the term document typically refers to the Document Object Model (DOM),
which represents the structure of an HTML document as a tree of objects that can be
manipulated using JavaScript. The document object provides a way to access and interact
with the content and structure of a webpage, enabling you to dynamically change HTML
elements, CSS styles, and handle events.

Methods and Properties of the document Object

Here are some of the most commonly used methods and properties of the document object
in JavaScript:

By: Mr. Amrit Jaiswal 51

1. Accessing HTML Elements

a. document.getElementById(): Returns the element with the specified id.

let header = document.getElementById("header");

header.textContent = "Welcome to My Website!";

b. document.getElementsByClassName(): Returns a collec@on of elements with the

specified class name.

let items = document.getElementsByClassName("item");

console.log(items[0].textContent); // Access the first element with class "item"

c. document.getElementsByTagName(): Returns a collec@on of elements with the specified

tag name.

let paragraphs = document.getElementsByTagName("p");

console.log(paragraphs[0].textContent); // Access the first paragraph

d. document.querySelector(): Returns the first element that matches a CSS selector.

let bu_on = document.querySelector(".submit-bu_on");

bu_on.textContent = "Submit Now!";

e. document.querySelectorAll(): Returns a sta@c NodeList of all elements that match a given

CSS selector.

let allDivs = document.querySelectorAll("div");

console.log(allDivs.length); // Number of div elements

Event Handling

a. element.addEventListener(): A_aches an event listener to an element. This is the

preferred method for handling events in modern JavaScript.

let bu_on = document.getElementById("myBu_on");

bu_on.addEventListener("click", func@on() {
alert("Bu_on clicked!");
});

b. element.removeEventListener(): Removes an event listener from an element.

bu_on.removeEventListener("click", myFunc@on);

By: Mr. Amrit Jaiswal 52

Modifying the Document Structure

a. document.body: Accesses the <body> element of the document.

document.body.style.backgroundColor = "lightblue"; // Change background color of

the body

b. document..tle: Gets or sets the @tle of the document (shown in the browser's @tle bar or
tab).

document.@tle = "New Page Title"; // Change the document's @tle

c. document.documentElement: Accesses the root element of the document (typically

the <html> element).

let htmlElement = document.documentElement;

htmlElement.style.fontFamily = "Arial"; // Change font of the en@re page

Forms

In JavaScript, forms are a crucial part of web development. Forms are used to collect user
input, and JavaScript allows you to interact with forms to validate, submit, and manipulate
form elements. Here’s a guide to working with forms in JavaScript.

1. Accessing Form Elements

Forms can be accessed through the document.forms collection or by selecting individual

form elements.

a. Accessing Form by name or id

You can access a form by its name or id attribute.

<form id="myForm" name="userForm">

<input type="text" id="username" name="username" />
<input type="submit" value="Submit" />
</form>

JavaScript:

let form = document.forms["userForm"]; // Access form by name

// or
let form = document.getElementById("myForm"); // Access form by id

By: Mr. Amrit Jaiswal 53

b. Accessing Form Elements

You can access individual form elements (like text fields, checkboxes, etc.) by their name, id,
or querySelector.

let username = form.elements["username"]; // Access input field by name

let username = document.getElementById("username"); // Access input field by id

2. Getting and Setting Values of Form Elements

a. Text Inputs

To get or set the value of a text input, you can use the .value property.

<input type="text" id="username" />

JavaScript

let username = document.getElementById("username").value; // Get value

document.getElementById("username").value = "New Value"; // Set value

b. Checkboxes

To get the state of a checkbox, you use the .checked property.

<input type="checkbox" id="subscribe" />

JavaScript

let isChecked = document.getElementById("subscribe").checked; // Get state

document.getElementById("subscribe").checked = true; // Set checked

c. Radio BuUons

Similar to checkboxes, radio buttons use the .checked property, but only one radio button in
a group can be selected at a time.

<input type="radio" name="gender" value="male" id="male" />

<input type="radio" name="gender" value="female" id="female" />

JavaScript

let selectedGender =
document.querySelector('input[name="gender"]:checked').value; // Get selected
value
document.getElementById("male").checked = true; // Set radio bu_on

By: Mr. Amrit Jaiswal 54

d. Select (Dropdown)

For dropdowns (select elements), you use the .value property to get the selected option’s
value.

<select id="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>

JavaScript

let selectedFruit = document.getElementById("fruit").value; // Get selected value

document.getElementById("fruit").value = "banana"; // Set selected value

3. Form Validation

JavaScript is often used to validate form data before submission to ensure it meets specific
criteria (e.g., required fields, valid email format).

a. Basic Valida.on

You can check if a field is empty or meets a condition before submitting the form.

let form = document.getElementById("myForm");

form.addEventListener("submit", func@on(event) {
let username = document.getElementById("username").value;
if (username === "") {
alert("Username is required!");
event.preventDefault(); // Prevent form submission
}
});

b. Regular Expressions for Valida.on

You can use regular expressions to validate inputs, such as email format.

let email = document.getElementById("email").value;

let emailPa_ern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

if (!emailPa_ern.test(email)) {
alert("Please enter a valid email address.");
event.preventDefault();
}

By: Mr. Amrit Jaiswal 55

4. Form Submission

a. Submigng a Form

You can submit a form either using the HTML <form> element’s submit() method or
manually via JavaScript.

Submi>ng with HTML

<form id="myForm">
<input type="text" id="username" />
<input type="submit" />
</form>

Submigng with JavaScript

You can submit a form programmatically:

document.getElementById("myForm").submit();

b. Preven.ng Default Form Submission

If you want to handle the form submission using JavaScript (e.g., for AJAX or custom
handling), prevent the default form submission.

let form = document.getElementById("myForm");

form.addEventListener("submit", func@on(event) {
event.preventDefault(); // Prevent form from submifng tradi@onally
// Handle the form data with JavaScript (e.g., via AJAX)
});

5. Handling Form Reset

You can reset a form’s fields to their default values using the .reset() method.

document.getElementById("myForm").reset();

6. Working with Form Data (FormData API)

The FormData object allows you to easily collect and send form data, especially for AJAX
requests.

a. Crea.ng a FormData Object

You can create a FormData object by passing a form element to it.

By: Mr. Amrit Jaiswal 56

 let form = document.getElementById("myForm");
let formData = new FormData(form); // Create FormData from the form

b. Sending Form Data with Fetch (AJAX)

You can send form data asynchronously (without reloading the page) using the fetch API.

let form = document.getElementById("myForm");

let formData = new FormData(form);

fetch("/submit", {
method: "POST",
body: formData
})
.then(response => response.json())
.then(data => {
console.log("Form submi_ed successfully", data);
})
.catch(error => {
console.log("Error:", error);
});

Func.on

In JavaScript, a function is a block of reusable code that performs a specific task. Functions
are a fundamental concept in JavaScript programming, enabling you to group logic, reuse it,
and keep your code modular and maintainable.

Crea.ng a Func.on in JavaScript

There are several ways to define a function in JavaScript. Here's an overview of the common
methods:

1. Function Declaration

A function declaration is the most common way to define a function. It uses

the function keyword, followed by the function name, parameters (optional), and the
function body.

func@on greet(name) {
console.log("Hello, " + name + "!");
}

// Calling the func@on

greet("Alice"); // Output: Hello, Alice!

Syntax:

By: Mr. Amrit Jaiswal 57

 func@on func@onName(parameter1, parameter2, ...) {
// Code to be executed
}

2. Function Expression

A function expression involves creating a function and assigning it to a variable. The function
is anonymous, meaning it doesn't have a name, but you can still call it using the variable.

let greet = func@on(name) {

console.log("Hello, " + name + "!");
};

// Calling the func@on

greet("Bob"); // Output: Hello, Bob!

Syntax:
let func@onName = func@on(parameter1, parameter2, ...) {
// Code to be executed
};

3. Arrow Functions (ES6)

Arrow functions provide a shorter syntax for writing functions. They are often used for
simple functions or callbacks. Arrow functions also do not bind their own this context (unlike
regular functions).

let greet = (name) => {

console.log("Hello, " + name + "!");
};

// Calling the func@on

greet("Charlie"); // Output: Hello, Charlie!

Syntax:
let func@onName = (parameter1, parameter2, ...) => {
// Code to be executed
};

4. Immediately Invoked Function Expression (IIFE)

An IIFE is a function that runs as soon as it is defined. It is often used to create a local scope
and avoid polluting the global namespace.

(func@on() {
console.log("This is an IIFE!");
})();
By: Mr. Amrit Jaiswal 58
Syntax:
(func@on() {
// Code to be executed
})();

5. Function Parameters and Return Values

a. Parameters

Functions can take zero or more parameters. You define the parameters in the function
declaration, and when calling the function, you pass the actual arguments.

func@on add(a, b) {
return a + b;
}

let sum = add(2, 3); // sum is 5

b. Default Parameters (ES6)

You can set default values for function parameters. If an argument is not passed for that
parameter, the default value is used.

func@on greet(name = "Guest") {

console.log("Hello, " + name + "!");
}

greet(); // Output: Hello, Guest!

greet("Alice"); // Output: Hello, Alice!

c. Return Statement

The return statement is used to send a value back from the function. If no return statement
is used, the function returns undefined by default.

func@on mul@ply(a, b) {
return a * b;
}

let result = mul@ply(3, 4); // result is 12

By: Mr. Amrit Jaiswal 59

6. Function Scope

JavaScript functions create their own local scope. Variables declared inside a function are
not accessible from outside the function. However, they can access variables from the outer
scope.

let globalVar = "I'm global";

func@on showMessage() {
let localVar = "I'm local";
console.log(globalVar); // Can access global variable
console.log(localVar); // Can access local variable
}

showMessage();
// console.log(localVar); // Error: localVar is not defined

7. this Keyword in Functions

In regular functions, the value of this depends on how the function is called. In an object
method, this refers to the object itself.

let person = {
name: "Alice",
greet: function() {
console.log("Hello, " + this.name);
}
};

person.greet(); // Output: Hello, Alice

In arrow func@ons, this is lexically bound, meaning it inherits the value of this from its
surrounding context.

let person = {
name: "Bob",
greet: () => {
console.log("Hello, " + this.name); // `this` does not refer to `person`
}
};

person.greet(); // Output: Hello, undefined

By: Mr. Amrit Jaiswal 60

8. Recursive Functions

A recursive function is a function that calls itself to solve a problem. It's important to include
a base case to prevent infinite recursion.

function factorial(n) {
if (n === 0) return 1; // Base case
return n * factorial(n - 1); // Recursive case
}

console.log(factorial(5)); // Output: 120

Objects

In JavaScript, objects are a fundamental data structure used to store collec@ons of key-value
pairs. They are highly versa@le and form the backbone of JavaScript programming, enabling
you to represent real-world en@@es, store data, and define behavior through methods.

1. Defining an Object

a. Object Literal: The most common way to create an object is using curly braces {}.

let person = {
name: "Alice",
age: 25,
greet: func@on() {
console.log("Hello, my name is " + this.name);
}
};

// Accessing proper@es
console.log(person.name); // Output: Alice
console.log(person.age); // Output: 25

// Calling a method
person.greet(); // Output: Hello, my name is Alice

b. Object Constructor

You can create an object using the Object constructor.

let person = new Object();

person.name = "Bob";
person.age = 30;

console.log(person.name); // Output: Bob

By: Mr. Amrit Jaiswal 61

 console.log(person.age); // Output: 30

c. Object with Object.create()

The Object.create() method allows you to create a new object with a specified prototype
object.

let prototypePerson = {
greet: func@on() {
console.log("Hello!");
}
};

let person = Object.create(prototypePerson);

person.name = "Charlie";

console.log(person.name); // Output: Charlie

person.greet(); // Output: Hello!

2. Accessing Object Properties

a. Dot Nota.on

console.log(person.name); // Output: Alice

b. Bracket Nota@on

Bracket notation allows you to use dynamic keys or keys with special characters.

console.log(person["name"]); // Output: Alice

// Using a dynamic key

let key = "age";
console.log(person[key]); // Output: 25

3. Adding, Modifying, and Deleting Properties

a. Adding Proper.es

person.address = "123 Street";

console.log(person.address); // Output: 123 Street

b. Modifying Proper.es

person.age = 26;
console.log(person.age); // Output: 26

By: Mr. Amrit Jaiswal 62

c. Dele.ng Proper.es

delete person.address;
console.log(person.address); // Output: undefined

Introduc.on to AJAX

AJAX (Asynchronous JavaScript and XML) is a web development technique used to create
dynamic and interactive web applications. It allows web pages to update content
dynamically without requiring a full reload of the page. This leads to faster and more user-
friendly web experiences.

Features of AJAX:

1. Asynchronous Updates: AJAX can send and receive data asynchronously in the
background while the user interacts with the page.
2. Par.al Page Updates: Instead of reloading the en@re page, only specific parts of a
webpage are updated.
3. Independent Communica.on: It communicates with the server independently of the
page load process.
4. Cross-Technology: Although its name includes "XML," AJAX can handle various data
formats like JSON, HTML, and plain text.

How AJAX Works:

1. User Interac.on: The user interacts with the webpage (e.g., clicking a bu_on).
2. JavaScript Execu.on: JavaScript makes an asynchronous HTTP request to the server
using the XMLH_pRequestobject or the newer fetch API.
3. Server Response: The server processes the request and sends back data (in formats
like JSON, XML, or plain text).
4. DOM Update: JavaScript processes the response and updates the DOM to reflect the
new data without reloading the page.

Benefits of AJAX:

• Improved User Experience: Eliminates unnecessary page reloads, making web

applica@ons faster and smoother.
• Reduced Bandwidth Usage: Only necessary data is exchanged between the client
and server.
• Seamless Data Updates: Enables real-@me updates, such as live no@fica@ons and
chat messages.

Simple AJAX Example:

Here’s an example using JavaScript with the XMLHttpRequest object:

By: Mr. Amrit Jaiswal 63

 // Create a new XMLHttpRequest object
const xhr = new XMLHttpRequest();

// Configure it: GET-request for the URL /example

xhr.open("GET", "/example", true);

// Set up a function to handle the response

xhr.onload = function () {
if (xhr.status === 200) {
// Update the content of a page element
document.getElementById("output").innerHTML = xhr.responseText;
} else {
console.error("Error:", xhr.statusText);
}
};

// Send the request

xhr.send();

AJAX with fetch API:

A simpler and modern way to make AJAX calls is using the fetch API:

// Fetch example
fetch("/example")
.then(response => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.text();
})
.then(data => {
// Update the content of a page element
document.getElementById("output").innerHTML = data;
})
.catch(error => console.error("Fetch error:", error));

VB Script

VBScript (Visual Basic Scrip@ng Edi@on) is a lightweight scrip@ng language developed by

MicrosoI. It is modeled on Visual Basic and designed to be embedded in applica@ons, such
as web pages and Windows automa@on tasks. However, VBScript has become largely
obsolete and is no longer supported in modern web browsers, though it is s@ll used in legacy
systems and Windows environments.

By: Mr. Amrit Jaiswal 64

Features of VBScript

1. Lightweight: A simplified version of Visual Basic.

2. Windows Integra.on: Can be used for automa@ng tasks on Windows.
3. Procedural Language: Supports func@ons, loops, and decision-making structures.
4. Host Applica.ons: Runs within Windows Script Host (WSH), Internet Explorer (up to
version 11), or embedded in other MicrosoI applica@ons.

Syntax Basics

Here’s a look at the basic syntax:

Variables: Variables in VBScript are declared using the Dim keyword.

Dim myVariable
myVariable = "Hello, VBScript!"

Condi@onal Statements: VBScript supports If...Then...Else for condi@onal execu@on.

Dim age
age = 20

If age >= 18 Then

MsgBox "You are an adult."
Else
MsgBox "You are a minor."
End If

Loops: VBScript supports various loops like For, While, and Do Un@l.

Dim i
For i = 1 To 5
MsgBox "Itera@on: " & i
Next

Func.ons: You can create custom func@ons using the Func@on keyword.

Func@on AddNumbers(a, b)
AddNumbers = a + b
End Func@on

MsgBox AddNumbers(5, 10) ' Outputs 15

Embedding VBScript in HTML

VBScript can be embedded in HTML pages (though only supported in old versions of
Internet Explorer).

By: Mr. Amrit Jaiswal 65

 <!DOCTYPE html>
<html>
<head>
<@tle>VBScript Example</@tle>
</head>
<body>
<h1>VBScript Demo</h1>
<script type="text/vbscript">
MsgBox "Hello, this is VBScript in a web page!"
</script>
</body>
</html>

Limita.ons of VBScript

1. Obsolete Technology: It is no longer supported in modern browsers and is being

phased out in newer Windows versions.
2. Security Risks: Scripts can poten@ally execute harmful opera@ons.
3. Limited Use Cases: Mostly confined to Windows environments and legacy systems.

By: Mr. Amrit Jaiswal 66

 Unit- IV

Server Site Programming

Server-side programming involves wri@ng code that runs on the server to manage the back-
end opera@ons of a web applica@on. It focuses on tasks like processing user inputs,
interac@ng with databases, authen@ca@ng users, and delivering dynamic content to the
client's browser.

Introduc.on to Ac.ve Server Pages (ASP)

Active Server Pages (ASP) is a server-side scripting technology developed by Microsoft, used
to create dynamic and interactive web pages. Introduced in the late 1990s, ASP allows
developers to embed server-side scripts (usually written in VBScript or JScript) into HTML
pages, enabling functionalities like accessing databases, handling user inputs, and delivering
personalized content.

Features of ASP:

1. Server-Side Execu.on: ASP code is executed on the server before the HTML is sent to
the client.
2. Dynamic Content: It enables dynamic genera@on of web content based on user
interac@ons or database queries.
3. Interoperability: Works well with databases like MicrosoI Access, SQL Server, and
other ODBC-compliant databases.
4. Integra.on with IIS: ASP is @ghtly integrated with Internet Informa@on Services (IIS),
MicrosoI's web server.

How ASP Works:

1. Client Request: The user’s browser sends a request for an ASP file to the server.
2. Server Processing: The IIS server processes the ASP file, executes the embedded
scripts, and generates HTML.
3. Response: The server sends the dynamically generated HTML back to the client,
which is displayed in the browser.

Basic ASP Syntax:

An ASP file typically contains a mix of HTML and server-side script.

Example of a Simple ASP Page:

<%@ Language="VBScript" %>
<html>
<head>
<@tle>Welcome Page</@tle>
</head>
<body>

By: Mr. Amrit Jaiswal 67

 <h1>Welcome to ASP!</h1>
<%
' Server-side script in VBScript
Dim name
name = "User"
Response.Write "Hello, " & name & "!"
%>
</body>
</html>

Benefits of ASP:

1. Dynamic Web Applica.ons: Makes it easy to create dynamic and interac@ve web
pages.
2. Integra.on with Microsol Technologies: Works seamlessly with MicrosoI databases
and tools.
3. Ease of Learning: Familiarity with VBScript or JavaScript makes ASP easy to learn for
beginners.

Limita.ons of ASP:

1. PlaTorm Dependency: Works primarily on Windows with IIS.

2. Outdated Technology: ASP is an older technology and has been succeeded by
ASP.NET.
3. Performance Issues: Not as efficient as modern server-side technologies.

Introduc.on to JavaServer Pages (JSP)

JavaServer Pages (JSP) is a server-side technology developed by Sun Microsystems (now part
of Oracle) as part of the Java EE platform. JSP enables the creation of dynamic, platform-
independent web content by combining HTML, XML, and Java code. It simplifies the
development of web applications by embedding Java code into HTML pages, allowing the
generation of dynamic content based on user interactions or backend data.

Features of JSP:

1. Dynamic Content Genera.on: JSP enables the crea@on of web pages with dynamic
content.
2. Java-Based: Leverages the Java programming language for flexibility and robustness.
3. PlaTorm Independence: Runs on any server that supports a Java Virtual Machine
(JVM).
4. Separa.on of Concerns: Encourages the separa@on of presenta@on (HTML) and logic
(Java) using frameworks like MVC.
5. Reusable Components: Facilitates the reuse of JavaBeans and custom tags in JSP
files.

By: Mr. Amrit Jaiswal 68

How JSP Works:

1. Client Request: The browser sends a request for a JSP file to the server.
2. JSP Processing:
o The server translates the JSP file into a servlet (a Java class).
o The servlet is compiled into bytecode and executed on the server.
3. Response: The server generates an HTML response based on the processed JSP and
sends it to the client.

Basic Syntax and Structure

A JSP file is a mix of HTML and Java code, with special tags for embedding Java:

JSP Scriptlet Example:

<%@ page language="java" %>

<html>
<head>
<@tle>JSP Example</@tle>
</head>
<body>
<h1>Welcome to JSP!</h1>
<%
// Java code inside a scriptlet
String userName = "Guest";
out.println("Hello, " + userName + "!");
%>
</body>
</html>

Advantages of JSP:

1. Ease of Use: Simplifies embedding Java code in HTML.

2. PlaTorm Independence: Runs on any planorm with a compa@ble JVM.
3. Integra.on with Java: Leverages the en@re Java ecosystem, including APIs and
libraries.
4. Separa.on of Logic and Presenta.on: Promotes cleaner, maintainable code when
used with frameworks.
5. Reusable Components: Encourages the use of JavaBeans, custom tags, and tag
libraries.

JSP Lifecycle:

1. Transla.on: The JSP file is translated into a servlet.

2. Compila.on: The servlet is compiled into bytecode.
3. Ini.aliza.on: The servlet is ini@alized by calling the init method.
4. Execu.on: The service method handles client requests and generates responses.

By: Mr. Amrit Jaiswal 69

 5. Destruc.on: The servlet is destroyed when no longer needed.

Tools and Frameworks for JSP:

1. Apache Tomcat: Popular JSP/Servlet container.

2. Spring Framework: OIen used with JSP for crea@ng enterprise-level applica@ons.
3. JSTL (JavaServer Pages Standard Tag Library): Simplifies common tasks like looping
and condi@onal logic.

Sharing Data Between JSP Pages

In web applications, sharing data between different JSP pages is a common requirement. JSP
provides several mechanisms for transferring data, depending on the scope and the use
case. Below are the most commonly used techniques for sharing data between JSP pages:

• Query Parameters

• Pass data via URL (e.g., page2.jsp?username=John).

• Use request.getParameter("username") to retrieve it.
• Simple but exposes data in the URL.

• Form Submission

• Use HTML forms to pass data with GET or POST.

• Retrieve with request.getParameter("fieldName").
• Secure if used with POST.

• Request Attributes

• Share data within a single request using request.setAttribute().

• Forward to another page using RequestDispatcher.

• Session Attributes

• Store data for the user's session using session.setAttribute().

• Retrieve with session.getAttribute().
• Ideal for multi-page workflows.

• Application Attributes

• Share data across the entire application with application.setAttribute().

• Persistent for all users but shared globally.

• Cookies

• Store data on the client’s browser using response.addCookie().

• Retrieve with request.getCookies().
• Persistent but limited and less secure.

By: Mr. Amrit Jaiswal 70

• Hidden Fields

• Pass data invisibly in form fields.

• Retrieve with request.getParameter().
• Useful for non-sensitive data.

By: Mr. Amrit Jaiswal 71