SAVITRIBAI PHULE PUNE UNIVERSITY

Web Technology
Artificial Intelligence & Data Science
Third Year (2019 Pattern)

Unit-1 (NOTES)
 Unit I: Web Essentials and Mark-up
language- HTML
The Internet

Definition: The Internet is a global network of interconnected computer networks that

communicate using a standard set of rules or protocols. It's a vast infrastructure that
enables computers and other devices worldwide to exchange information and resources.
This network of networks allows for a wide range of services, including the World Wide
Web, email, and file sharing.

Detailed Explanation:

●​ The Internet is not a single entity but a collection of various private, public,
academic, business, and government networks.
●​ It operates on a standardized set of rules known as the Internet Protocol Suite
(TCP/IP).
●​ The Internet's decentralized nature means there is no single point of control,
making it robust and resilient.
●​ It functions by breaking down data into small packets, which are then routed
independently to their destination and reassembled.

Mathematical / Technical Aspect:

●​ IP Address: A unique numerical label assigned to each device connected to a

computer network. An IPv4 address is a 32-bit number, usually written in decimal
format, like 192.168.1.1. An IPv6 address is a 128-bit hexadecimal number, like
2001:0db8:85a3:0000:0000:8a2e:0370:7334.
●​ Packet Switching: Data is divided into packets of a fixed size. Each packet has a
header containing the source and destination IP addresses, and the packets are
transmitted independently across the network.

Real-World Examples:

1.​ Email Communication: Sending an email from your computer to a friend in

another country. The email is broken into packets and sent across the Internet.
 2.​ Online Shopping: Browse an e-commerce website and purchasing a product. Your
browser communicates with the website's server over the Internet.
3.​ Video Streaming: Watching a movie on a service like Netflix. The video data is
streamed from a server to your device via the Internet.

Applications:

●​ Daily Life: Used for social media, online banking, communication via instant
messaging, and accessing news.
●​ Research: Facilitates collaboration among scientists, access to vast databases, and
sharing of research papers.
●​ Industry: Powers e-commerce, cloud computing, remote work, and supply chain
management.

Important Notes / Key Takeaways:

●​ The Internet is the underlying infrastructure. The World Wide Web is a service that
runs on the Internet.
●​ TCP/IP is the fundamental protocol suite that governs how data is sent and
received.
●​ IP addresses are essential for identifying devices and routing data.

Basic Internet Protocols

Definition: Internet protocols are the formal rules and standards that govern how data is
transmitted and received between devices on a network. These protocols provide a
common language and set of procedures, ensuring that different devices, regardless of
their hardware or software, can communicate effectively. They are essential for the
Internet's functionality.

Detailed Explanation:

●​ TCP (Transmission Control Protocol): TCP is a connection-oriented protocol that

ensures reliable delivery of data packets. It establishes a connection, orders
packets, and re-sends any that are lost.
 ●​ IP (Internet Protocol): IP is a connectionless protocol responsible for routing data
packets from a source to a destination. It handles the addressing of devices (IP
addresses).
●​ HTTP (Hypertext Transfer Protocol): HTTP is an application-level protocol used
for transmitting web pages and other web resources. It defines the communication
between web browsers and web servers.
●​ HTTPS (Hypertext Transfer Protocol Secure): HTTPS is the secure version of
HTTP. It uses SSL/TLS to encrypt data, ensuring that communication between a
browser and a server is private and secure.
●​ FTP (File Transfer Protocol): FTP is a standard protocol used for the transfer of
computer files between a client and a server on a computer network. It is
commonly used for uploading files to a web server.
●​ SMTP (Simple Mail Transfer Protocol): SMTP is used for sending and receiving
emails. It dictates how email servers and clients communicate to transfer mail.

Mathematical / Technical Aspect:

●​ TCP 3-way Handshake: A process used by TCP to establish a connection.

1.​ SYN (Synchronize): Client sends a packet to the server to initiate the
connection.
2.​ SYN-ACK (Synchronize-Acknowledge): Server acknowledges the request and
sends its own SYN packet.
3.​ ACK (Acknowledge): Client sends a final acknowledgment to establish the
connection.

Real-World Examples:

1.​ Browse the Web: When you type a website URL, your browser uses HTTP/HTTPS
to request the web page from the server.
2.​ Sending an Email: Your email client uses SMTP to send the email to your mail
server, which then routes it to the recipient's mail server.
3.​ Uploading a File to a Server: When a web developer uploads a website's files, they
often use FTP to transfer them to the web server.

Applications:

●​ Daily Life: Enables all internet-based activities, from checking social media to
video calls.
 ●​ Research: Securely sharing data and research findings using protocols like HTTPS.
●​ Industry: Underpins all digital communication, from internal company networks to
cloud services.

Important Notes / Key Takeaways:

●​ TCP/IP is the foundational protocol suite of the Internet.

●​ Protocols like HTTP, HTTPS, FTP, and SMTP are built on top of TCP/IP.
●​ Each protocol serves a specific purpose, from web Browse to file transfer.

The World Wide Web (WWW)

Definition: The World Wide Web, commonly known as the Web, is a global information
system that allows users to access documents and other resources via hyperlinks. It is a
service that operates on the Internet, using protocols like HTTP and HTTPS to enable
communication between web browsers and web servers. The Web is the most popular
part of the Internet, comprising websites, web pages, and web-based applications.

Detailed Explanation:

●​ Hypertext System: The Web is a system of interconnected documents and

resources linked by hyperlinks. This allows users to navigate from one page to
another by clicking on links.
●​ Web Browsers: Software applications like Chrome, Firefox, and Safari are used to
access and view web pages. They interpret HTML, CSS, and JavaScript to render
the content.
●​ Web Servers: Computers that store web pages and other web content. They
respond to requests from web browsers.
●​ URLs (Uniform Resource Locators): Unique addresses used to identify and locate
resources on the Web, such as a specific web page.

Mathematical / Technical Aspect:

●​ URL Structure: A URL typically consists of three main parts:

○​ Protocol: https://
○​ Domain Name: www.example.com
○​ Path: /path/to/page.html
Real-World Examples:

1.​ Wikipedia: A vast collection of interconnected web pages on various topics. Users
navigate through links to access information.
2.​ Google Search Engine: A service on the Web that allows users to search for
information and get links to other web pages.
3.​ Online Banking Portal: A secure website where users can access and manage their
bank accounts.

Applications:

●​ Daily Life: Used for almost everything, including social networking, online
shopping, streaming entertainment, and education.
●​ Research: Accessing academic journals, online libraries, and research databases.
●​ Industry: Hosting corporate websites, e-commerce platforms, and internal
company intranets.

Important Notes / Key Takeaways:

●​ The Web is a service, while the Internet is the infrastructure.

●​ Hyperlinks are the core technology that makes the Web a "web" of interconnected
documents.
●​ HTTP/HTTPS are the protocols that enable the communication for the Web.

HTTP Request and Response Messages

HTTP Request Message

Definition: An HTTP request message is a message sent from a web client (like a browser)
to a web server to request a resource, such as a web page, an image, or data. The request
message contains all the necessary information for the server to understand what the
client wants.

Detailed Explanation:

●​ Request Line: The first line of the message, containing the method (e.g., GET,
POST), the URL of the requested resource, and the HTTP version (e.g., HTTP/1.1).
 ●​ Headers: A series of key-value pairs that provide additional information about the
request, such as the Host (domain name), User-Agent (client browser), and Accept
(content types the client can handle).
●​ Body: An optional part of the message that contains data, typically used with the
POST method to send information to the server, like form data.

Mathematical / Technical Aspect:

●​ Example GET Request: GET /index.html HTTP/1.1 Host: www.example.com

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)

Real-World Examples:

1.​ Opening a Website: When you type www.google.com and press Enter, your
browser sends a GET request to Google's server to retrieve the homepage.
2.​ Submitting a Form: When you fill out a login form and click "Submit," your browser
sends a POST request with your username and password in the body.
3.​ Clicking a Link: Clicking on a hyperlink on a web page sends a GET request for the
URL of the linked page.

Applications:

●​ Daily Life: Every time you browse the Web, an HTTP request is sent.
●​ Research: Data collection from online surveys often involves POST requests to
submit responses.
●​ Industry: APIs (Application Programming Interfaces) use various HTTP methods
(GET, POST, PUT, DELETE) to communicate and exchange data between different
systems.

Important Notes / Key Takeaways:

●​ The request line is the most crucial part, defining the action and the target.
●​ Headers provide context and metadata.
●​ The GET method is for retrieving data, while POST is for submitting data.

HTTP Response Message

Definition: An HTTP response message is a message sent from a web server back to a
client (browser) in response to an HTTP request. It contains the status of the request
and, if successful, the requested resource itself.

Detailed Explanation:

●​ Status Line: The first line of the message, containing the HTTP version, a status
code (e.g., 200, 404), and a reason phrase (e.g., OK, Not Found).
●​ Headers: Key-value pairs providing additional information about the response,
such as Content-Type (e.g., text/html), Content-Length, and Server.
●​ Body: The main content of the response. For a successful request for a web page,
the body contains the HTML code of the page.

Mathematical / Technical Aspect:

●​ Example Successful Response: HTTP/1.1 200 OK Content-Type: text/html

Content-Length: 12345 (Body contains HTML code)
●​ Common Status Codes:
○​ 200 OK: The request was successful.
○​ 404 Not Found: The requested resource was not found on the server.
○​ 500 Internal Server Error: An error occurred on the server while processing
the request.
○​ 301 Moved Permanently: The requested resource has been permanently
moved to a new URL.

Real-World Examples:

1.​ Successful Page Load: When you successfully visit a website, the server responds
with a 200 OK status and the website's HTML in the body.
2.​ Broken Link: Clicking a broken link results in a 404 Not Found response from the
server.
3.​ Website Maintenance: A server might respond with a 503 Service Unavailable
status code if it's undergoing maintenance.

Applications:

●​ Daily Life: Every web page you view is a result of a successful HTTP response.
●​ Research: API calls to retrieve data from a server receive an HTTP response with
the data.
 ●​ Industry: E-commerce servers send response messages to confirm an order or
display an error if a payment fails.

Important Notes / Key Takeaways:

●​ The status code is a quick way to understand the outcome of the request.
●​ The headers provide crucial metadata about the content being sent.
●​ The body holds the actual data or resource requested by the client.

Web Clients and Web Servers

Web Clients

Definition: A web client is a software application that sends requests to a web server to
retrieve and display web resources. The most common type of web client is a web
browser, which interprets and renders the HTML, CSS, and JavaScript received from the
server.

Detailed Explanation:

●​ A web client acts on behalf of a user to access the World Wide Web.
●​ It sends HTTP requests to web servers and receives HTTP responses.
●​ It is responsible for rendering the content, such as displaying text, images, and
videos, in a user-friendly format.
●​ Web clients can also be other programs, like mobile apps or server-side scripts,
that communicate with web servers.

Mathematical / Technical Aspect:

●​ Client-Server Model: The web client and web server communicate in a

client-server architecture. The client initiates the communication, and the server
responds.

Real-World Examples:

1.​ Google Chrome: A popular web browser used by millions to access the internet.
2.​ Mozilla Firefox: Another well-known browser that acts as a web client.
 3.​ A Mobile App: A weather app on your phone that requests weather data from a
server is also a web client.

Applications:

●​ Daily Life: Used to browse websites, watch videos, and check emails.
●​ Research: Accessing online journals and research databases.
●​ Industry: Employees use web clients (browsers) to access corporate intranets and
cloud-based applications.

Important Notes / Key Takeaways:

●​ The web browser is the most common example of a web client.

●​ Web clients are a crucial part of the client-server model.
●​ They are responsible for rendering the content for the user.

Web Servers

Definition: A web server is a computer program that stores web pages and other web
resources and delivers them to web clients upon request. It's a server-side application
that listens for incoming HTTP requests and sends back HTTP responses.

Detailed Explanation:

●​ A web server waits for requests from web clients.

●​ When a request arrives, it processes the request, locates the requested resource
(e.g., an HTML file), and sends it back in an HTTP response.
●​ It can serve static content (like HTML files and images) or dynamically generated
content (like a personalized webpage based on user data).
●​ Popular web server software includes Apache, Nginx, and Microsoft IIS.

Mathematical / Technical Aspect:

●​ Listening on a Port: A web server typically listens on a specific port for incoming
requests. The standard port for HTTP is 80, and for HTTPS, it is 443.

Real-World Examples:

1.​ Apache HTTP Server: A widely used open-source web server software.
 2.​ Nginx: Known for its high performance and ability to handle a large number of
concurrent connections.
3.​ IIS (Internet Information Services): Microsoft's web server software for Windows.

Applications:

●​ Daily Life: Every website you visit is hosted on a web server.

●​ Research: University web servers host academic portals and research websites.
●​ Industry: Companies use web servers to host their websites, e-commerce stores,
and internal applications.

Important Notes / Key Takeaways:

●​ Web servers store the content of a website.

●​ They are a critical component of the client-server model.
●​ They serve both static and dynamic content to web clients.

HTML: Introduction, History, and Versions

Introduction to HTML

Definition: HTML, which stands for Hypertext Markup Language, is the standard
language used to create and structure web pages and their content. It uses a system of
tags to define the different parts of a web page, such as headings, paragraphs, and
images. HTML is the backbone of all web pages. It provides the logical structure for the
content that is displayed in a web browser.

Detailed Explanation:

●​ Markup Language: HTML uses "markup" tags to annotate text, telling the browser
how to display the content. Tags are enclosed in angle brackets, like <h1>.
●​ Hypertext: The "hypertext" part of HTML refers to the ability to link documents
together. Hyperlinks allow users to navigate from one page to another.
●​ Document Structure: HTML creates the structural skeleton of a web page, but it
doesn't define the page's visual appearance. That's the job of CSS.
 ●​ Elements: An HTML document is composed of a tree of elements, each
represented by a tag. Elements can have attributes that provide additional
information.

Mathematical / Technical Aspect:

●​ Tag Structure:
○​ <tagname> - opening tag
○​ content
○​ </tagname> - closing tag
○​ Example: <p>This is a paragraph.</p>

Real-World Examples:

1.​ A Website's Structure: The layout of a news website, with a header, a main content
area, and a sidebar, is defined using HTML.
2.​ A Blog Post: The title, paragraphs, and images of a blog post are all marked up with
HTML tags.
3.​ An Online Form: The input fields, buttons, and labels of a contact form are created
using HTML.

Applications:

●​ Daily Life: Creating personal websites, blogs, and online portfolios.

●​ Research: Developing websites to publish research papers and findings.
●​ Industry: Building corporate websites, e-commerce platforms, and user interfaces
for web applications.

Important Notes / Key Takeaways:

●​ HTML provides the structure, not the style.

●​ It uses a system of tags to define elements.
●​ Hyperlinks are a core feature of HTML, enabling navigation.

History and Versions

Definition: The history of HTML is a journey of evolution, starting with its first public
release and progressing through several versions that added new features and
capabilities. Each new version has aimed to make web development more powerful,
semantic, and standardized.

Detailed Explanation:

●​ HTML 1.0 (1991): The initial version, with limited features, primarily focused on
providing a basic structure for text-based documents.
●​ HTML 2.0 (1995): The first official standard, which included forms, image support,
and other features that made the Web more interactive.
●​ HTML 3.2 (1997): Added features for tables and other presentational elements,
though this was later discouraged in favor of CSS.
●​ HTML 4.01 (1999): A significant update that separated presentation from structure,
encouraging the use of CSS for styling. It introduced support for frames and
scripting.
●​ XHTML (2000): A more strict version of HTML based on XML, which required
well-formed code and was intended to be more robust.
●​ HTML5 (2014): The most recent major version, which introduced significant new
features for multimedia (video, audio), semantics (<header>, <nav>), and modern
web applications (offline storage, canvas).

Mathematical / Technical Aspect:

●​ Doctype Declaration: The <!DOCTYPE html> declaration at the beginning of an

HTML document tells the browser which version of HTML to use. For HTML5, it's a
simple, non-case-sensitive declaration.

Real-World Examples:

1.​ A Classic Website (pre-2000): A website from the early days of the Web might have
used HTML 3.2 with tables for layout.
2.​ A Modern Blog: A modern blog uses HTML5's semantic tags like <article> and
<aside> for better structure and SEO.
3.​ An Interactive Game: A browser-based game uses HTML5's <canvas> element to
draw graphics and animations.

Applications:

●​ Daily Life: Almost all modern websites use HTML5 to provide a rich user
experience with video, audio, and interactive elements.
 ●​ Research: HTML5's new tags help structure academic websites and online journals
more logically.
●​ Industry: Web applications like Google Docs and Trello heavily rely on HTML5's
advanced features.

Important Notes / Key Takeaways:

●​ HTML has evolved from a simple text-structuring language to a powerful tool for
modern web applications.
●​ HTML5 is the current standard and is widely used today.
●​ The <!DOCTYPE html> declaration is essential for all modern web pages.

HTML Elements

Headings

●​ Definition: HTML headings are used to define the titles and subtitles of a web
page. They are hierarchical, with <h1> being the most important heading and <h6>
being the least important. They are crucial for both readability and for search
engine optimization (SEO).
●​ Detailed Explanation:
○​ Headings should be used to outline the structure of a web page, similar to a
table of contents.
○​ <h1> should be used for the main title of the page, and there should generally
be only one per page.
○​ <h2> to <h6> are used for subheadings, creating a logical hierarchy.
○​ Using headings helps screen readers and search engines understand the
content's organization.
●​ Mathematical / Technical Aspect:
○​ <h1>Main Heading</h1>
○​ <h2>Subheading</h2>
○​ <h6>Least Important Heading</h6>
●​ Real-World Examples:
○​ The title of an article on a news website.
○​ The title of a section in a Wikipedia entry.
○​ The name of a product on an e-commerce page.
 ●​ Applications:
○​ Daily Life: Used on every website to structure content.
○​ Research: Structuring sections of an online research paper.
○​ Industry: Organizing content on a corporate blog.
●​ Important Notes / Key Takeaways:
○​ Headings should be used for semantic purposes, not for styling.
○​ The <h1> tag is the most important and should be used sparingly.
○​ Headings are essential for accessibility and SEO.

Paragraphs

●​ Definition: The HTML <p> element is used to define a paragraph of text. It is the
most common tag for regular text content on a web page. Paragraphs are
block-level elements, which means they start on a new line and browsers
automatically add some space before and after them.
●​ Detailed Explanation:
○​ The <p> tag creates a block of text, separating it from other elements.
○​ It is used to structure sentences into cohesive paragraphs, improving
readability.
○​ Paragraphs are essential for any text-heavy content, from articles to product
descriptions.
●​ Mathematical / Technical Aspect:
○​ <p>This is a paragraph of text on a web page.</p>
●​ Real-World Examples:
○​ The main body of an article on a news website.
○​ A product description on an e-commerce website.
○​ The "About Us" section on a company's website.
●​ Applications:
○​ Daily Life: Reading articles, blogs, and descriptions on websites.
○​ Research: Displaying the main content of an academic paper.
○​ Industry: Writing product descriptions and company information on
websites.
●​ Important Notes / Key Takeaways:
○​ The <p> tag is for text content.
○​ It's a block-level element, creating a new line.
○​ Proper use of paragraphs enhances readability.
Line Break

●​ Definition: The HTML <br> element is used to create a line break within a block of
text, like a paragraph. Unlike the <p> tag, which creates a new paragraph with
space, <br> simply moves the text to the next line without adding extra vertical
spacing. It is an empty tag, meaning it has no closing tag.
●​ Detailed Explanation:
○​ The <br> tag forces a line to break at a specific point.
○​ It is often used for short, successive lines of text, like a poem or an address
block.
○​ It should not be used to create space between paragraphs; that's the job of
CSS margins or separate <p> tags.
●​ Mathematical / Technical Aspect:
○​ This is the first line.<br>This is the second line.
●​ Real-World Examples:
○​ Displaying a mailing address on a contact page: John Doe<br>123 Main
Street<br>Anytown, USA 12345
○​ Writing a poem or song lyrics on a website.
○​ Breaking up text in a small, compact area where separate paragraphs would
be too much.
●​ Applications:
○​ Daily Life: Used on websites to format addresses or short lists.
○​ Research: Formatting citations or author affiliations.
○​ Industry: Displaying short, structured information in a footer or sidebar.
●​ Important Notes / Key Takeaways:
○​ The <br> tag is for a simple line break, not for creating new paragraphs.
○​ It's an empty tag and does not require a closing tag.
○​ Use it sparingly; CSS is generally preferred for layout.

Colors and Fonts

●​ Definition: HTML elements can have their colors and fonts styled, although this is
now primarily handled by CSS. HTML attributes like style and deprecated tags like
<font> were used in older versions to apply these visual properties.
●​ Detailed Explanation:
○​ Colors: Colors can be specified using color names (e.g., red), hexadecimal
values (e.g., #FF0000), or RGB values (e.g., rgb(255, 0, 0)).
 ○​ Fonts: Font styles, such as font-family, font-size, and font-weight, are used
to change the appearance of text.
○​ Deprecated Attributes: In modern web development, using inline styles with
the style attribute (e.g., <p style="color: red;">) is discouraged for
maintainability. The <font> tag is no longer supported in HTML5.
●​ Mathematical / Technical Aspect:
○​ Inline CSS: <h1 style="color: blue; font-family: Arial;">Blue Heading</h1>
●​ Real-World Examples:
○​ Changing the color of a specific piece of text on a website to draw attention.
○​ Using a different font for a logo or a heading to match a brand's style.
○​ Making a warning message appear in a red color.
●​ Applications:
○​ Daily Life: Websites use different colors and fonts to create visual appeal and
brand identity.
○​ Research: Highlighting key terms in a research paper with a specific color.
○​ Industry: Corporate websites use specific font families and colors as part of
their branding guidelines.
●​ Important Notes / Key Takeaways:
○​ While HTML can apply styles, CSS is the preferred method for all styling.
○​ The <font> tag is deprecated and should not be used.
○​ Separating content (HTML) from presentation (CSS) is a best practice.

Links

●​ Definition: The HTML <a> (anchor) element is used to create hyperlinks, which are
clickable pieces of text or images that link to another web page, a specific section
on the same page, or another resource. Hyperlinks are the fundamental building
blocks of the World Wide Web.
●​ Detailed Explanation:
○​ The <a> tag requires the href attribute, which specifies the destination URL.
○​ The text or image between the <a> and </a> tags becomes the clickable link.
○​ The target attribute can be used to specify where the linked document
should open, for example, _blank to open in a new tab.
●​ Mathematical / Technical Aspect:
○​ <a href="https://www.google.com">Go to Google</a>
○​ <a href="#section2">Jump to Section 2</a>
 ●​ Real-World Examples:
○​ The "Contact Us" link in the footer of a website.
○​ Clicking on a news headline to read the full article.
○​ A "Download PDF" link to download a file.
●​ Applications:
○​ Daily Life: Navigating every website, from social media to news portals.
○​ Research: Linking to citations or external resources in an online research
paper.
○​ Industry: Creating navigation menus, internal links, and external links to
partners.
●​ Important Notes / Key Takeaways:
○​ The <a> tag is for creating hyperlinks.
○​ The href attribute is mandatory for specifying the destination.
○​ Links are essential for navigation and are the core of the Web.

Frames

●​ Definition: HTML frames (using the <frame> and <frameset> elements) were an
older technology used to divide a web page into multiple, independently-loadable
sections. This technology is now considered obsolete and is not supported in
HTML5. Modern web development uses other techniques for similar functionality.
●​ Detailed Explanation:
○​ Frames allowed different HTML documents to be displayed in a single
browser window.
○​ The <frameset> tag defined the layout of the frames, and <frame> tags
specified the content for each frame.
○​ This technology had several disadvantages, including poor accessibility,
difficulty with SEO, and usability issues.
○​ Modern alternatives like <iframe> for embedding external content and CSS
for layout are now used instead.
●​ Mathematical / Technical Aspect:
○​ <iframe> is the modern, supported alternative to frames.
○​ <iframe src="https://www.w3schools.com"></iframe>
●​ Real-World Examples:
○​ A website from the early 2000s that had a navigation menu in a left frame
and the main content in a right frame.
 ○​ An old web portal where the header, footer, and sidebar were all separate
frames.
○​ Embedding a YouTube video on a web page using an <iframe>.
●​ Applications:
○​ Daily Life: Embedding a Google Map or a social media feed on a web page.
○​ Research: Displaying an external tool or data visualization within a research
portal.
○​ Industry: Embedding a third-party application or a secure payment form.
●​ Important Notes / Key Takeaways:
○​ The <frameset> and <frame> tags are deprecated and should not be used.
○​ Use <iframe> for embedding external content.
○​ Use CSS for creating complex layouts.

Lists

●​ Definition: HTML provides three types of lists to organize information: unordered

lists (<ul>), ordered lists (<ol>), and description lists (<dl>). Lists are used to present
information in a structured, easy-to-read format.
●​ Detailed Explanation:
○​ Unordered List (<ul>): A list of items marked with bullet points. Each list item
is defined by the <li> tag.
○​ Ordered List (<ol>): A list of items that are numbered. Each item is also
defined by the <li> tag. The numbering is automatic.
○​ Description List (<dl>): A list of terms and their descriptions. The term is
defined by <dt> and the description by <dd>.
●​ Mathematical / Technical Aspect:
○​ Unordered List: <ul> <li>Item 1</li> <li>Item 2</li> </ul>
○​ Ordered List: <ol> <li>First Item</li> <li>Second Item</li> </ol>
●​ Real-World Examples:
○​ Unordered List: A shopping list or a list of features for a product.
○​ Ordered List: A step-by-step recipe or instructions for assembling furniture.
○​ Description List: A glossary of terms or a list of frequently asked questions
and their answers.
●​ Applications:
○​ Daily Life: Used on almost every website for navigation menus, product
features, and instructions.
 ○​ Research: Creating a list of references or a numbered list of steps in an
experiment.
○​ Industry: Listing benefits of a product, company values, or team members.
●​ Important Notes / Key Takeaways:
○​ Lists are a great way to structure content.
○​ Choose the right type of list (<ul>, <ol>, or <dl>) for the content.
○​ Always use the <li> tag for list items within <ul> and <ol>.

Tables

●​ Definition: The HTML <table> element is used to present tabular data in a grid-like
format with rows and columns. Tables are essential for displaying structured data
like financial reports, calendars, and product specifications.
●​ Detailed Explanation:
○​ A table is defined by the <table> tag.
○​ A row is defined by <tr> (table row).
○​ A cell is defined by <td> (table data) for regular data cells and <th> (table
header) for header cells.
○​ The <thead>, <tbody>, and <tfoot> tags can be used to group the content for
better structure.
●​ Mathematical / Technical Aspect:
○​ <table>
○​ <tr>
○​ <th>Header 1</th>
○​ <th>Header 2</th>
○​ </tr>
○​ <tr>
○​ <td>Data 1</td>
○​ <td>Data 2</td>
○​ </tr>
○​ </table>
●​ Real-World Examples:
○​ A timetable or a calendar on a website.
○​ A product comparison table on an e-commerce site.
○​ Displaying financial data in a company's annual report.
●​ Applications:
 ○​ Daily Life: Checking a movie showtime schedule or a train timetable.
○​ Research: Displaying data sets or experimental results in a clear format.
○​ Industry: Creating price lists, employee directories, and sales reports.
●​ Important Notes / Key Takeaways:
○​ Tables should be used for tabular data, not for page layout.
○​ Use <th> for table headers to improve accessibility and semantics.
○​ Use <thead>, <tbody>, and <tfoot> for a well-structured table.

Images

●​ Definition: The HTML <img> element is used to embed an image into a web page. It
is an empty tag, meaning it does not have a closing tag. It's a crucial element for
making web pages visually appealing and informative.
●​ Detailed Explanation:
○​ The <img> tag requires the src attribute, which specifies the URL or path to
the image file.
○​ The alt attribute is mandatory and provides alternative text for the image.
This text is crucial for accessibility and is displayed if the image fails to load.
○​ Other attributes like width and height can be used to specify the dimensions
of the image.
●​ Mathematical / Technical Aspect:
○​ <img src="image.jpg" alt="Description of the image" width="300"
height="200">
●​ Real-World Examples:
○​ Displaying a company's logo in the header of a website.
○​ Showing a product image on an e-commerce page.
○​ Including a photo in a blog post.
●​ Applications:
○​ Daily Life: Viewing photos on social media, images in news articles, and
product pictures.
○​ Research: Displaying charts, graphs, and illustrations in an online
publication.
○​ Industry: Used for branding, advertising, and displaying product visuals.
●​ Important Notes / Key Takeaways:
○​ Always include the alt attribute for accessibility and SEO.
○​ The src attribute is essential for linking the image.
 ○​ Optimize image sizes to ensure fast page loading times.

Forms

●​ Definition: The HTML <form> element is used to create an interactive form for
collecting user input. Forms are used for various purposes, such as user logins,
contact forms, surveys, and search bars.
●​ Detailed Explanation:
○​ The <form> tag defines the form itself.
○​ It contains various input elements, like <input>, <textarea>, and <select>,
which allow users to enter data.
○​ The action attribute specifies the URL where the form data will be submitted.
○​ The method attribute (get or post) specifies how the data is sent to the
server.
●​ Mathematical / Technical Aspect:
○​ <form action="/submit-data" method="post">
○​ <label for="name">Name:</label>
○​ <input type="text" id="name" name="user_name">
○​ <input type="submit" value="Submit">
○​ </form>
●​ Real-World Examples:
○​ A login form with username and password fields.
○​ A contact form with fields for name, email, and a message.
○​ A search bar on a website.
●​ Applications:
○​ Daily Life: Logging into websites, signing up for newsletters, and filling out
surveys.
○​ Research: Creating online surveys to collect data.
○​ Industry: E-commerce checkout forms, job application forms, and internal
data entry forms.
●​ Important Notes / Key Takeaways:
○​ The <form> element is the container for all form controls.
○​ The action and method attributes are crucial for form submission.
○​ Use appropriate input types (text, password, email, etc.) for better user
experience and validation.
Difference Between HTML and HTML5

Definition: HTML5 is the latest major version of HTML, not just an update but a
significant evolution that introduced new elements, APIs, and features to support
modern web applications. The key difference lies in HTML5's focus on semantics,
multimedia, and functionality that was previously handled by third-party plugins.

Detailed Explanation:

●​ Semantic Elements: HTML5 introduced new semantic tags like <header>, <nav>,
<section>, <article>, <footer>, and <aside> to provide better structure and meaning
to web pages. This makes it easier for search engines and screen readers to
understand the content.
●​ Multimedia Support: HTML5 natively supports audio and video with the <audio>
and <video> tags. This eliminated the need for plugins like Adobe Flash.
●​ Canvas and SVG: The <canvas> element allows for dynamic, scriptable rendering of
2D shapes and bitmap images. SVG (Scalable Vector Graphics) is an XML-based
format for vector graphics.
●​ Form Enhancements: HTML5 introduced new input types (e.g., email, date, url) and
attributes for client-side form validation, reducing the need for JavaScript.
●​ Browser Compatibility: HTML5 is a living standard that is well-supported by all
modern browsers.

Mathematical / Technical Aspect:

●​ HTML: <div id="header"> (non-semantic)

●​ HTML5: <header> (semantic)
●​ HTML: Requires plugins for video.
●​ HTML5: <video src="movie.mp4"></video> (native support)

Real-World Examples:

1.​ Old Website: An old website might use a series of <div> tags with ids like header,
nav, and content.
2.​ Modern Website: A modern website uses the <header>, <nav>, and <main> tags for
better structure and SEO.
3.​ Online Video Player: A video player on a website using HTML5's <video> tag, which
works natively without plugins.
Applications:

●​ Daily Life: Almost every modern website you visit is built with HTML5.
●​ Research: Creating interactive data visualizations with <canvas> and SVG.
●​ Industry: Building complex web applications, like online photo editors or project
management tools.

Important Notes / Key Takeaways:

●​ HTML5 is more semantic, accessible, and powerful than previous versions.

●​ It brought native multimedia support, making the web more versatile.
●​ The <!DOCTYPE html> declaration is a simple indicator of an HTML5 document.

CSS: Introduction, Features, and Syntax

Introduction to Style Sheet

Definition: CSS, or Cascading Style Sheets, is a style sheet language used to describe the
presentation of a document written in a markup language like HTML. CSS is used to style
web pages, including their layout, colors, and fonts, separating the content of a web page
from its visual design.

Detailed Explanation:

●​ Separation of Concerns: CSS allows developers to separate the structure (HTML)

from the presentation (CSS), making it easier to maintain and update a website.
●​ Cascading: The "cascading" part of CSS refers to how style rules are applied. Rules
from different sources (browser defaults, author styles, user styles) are combined
and prioritized.
●​ Selectors: CSS uses selectors to target specific HTML elements to apply styles to.
●​ Properties and Values: Styles are defined using property: value pairs, like color:
blue; or font-size: 16px;.

Mathematical / Technical Aspect:

●​ CSS Rule: selector { property: value; property: value; }

●​ Example: p { color: red; font-size: 1.2em; }
Real-World Examples:

1.​ Making all headings on a website appear in a specific font and color.
2.​ Changing the background color of a web page.
3.​ Positioning a sidebar to the left of the main content.

Applications:

●​ Daily Life: Used to make every website visually appealing and unique.
●​ Research: Styling a data visualization or a scientific paper for a specific layout.
●​ Industry: Creating brand-consistent websites and user interfaces for web
applications.

Important Notes / Key Takeaways:

●​ CSS is for styling, HTML is for structure.

●​ The cascading nature of CSS determines which rules are applied.
●​ It uses selectors and property: value pairs.

CSS Features

●​ Definition: CSS offers a wide range of features to control the presentation of web
pages, from simple text formatting to complex layouts and animations. These
features allow for fine-grained control over every aspect of a web page's design.
●​ Detailed Explanation:
○​ Layout: Features like Flexbox and Grid are used for creating flexible and
responsive page layouts.
○​ Typography: Controls font family, size, weight, and line height.
○​ Colors and Backgrounds: Sets colors for text, borders, and backgrounds.
○​ Box Model: Defines how elements are spaced and sized, including margin,
border, padding, and content.
○​ Responsive Design: Media queries allow styles to be applied based on the
device's screen size.
○​ Transitions and Animations: Creates smooth changes and animations for
interactive elements.
●​ Mathematical / Technical Aspect:
○​ Flexbox Example: .container { display: flex; justify-content: center; }
 ○​ Media Query Example: @media (max-width: 600px) { body {
background-color: lightblue; } }
●​ Real-World Examples:
○​ A responsive website that adapts its layout for both desktop and mobile
screens.
○​ A button that changes color smoothly when you hover over it.
○​ A website's navigation menu that collapses into a "hamburger" icon on small
screens.
●​ Applications:
○​ Daily Life: All modern, user-friendly websites are built with these CSS
features.
○​ Research: Creating interactive and visually appealing data visualizations.
○​ Industry: Building complex user interfaces for software and web
applications.
●​ Important Notes / Key Takeaways:
○​ CSS has evolved to include powerful layout and animation features.
○​ Responsive design is a key feature of modern CSS.
○​ The box model is a fundamental concept in CSS.

CSS Core Syntax

●​ Definition: The core syntax of CSS consists of a selector and a declaration block.
The selector specifies which HTML elements to style, and the declaration block
contains one or more declarations, which are property: value pairs.
●​ Detailed Explanation:
○​ Selector: The part of the rule that specifies the element or elements to be
styled. Can be an element name (p), a class (.my-class), or an ID (#my-id).
○​ Declaration Block: The part enclosed in curly braces ({ ... }), containing the
styles.
○​ Declaration: A single property: value pair, separated by a colon (:).
○​ Semicolon: Each declaration must end with a semicolon (;).
●​ Mathematical / Technical Aspect:
○​ h1 {
○​ color: #333;
○​ text-align: center;
○​ }
 ●​ Real-World Examples:
○​ Styling all <h1> tags on a page to have a specific color.
○​ Creating a CSS class .button to style all buttons on a website.
○​ Applying a specific style to a single element with an id, like #header.
●​ Applications:
○​ Daily Life: Used to style every website.
○​ Research: Creating a consistent look and feel for a research portal.
○​ Industry: Defining the style guide for an entire company's web presence.
●​ Important Notes / Key Takeaways:
○​ The selector targets the element, and the declaration block contains the
styles.
○​ The property: value pair is the core of every style declaration.
○​ The semicolon is essential to separate declarations.

Style Sheets and HTML

●​ Definition: Style sheets can be linked to an HTML document in three main ways:
inline, internal, and external. The best practice is to use external style sheets, as it
promotes the separation of concerns and makes a website easier to maintain.
●​ Detailed Explanation:
○​ Inline Styles: Styles are applied directly to an HTML element using the style
attribute.
■​ e.g., <p style="color: blue;">
○​ Internal Styles: Styles are placed within a <style> tag in the <head> section of
the HTML document.
■​ e.g., <head><style>p {color: blue;}</style></head>
○​ External Styles: Styles are written in a separate .css file and linked to the
HTML document using a <link> tag in the <head>. This is the recommended
method.
■​ e.g., <link rel="stylesheet" href="styles.css">
●​ Mathematical / Technical Aspect:
○​ External style sheets are the most efficient method because the browser can
cache the CSS file, leading to faster page loads on subsequent visits.
●​ Real-World Examples:
○​ Inline: A developer might use an inline style for a one-off style change during
testing.
 ○​ Internal: A single-page website might use internal styles for simplicity.
○​ External: A large website with multiple pages will use an external style sheet
to ensure a consistent look across the entire site.
●​ Applications:
○​ Daily Life: Every professional website uses external style sheets.
○​ Research: Large university websites use external style sheets to maintain
brand consistency.
○​ Industry: Companies use external CSS files for all their web properties.
●​ Important Notes / Key Takeaways:
○​ External style sheets are the best practice.
○​ Avoid inline styles for anything other than specific exceptions.
○​ The <link> tag is used to connect an external CSS file to an HTML document.

Style Rule Cascading and Inheritance

●​ Definition: The "cascading" and "inheritance" principles of CSS determine how

styles are applied when multiple rules conflict or when a child element doesn't
have a specific style defined. These are fundamental concepts that govern how
styles are resolved and applied.
●​ Detailed Explanation:
○​ Cascading: When multiple CSS rules target the same element, the browser
follows a set of rules to determine which one wins. The order of priority is:
1.​ Inline styles
2.​ Internal and External styles (the last one declared wins)
3.​ Browser default styles
○​ Specificity: A more specific selector (e.g., #id > .class > element) has higher
priority.
○​ Inheritance: Some CSS properties, like color, font-family, and font-size, are
inherited by child elements from their parent elements. This means you only
need to define them once on a parent element.
●​ Mathematical / Technical Aspect:
○​ #header h1 { color: red; } (more specific, wins over h1 { color: blue; })
○​ body { font-family: Arial; } (child elements of <body> will inherit this font)
●​ Real-World Examples:
 ○​ Cascading: You might have a general rule for all paragraphs (p { color: black;
}) but a more specific rule for a special paragraph (.highlight { color: yellow; }).
The yellow color will win.
○​ Inheritance: You set a font on the <body> element, and all paragraphs and
headings inside it automatically use that font.
○​ Specificity: An inline style on an element will override a class or an ID style.
●​ Applications:
○​ Daily Life: Makes styling a website much more efficient and manageable.
○​ Research: Maintaining a consistent look for all content within a specific
section of a website.
○​ Industry: Ensures a consistent design language across a large-scale
application.
●​ Important Notes / Key Takeaways:
○​ Cascading determines which rule wins in a conflict.
○​ Specificity is a key factor in the cascading process.
○​ Inheritance allows child elements to adopt styles from their parents.

Text Properties

●​ Definition: CSS text properties are used to control the appearance of text,
including its color, size, font family, alignment, and decoration. These properties
are essential for making text content readable and visually appealing.
●​ Detailed Explanation:
○​ color: Sets the color of the text.
○​ font-family: Specifies the font to be used. It's good practice to provide a list
of fallback fonts.
○​ font-size: Sets the size of the text. Can be in px, em, rem, or other units.
○​ text-align: Aligns text (left, right, center, justify).
○​ font-weight: Sets the boldness of the text (normal, bold, lighter, bolder).
○​ text-decoration: Adds decoration to text, like underline or line-through.
●​ Mathematical / Technical Aspect:
○​ p {
○​ font-family: Arial, sans-serif;
○​ font-size: 16px;
○​ color: #333;
○​ text-align: justify;
 ○​ }
●​ Real-World Examples:
○​ Making a heading bold and centered.
○​ Using a specific font for a website's body text.
○​ Underlining a link on a website to indicate it's clickable.
●​ Applications:
○​ Daily Life: Used on every website to format text content.
○​ Research: Ensuring text in an online paper is a readable size and font.
○​ Industry: Implementing a brand's specific typography guidelines.
●​ Important Notes / Key Takeaways:
○​ These properties are essential for controlling the typography of a website.
○​ Use fallback fonts in font-family for better compatibility.
○​ Use relative units like em or rem for responsive design.

Bootstrap

Definition: Bootstrap is a free, open-source front-end framework for building

responsive, mobile-first websites. It provides a collection of pre-written HTML, CSS, and
JavaScript components that developers can use to quickly build user interfaces.
Bootstrap streamlines the web development process by offering a consistent and
well-documented set of tools.

Detailed Explanation:

●​ Responsive Grid System: Bootstrap's most famous feature is its 12-column grid
system, which allows for the creation of responsive layouts that work on different
screen sizes.
●​ Pre-built Components: It includes a library of ready-to-use components like
navigation bars, buttons, forms, modals, and carousels.
●​ Mobile-First Approach: Bootstrap is designed with a mobile-first philosophy,
meaning the styles for smaller screens are applied first, and then styles for larger
screens are added.
●​ Customization: While it provides a default set of styles, Bootstrap can be easily
customized to match a project's specific design needs.

Mathematical / Technical Aspect:

 ●​ Grid System: The grid is based on a 12-column layout. Classes like .col-md-6
specify that a column should take up 6 of the 12 columns on a medium-sized
screen.
●​ Classes: Bootstrap uses CSS classes extensively, such as <button class="btn
btn-primary"> to apply pre-defined styles.

Real-World Examples:

1.​ A Blog: A developer can use Bootstrap's navbar component for navigation, its card
component for blog posts, and its grid system for the overall layout.
2.​ An E-commerce Site: Using Bootstrap's forms for the checkout page and its
carousel for product images.
3.​ A Landing Page: Quickly building a responsive landing page with a jumbotron and
styled buttons.

Applications:

●​ Daily Life: Many websites you visit, from small blogs to large corporate sites, use
Bootstrap or a similar framework.
●​ Research: Quickly building a prototype for a research website or a data
visualization dashboard.
●​ Industry: Widely used by developers to speed up the creation of websites, web
applications, and internal tools.

Important Notes / Key Takeaways:

●​ Bootstrap is a framework, not a language.

●​ It provides a solid foundation for responsive web design.
●​ It's a great tool for rapid prototyping and building user interfaces quickly.

Summary Table
Main Topic Brief Definition 3 Real-World Examples
Name
The Internet A global network of interconnected computer 1. Sending an email. 2. Online shopping.
networks that communicate using a standard 3. Video streaming.
set of protocols (TCP/IP). It's the underlying
infrastructure that enables various services
like the World Wide Web and email. It is a
vast, decentralized system for communication
and data exchange.

Basic Internet Formal rules and standards that govern how 1. HTTP/HTTPS for Browse the web. 2.
Protocols data is transmitted and received on a network. SMTP for sending emails. 3. FTP for
They provide a common language for devices uploading files to a server.
to communicate, ensuring reliable and secure
data transfer. They are the backbone of all
internet activities.

The World A global information system of interconnected 1. Reading an article on Wikipedia. 2.

Wide Web documents and resources accessed via Using the Google search engine. 3.
hyperlinks. It is a service that runs on the Managing a bank account online.
Internet and is the most popular way for users
to access information, websites, and
applications.

HTTP Request A message sent from a web client (browser) 1. Opening a website's homepage. 2.
Message to a web server to request a resource. It Submitting a login form. 3. Clicking a link
includes the method (e.g., GET, POST), the on a web page.
URL, and headers that provide additional
information about the request.

HTTP A message sent from a web server back to a 1. A successful page load (200 OK). 2.
Response web client in response to a request. It Clicking a broken link (404 Not Found). 3.
Message contains a status code (e.g., 200 OK, 404 Not A server being down for maintenance
Found), headers, and the requested resource (503 Service Unavailable).
in its body.

Web Clients A software application that sends requests to 1. Google Chrome. 2. Mozilla Firefox. 3. A
a web server to retrieve and display web mobile weather app.
resources. The most common example is a
web browser, which interprets HTML and CSS
to render content for the user.

Web Servers A computer program that stores web pages 1. Apache HTTP Server. 2. Nginx. 3.
and other resources, delivering them to web Microsoft IIS.
clients upon request. It processes HTTP
requests and sends back HTTP responses,
serving both static and dynamic content.
HTML The standard markup language for creating 1. A news article's title and paragraphs. 2.
web pages and their content. It uses a system The layout of an online form. 3. The links
of tags to define the structure of a document, in a website's navigation menu.
such as headings, paragraphs, and images. It
is the foundational language for all web
content.

HTML5 The latest major version of HTML, introducing 1. A video player on a website. 2. The
new semantic elements, native multimedia <header> and <nav> tags on a modern
support, and APIs for modern web blog. 3. An online game using the
applications. It moves away from older, <canvas> element.
presentational tags and focuses on better
structure and functionality.

CSS A style sheet language used to describe the 1. The background color of a website. 2.
presentation and formatting of an HTML The font and size of a heading. 3. A
document. It separates content from design, button that changes color on hover.
controlling the layout, colors, and fonts of a
web page. It is essential for making websites
visually appealing.

Bootstrap A front-end framework that provides 1. A blog using Bootstrap's grid and cards.
pre-written HTML, CSS, and JavaScript for 2. An e-commerce site using Bootstrap's
building responsive, mobile-first websites. It forms. 3. A landing page with a
offers a grid system and a collection of responsive navigation bar.
components to speed up development and
ensure consistent design.