WEB TECHNOLOGY NOTES

Palak Shandil
(Assistant Professor)

UNIT1
Introduction to Web Development
Web development involves creating and maintaining websites. It encompasses everything from
building simple static pages to complex web applications. The field generally includes:
1. Frontend Development: The part of web development that deals with the visual aspects
of a website that user interacts with directly. Technologies include HTML, CSs, and
JavaScript.
2. Backend Development: This involves server-side logic, databases, and application
integration. Common languages include PHP, Python, Ruby, and Node.js.
3. FullStack Development: This combines both frontend and backend development skills.
4. Web Design: Although not strictly coding, web design involves the aesthetics and
usability of a website, focusing on user experience (UX) and user interface (UI).

Web Development Strategies

1. Definc Clear Goals and Objectives:
Purpose: Identify the primary purpose of the website (e.g., e-commerce,
portfolio, blog).
Target Audience: Understand the audience to tailor the content and design
accordingly.
2. Plan and Research:
Competitor Analysis: Examine competitors to understand industry standards and
opportunities for differentiation.
Wireframing and Prototyping: Create wirefames and prototypes to map out the
site structure and design before development.
3. Choose the Right Technologies:
Frontend: Select frameworks and libraries (e.g., React, Angular, Vue.js) based on
the project's needs.
Backend:Choose a backend technology (e.g., Django, Ruby on Rails, Express)
that aligns with the project's requirements.
Databases: Decide between SQL (e.g., MySQL, PostgreSQL) and NoSQL (e.g.,
MongoDB)databases based on the data structure and needs.
4. Responsive Design:
Mobile-First Approach: Design for mobile devices first, then scale up for larger
screens.
Cross-Browser Compatibility: Ensure the website works across different
browsers and devices.
5. Performance Optimization:
HTTP requests
o Loading Speed: Optimize images,use lazy loading, and minimize
to improve page load times.
 WEB TECHNOLOGY NOTES
Palak Shandil
(Assistant Professor)
o Code Efficiency: Minimize and
6. SEO Best Practices: compress CSS, JavaScript, and HTML.
On-Page SEO: Use appropriate meta tags, keywords, and optimize content for
search engines.
Technical SEO: Ensure proper site structure, sitemaps, and clean ÜRLS.
Content Strategy: Create high-quality,relevant content that provides value to
Users.
7. Security Measures:
IITTPS: Use SSL certificates to secure data transmission.
o Input Validation: Sanitize user input to prevent SQL
injection and XSS attacks.
Regular Updates: Keep all software, libraries, and plugins up-to-date to avoid
vulnerabilities.
8. User Experience (UX) and User Interface (UI) Design:
Usability: Ensure the site is easy to navigate and intuitive.
Accessibility: Follow WCAG guidelines to make the site accessible to users with
disabilities.
9. Testing and Debugging:
Cross-Device Testing: Check the website on various devices and screen sizes.
Automated Testing: Usetools to automate testing for functionality and
performance.
10. Deployment and Maintenance:
Version Control:Use tools like Git for version control and collaboration.
Regular Backups: Implement backup solutions to prevent data loss.
Monitoring and Analytics: Use tools like Google Analytics to track site
performance and user behavior.

HISTORY OF WVEB AND INTERNET:

Early Concepts (1950s-1960s)

1950s: Conceptualization of Networking -Early theorists begin to imagine the
possibilities of connecting computers.
1962: Paul Baran proposes packet switching as a method for resilient and efficient data
transmission.
1963: J.C.R. Licklider envisions a"Galactic Network" of interconnected computers,
laying foundational ideas for networking.

ARPANET and the Birth of the Internet (1960s-1970s)

1969: ARPANET-The first successful message sent between UCLA and Stanford
Research Institute. This is considered the birth of the internet.
1972: R:ay Tomlinson introduces email and chooses the "@" symbol to separate
usernames from computer names.
1973: Vint Cerf and Bob Kahn develop TCP/IP protocols, which become the standard
for internet communication.
 WEB TECHNOLOGY NOTES
Palak Shandil
(Assistant Professor)
1974: The term "Internet" appears in apaper by Cerf and Kahn, describing their protocol
suite.

Development of the World Wide Web (1980s-1990s)

1989: Tim Berners-Lee proposes the World Wide Web while working at CERN, aiming
to create a system for sharing information.
1990: Berners-Lee and his team develop the first web browser (WorldWide Web) and the
first web servcr (httpd).
1991: The World Wide Web is made publicly available, marking the beginning of the
modern internet era.
1993: Mosaic, the first widely-used web browser, is released, making the web more
accessible to the general public.
The Rise of Browsers and Search Engines (1990s-2000s)
1994: Netscape Navigator launches, becoming amajor player in the early browser
market.
1995: JavaSeript is introduced, adding interactivity to web pages.
1998: Google is founded by Larry Page and Sergey Brin, revolutionizing web search
with its PageRank algorithm.
2000: The dot-com bubble bursts, leading to significant changes in the tech industry.

Web 2.0 and Social Media (2000s-2010s)

2004: Facebook is launched by Mark Zuckerberg, transforming social networking.
2005: YouTube is founded, allowing users to share videos online and driving the rise of
video content.
2007: Apple introduces the iPhone, revolutionizing mobile internet access and app
developnent.
2008: Web 2.0 becomesa popular term, highlighting the shift toward user-generated
content and interactive web applications.

Modern Web and Internet Technologies (2010s-Present)

including
2010s: IITML5 and CSS3 introduce new capabilities for web development,
multimedia elements and improved design features. sparking
2013: Edward Snowden reveals extensive global surveillance programs,
discussions about privacy and security.
engines prioritize
2014: Mobile-first indexing begins to influence SEO as search
mobile-friendly websites.
faster and more reliable internet
2020s: 5Gtechnology begins rolling out, providing
connections.
promising decentralized
2021: \Wcb3 and blockchain technologies gain traction,
applications and new forms of digital ownership.
 WEB TECHNOLOGY NOTES
Palak Shandil
(Assistant Professor)
Future Trends and Challenges
ArtificialIntelligence (AI): Increasing use of Al for personalized experiences, chatbots,
and advanced data analytics.
Cybersecurity: Growing importance due to rising threats and breaches; emphasis on
improving security measures.
Internet of Things ([oT): Expansion of connected devices and smart technologies that
enhance everyday life but raise security and privacy concerns.
Web3 and Decentralization: Movement towards more decentralized and user-controlled
internct infrastructure, driven by blockchain technologies.
PROTOCOLS GOVERNING WEB:
HTTP(HyperText Transfer Protocol):
Purpose: The foundation of data communication on the web. It governs how messages
are formatted and transmited, and how web servers and browsers should respond to
various commands.
Versions:HTTP/1.0, HTTP/1.1, and HTTP/2, with HTTP/3 being the latest, which uses
QUIC (Quick UDP Internet Connections) for improved performance.
HTTPS (IlyperText Transfer Protocol Secure):
Purpose: An extension of HTTP that incorporates encryption via TLS (Transport Layer
Security) or SSL (Secure Sockets Layer) to secure data transferred between a web
browser and server.
Use: Essential for protecting sensitive data and maintaining privacy and integrity of data.
FTP (File Transfer Protocol):

Purpose: Used for transferring files between a client and server on a network. It allows
users to upload or download files from servers.
Versions: Includes various extensions and secure versions like FTPS (FTP Secure) and
SFTP (SSH File Transfer Protocol).
SMTP (Simple MailTransfer Protocol):
Purpose: Governs the sending of email messages between servers. It's used to relay
outgoing emails from the client to the server or between servers.
Use: Often uscd with IMAP or POP3 for receiving emails.
IMAP (Internet Message Access Protocol):

Purpose: Used by email clients to retrieve messages from a server. Unlike POP3, IMAP
allows multiple devices to access the same mailbox and keeps messages on the server.
 WEB TECHNOLOGY NOTES
Palak Shandil
(Assistant Professor)
Versions: IMAP4 is the most commonly used version.
POP3 (Post OfficeProtocol 3):
Purpose: Also used to retrieve emails from a server, but unlike
downloads emails to the client's device and removes them from IMAP,
the
it typically
Use: ldeal for users who need offline access to server.
their emails.
DNS(Domain Name System):
Purpose: Translates domain names (like www.example.com) into IP
192.0.2.1) so that browsers can locate and load internet resources. addresses (like
Use:Essential for navigating the web by converting
machine-readable IP addresses. human-readable addresses into
TCP/IP (Transmission Control ProtocoVInternet
Protocol):
Purpose: Asuite of protocols that includes TCP and IP. TCP manages the
of data in areliable, ordered, and error-checked manner, transmission
while IP handles addressing and
routing.
Use: Fundamental for internet communication, forming the
across nctworks.
backbone of data transfer

Web Socket:

Purpose: Provides a persistent, full-duplex communication channel between a client and

server over a single, long-lived connection.
Use: Useful for applications requiring real-time data updates, like
live notifications. chat applications or

WRITING WEBPROJECTS:
1, Understand Your Audience

Identify your target audience: Consider their demographics, interests, and needs.
Use audience personas:Develop profiles that represent your ideal
content imore effectively. users to tailor your

2. Define Your Goals

" Purpose: Determine the main purpose of the content (e.g.,

inform, persuade, entertain).
Action: Decide what action you want readers to take (e.g., sign up for a newsletter, make
a purchasc).
3. Create a Content Plan
 WEB TECHNOLOGY NOTES
Palak Shandil
(Assistant Professor)
Outline your topies: List the main subjects you need to cover.
Set a timcline: Create a schedule for writing and
publishing content.
Organize content: Structure your content into sections
for clarity.
with headings and subheadings

4. Write Compelling Content

Craft a strong headline: Make it attention-grabbing and relevant to the content.
Use a conversational tone: Write as if you're speaking directly to the
Be concise: Keep paragraphs short and to the point. reader.
Use active voice: It'smore engaging and easier to read than passive
Include calls to action (CTAs): Encourage readers to take the desiredvoice.
action.
5. Optimize for Scarch Engines (SEO)
Keyword research: Identify relevant keywords and phrases your audience is searching
for.
On-page SEO: Incorporate keywords naturally into titles, headings, and body text.
Meta deseriptions: Write compelling meta descriptions to improve
Alt text: Use descriptive text for images to enhance accessibility andclick-through
SEO.
rates.

6. Focus on Readability
Use bullet points and lists: They make information easier to scan.
Include visuals: Add images, videos, or infographics to break up text and enhance
understanding.
Ensure mobile-friendliness: Make sure your content looks good and is easy to read on
mobilc devices.

7. Edit and Proofread

Check for errors: Look for spelling, grammar, and punctuation mistakes.
Review for clarity: Ensure your content is casy to understand and flows well.
Get feedlback: Have someone else read your content to catch errors you might have
missed and to provide a fresh perspective.
8. Monitor and Update
Track performance: Use analytics tools to monitor how your content is performing
(e.g., pageviews, bounce rates, conversions).
Update regularly: Refresh your content periodically to keep it relevant and accurate.
9. Engage with Your Audience
Encourage interaction: Ask questions or prompt discussions in your content.
 WEB TECHNOLOGY NOTES
Palak Shandil
(Assistant Professor)
Respond tocomments: Engage with your readers through
build a comnity. comments or social media to

CONNECTING TO INTERNET
AND TOOLS
AND INTRODUCTION TO INTERNET SERVICES
Connecting to the lnternet
1. Choosing an lnternet Service Provider (ISP):
ISPs offer various types of connections including DSL, cable,
satellite, and more. The choice often depends on your location fiber-optic,
and needs.
2. Setting Up Your Connection:
o Wired Connection: Involves plugging an
router.
Ethernet cable into your computer and
Wireless Connection (Wi-Fi): Connects through radio signals. You'llneed a Wi
Firouter and a wireless network adapter in your device.
3. Configuring Your Network:
Router Setup: You'lltypically access the router's settings through a
using an IP address provided in the router's manual. This is where youweb browser
your network name (SSID), password, and security settings. configure
4. Connecting Devices:
On your device, search for available Wi-Fi networks, select your network, and
enter the password.
Introduction to Internet Services and Tools
1. Web Browsers:
o Function:Browsers like Google Chrome, Mozilla Firefox, Safari, and Microsoft
Edge allow you to access websites.
Features: Bookmarks, extensions, incognito mode, etc.
2. Search Engines:
Function: Search engines like Google, Bing, and Yahoo help you find
information on the web by indexing billions of web pages.
o Tips: Use specific keywords, phrases, and operators (like quotes for exact
matches) to refine your search.
3. EmailServices:
Providers: Gmail, Outlook, Yahoo Mail, etc.
Features: Sending/receiving emails, attachments, folders for organization, spam
filters.
4. Cloud Storage:
o Providers: Google Drive, Dropbox, OneDrive, etc.
Function: Store and access files from anywhere, share files with others, and
collaborate on documents.
5. Social Media:
P'latforms: Facebook, Twitter, Instagram, LinkedIn, etc.
 WEB TECHNOLOGY NOTES
Palak Shandil
o (Assistant Professor)
Function: Connect with friends, share updates, photos, and videos, and
various communities. engage in
6. Productivity Tools:
o Olice Suites: Google
Workspace (Docs, Sheets), Microsoft Office (Word,
Exce),etc.
Project Mlanagement: Tools like Trello, Asana, and Slack help manage tasks
collaborate with teams. and
7. Streanming Services:
o Video: Netflix, YouTube, Hulu.
o Music: Spotify,Apple Music, Amazon Music.
8. Security Tools:
o Antivirus Software: Protects your device from
malware and other threats.
VPNs (Virtual Private Networks): Enhance privacy by masking your IP address
and encrypting your internet connection.
9. Online Shopping:
Platforms: Amazon, eBay, and various retailer websites.
Features: Browsing products, making purchases, tracking orders.
10. Online Learning:
Platforms: Coursera, Udemy, Khan Academy, and others offer a variety of
courses and learning materials.

What is Client-Server Computing?

In client-server computing, the "client" refers to the user-end device or
services or resources, while the "server" is the system or application thatapplication
that requests
or resources. The client provides these services
and server communicate over a network.

Request

Phne-PT
L
PC-PT
E

Sorver-pT
Laptop
PT
Server
Network

Respone

Cient Server Modet

2. Basic Components:
Client: The client is typically a device or software application that requests resources or
services. For example, a web browser is a client that requests web pages from a server.
 WEB TECHNOLOGY NOTES
Palak Shandil
(Assistant Professor)
Server: The server is asystem or application that provides resources or
clients. Serverscan host web pages, manage databases, handle email, andservices to
Network: This is the communication pathway that connects clients and more.
the internet, a local area network (LAN), or a wide arca servers, such as
network (WAN).
How the Browser Interacts With the Servers?
There are a few steps to follow to interacts with the servers of a
User enters the URL(Uniform Resource Locator) of the website orclient.
file. The Browser then
requests the DNSDOMAIN NAME SYSTEM) Server.
DNSServer lookup for the address of the WEBServer.
The DNS Server responds with the IP address of the WEB
Server.
The Browser sends over an HTTP/HTTPS request to the
the DNS server). WEB Server's IP (provided by
The Server sends over the necessary files for the website.
The Browser then renders the files and the website is
with the help of DOM (Document Object Model) displayed. This rendering is done
Engine collectively known as the JIT or (Just in Time) interpreter,
Compilers.
CSS interpreter, and JS

User Request Domain

DNS-SERVER
Respond IPof Web Server
USER

HTTPResponse with Data Files

Makes HTTP Request to IP WEB-SERVER

3. Types of Client-Server Models:

Two-Tier Architecture: This is a basic model where the

with the server. The client handles the user interface and client directly communicates
server inanuges data and processing. application logic, while the
Three-1ier Architecture: This model introduces an additional layer between the
and server. It typically includes: client
P'resentation Layer (Client): The user interface and client-side logic.
Application Layer (Middle Tier):Business logic and application processing.
DataLayer (Server): Data storage and management.
 </form<body
<inp WEB TECHNOLOGY NOTES
Palak Shandil
(Assistant Professor)
N-Tier Architecture: Extends the three-tier model by adding more layers,
often for
scalability and modularity. Each tier is responsible for a specific aspect of the
such as sccurity, transaction processing, or load balancing. application,
4. Protocols and Communication:

HTTPIITTPS: 1lypertext Transfer Protocol (Secure) is commonly used for web

communication between clients (browsers) and servers.
TCP/P: The foundational protocol suite for communication over the internet and
networks, cnabling reliable data exchange between clients and servers.
REST and SOAP: Web services protocols that allow for
exchange between clients and servers in web applications.communication
and data

5. Advantages of Client-Server Computing:

Centralized Management: Servers can centrally manage resources, updates, and
security, making administration more straightforward.
Scalability: Servers can be scaled up or distributed to handle increased client requests or
larger data volumes.
Resource Sharing: Multiple clients can share the same server resources, such as files,
applications, or databases.
Security: Servers can implement centralized security measures to protect data and
manage user access.

6. Challenges:

Network Dependency: Clients and servers rely on network connectivity, so network

issues can aflect application performance.
Scalability Issues: Servers can become bottlenecks if not properly scaled to handle a
high number of client requests.
Complexity: Managing and maintaining multiple servers and ensuring proper
communication can be complex.
7. Examples:
Web Browsers and Web Servers: Browsers (clients) request web pages
servers.
from web
Email Clients and Email Servers: Email clients request and send
servers.
emails through email
Database Applications: Applications (clients) request data from a database server.
HTML

HTML stands for Hyper Text Markup Language

. HTML is the standard markup language for creating Web pages
 WEBTECHNOLOGY NOTES
Palak Shandil
(Assistant Professor)
HTML describes the structure of a Web page
HTML Consists of a series of elements
HTML elements tell the browser how to display the content
ASimple lITML Document
<! DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<hl>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

defines that this document is an HTML5

The <! DOCTYPE html> declaration
document
element of an HTML page
The <html> element is the root page
meta information about the HTML shown
The <head> element contains (which is
title for the HTML page
The <title> element specifies a page's tab)
the
in the browser's title bar or inthe document's body, and is a container for
The <body> element defines headings, paragraphs, images,
all the visible contents, such as
hyperlinks, tables, lists, etc. large heading
The <h1> elemnent defines aparagraph
The <p> element defines a
HTML Tables
 WEB TECHNOLOGY NOTES
Palak Shandil
<table> (Assistant Professor)
<tr>

<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>

<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</trs
<tr>

<td>Centro comercial Moctezuma</td>

<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

How To Add aBorder

Example
table, th, td {
border: 1px solid black;

Collapsed Table Borders

efiframe WEB TECHNOLOGY NOTES
Palak Shandil
(Assistant Professor)

Example
table, th, td {
border: 1px solid black;
border- collapse: collapse;

Round Table Borders

Example
table, th, td {
border: 1px solid black;
border-radius: 10px;

Skip the border around the table by leaving out table from
the css selector:
 WEB TECHNOLOGY NOTES
Palak Shandil
(Assistant Professor)

Example
th, td {
border: 1px solid black;
border-radius: 10px;

BORDER-STYLE

The following values are allowed:

dotted
dashed
" solid
" double
groove

ridge
inset
outset
none

" hidden
 WEB TECHNOLOGY NOTES
Palak Shandil
(Assistant Professor)
Example
th, td {
border- style: dotted;

HTML Table Sizes

<table style="width:100%">
<tr>

<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>

<td>Eve</td>
<td>]ackson</td>
<td>94</td>
</tr>
</table>

HTML Table - Cell Padding

th, td {
padding : 15px;
}
 WEB TECHNOLOGY NOTES
Palak Shandil
(Assistant Professor)
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 3Opx;
padding-right: 40px;

HTML Table Colspan & Rowspan:

NAME 2022
APRIL

FIESTA

HTML Table -Colspan:

<table>
<tr>

<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>

<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr
<tr>
<td>Eve</td>
<td>]ackson</td>
<td>57</td>
</tr>
</table >

HTML Table - Rowspan

 WEBTECHNOLOGY NOTES
Palak Shandil
(Assistant Professor)
<table>
<tr>

<th>Name</th>
<td>]illk/td>
</tr>
<tr>

<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>

HTML Lists

An unordered HTML list: An ordered HTML list:

" Item 1. First item
" Item 2. Second item
" Item 3. Third item
. Item
4. Fourth item

Unordered IITML List

<ul> " Coffee
<li>Coffee</li> . Tea
Milk
<lisTea</li>
<li>Milk</li>
</ul>

Value Description
disc Sets the list item mnarker to a bullet
(default)
circle Sets the list item marker to a
circle
Square Sets the list item marker to a
square
none The list itemms will not be
marked
 WEB TECHNOLOGY NOTES
Palak Shandil
(Assistant Professor)
<ul style="list-style-type:circle;"> o Coffee
<li>Coffee</liy o Tea
o Milk
<li>Tea</li
<li>Milk</li>
</ul>

Ordered HTML List

Type Description

type="1" The list itemms will be numbered with numbers (default)

type="A" The list itemns will be numbered with uppercase letters

type"a" The list items wiilI be numbered with lowercase letters

The list items wiIbe numbered with uppercase roman numbers
type="I"
The list items will be numbered with lowercase roman numbers
type"i"

<ol type="1"> 1.Coffee.

<li>Coffee</lis 2. Tea
3. Milk
<li>Tea</lis
<li>Mil:</li>
</ol>

Description Lists
<dl> Coffee
<dtsCoffee</dt> -black hot drink
Milk
<dd>- bl ack hot drink</dd> - white cold drink
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML Div lement

CSS: |1) |2)

9. WEB TECHNOLOGY NOTES

Palak Shandil
(Assistant Professor)
<div>
<h2>London</h2 >
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>

HTML class Attribute

<!DOCTYPE htels
<htl>
chead> London
<style
.dty { Londog is the captal ofEoglend
background-color: 3t;
color: white;
border: 2px solid tl:tk;
argin: 2epx;
padting: 20px;

</style> Paris
<fhead
(body> Paxs s te cupial of Frce
<diy class="ity">
ch2>landonK/n)
Erglard. (/D>
(plondan is the capits! cf
</divs

<diy class="city">
TokyoD
ch2Paris/h2>
of france.<{p)
(oParis is the caçitsl
/div>
HTMLid Attribute
<!DOCTYPE htrl>
The id Attribute
chtel>
<head> Use CSS to style an elenent wih he id "myHeader:
<style>
tayHeader{
background-color: líghtblue;
color: black;
padding: 4epu;
text-al1gn: center; My Header
)
</style>
<fhead>
<body>
<h2>The id Attribute</n2>
with the id yteader": </o>
(oWse CSS to style an elenent
ch1 ide'Heacer">y Hesder</hl>

<fbody>
<fhtal>