Subject Name-Web Technology Faculty Name-Ms.

Renu Prasad

UNIT 1
1. Introduction to Web Development and Strategies

Web Development is the process of creating and maintaining websites or web applications
that are accessible through the internet or an intranet. It involves several disciplines,
including web design, web content development, client-side/server-side scripting, and
network security configuration.

1. What is Web Development?

Web development is broadly categorized into two main areas:

 Frontend Development: Focuses on what users interact with directly in their browsers. It
involves designing the look, feel, and behavior of the website or application using HTML,
CSS, and JavaScript.
 Backend Development: Focuses on server-side components that users don't directly interact
with. This involves creating and managing servers, databases, application logic, and APIs that
the frontend communicates with.

Full-Stack Development is the combination of both frontend and backend development,

where developers handle the entire development stack.

2. Key Components of Web Development

 HTML (HyperText Markup Language): The standard language for creating and structuring
content on the web.
 CSS (Cascading Style Sheets): Used for styling and laying out web pages, including design,
colors, fonts, and layout.
 JavaScript: A programming language that enables interactive web pages. It's used for client-
side scripting to make web pages dynamic.
 Backend Languages: Server-side languages like Python, Ruby, PHP, Java, and Node.js are
used for backend development.
 Databases: Systems like MySQL, PostgreSQL, MongoDB, and Firebase store and manage
data for websites and applications.

3. Web Development Strategies

Developing a successful website or web application requires careful planning and strategic
execution. Here are some core strategies:

1. Understand the User's Needs

o Conduct user research to understand the target audience, their behaviors,
preferences, and needs.
o Create user personas to guide the design and development process with the user in
mind.
  Web Development involves creating websites and web applications. It encompasses
a range of tasks, from writing HTML/CSS for a static webpage to developing
complex server-side logic for dynamic applications.
 Strategies in web development can include understanding user needs, selecting the
right technology stack, optimizing for performance, ensuring security, maintaining
accessibility standards, and more.

2. History of Web and Internet

 The Internet is a global network of interconnected computers, while the Web

(World Wide Web) is a service built on top of the Internet that uses protocols like
HTTP to access information via web pages.
 The web was invented by Tim Berners-Lee in 1989. The first website went live in
1991, and since then, web technologies have evolved rapidly, from static pages to
highly interactive applications.

3. Protocols Governing the Web

 Protocols are rules that govern communication over the internet. Key protocols
include:
o HTTP/HTTPS: Protocols used for transmitting web pages.
o FTP: Used for transferring files.
o TCP/IP: Foundational protocols for networking and data transmission.
o DNS: Translates domain names into IP addresses.

4. Writing Web Projects

 Involves creating and managing code that makes up web applications, including:
o Frontend Development: Involves HTML, CSS, JavaScript.
o Backend Development: Involves server-side languages (e.g., Python, PHP,
Java) and databases.
o Full-stack Development: Combination of both frontend and backend.

5. Connecting to the Internet

 This involves understanding how devices connect to networks, including the use of
modems, routers, and ISPs (Internet Service Providers).

6. Introduction to Internet Services and Tools

 Internet Services include email, file sharing, cloud storage, and more.
 Tools can range from browsers and search engines to web development tools like
IDEs and code editors.

7. Introduction to Client-Server Computing

  Client-Server Computing is a model where multiple clients (end-user devices)
request and receive services from a centralized server.
 The client sends a request to the server, which processes it and returns the required
response.

8. Web Page Designing: HTML

 HTML (Hypertext Markup Language) is the standard language for creating web
pages. Some key elements include:
o Lists: <ul>, <ol> for unordered and ordered lists.
o Tables: <table>, <tr>, <td> for displaying tabular data.
o Images: <img> for embedding images.
o Frames: <iframe> for embedding another webpage.
o Forms: <form>, <input>, <button> for user input and interaction.

9. XML (eXtensible Markup Language)

 XML is used to store and transport data.

o Document Type Definition (DTD): Defines the structure and rules for an
XML document.
o XML Schemas: More powerful alternatives to DTD for defining XML
document structure.
o Object Models: Refers to methods of manipulating XML documents.
o XML Processors:
 DOM (Document Object Model): Provides a way to access and
manipulate XML documents as a tree structure.
 SAX (Simple API for XML): An event-driven approach for parsing

HTML (Hypertext Markup Language) is the standard language used to create and design
webpages. It uses a series of tags and elements to define the structure and content of a
webpage. Let's start with some basic HTML coding concepts and examples.

Basic HTML Structure

An HTML document typically has the following basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage using HTML.</p>
</body>
</html>
:

1. <!DOCTYPE html>: Declares the document type and version of HTML (HTML5 in this case).
 2. <html lang="en">: The root element that wraps all the content on the page. The lang
attribute specifies the language of the document.
3. <head>: Contains meta-information about the document, such as its character set, title, and
links to stylesheets or scripts.
4. <meta charset="UTF-8">: Sets the character encoding for the document.
5. <meta name="viewport" content="width=device-width, initial-
scale=1.0">: Ensures the page is responsive and scales properly on different devices.
6. <title>: Sets the title of the webpage, which appears in the browser tab.
7. <body>: Contains the content of the webpage, such as headings, paragraphs, images, etc.

Common HTML Tags

Here are some common HTML tags you might use frequently:

 Headings (<h1> to <h6>):

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>

 Paragraphs (<p>):

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

 Links (<a>):

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

 Images (<img>):

<img src="image.jpg" alt="Description of image" width="200"

height="150">

 Lists:
o Unordered List (<ul> and <li>):

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

o Ordered List (<ol> and <li>):

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Frames

Frames in HTML were used to divide the browser window into multiple sections, where
each section could load a separate HTML document. This allowed for the simultaneous
display of multiple pages within a single window, creating a kind of "window within a
window" effect.

Key Points About Frames

1. Frameset Element: The <frameset> element was used to define a set of frames. Instead of
the <body> element, the <frameset> element was used to organize the window into
different frames.
2. Frame Element: The <frame> element was used within the <frameset> to specify the
properties of each frame, such as which HTML document to display.
3. No longer recommended: HTML frames are considered an outdated technology. They were
deprecated in HTML 4.01 and are not supported in HTML5. Modern web design uses
techniques like CSS and JavaScript for layouts and dynamic content.

Basic Example of HTML Frames

Here is an example that shows how frames were used in older versions of HTML:

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames Example</title>
</head>
<frameset cols="30%, 70%">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>

 <frameset cols="30%, 70%">: The <frameset> tag replaces the <body> tag. The
cols attribute defines the number and size of columns in the frameset. In this example, two
columns are created: the first frame takes up 30% of the width, and the second takes up
70%.
 <frame src="menu.html">: Loads the menu.html file into the first frame.
 <frame src="content.html">: Loads the content.html file into the second frame.

Attributes of the <frame> Element

 src: Specifies the URL of the document to display in the frame.

 name: Defines the name of the frame, which can be targeted by links or scripts.
 scrolling: Controls the presence of scrollbars (yes, no, or auto).
 noresize: Prevents the user from resizing the frame.
 frameborder: Specifies whether to display a border around the frame ( 0 for no border, 1
for a border).

Issues with Frames

 Accessibility: Frames can be challenging for screen readers and other assistive technologies.
  Search Engine Optimization (SEO): Content within frames was not always indexed correctly
by search engines.
 Usability: Frames can cause navigation issues, such as bookmarking problems and back
button behavior.

 Forms:

<form action="/submit-form" method="post">

<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>

he <form> tag in HTML is used to create a form that allows users to input data and send it to
a server. Forms are commonly used for user registration, login pages, search boxes, feedback
forms, and other interactive elements.

Basic Structure of a <form> Tag

Here's a basic example of a form in HTML:

<form action="/submit" method="post">

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

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

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

</form>

Key Attributes of the <form> Tag

 action: Specifies the URL where the form data should be sent when the form is
submitted.
 method: Determines how the form data will be sent to the server. Common values are:
o "get": Appends form data to the URL in name/value pairs. Typically used for
form submissions where data is not sensitive (like search queries).
o "post": Sends form data as an HTTP POST transaction. Used when dealing
with sensitive information (like passwords) or large amounts of data.
 enctype: Specifies how the form data should be encoded when submitted. The
default is "application/x-www-form-urlencoded". Use "multipart/form-data"
when uploading files.
 target: Specifies where to display the response after form submission (e.g., _blank
for a new window or tab).
Form Elements

Inside the <form> tag, you can use various elements to collect user input:

 <input>: For different types of data (text, password, email, checkbox, radio, file, etc.)
 <textarea>: For multi-line text input.
 <button>: For clickable buttons.
 <select> and <option>: For dropdown lists.
 <label>: To provide labels for input elements.

Example of a Complete Form

<form action="/submit" method="post">

<fieldset>
<legend>Personal Information</legend>

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

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

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

<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select><br><br>

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

</fieldset>
</form>

XML (eXtensible Markup Language) is a flexible

text format used for structuring and storing data. It is both human-readable and machine-
readable, which makes it useful for data interchange between different systems. XML defines
a set of rules for encoding documents in a format that is readable and understandable by both
humans and computers.

Key Features of XML:

1. Self-descriptive Structure: XML uses tags to define the structure of the data. Each
tag has a name that describes its content, making the data self-descriptive.
2. Hierarchical Structure: XML data is organized in a tree-like structure with a root
element and nested child elements, allowing for complex data representations.
 3. Platform Independent: XML is platform-independent, which means it can be used
across different operating systems and applications.
4. Custom Tags: Unlike HTML, XML allows users to define their own tags, making it
highly extensible and suitable for a wide range of applications.
5. Unicode Support: XML supports Unicode, allowing for the representation of text in
most of the world's writing systems.

Basic Structure of an XML Document:

Here’s an example of a simple XML document:

<?xml version="1.0" encoding="UTF-8"?>

<note>
<to>Alice</to>
<from>Bob</from>
<heading>Reminder</heading>
<body>Don't forget our meeting tomorrow at 10 AM.</body>
</note>

 <?xml ... ?>: The XML declaration, which defines the version and encoding of the
XML document.
 <note>: The root element, which contains all other elements.
 <to>, <from>, <heading>, <body>: Child elements that store data.

DTD (Document Type Definition) is a set of rules that

define the structure and the legal elements and attributes of an XML document. DTDs are
used to ensure that XML documents conform to a predefined format, providing a standard for
validation.

Purpose of DTD

 Validation: Ensures that XML documents are well-formed and adhere to a specific structure.
 Interoperability: Provides a common format, making it easier to share and understand XML
documents between different systems or applications.
 Consistency: Helps maintain uniformity in the structure and content of XML documents.

Types of DTD

There are two types of DTD:

1. Internal DTD: The DTD is declared within the XML document itself.
2. External DTD: The DTD is declared in a separate file and referenced within the XML
document.

Basic Syntax of DTD

Here is a simple example of both an internal and external DTD.

1. Internal DTD

An internal DTD is defined within the <!DOCTYPE> declaration of an XML document:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE note [
<!ELEMENT note (to, from, heading, body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Alice</to>
<from>Bob</from>
<heading>Reminder</heading>
<body>Don't forget our meeting tomorrow at 10 AM.</body>
</note>

 <!DOCTYPE note [...]>: The <!DOCTYPE> declaration specifies the DTD for the
document.
 <!ELEMENT>: Defines an element. For example, <!ELEMENT note (to, from,
heading, body)> defines that the note element must contain to, from, heading, and
body elements.
 (#PCDATA): Denotes that the element contains parsed character data (text).

2. External DTD

An external DTD is stored in a separate file (e.g., note.dtd) and is referenced within the
XML document:

External DTD file (note.dtd):

<!ELEMENT note (to, from, heading, body)>

<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>

XML Document with External DTD:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE note SYSTEM "note.dtd">
<note>
<to>Alice</to>
<from>Bob</from>
<heading>Reminder</heading>
<body>Don't forget our meeting tomorrow at 10 AM.</body>
</note>

 SYSTEM "note.dtd": Refers to an external DTD file named note.dtd.

Common DTD Declarations

1. Element Declaration (<!ELEMENT>): Defines elements and their content types.

o <!ELEMENT element-name (content-model)>
o Content types:
 (#PCDATA) – Parsed character data (text).
 ANY – Any content is allowed.
 EMPTY – The element cannot contain any content.
2. Attribute Declaration (<!ATTLIST>): Defines attributes for elements.
o <!ATTLIST element-name attribute-name attribute-type default-
value>
o Attribute types:
 CDATA – Character data.
 ID – A unique identifier.
 IDREF – A reference to an ID.
 ENUMERATION – A list of possible values.

Example of Attribute Declaration in DTD

Here’s how attributes can be declared in DTD:

DTD with Attributes:

<!ELEMENT note (to, from, heading, body)>

<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
<!ATTLIST note date CDATA #IMPLIED>

XML Document Using Attributes:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE note SYSTEM "note.dtd">
<note date="2024-09-13">
<to>Alice</to>
<from>Bob</from>
<heading>Reminder</heading>
<body>Don't forget our meeting tomorrow at 10 AM.</body>
</note>

XML Schema (often referred to as XSD for XML Schema Definition) is a more advanced
and powerful way to define the structure, content, and data types of an XML document
compared to a DTD. XML Schema is written in XML, which means it is extensible, supports
data types, and can be validated using standard XML tools.

Key Features of XML Schema (XSD)

 1. Data Type Support: XML Schema provides built-in data types (like string, integer, date,
etc.) and allows users to define their own custom data types.
2. Namespace Support: XML Schema can work with XML namespaces, making it suitable for
complex documents and systems.
3. Extensible and Modular: XML Schemas can be extended and reused, allowing for modular
design.
4. Strong Validation: Offers more precise validation rules and constraints than DTD, such as
specifying maximum or minimum values, string lengths, patterns, and uniqueness.

Basic Structure of an XML Schema

Here is a simple example of an XML Schema that defines the structure of an XML document:

Example XML Document

<?xml version="1.0" encoding="UTF-8"?>

<note xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="note.xsd">

<to>Alice</to>

<from>Bob</from>

<heading>Reminder</heading>

<body>Don't forget our meeting tomorrow at 10 AM.</body>

</note>

 xmlns:xsi: Declares the XML Schema instance namespace.

 xsi:noNamespaceSchemaLocation="note.xsd" : Specifies the location of the XML
Schema file (note.xsd) for validation.

XML Schema (XSD) for the Example

The corresponding XML Schema (note.xsd) might look like this:

<?xml version="1.0" encoding="UTF-8"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<!-- Define the root element -->

<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>

</xs:schema>
  <xs:schema>: The root element of an XML Schema. It defines the schema and its
namespace.
 <xs:element>: Declares an element. For example, <xs:element name="note">
declares the note element as the root.
 <xs:complexType>: Defines a complex element that can contain other elements.
 <xs:sequence>: Specifies that the child elements must appear in the order defined.

Defining Data Types in XML Schema

XML Schema supports several built-in data types like xs:string, xs:integer, xs:decimal,
xs:boolean, xs:date, etc. It also allows for the creation of custom data types.

Example of Data Types

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<!-- Define the root element -->

<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
<xs:element name="date" type="xs:date"/>
</xs:sequence>
</xs:complexType>
</xs:element>

</xs:schema>

 type="xs:date": Specifies that the date element must conform to the date format (YYYY-
MM-DD).

Defining Attributes in XML Schema

Attributes can also be defined in an XML Schema using the <xs:attribute> tag

<?xml version="1.0" encoding="UTF-8"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<!-- Define the root element -->

<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
<xs:attribute name="date" type="xs:date" use="required"/>
</xs:complexType>
</xs:element>

</xs:schema>
  <xs:attribute>: Declares an attribute for an element. In this example, the note element
has a date attribute that is required (use="required").

Why Use XML Schema Over DTD?

 Rich Data Type Support: XML Schema offers more data types and better control over data
formats.
 Namespace Support: Allows the use of XML namespaces for better data management.
 Stronger Validation: Provides more comprehensive validation rules and constraints.
 Extensibility: Can be extended and reused across different XML documents

XML Object Model

The XML Object Model typically refers to the way XML documents are
represented and manipulated in programming, particularly in the context of the Document
Object Model (DOM). DOM is a programming interface provided by various programming
languages (like JavaScript, Python, Java, etc.) that allows programs to read, modify, and
manipulate the structure and content of XML documents.

What is the Document Object Model (DOM)?

The Document Object Model (DOM) is a cross-platform, language-independent interface

that represents an XML (or HTML) document as a tree structure, where each node is an
object representing a part of the document. These nodes can be elements, attributes, text,
comments, and other types of data.

DOM allows you to:

 Traverse: Navigate through the XML document.

 Manipulate: Add, delete, or modify elements, attributes, and text.
 Query: Search for nodes and retrieve their values.

Structure of the XML Object Model (DOM)

When an XML document is loaded into memory, it is represented as a tree with a hierarchical
structure:

1. Document Node: Represents the entire XML document.

2. Element Nodes: Represent XML elements (e.g., <note>, <to>, <from>).
3. Attribute Nodes: Represent attributes of elements (e.g., id="123").
4. Text Nodes: Represent the text content inside elements.
5. Comment Nodes: Represent comments (e.g., <!-- This is a comment -->).
6. Processing Instruction Nodes: Represent instructions to the XML processor.

Example: XML Document

Here is a simple XML document:

<?xml version="1.0" encoding="UTF-8"?>

<note>
<to>Alice</to>
<from>Bob</from>
<heading>Reminder</heading>
<body>Don't forget our meeting tomorrow at 10 AM.</body>
</note>
XML Document Object Model (DOM) Tree

This XML document is represented in the DOM as:

Document
└── Element: note
├── Element: to
│ └── Text: "Alice"
├── Element: from
│ └── Text: "Bob"
├── Element: heading
│ └── Text: "Reminder"
└── Element: body
└── Text: "Don't forget our meeting tomorrow at 10 AM."

An XML Parser is a software tool or library that reads XML documents and
provides a way for programs to access and manipulate the document's content and structure.
XML parsers ensure that the XML document is well-formed and optionally validate it against
a specified schema (like DTD or XML Schema).

Types of XML Parsers

There are mainly two types of XML parsers:

1. DOM (Document Object Model) Parser: Loads the entire XML document into
memory and represents it as a tree structure (a hierarchy of nodes). It provides a way
to traverse and manipulate the XML data. This is useful for scenarios where random
access to the XML elements is required, but it can be memory-intensive for large
documents.
2. SAX (Simple API for XML) Parser: A stream-based parser that reads the XML
document sequentially, element by element, and triggers events (like start element,
end element, etc.). SAX parsers do not load the entire document into memory, making
them more suitable for large XML files where only a small portion of the data is
needed at any time.

How XML Parsers Work

1. DOM Parser

 Process: Reads the entire XML document, creates an in-memory tree structure, and exposes
methods to access and manipulate elements.
  Use Cases: Suitable for small to medium-sized XML documents where you need to
frequently access different parts of the document or modify the document structure.

2. SAX Parser

 Process: Reads the XML document sequentially and triggers events (like start element, end
element, characters, etc.) while parsing. It does not build an in-memory tree structure.
 Use Cases: Suitable for large XML documents or when memory efficiency is crucial, and only
a portion of the XML needs to be processed.

Differences Between DOM and SAX

Feature DOM Parser SAX Parser

Memory Reads document sequentially, uses
Loads entire document into memory
Usage less memory
Access Random access to any part of the Sequential access, cannot move
Method XML document backwards
Suitable for small to medium XML Suitable for large XML files or
Use Case
files streaming
Supports modification of the
Modification Read-only access
document
More complex due to event-driven
Ease of Use Simple and easy to use
nature