‧˚₊⋅ ୨୧ ⋅₊˚‧ WEB TECHNOLOGIES ‧˚₊⋅ ୨୧ ⋅₊˚‧

WHAT IS WEB TECHNOLOGY? Then in 1989, Tim Berners-Lee, who worked with
computers at CERN, had an idea. He wanted to make
Term used to describe all the different things people a system of hypertext, documents that people could
use to make websites and web-based applications. access online. This idea became the World Wide Web.

This includes software and hardware tools, Berners-Lee made the first web browser in 1991. It
programming languages, and standards needed to was called World Wide Web. This led to the first web
create and run web apps on the internet. server. In the mid-1990s, people started using web
browsers a lot more.
Comprises many areas, including web design, web
development, web servers, web browsers, The first commercial web browsers, like Netscape
e-commerce, and content management systems. Navigator and Microsoft Internet Explorer, helped
make this happen.
The goal of web technology is to make web-based
applications work better, faster, and more enjoyable In the late 1990s, things became even more
for people to use. interactive. This web technologies like PHP, ASP.NET
and JavaScript. They allowed people to use the web
CLASSIFICATION for online shopping and gaming.

World Wide Web (WWW) - It enables users to browse In the early 2000s, web pages became more
and access information through web browsers. accessible and user-friendly. This was because of
things like HTML and CSS. They helped make sure that
Web servers - They process requests and send web pages looked the same different devices.
responses to web browsers.
Then in the late 2000s and 2010s, the web changed
Web browsers - They are the tools we use to look at again. Social media, mobile devices, and cloud
web pages. computing are big web parts. This meant that people
could collaborate more and make things together.
HTML - It's a language that helps structure and show
content on web pages. Today, the web is still changing. New artificial
intelligence, virtual and augmented reality, and the
CSS - It helps make web pages look pretty by adding Internet of Things exist. These things mean that
colors, fonts, and styles. people can do even more on the web.

JavaScript - It's a language that makes web pages do OVERVIEW OF PROTOCOL

cool stuff like animations and interactive features.
In order to make communication successful between
Backend Technologies - They are the tools used to devices, some rules and procedures should be agreed
make the server-side parts of web apps work upon at the sending and receiving ends of the system.

Database Systems - They store and retrieve data Such rules and procedures are called as Protocols.
used in web apps Different types of protocols are used for different
types of communication.
HISTORY

Back in the 1960s, the United States Department of

Defense made a thing called ARPANET. It helped
organizations share information.
1 | Aropocakes 🌷🎀
 ‧˚₊⋅ ୨୧ ⋅₊˚‧ WEB TECHNOLOGIES ‧˚₊⋅ ୨୧ ⋅₊˚‧

STANDARDS

Standards are the set of rules for data communication

that are needed for exchange of information among
devices. It is important to follow Standards which are How does a Search Engine Index a Site?
created by various Standard Organization like IEEE,
ISO, ANSI etc.

Standards are of two types: De Facto Standard and

De Jure Standard

SOCIAL MEDIA AND THE WEB

SEARCH ENGINE INDEXING
What is social media? a collective term for websites
Search engine indexing refers to the process where a and applications that focus on communication,
search engine (such as Google) organizes and stores community-based input, interaction, content-sharing
online content in a central database (its index). and collaboration.

The search engine can then analyze and understand In business, social media is used to market products,
the content, and serve it to readers in ranked lists on promote brands, connect to customers and foster new
its Search Engine Results Pages (SERPs). business.

Before indexing a website, a search engine uses As a communication platform, social media promotes
“crawlers” to investigate links and content. Then, the customer feedback and makes it easy for customers
search engine takes the crawled content and to share their experiences with a company.
organizes it in its database:
Businesses can respond quickly to positive and
negative feedback, address customer problems and
maintain or rebuild customer confidence.
2 | Aropocakes 🌷🎀
 ‧˚₊⋅ ୨୧ ⋅₊˚‧ WEB TECHNOLOGIES ‧˚₊⋅ ୨୧ ⋅₊˚‧
。·．✿ˎˊ˗ 🐇̟̊｡ Mid-1990s: Increased usage of web browsers like
Netscape Navigator and Internet Explorer.
Web technology encompasses all the tools and
systems used to create and operate websites and Late 1990s: Introduction of interactive web
web-based applications. This includes software, technologies like PHP, ASP.NET, and JavaScript.
hardware, programming languages, and standards
necessary for designing, developing, and running web Early 2000s: Focus on accessibility and
applications on the internet. It covers various aspects user-friendliness with HTML and CSS.
such as web design, development, servers, browsers,
e-commerce, and content management systems. The Late 2000s and 2010s: Emergence of social media,
primary aim of web technology is to enhance the mobile devices, and cloud computing, transforming
functionality, speed, and user experience of web usage.
web-based applications.
Today: Ongoing evolution with advancements in
World Wide Web (WWW): Enables users to access artificial intelligence, virtual/augmented reality, and
information through web browsers. the Internet of Things.

Web servers: Process requests and send responses to Overview of Protocols - Protocols are rules and
web browsers. procedures necessary for successful communication
between devices. Different types of protocols are used
Web browsers: Tools used to view web pages. for various forms of communication.

HTML: Language for structuring and displaying Standards - Standards are rules for data
content on web pages. communication required for exchanging information
among devices. They are established by organizations
CSS: Styles web pages by adding colors, fonts, and like IEEE, ISO, and ANSI and are categorized into De
styles. Facto and De Jure Standards.

JavaScript: Adds interactive features and animations Search Engine Indexing - Search engine indexing
to web pages. involves organizing and storing online content in a
central database (index) to analyze and serve it to
Backend Technologies: Tools for server-side users on Search Engine Results Pages (SERPs).
development of web applications. Crawlers are used to investigate links and content
before indexing.
Database Systems: Store and retrieve data used in
web applications. Social Media and the Web - Social media refers to
websites and applications focusing on communication,
History community input, content-sharing, and collaboration.
It serves as a platform for businesses to market
1960s: Development of ARPANET by the United States products, connect with customers, and gather
Department of Defense to share information. feedback. Businesses can respond to customer
feedback promptly and maintain customer
1989: Tim Berners-Lee's idea of hypertext system led relationships.
to the creation of the World Wide Web.

1991: Berners-Lee developed the first web browser,

leading to the establishment of the first web server.

3 | Aropocakes 🌷🎀
 ‧˚₊⋅ ୨୧ ⋅₊˚‧ WEB TECHNOLOGIES ‧˚₊⋅ ୨୧ ⋅₊˚‧
HTML - SEMANTIC ELEMENTS, ACCESSIBILITY, By employing these semantic elements, you're not just
LAYOUTS, STRUCTURE, AND FEATURES improving the organization and readability of your
HTML documents. You're also aiding assistive
HTML5 SEMANTIC ELEMENTS technologies, such as screen readers, in better
understanding the content. Furthermore, search
HTML5 semantic elements are tags that have a engines can more accurately grasp the context and
specific meaning or purpose, such as: <header>, relevance of your content, potentially leading to better
<nav>, <section>, <article>, <footer>, and more. search rankings.

They replace the generic <div> and <span> tags that HOW TO USE HTML 5 SEMANTIC ELEMENTS?
were used to create layouts and styles in HTML4.
To use HTML5 semantic elements, you need to follow
HTML5 semantic elements tell browsers and search some basic rules and best practices.
engines what kind of content is inside them, and how it
relates to the rest of the page. First, you need to declare the HTML5 doctype at the
beginning of your document: <!DOCTYPE html>. This
<header> - This element represents the introductory tells the browser that you are using HTML5 standards.
content or a collection of navigational links found at
the top portion of a page or a specific section within it. Second, you need to choose the appropriate semantic
element for each part of your web page, based on its
<nav> - When you use <nav>, you're indicating a meaning and function.
section housing navigation links, like menus or lists of
related pages. WHY ARE THEY IMPORTANT FOT ACCESSIBILITY?

<section> - Think of <section> as a way to group HTML5 semantic elements are important for
related content thematically within a document. It accessibility because they help people with
could be chapters, headings, or any other cohesive disabilities and assistive technologies to understand
content grouping. and navigate your web content.

<article> - This element signifies a self-contained By using HTML5 semantic elements, you can make
piece of content that stands alone and can be shared your web pages more inclusive and user-friendly for
or reused independently. It's perfect for things like everyone.
blog posts, news articles, or forum entries.
WHY ARE THEY IMPORTANT FOR SEO?
<footer> - When it comes to <footer>, it typically holds
information pertinent to its containing element. This Search Engine Optimization
might include details about authors, copyright
information, or links to related resources. HTML5 semantic elements are important for SEO
because they help search engines to crawl, index,
Additionally, there are other semantic elements like and rank your web content.
<aside>, which is handy for content related to but
slightly separate from the main content, <main>, Search engines use the semantic elements to
which designates the primary content of a document, understand what your page is about, and how relevant
and <figure> and <figcaption>, useful for showcasing it is to the user's query.
images and their captions respectively. And don't
forget <time>, which helps mark up dates and times.

4 | Aropocakes 🌷🎀
 ‧˚₊⋅ ୨୧ ⋅₊˚‧ WEB TECHNOLOGIES ‧˚₊⋅ ୨୧ ⋅₊˚‧
WHY ARE THEY IMPORTANT FOR CODE QUALITY?

HTML5 semantic elements are important for code

quality because they make your code more readable,
maintainable, and reusable.

By using semantic elements, you can avoid using too

many <div> and <span> tags that create clutter and
confusion in your code.

You can also use less classes and ids to style your
elements, and rely more on the default styles and
inheritance of the semantic elements.

Semantic elements also make your code more

consistent and compatible across different browsers
and devices, and reduce the chances of errors and
bugs.
ARIA (Accessible Rich Internet Applications)
attributes enhance the accessibility of web content for
users of assistive technologies.

ARIA attributes can be added to HTML elements to

provide additional semantic information.

Common ARIA attributes include aria-label,

aria-labelledby, aria-describedby, aria-hidden,
aria-live, etc.

Example of using aria-label attribute:

<button aria-label="Add to Cart">+</button>

Accessibility refers to the practice of designing and
developing websites and applications that can be used ACCESSIBILITY TESTING TOOLS
by everyone, including people with disabilities.
Accessibility testing tools help developers identify and
SEMANTIC MARKUP address accessibility issues in web content.

Semantic markup involves using HTML elements that Examples of popular accessibility testing tools include:
convey meaning beyond just presentation. ● WAVE (Web Accessibility Evaluation Tool)
● Axe by Deque
Examples of semantic elements include: <header>, ● Lighthouse (built into Chrome DevTools)
<nav>, <main>, <section>, <article>, <footer>, etc. ● Accessibility Insights

Semantic markup improves accessibility by providing These tools analyze web pages for accessibility
clear structure and context to assistive technologies. violations and provide actionable insights for
improvement.

5 | Aropocakes 🌷🎀
 ‧˚₊⋅ ୨୧ ⋅₊˚‧ WEB TECHNOLOGIES ‧˚₊⋅ ୨୧ ⋅₊˚‧
HTML LAYOUT <DIV> VS <SPAN>

A page layout defines the appearance of a website. Divs - Block-level elements used for grouping and
An HTML layout is a structure that helps the user organizing content
navigate through web pages easily. It is a way in
which you can design web pages using simple HTML Spans - Inline elements used for applying styles or
tags. adding semantic meaning to a specific part of text.

HTML LAYOUT ELEMENTS BLOCK VS INLINE

HTML contains different elements that define the Block-level elements start on a new line and take up
structure of a web page: the full width available.

<header> - This defines a header for a web page Inline elements do not start on a new line and only
take up as much width as necessary.
<nav> - This defines a container for navigation links

<section> - This defines a section in a web page

<article> - This is the primary element that contains

information about the web page

<aside> - The <aside> content is often placed as a

sidebar in a document

<footer> - This defines a footer for a document or a

section

<details> - This is used to define additional details LAYOUT AND STRUCTURES

<summary> - This defines a heading for the <details> The CSS Box Model is a fundamental concept in web
element design that describes the structure of HTML
elements.

Each HTML element is considered as a rectangular box

with the following components:

Content: The actual content of the element, such as

text or images.

Padding: The space between the content and the

border.

Border: The border surrounding the padding.

Margin: The space outside the border, which

separates the element from other elements.

6 | Aropocakes 🌷🎀
 ‧˚₊⋅ ୨୧ ⋅₊˚‧ WEB TECHNOLOGIES ‧˚₊⋅ ୨୧ ⋅₊˚‧
HTML CANVAS

Canvas for Drawing Graphics

HTML5 introduced the <canvas> element, which

provides a powerful API for drawing graphics,
animations, and interactive content.

Developers can use JavaScript to manipulate the

canvas and create dynamic visualizations directly
within the browser. This feature opens up endless
possibilities for creating engaging and interactive web
experiences.

Example illustrating the CSS Box Model: Example of using the <canvas> element:

.box { <canvas id="myCanvas" width="400" height="200">

width: 200px; </canvas>
height: 100px;
padding: 20px; <script>
var canvas = document.getElementById('myCanvas');
border: 2px solid #000;
var ctx = canvas.getContext('2d');
margin: 10px;
ctx.fillStyle = 'lightblue';
} ctx.fillRect(0, 0, 200, 100);
</script>
EMBEDDING AUDIO AND VIDEO ELEMENT

HTML5 introduced native support for embedding

audio and video content directly into web pages.

<audio> and <video> elements enable seamless

integration of multimedia content without requiring
third-party plugins.

This feature enhances the accessibility and usability of

multimedia content on the web.

Example of embedding audio:

<audio controls>
<source src="audio.mp3" type="audio/mp3">
(Your browser does not support the audio element.)
</audio>

Example of embedding video:

<video controls>
<source src="video.mp4" type="video/mp4">
(Your browser does not support the video element.)
</video>

7 | Aropocakes 🌷🎀