Wold Wide Web

- commonly referred to as WWW, W3, or the Web—is a system of interconnected

public webpages accessible through the Internet.
- Web is a collection of information. i.e in the form of text / web pages /
websites.

Webpage
- A Webpage is a single document on the web, typically written in HTML
(Hypertext Markup Language) and accessible through a unique URL.
- Webpages can contain text, images, videos, and other multimedia elements.

Static Webpage

- These are the webpages which are common for everyone or These are the
webpages which will display the same information for all users.

Ex: wikipedia, javaTpoint, tutorialspoint,Personal blogs, informational

sites, and simple portfolios

- Characteristics:

- Fixed Content: The content does not change unless manually updated by
the developer.
- No Interactivity: Static webpages typically do not involve any user
interaction beyond basic navigation.
- Simple to Create: Static webpages are usually created using only HTML
and CSS.
- Performance: They load quickly because they don't require server-side
processing.

Dynamic Webpage
- These web pages display different information for users.
Ex: Instagram, youtube, linkedIn

- Characteristics:

- Interactive Content: The content can be tailored to the user, such

as showing personalized data or allowing users to interact with the page
(e.g., forms, search features).
- Server-Side Processing: Dynamic webpages often rely on server-side
languages like PHP, Python, or Node.js to fetch or manipulate data.
- Database Integration: They frequently interact with databases to
retrieve and display information dynamically (e.g., user profiles,
posts).
 Website

- A Website is a collection of related webpages hosted on a web server and

accessed through a common domain name.
- Examples include e-commerce sites, blogs, social media platforms, and
educational portals.

Network

- A Network is a group of interconnected devices (computers, servers, routers,

etc.) that can communicate with each other.
- The Internet is the largest and most well-known network, consisting of
millions of interconnected devices worldwide.
- Networks can be categorized into different types, such as LAN (Loc al Area
Network), WAN (Wide Area Network), and MAN (Metropolitan Area Network).

Single Page Application (SPA)

- A Single Page Application (SPA) is a web application that loads a single

HTML page and dynamically updates the content as the user interacts with the
app.

- Characteristics:

- Seamless User Experience: SPAs provide a smooth user experience

by not reloading the entire page for each interaction, reducing load
times.
- Client-Side Rendering: Most of the processing happens on the client
side (in the browser), using frameworks like React, Angular, or Vue.js.

- Examples: Gmail, Google Maps, Twitter, and many modern web apps.

Multi-Page Application (MPA)

- A Multi-Page Application (MPA) is a web application where each interaction

or request leads to the loading of a new page from the server.

- Characteristics:
- Traditional Structure: MPAs follow the traditional web structure
where each page is separate and involves a full -page reload.
- Server-Side Rendering: Most of the processing occurs on the server
side, where each request generates a new HTML page.

- Examples: E-commerce sites, news websites, and large corporate websites.

<!--! How the Web Works -->

- Client-Server Model: The web operates on a client-server model. The client

(usually a web browser) sends a request to a server (where the web site is
hosted), and the server responds with the requested webpage.

- HTTP/HTTPS Protocols: Communication between the client and server happens

over HTTP or HTTPS (secure version of HTTP). These protocols define how messages
are formatted and transmitted.

- DNS (Domain Name System): When a user enters a website’s URL, the DNS
translates the domain name into an IP address, which is used to locate the web
server where the website is hosted.

- Rendering: The server sends back the HTML, CSS, and JavaScript files to
the browser, which then renders the webpage for the user to view and interact
with.

- Browser: Browser is a client side application which is used to send requests

and get
back the responses from the server.

- URL: URL stands for uniform resource locator.

When we search for anything in the browser, It will generate an URL.
Ex: https://www.instagram.com

- Server: It is the place where all the websites are hoisted.

Ip address of all data were stored here.
<!-- ! Three-Tier Architecture -->

- Three-Tier Architecture is a software design pattern that divides an

application into three distinct layers, each with its own responsibilities:

1. Presentation Layer (Client Tier): This is the topmost layer where the
user interacts with the application. It typically includes the user interface
(UI) and the client-side logic (HTML, CSS, JavaScript).
2. Application Layer (Business Logic Tier): This middle layer processes
the business logic of the application. It handles the communication between the
presentation layer and the data layer, performing operations, calculations, and
decision-making.
3. Data Layer (Data Tier): The bottom layer is responsible for managing
data storage and retrieval. It interacts with databases or other storage systems
to store, query, and update data.

- Advantages of Three-Tier Architecture:

- Scalability: Each layer can be scaled independently to handle increased

load.
- Maintainability: The separation of concerns makes the system easier to
manage and update.
- Reusability: Components of each layer can be reused in other applications.
- Security: Each layer can implement its own security measures, adding
layers of protection.
 <!-- ! HTML -->

### Understanding the Full Form of HTML: Hypertext Markup Langu age

Hypertext

- Hypertext refers to text that contains links (called hyperlinks) to other

texts or documents.
- meaning users can jump from one document to another simply by clicking on
hyperlinks.

Markup

- Markup refers to the way tags are used to define the structure and
presentation of content in a document.
- The markup does not display directly on the webpage; instead, it instructs
the browser on how to render the content. For example, the `<p>` tag defines a
paragraph, and the `<h1>` tag defines the main heading.

<!--! Tags In HTML-->

### Notes on HTML Tags

1. What Are HTML Tags?

- Tags are predefined keywords in HTML that are enclosed in angular braces
(`< >`).
- Each tag has a specific purpose and used for, determining how content
within the tag is displayed or behaves on the webpage.

2. Syntax of HTML Tags

- The general syntax for HTML tags is as follows:

<tagname> content </tagname>

- Example:
- <p> Hello world </p>
- <b> Hello world </b>
 3. Types of HTML Tags
HTML tags are categorized into two types:

1. Paired Tags
- Definition: Paired tags require both an opening tag and a closing tag.
- Syntax: The closing tag is similar to the opening tag but includes a
forward slash (`/`).

- Example:

<p> Hello Web Dev </p>

- Explanation: In this example, `<p>` is the opening tag, and `</p>` is

the closing tag.

2. Unpaired Tags

- Definition: Unpaired tags, also known as self-closing tags, do not

require a closing tag.
- Example: <br> , <hr>, <input>
 <!-- ! Structure Of HTML -->

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

1. <!DOCTYPE html>

- The `<!DOCTYPE html>` declaration is the very first line in an HTML

document.
- Purpose: It tells the web browser which version of HTML the document is
written in.
- For modern HTML documents, use `<!DOCTYPE html>` to specify HTML5, the
latest standard.

2. <html>

- The `<html>` element is the root of an HTML document and contains all other
elements.
- Attributes: Typically includes the `lang` attribute to specify the language
of the document (e.g., `lang="en"` for English).

3. <head>

- The `<head>` section contains meta-information about the document, which

is not displayed directly on the webpage.

- Key Elements in the Head Section:

- <meta charset="UTF-8">: Specifies the character encoding for the
document, ensuring that text is displayed correctly.
- <title>: Sets the title of the webpage, which appears in the browser
tab.
- <meta name="viewport">: Ensures the page is responsive and displays
correctly on different devices.

4. <body>
- The `<body>` section contains the content that is displayed on the webpage,
including text, images, links, and other elements.