Unit-1

Introduction: Concept of WWW, Internet and WWW

The World Wide Web (WWW), often called the Web, is a system of interconnected webpages and
information that you can access using the Internet. It was created to help people share and find
information easily, using links that connect different pages together. The Web allows us to browse
websites, watch videos, shop online, and connect with others around the world through our computers
and phones.

All public websites or web pages that people may access on their local computers and other devices
through the internet are collectively known as the World Wide Web or W3. Users can get further
information by navigating to links interconnecting these pages and documents. This data may be
presented in text, picture, audio, or video formats on the internet.

What is WWW?

WWW stands for World Wide Web and is commonly known as the Web. The WWW was started by
CERN in 1989. WWW is defined as the collection of different websites around the world, containing
different information shared via local servers (or computers).

Web pages are linked together using hyperlinks which are HTML-formatted and, also referred to as
hypertext, these are the fundamental units of the Internet and are accessed through Hypertext Transfer
Protocol(HTTP). Such digital connections, or links, allow users to easily access desired information by
connecting relevant pieces of information. The benefit of hypertext is it allows you to pick a word or
phrase from the text and click on other sites that have more information about it.

History of the WWW-

It is a project created, by Tim Berner Lee in 1989, for researchers to work together effectively at CERN.
It is an organization, named the World Wide Web Consortium (W3C), which was developed for further
development of the web. This organization is directed by Tim Berner’s Lee, aka the father of the
web. CERN, where Tim Berners worked, is a community of more than 1700 researchers from more
than 100 countries. These researchers spend a little time on CERN and the rest of the time they work at
their colleges and national research facilities in their home country, so there was a requirement for solid
communication so that they can exchange data.

System Architecture-

From the user’s point of view, the web consists of a vast, worldwide connection of documents or web
pages. Each page may contain links to other pages anywhere in the world. The pages can be retrieved
and viewed by using browsers of which internet explorer, Netscape Navigator, Google Chrome, etc are
the popular ones. The browser fetches the page requested interprets the text and formatting commands
on it, and displays the page, properly formatted, on the screen.

The basic model of how the web works are shown in the figure below. Here the browser is displaying
a web page on the client machine. When the user clicks on a line of text that is linked to a page on the
[Link] server, the browser follows the hyperlink by sending a message to the [Link] server asking
it for the page.

Here the browser displays a web page on the client machine when the user clicks on a line of text that
is linked to a page on [Link], the browser follows the hyperlink by sending a message to the [Link]
server asking for the page.

Working of WWW-

A Web browser is used to access web pages. Web browsers can be defined as programs which display
text, data, pictures, animation and video on the Internet. Hyperlinked resources on the World Wide Web
can be accessed using software interfaces provided by Web browsers. Initially, Web browsers were
used only for surfing the Web but now they have become more universal.

The below diagram indicates how the Web operates just like client-server architecture of the internet.
When users request web pages or other information, then the web browser of your system request to
the server for the information and then the web server provide requested services to web browser back
and finally the requested service is utilized by the user who made the request.

World Wide Web-

Web browsers can be used for several tasks including conducting searches, mailing, transferring files,
and much more. Some of the commonly used browsers are Internet Explorer, Opera Mini, and Google
Chrome.

Features of WWW-

 WWW is open source.

 It is a distributed system spread across various websites.
 It is a Hypertext Information System.
 It is Cross-Platform.
 Uses Web Browsers to provide a single interface for many services.
 Dynamic, Interactive and Evolving.

Components of the Web-

There are 3 components of the web:

 Uniform Resource Locator (URL): URL serves as a system for resources on the web.
 Hyper Text Transfer Protocol (HTTP): HTTP specifies communication of browser and server.
 Hyper Text Markup Language (HTML): HTML defines the structure, organisation and content
of a web page.

Difference Between WWW and Internet-

WWW Internet

It is originated in 1989. It is originated in 1960.

WWW is an interconnected network of websites and Internet is used to connect a

documents that can be accessed via the Internet. computer with other computer .

Internet used protocols such

WWW used protocols such as HTTP
as TCP/IP

It is based on software. It is based on hardware.

There is a entire infrastructure in

It is a service contained inside an infrastructure.
internet.
HTTP Protocol: Request and Response-
HTTP stands for “Hypertext Transfer Protocol.” It is a set of rules for sharing data on the World Wide
Web (WWW). HTTP helps web browsers and servers communicate, allowing people to access and
share information over the internet.

Key Points

 Basic Structure: HTTP forms the foundation of the web, enabling data communication and
file sharing.
 Web Browsing: Most websites use HTTP, so when you click on a link or download a file,
HTTP is at work.
 Client-Server Model: HTTP works on a request-response system. Your browser (client) asks
for information, and the website’s server responds with the data.
 Application Layer Protocol: HTTP operates within the Internet Protocol Suite, managing how
data is transmitted and received.

What is HyperText?

The protocol used to transfer hypertext between two computers is known as HyperText Transfer
Protocol. HTTP provides a standard between a web browser and a web server to establish
communication. It is a set of rules for transferring data from one computer to another. Data such as
text, images, and other multimedia files are shared on the World Wide Web. Whenever a web user
opens their web browser, the user indirectly uses HTTP. It is an application protocol that is used for
distributed, collaborative, hypermedia information systems.

Working of HTTP [HyperText Transfer Protocol]

First of all, whenever we want to open any website we first open a web browser after that we will type
the URL of that website (e.g., [Link] ). This URL is now sent to the Domain Name
Server (DNS). Then DNS first checks records for this URL in their database, and then DNS will
return the IP address to the web browser corresponding to this URL. Now the browser is able to send
requests to the actual server.

After the server sends data to the client, the connection will be closed. If we want something else from
the server we should have to re-establish the connection between the client and the server.

Working off HTTPs

What is an HTTP Request?

HTTP request is simply termed as the information or data that is needed by Internet browsers for
loading a website. This is simply known as HTTP Request.

There is some common information that is generally present in all HTTP requests. These are
mentioned below.

 HTTP Version
 URL
 HTTP Method
 HTTP Request Headers
 HTTP Body

HTTP Request Headers

HTTP Request Headers generally store information in the form of key-value and must be present in
each HTTP Request. The use of this Request Header is to provide core information about the client’s
information, etc.

HTTP Request Body

HTTP Request Body simply contains the information that has to be transferred. HTTP Request has
the information or data to be sent to these browsers.

What is HTTP Response?

HTTP Response is simply the answer to what a Server gets when the request is raised. There are
various things contained in HTTP Response, some of them are listed below.

 HTTP Status Code

 HTTP Headers
 HTTP Body

Fig.- HTTP Response

HTTP Response Headers

HTTP Response headers are simply like an HTTP Request where it has that work to send some
important files and data to the HTTP Response Body.

HTTP Response Body

HTTP Responses are the responses that are received successfully upon the request. Generally, it
comes under the requests generated by the web. In most cases, the request is to transfer the HTML
data into a webpage.

What is an HTTP Status Code?

HTTP Status Codes are the 3-digit codes that tell the message or simply tell us about the HTTP
Request whether it has been completed or not. There are simply 5 types of status codes.

 Informational
 Successful
 Re-directional
 Client-Error
 Server-Error

History of HTTP

Tim Berners Lee and his team at CERN get credit for inventing original HTTP and associated
technologies.

 HTTP version 0.9: This was the first version of HTTP which was introduced in 1991.
 HTTP version 1.0: In 1996, RFC 1945 (Request for Comments) was introduced in HTTP
version 1.0.
 HTTP version 1.1: In January 1997, RFC 2068 was introduced in HTTP version 1.1.
Improvements and updates to the HTTP version 1.1 standard were released under RFC 2616
in June 1999.
 HTTP version 2.0: The HTTP version 2.0 specification was published as RFC 7540 on May
14, 2015.
 HTTP version 3.0: HTTP version 3.0 is based on the previous RFC draft. It is renamed as
Hyper-Text Transfer Protocol QUIC which is a transport layer network protocol developed by
Google.

Characteristics of HTTP

HTTP is IP based communication protocol that is used to deliver data from server to client or vice-
versa.

 The server processes a request, which is raised by the client, and also server and client know
each other only during the current bid and response period.
 Any type of content can be exchanged as long as the server and client are compatible with it.
 Once data is exchanged, servers and clients are no longer connected.
  It is a request and response protocol based on client and server requirements.
 It is a connection-less protocol because after the connection is closed, the server does not
remember anything about the client and the client does not remember anything about the
server.
 It is a stateless protocol because both client and server do not expect anything from each other
but they are still able to communicate.

Cookies in HTTP

An HTTP cookie (web cookie, browser cookie) is a little piece of data that a server transmits to a
user’s web browser. When making subsequent queries, the browser may keep the cookie and transmit
it back to the same server. An HTTP cookie is typically used, for example, to maintain a user’s login
state, and to determine whether two requests originate from the same browser. For the stateless HTTP
protocol, it retains stateful information.

Advantages of HTTP

 Memory usage and CPU usage are low because of fewer simultaneous connections.
 Since there are few TCP connections hence network congestion is less.
 Since handshaking is done at the initial connection stage, then latency is reduced because
there is no further need for handshaking for subsequent requests.
 The error can be reported without closing the connection.
 HTTP allows HTTP pipe-lining of requests or responses.

Disadvantages of HTTP

 HTTP requires high power to establish communication and transfer data.

 HTTP is less secure because it does not use any encryption method like HTTPS and
uses TLS to encrypt regular HTTP requests and responses.
 HTTP is not optimized for cellular phones and it is too gabby.
 HTTP does not offer a genuine exchange of data because it is less secure.
 The client does not close the connection until it receives complete data from the server;
hence, the server needs to wait for data completion and cannot be available for other clients
during this time.

Web Browser and Web Server-

Web Browser-

A Web Browser is a client-side software application that allows users to interact with and view
content on the World Wide Web. Some popular web browsers include Google Chrome, Mozilla
Firefox, Safari, and Microsoft Edge.

Key Functions of a Web Browser:

  HTTP Requests: When you enter a URL (like [Link] or click on a
link, the web browser sends an HTTP (or HTTPS) request to the appropriate web server.
 Rendering Content: The browser receives HTML, CSS, JavaScript, and other resources from
the web server and renders them into a user-friendly web page that you can interact with.
 Navigation: Browsers allow users to navigate between web pages using hyperlinks, back and
forward buttons, bookmarks, and more.
 Security: Modern browsers include security features like warnings for insecure websites
(those without HTTPS), blocking malicious scripts, and managing cookies.

Web Server-

A Web Server is a server-side software or hardware that stores, processes, and delivers web
pages to clients (web browsers) over the internet.

Key Functions of a Web Server:

 Hosting Web Pages: The web server stores the files (HTML, CSS, JavaScript, images,
videos) that make up a website.
 Handling Requests: When a web browser sends an HTTP request, the web server processes
this request and serves the corresponding web page or resource.
 Serving Dynamic Content: Web servers can also generate dynamic content using server-side
scripts (like PHP, Python, or [Link]) based on the request.
 Security and Access Control: Web servers can implement security measures like SSL/TLS
encryption (for HTTPS), user authentication, and IP filtering.

Differences Between Web Browser and Web Server:

Aspect Web Browser Web Server

Function Sends HTTP requests to web servers and displays Receives HTTP requests and
content. responds with the requested
content.

Role Client-side software used by end-users to access Server-side software/hardware

websites. used to host and deliver
websites.

Interacts directly with users, rendering web pages Interacts with web browsers,
Interaction and enabling navigation. processing requests and
serving content.

Security Implements security features like HTTPS, Implements security measures

blocking scripts, managing cookies. like SSL/TLS, access control,
and IP filtering.

Examples Google Chrome, Mozilla Firefox, Safari, Microsoft Apache, Nginx, Microsoft IIS,
Edge. LiteSpeed.
Features of Web 2.0 Web Design: Concepts of effective web design-
Features of Web 2.0

Web 2.0 is term that was introduced in 2004 and refers to the second generation of the World Wide
Web. The term "2.0" comes from the software industry, where new versions of software programs are
labeled with an incremental version number.

Some examples of features considered to be part of Web 2.0 are listed below:

Blogs: It also known as Web logs, these allow users to post thoughts and updates about their life on
the Web.

Wikis: Wikis - sites like Wikipedia and others enable users from around the world to add and update
online content.

Social Networking: Sites like Facebook and MySpace allow users to build and customize their own
profile sand communicate with friends.

Web Application: Web application is a broad range of new applications make it possible for users to
run programs directly in a Web [Link] Web logs, these allow users to post thoughts and updates
about their life on the Web.

User Participation: In traditional web the contents are solely provider by the web site owner or
company, but in web 2.0 the users participate in content sourcing. This is also known as Crowd
sourcing. Examples: Wikipedia & YouTube.

Effective web design is about creating a website that is not only visually appealing but also functional,
user-friendly, and aligned with the goals of the website owner. Here are the key concepts:

1. Simplicity

 Clarity: Avoid clutter by focusing on essential elements. The design should be

straightforward and easy to navigate.
 Minimalism: Use a minimalist approach with simple color schemes, clean typography, and a
clear hierarchy to guide the user’s attention.

2. User-Centric Design

 Understanding the Audience: Design with the target audience in mind. Consider their
preferences, needs, and behaviors to create a more personalized experience.
 Intuitive Navigation: Ensure that users can easily find what they’re looking for with clear
menus, breadcrumbs, and a logical site structure.

3. Responsive Design

 Adaptability: The website should look and function well on a variety of devices, including
desktops, tablets, and smartphones.
 Fluid Grids and Flexible Images: Use responsive grids and flexible images to ensure the
website scales appropriately on different screen sizes.
4. Consistency

 Uniform Layout: Maintain a consistent layout across all pages, including headers, footers,
and navigation elements.
 Branding: Consistent use of colors, fonts, and imagery helps reinforce brand identity and
builds user trust.

5. Accessibility

 Inclusive Design: Ensure the website is accessible to users with disabilities by following
accessibility guidelines, such as providing alt text for images and ensuring keyboard
navigability.
 Readable Content: Use high-contrast colors and legible fonts, and organize content in a way
that’s easy to read.

6. Loading Speed

 Performance Optimization: Fast loading times are crucial. Optimize images, leverage
browser caching, and minimize code to improve speed.
 User Retention: A fast website improves user experience, reduces bounce rates, and
increases the likelihood of conversions.

7. Typography and Readability

 Font Choices: Select fonts that are easy to read and consistent with the website’s tone and
style.
 Hierarchy and Spacing: Use headings, subheadings, and proper spacing to create a clear
content hierarchy and enhance readability.

8. Content Organization

 Clear Structure: Organize content logically with headings, subheadings, and bullet points.
 Visual Hierarchy: Use design elements like size, color, and placement to guide users’ eyes to
the most important information first.

9. Visual Design and Aesthetics

 Appealing Visuals: Use a harmonious color scheme, appropriate imagery, and balanced
white space to create a visually pleasing design.
 Consistency in Design Elements: Ensure that design elements like buttons, icons, and images
are consistent throughout the site.

10. User Experience (UX)

 Interaction Design: Focus on how users interact with the website, ensuring that it’s intuitive
and provides a smooth experience.
 Feedback and Response: Provide immediate feedback for user actions (e.g., form
submissions, button clicks) to ensure they understand what is happening.
Web Design Issues-

Browser & Operating Systems

Web pages are written using different HTML tags and viewed in browser window. The different
browsers and their versions greatly affect the way a page is rendered, as different browsers sometimes
interpret same HTML tag in a different way. Different versions of HTML also support different sets of
tags. The support for different tags also varies across the different browsers and their versions. Same
browser may work slightly different on different operating system and hardware platform. To make a
web page portable, test it on different browsers on different operating systems.

Bandwidth and Cache

Users have different connection speed, i.e. bandwidth, to access the Web sites. Connection speed plays
an important role in designing web pages, if user has low bandwidth connection and a web page contains
too many images, it takes more time to download. Generally, users have no patience to wait for longer
time than 10-15 seconds and move to other site without looking at contents of your web page. Browser
provides temporary memory called cache to store the graphics. When user gives the URL of the web
page for the first time, HTML file together with all the graphics files referred in a page is downloaded
and displayed.

Display Resolution

 Display resolution is another important factor affecting the Web page design, as we do not have
any control on display resolution of the monitors on which user views our pages.
 Display or screen resolution is measured in terms of pixels and common resolutions are 800 X
600 and 1024 X 786.

Look & Feel

 Look and feel of the website decides the overall appearance of the website.
 It includes all the design aspects such as Web site theme Web typography Graphics Visual
structure Navigation etc…

Page Layout and Linking

 Website contains of individual web pages that are linked together using various navigational
links.
 Page layout defines the visual structure of the page and divides the page area into different
parts to present the information of varying importance.
 Page layout allows the designer to distribute the contents on a page such that visitor can view
it easily and find necessary details.

Locating Information

 Webpage is viewed on a computer screen and the screen can be divided into five major areas
such as center, top, right, bottom and left in this particular order.
  The first major area of importance in terms of users viewing pattern is the center, then top,
right, bottom and left in this particular order.

Making Design user-Centric

 It is very difficult for any Web designer to predict the exact behavior of the Web site users.
 However, idea of general behavior of common user helps in making design of the Web
site user-centric.
 Users either scan the information on the web page to find the section of their interest or read
the information to get details.

Sitemap

 Many a times Web sites are too complex as there are a large number of sections and each
section contains many pages.
 It becomes difficult for visitors to quickly move from one part to other.
 Once the user selects a particular section and pages in that section, user gets confused about
where he/she is and where to go from there.
 To make it simple, keep your hierarchy of information to few levels or provide the navigation
bar on each page to jump directly to a particular section.

Designing effective navigation-

 Navigation links are either text based, i.e. a word or a phrase is used as a link, or graphical,
i.e. a image, i.e. a icon or a logo is used as a link.
 Navigation links should be clear and meaningful.
 It should be consistent.
 Link should be understandable.
 Organize the links such that contents are grouped logically.
 Provide search link, if necessary, usually on top of the page. Use common links such as
‘about us’ or ‘Contact us’.
 Provide the way to return to first page.
 Provide the user with information regarding location.
 Horizontal navigation bar can be provided on each page to directly jump to any section.
 UNIT- 2

HTML: Basics of HTML

 HTML, or HyperText Markup Language is the standard markup language used to create web
pages.
 It is a combination of Hypertext, and Markup language.
 The Hypertext defines the link between web pages, and Markup is used to define the text
document within tags to structure the web pages.
 This language is used to annotate text so that machines can understand and manipulate it
accordingly. HTML is human-readable and uses tags to define what manipulation has to be
done on the text.

Example- <!DOCTYPE html>

<html>
<head>
<title>First HTML Code</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>Hello Geeks</p>
</body>
</html>

Features of HTML

 It is easy to learn and easy to use.

 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 It is a markup language.

HTML Elements and Tags

HTML uses predefined tags and elements that instruct the browser on how to display the content.
HTML elements include an opening tag, some content, and a closing tag. It’s important to remember
to include closing tags. If omitted, the browser applies the effect of the opening tag until the end of the
page.

This section will dive into the basic structure of an HTML page, which includes essential building-
block elements like doctype declaration, HTML, head, title, and body elements.
HTML Page Structure

The basic structure of an HTML page is shown below. It contains the essential building-block
elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all web pages
are created.

<!DOCTYPE html> – This is the document type declaration (not technically a tag). It declares a
document as being an HTML document. The doctype declaration is not case-sensitive.
<html> – This is called the HTML root element. All other elements are contained within it.

<html></html>

<head> – The head tag contains the “behind the scenes” elements for a webpage. Elements within
the head aren’t visible on the front end of a webpage. HTML elements used inside the <head>
element include:

<html>
<head>
</head>
</html>

<style> – This HTML tag allows us to insert styling into our web pages and make them appealing to
look at with the help of CSS.

<title> – The title is what is displayed on the top of your browser when you visit a website and
contains the title of the webpage that you are viewing.

<html>
<head>
<title>My WebPage!</title>
</head>
</html>

<base> – It specifies the base URL for all relative URL’s in a document.

<noscript> – Defines a section of HTML that is inserted when the scripting has been turned off in
the user’s browser.

<script> – This tag is used to add functionality to the website with the help of JavaScript.

<meta> – This tag encloses the metadata of the website that must be loaded every time the website is
visited. For eg:- the metadata charset allows you to use the standard UTF-8 encoding on your website.
This in turn allows the users to view your webpage in the language of their choice. It is a self-closing
tag.

<link> – The ‘link’ tag is used to tie together HTML, CSS, and JavaScript. It is self-closing.

<body> – The body tag is used to enclose all the visible content of a webpage. In other words, the
body content is what the browser will show on the front end.

<html>
<head>
<title>My WebPage!</title>
</head>
<body>Hello World</body>
</html>
Formatting and fonts-
Formatting elements were designed to display special types of text:

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text


The <font> and <basefont> tags were used in older versions of HTML to style text directly
within the HTML code. However, these tags are considered obsolete in HTML5 and are
replaced by CSS for better separation of content and design. Below is an explanation of how
these tags were used:

<font> Tag

 Purpose: The <font> tag was used to apply specific font styling to a portion of text, including
font size, color, and typeface.
 Attributes:
o size: Specifies the size of the text. The value can be an integer from 1 (smallest) to 7
(largest).
o color: Sets the color of the text. It can be defined using a color name (e.g., "red"), a
hex value (e.g., #ff0000), or an RGB value (e.g., rgb(255,0,0)).
o face: Specifies the font type or typeface (e.g., "Arial", "Verdana", "Times New
Roman").

<p><font size="4" color="blue" face="Arial">This is some styled text using the font
tag.</font></p>

<basefont> Tag

 Purpose: The <basefont> tag was used to set the base font size, color, and face for all text on a
webpage. Once set, these properties would apply to all text unless overridden by a <font> tag
or other styling.
 Attributes:
o size: Sets the default size of the text for the entire page.
o color: Sets the default color of the text.
o face: Sets the default font face for the text.

<basefont size="3" color="black" face="Verdana">

<p>This text inherits the basefont properties.</p>

Modern Alternative: CSS

In modern web development, CSS (Cascading Style Sheets) is used to style text instead of
using <font> and <basefont> tags. This method is more powerful, flexible, and separates content
from design.

Css Example-

<style>
body {
font-size: 16px; /* equivalent to size="3" in basefont */
color: black;
font-family: Verdana, sans-serif;
}

.custom-text {
font-size: 20px; /* equivalent to size="4" */
color: blue;
font-family: Arial, sans-serif;
}
</style>

<p class="custom-text">This is some styled text using CSS.</p>

<p>This text inherits the default CSS properties set in the body.</p>

Web Design Elements-

1. Formatting and Fonts:

 Formatting: Use CSS for consistent styling, ensuring that text, images, and other elements
are aligned and spaced correctly.
 Fonts: Choose web-safe fonts or use web font services like Google Fonts. Maintain
readability with proper font size, line height, and contrast.

2. Commenting Code:

 Importance: Commenting code improves readability and maintainability by providing

explanations and context for complex sections of code.

3. Color:

 Usage: Use color to enhance aesthetics, guide users’ attention, and convey brand identity.
Ensure sufficient contrast for readability and accessibility.

4. Hyperlinks:

 Design: Style links to make them easily identifiable, typically with underlining or color
changes on hover. Ensure they are clearly labeled and lead to relevant content.
 5. Lists and Tables:

 Lists: Use ordered (<ol>) and unordered (<ul>) lists for structured content. Style them with
CSS for a clean appearance.
 Tables: Use tables (<table>) for tabular data, ensuring proper use of headers (<th>) and
accessible formatting for screen readers.

6. Images:

 Optimization: Compress images for faster loading times and use responsive image
techniques (<img srcset>) to serve the appropriate image size for different devices.

7. Forms:

 Design: Create user-friendly forms with clear labels, proper input types, validation, and
accessible error messages.

8. XHTML:

 Importance: XHTML is a stricter, XML-based version of HTML. Ensure that all elements
are properly closed and nested to maintain valid markup.

9. Meta Tags:

 Usage: Use meta tags (<meta>) to provide information about the web page, such as its
description, keywords, author, and viewport settings for responsive design.

10. Character Entities:

 Usage: Use character entities (e.g., &nbsp;, &copy;, &lt;, &gt;) to display special characters
that cannot be directly included in HTML.

11. Frames and Frame Sets:

 Usage: Frames (<frame>) and framesets (<frameset>) are outdated HTML elements used to
divide a browser window into multiple sections. They are rarely used today due to
accessibility and usability issues.

Browser Architecture and Website Structure

1. Browser Architecture:

 Components: Modern browsers consist of various components like the user interface,
browser engine, rendering engine, networking, JavaScript interpreter, and UI backend.
 Functionality: The browser engine translates HTML, CSS, and JavaScript into the visual and
interactive content you see on a web page.
 2. Website Structure:

 Hierarchy: Organize your website’s structure logically, with a clear hierarchy of pages and
content. Use directories and filenames that make sense for both users and search engines.
 Navigation: Implement clear, consistent navigation to guide users through the site,
supporting easy access to all key areas.

Overview and Features of HTML5

1. Overview:

HTML5 is the latest version of the HTML standard, introduced to enhance the
capabilities of the web. It provides new elements, attributes, and APIs that enable
richer, more dynamic web content.

2. Key Features:

 New Semantic Elements: <header>, <footer>, <section>, <article>, <aside>, and <nav> provide
more meaningful structure to documents.
 Multimedia Support: Native support for audio (<audio>) and video (<video>) elements
without requiring external plugins.
 Canvas Element: <canvas> allows for dynamic, scriptable rendering of 2D shapes and
images, useful for games, animations, and graphics.
 Geolocation API: Enables web applications to access the user’s location with their
permission.
 Local Storage: Provides a way to store data locally on the user’s device, even after the
browser is closed, offering a more robust alternative to cookies.
 Improved Form Elements: New input types (date, email, range, search, tel, url) and attributes
enhance form usability and validation.
 Offline Support: The Application Cache allows web apps to run offline by storing resources
locally.
 Web Workers: Background threads that execute JavaScript code independently of the user
interface, improving performance for complex tasks.
 These elements and considerations are essential for creating modern, functional, and
accessible websites that deliver a good user experience across different devices and
browsers.