Web Development

Unit 1:

 Introduction to the World Wide Web (WWW):

The World Wide Web (WWW) is a system of interconnected documents and resources linked by
hyperlinks and URLs (Uniform Resource Locators). It's a vital part of the internet.
OR
The World Wide Web, often called the WWW or simply the web, is like a huge library on the internet.
This library is filled with web pages that are like digital books. We use special tools called web
browsers, such as Google Chrome or Firefox, to read these web pages, just like we use books to read in a
regular library.
 Web Pages: Think of web pages as individual pages in these digital books. They can have
text, pictures, links, and sometimes even fun things like videos or games.
 Web Sites: Web sites are like collections of these web pages. They group together pages that
are about similar things. Imagine them as books with chapters that relate to one another. It
can include multiple web pages, images, videos, and other multimedia elements.
 Access with Web Browsers: To read these web pages, we use web browsers. It's like
opening a book to read in a library. You simply click on the browser icon on your computer or
phone.
 Access with Web Browsers: To read these web pages, we use web browsers, It is an
software. It's like opening a book to read in a library. You simply click on the browser icon on
your computer or phone.
 Links: Web pages are connected by links, which are like references or pointers. Clicking on a
link takes you from one web page to another, just as flipping from one page to another in a
book.
 URLs (Uniform Resource Locators): Every web page has a unique address called a URL.
Think of it as the location of a book on a shelf in the library. It helps us find the web page on
the internet.
 Static vs. Dynamic: Web pages can be either static (unchanging, like a printed page) or
dynamic (changing based on user interactions or data from a database, like a choose-your-
own-adventure book).
 Server and Client: When you open a web page, your computer (which we call the client)
talks to another computer (the server) on the internet. It's like asking a librarian for a book.

In a nutshell, the WWW is like a big online library full of digital books (web pages). We use web
browsers to read them, and links help us jump from one page to another. It's a fantastic way to share
information, have fun, and do many things on the internet.
  Static v/s Dynamic Websites
 Definition of Static Website:
A static website is a type of website where the content remains fixed and does not change
automatically based on user interactions or data from a database.
 Characteristics of Static Websites:
 Content remains constant: Static websites display the same information to all users,
and updates require manual changes to the web pages.
 Limited interactivity: Users can view content but cannot interact with dynamic
elements like forms or user accounts.
 Faster loading times: Static websites tend to load quickly since they don't need to
fetch data from databases or perform complex calculations.
 Examples of Static Websites:
 Brochure websites: Static websites are often used for displaying basic information
about a company, such as its history, services, and contact details.
 Personal blogs: Some blogs with fixed content and no user interactions are static.
Static Website
Advantages Disadvantages
1. Simplicity and Speed: Static websites Limited Interactivity: Static websites are less
are simple to create and load quickly interactive, making it challenging to implement features
because there's no need to fetch data from like user logins, comments, or real-time updates.
databases or process dynamic content.
This can provide a better user experience.
2. Cost-Effective: They are often less Content Management: Updating content on static
expensive to host and maintain because websites can be time-consuming, especially for larger
they don't require server-side scripting or websites, as each change must be made manually.
database management.
3. Security: Static websites are generally Scalability: Scaling a static website to handle a large
more secure since there are fewer number of pages or a growing user base can be
opportunities for security vulnerabilities challenging without transitioning to a dynamic system.
compared to dynamic websites.
4. Reliability: Static websites tend to have
high uptime and are less prone to server-
related issues since they don't rely on
complex server-side technologies.
5. SEO-Friendly: Search engines can
easily index static web pages, which can
improve search engine optimization
(SEO).

 Definition of Dynamic Website:

A dynamic website is a type of website that can change its content in real-time, adapting to
user inputs and data from databases.
 Characteristics of Dynamic Websites:
 Personalized content: Dynamic websites can display content tailored to individual
users, such as customized recommendations on e-commerce sites or personalized
news feeds on social media.
 Interactivity: Users can interact with dynamic elements like forms, submit data, and
receive real-time responses.
 Database-driven: Dynamic websites use databases to store and retrieve data,
ensuring that content is always up-to-date.
 Examples of Dynamic Websites:
 Social media platforms: Websites like Facebook and Twitter are dynamic, providing
personalized feeds and allowing users to interact with posts and comments.
Dynamic Website
Advantages Disadvantages
1. Interactivity: Dynamic websites can engage Complexity: Dynamic websites are more complex to
users with interactive features like forms, user develop, requiring server-side scripting languages and
accounts, and real-time content updates, databases. This complexity can increase development time and
enhancing user experience. cost.
2. Personalization: They can deliver Slower Loading Times: Dynamic websites may load more
personalized content and recommendations slowly due to the need to fetch and process data from
based on user behavior and preferences, databases, especially on high-traffic sites.
increasing user engagement.
3. Efficient Content Management: Maintenance: They often require ongoing maintenance to
Dynamic websites use databases and content update server software, security measures, and database
management systems (CMS) that make it management.
easier to update and organize content across
the site.
4. Scalability: Dynamic websites can easily Security Concerns: Dynamic websites can be more
scale to accommodate a growing amount of vulnerable to security threats if not properly maintained and
content or users. secured due to the server-side components and databases.

 E-commerce websites: Online stores like Amazon and eBay use dynamic websites to
show products based on user preferences and enable shopping cart functionality.

Client-Server Computing Concepts:

Client-server computing is a model where two main roles work together on the internet. The client, like the
person who asks for help, represents our devices (computers or smartphones) that send requests for
information or services. The server, like the expert who provides assistance, is another computer that stores
and delivers information or services to clients.
Web Client and Web Server:
A web client is like a customer in a restaurant; it's our device (computer or smartphone) that requests web
pages from web servers. A web server is like the chef in the restaurant; it's another computer that stores and
prepares web pages. When we ask for a web page, the web server processes it and sends it to our web client.
Web Browser:
A web browser is the software we use to view web pages. It acts like a magical pair of glasses for the
internet. When we type a web address (URL) into our browser, it instructs our web client to request the web
page from the web server. Once the web server "cooks" the page, the browser displays it on our screen.
Client-side and Server-side Scripting Languages:
Client-side scripting is like a set of instructions for our web browser. It makes web pages interactive by, for
example, checking forms and creating pop-up messages. JavaScript is a common client-side scripting
language.
Server-side scripting happens on the web server. It processes data, interacts with databases, and prepares
web pages before sending them to our browser. Examples of server-side scripting languages include PHP,
Python, and Node.js.

 Basics of HTML:
 HTML (Hypertext Markup Language) is the foundation of web pages. It uses a system of tags to
structure content.
 A basic HTML document starts with <!DOCTYPE html> to define the document type. Then, the
HTML structure begins with <html>, followed by <head> (for meta-information) and <body> (for
the visible content).

Example:

HTML Comments:
 Comments are used to add
notes in the code for developers. They don't appear on the web page.
Example: <!-- This is an HTML comment -->

Formatting and Fonts:

 HTML provides tags for text formatting, like <b> (bold) and <i> (italic). However, it's recommended
to use CSS for styling.
<p>This is <b>bold</b> and <i>italic</i> text.</p>

Color:
 Colors can be applied to text and background using CSS, but HTML allows specifying
text and background color using attributes.
  Example:
<p style="color: red; background-color: yellow;">This is red text on a yellow
background.</p>
Hyperlink:
 Hyperlinks are created with the <a> tag and the href attribute.
 Example:
<a href="https://www.example.com">Visit Example</a>
Lists:
 HTML supports ordered lists (<ol>) and unordered lists (<ul>), both containing list
items (<li>).
 Example:

Tables:
 Tables are created with the <table>, <tr>, <td>, and <th> elements.
  Example:

Images:
 Images are displayed using the <img> tag with the src attribute pointing to the image
file.
 Example:
<img src="image.jpg" alt="A beautiful image">
Forms:
 Forms are used for user input and can include elements like text boxes (<input>), text
areas (<textarea>), and buttons (<button>).
 Example:

XHTML:
  XHTML (Extensible HyperText Markup Language) is a stricter version of HTML that
enforces well-formedness rules. For example, all tags must be closed.
 Example:
<p>This is an example of well-formed XHTML.</p>
Meta Tags:
 Meta tags provide information about the web page. For example, the title is set using
the <title> tag, and character encoding with <meta charset="UTF-8">.
 Example:
<head> <title>My Web Page</title> <meta charset="UTF-8"> </head>
Character Entities:
 Character entities are used to display special characters, like &copy; for © or &amp;
for &.
 Example:
<p>&copy; 2023 Example Company</p>
Frames and Frame Sets:
 Framesets: Framesets divide a web page into multiple frames, allowing different web
pages to be displayed in separate sections of the browser window.
 Frame Structure: You can specify the structure of frames and the content to be
displayed in each frame.
Latest Version of HTML:
 The latest version of HTML, as of my last update in September 2021, is HTML5. It
introduced new features like semantic elements (e.g., <header>, <footer), multimedia
support, and improved forms. Please verify if there have been any updates or changes
to HTML specifications beyond HTML5 as of your exam date.
HTML5: HTML5 is the latest version of HTML. It introduced new elements, APIs, and
features for building modern web applications. These include video and audio elements,
canvas for drawing, and enhanced form controls.
HTML (Hypertext Markup Language) and XHTML (Extensible Hypertext Markup
Language) are both markup languages used to structure and display content on the web.
While they share many similarities, there are some key differences between them:
1. Syntax:
 HTML: HTML has more lenient syntax rules, allowing for a degree of
flexibility. It's forgiving of minor errors.
  XHTML: XHTML enforces stricter syntax rules. It follows the rules of XML,
which means documents must be well-formed, and tag nesting must be exact.
Even minor errors can cause the document not to render.
2. Self-closing Tags:
 HTML: In HTML, some tags can be written without closing tags (e.g., <img>),
and browsers handle them fine.
 XHTML: In XHTML, all tags must be closed properly (e.g., <img />), as
required by XML rules.
3. Quotation Marks:
 HTML: Attribute values can be enclosed in single or double quotation marks
(e.g., alt="image" or alt='image').
 XHTML: Attribute values must be enclosed in double quotation marks (e.g.,
alt="image").
4. Case Sensitivity:
 HTML: HTML is not case-sensitive, meaning tags and attribute names can be in
uppercase or lowercase.
 XHTML: XHTML is case-sensitive, and tag and attribute names must be in
lowercase.
5. Document Type Declaration (DOCTYPE):
 HTML: HTML documents typically use a simpler, shorter DOCTYPE
declaration, like <!DOCTYPE html>.
 XHTML: XHTML documents require a more specific DOCTYPE declaration,
such as <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">.
6. Error Handling:
 HTML: Browsers are more forgiving of errors, which can lead to
inconsistencies in rendering.
 XHTML: Errors are less tolerated, leading to more predictable rendering but
also potentially rendering nothing if there are issues.

1. Introduction to CSS:
 CSS stands for Cascading Style Sheets and is used to control the presentation
and layout of web pages.
  It separates the content (HTML) from the presentation, making it easier to style
and format web pages.
2. Basic Syntax and Structure:
 CSS uses a selector (HTML element) and a declaration block (property: value
pairs).
 Example: p { color: blue; font-size: 16px; }
3. Setting Background Images and Colors:
 CSS allows you to set background colors and images for elements.
 background-color and background-image properties are used for this purpose.
4. Manipulating Text:
 CSS can control text properties like color, font size, line height, and text
alignment.
 Example: font-size: 18px; text-align: center;
5. Fonts:
 You can change the font family for text using the font-family property.
 Web-safe fonts and custom fonts (imported via CSS) are commonly used.
6. Borders and Boxes:
 CSS allows you to add borders to elements using the border property.
 You can control the size, style, and color of borders.
7. Margins and Padding:
 Margins create space around an element, while padding creates space within an
element.
 You can adjust these properties to control spacing in your layout.
8. Lists:
 CSS can style lists (ordered and unordered) using properties like list-style-type
and list-style-image.
9. Positioning:
 CSS provides positioning properties like position, top, right, bottom, and left
to control the placement of elements.
 Common values for position include relative, absolute, and fixed.
10.Tables, Images, Text, etc.:
 CSS can be used to style tables, images, and text.
  For tables, you can control properties like border-collapse and table layout.
 For images, you can set the width, height, and alignment.
 For text, you can adjust line spacing, decoration, and more.

The Document Object Model (DOM) is a crucial concept in web development, particularly
when working with JavaScript. The DOM represents the structured content of a web page
and provides a way to interact with and manipulate that content dynamically. Here's an
overview of the DOM:

1. What is the DOM?

 The DOM is a programming interface for web documents. It represents the page as a
structured tree of objects.
 It defines the logical structure of documents and the way a document is accessed and
manipulated.
2. DOM Tree Structure:
 The DOM represents an HTML or XML document as a tree structure.
 Each element, attribute, and piece of text in the document is a node in the tree.
 The top node is known as the Document Object, and it contains all other nodes in the
tree.
3. How to Access the DOM:
 You can access the DOM using JavaScript. The document object represents the top-
level of the DOM and serves as the entry point for interacting with the document.
 Common methods to access elements include getElementById,
getElementsByClassName, and querySelector.
4. Modifying the DOM:
  JavaScript allows you to modify the content, structure, and style of a web page.
 You can add, delete, or modify HTML elements, change attributes, and manipulate
text content.
 Events like clicks, keyboard input, and mouse movements can trigger these
modifications.
5. Event Handling:
 The DOM enables you to handle events such as clicks, keypresses, and mouse
movements. You can define event listeners to respond to these events.
 Event listeners are functions that execute when an event occurs on an element.
6. Benefits of the DOM:
 Dynamic Content: You can change page content without requiring a page reload.
 Interaction: It allows user interaction with the webpage.
 Animation: You can create animations and effects.
 Data Retrieval: Data can be retrieved from a web page and sent to a server
asynchronously.
Here's an example of using the DOM to change the text of an HTML element:
// HTML: <p id="demo">This is a paragraph.</p> // JavaScript to change the text
let element = document.getElementById("demo");
element.innerHTML = "This is a modified paragraph.";