March 15TH, 2024

Web Development
Prof. Soufiane Hourri

1
 History of
computers

JANUARY 27TH, 2023

2
Natural things!
Body Parts
The most readily available tool
for early humans was their own
body. Fingers served as the
most basic counting tool,
allowing them to represent
small quantities.

3
Natural things!
Tally Sticks
These were simple sticks or
bones with notches carved into
them, each notch representing
a single unit. This method
provided a visual representation
of quantities and facilitated
memory recall.

4
Natural things!
Pebbles and Stones
Similar to tally sticks, pebbles
or stones could be used to
represent individual items.
Moving or arranging them
facilitated counting and basic
calculations.

5
Natural things!
Knotted Strings
Some cultures used knotted
strings, known as quipus in the
case of the Incas, to record and
perform calculations. The
number and position of knots,
along with the color and type of
string, could encode various
information and quantities.

6
The awesome Abacus
2700-2300 BC

7
The Abacus
Abacus development :
The ancient roots of computing
can be traced back to the
Sumerians and Babylonians
who used the abacus around
2700-2300 BC.

8
The Abacus
Concept
This simple counting tool,
consisting of beads on rods,
allowed for basic arithmetic
calculations and served as a
foundation for future
computational devices.

9
The Abacus problem
Abacus (2700 BC - 19th century AD): The abacus remained a
dominant tool for calculations for thousands of years across
various civilizations.

The abacus, even in its most advanced forms, is still a manual

calculating tool.

10
Slide rule
The invention of logarithms by
John Napier in the 17th century
and the subsequent development
of slide rules based on logarithms
provided more advanced
calculation capabilities. Slide rules
remained important tools for
engineers and scientists well into
the 20th century.

11
Mechanical calculators
Blaise Pascal's Pascaline,
invented in 1642, and Gottfried
Wilhelm Leibniz's Stepped
Reckoner, created later in the
century, are prime examples of
these early mechanical calculating
devices.
These machines could perform
basic arithmetic operations like
addition (+) and subtraction (-).

12
Analytical engine – Theoretical design
Charles Babbage proposed the Analytical Engine in 1837. This
visionary design, although never fully built due to limitations in
technology and funding, is often considered the first general-
purpose computer because of its key features:
• Programmability: The machine could be instructed to perform
different calculations through punched cards.
• Integrated Memory: It could store data and intermediate results
for later use.
• Central Processing Unit (CPU): It had a dedicated unit for
performing calculations.
13
The time of Vacuum Tubes
Vacuum tubes, also known as
electron tubes or valves (in
British English), are electronic
devices that control the flow of
electricity using a vacuum and
electrodes. They were widely
used in the first half of the 20th
century in various electronic
applications.

14
Vaccum Tubes and ENIAC
The mid-20th century saw a
shift towards electronic
computers. The development of
vacuum tubes enabled faster
and more reliable
computations. In 1945, the
Electronic Numerical Integrator
and Computer (ENIAC)
emerged as the first general-
purpose electronic digital
computer, marking a milestone
in computing history.

15
Let’s get SMALLER – Transistor
A transistor is a miniature
semiconductor that regulates or
controls current or voltage flow
in addition amplifying and
generating these electrical
signals and acting as a
switch/gate for them.

16
Intel’s 1st processor
• 2300 transistors
• Release Date: 1971
• Type: 4-bit central processing
unit (CPU)
• First commercially available
microprocessor
• General-purpose design
• Small size and low cost
• Clock Speed: 740 KHz
17
Processor evolution

18
Processor evolution

19
 Computer mandatory component
Storage RAM
(Hard Disk Drive (Random Access Memory)
/ Solid State Drive)

CPU
(Central Processing Unit)

Input/Output Devices

PSU
(Power Supply Unit)
20
Graphical User Interface (GUI)
• Xerox PARC's development of
the graphical user interface in
the 1970s and its later
adoption by Apple's
Macintosh computer in 1984
transformed the way users
interacted with computers.
The GUI made computers
more user-friendly and
accessible to a broader
audience.
21
Internet is HERE!
• The 1990s saw the rise of the
internet, connecting
computers worldwide and
transforming communication
and information access. Tim
Berners-Lee's invention of the
World Wide Web in 1989
played a pivotal role in
democratizing knowledge and
commerce

22
History of
Internet

JANUARY 27TH, 2023

23
The first internet conversation

24
“LO” The first ARPANET (INTERNET)
message

25
The era of Internets
• France: CYCLADES (1960s-1970s)
• Developed experimental CYCLADES network.
• Pioneered packet switching technology.
• Influenced the design of TCP/IP.
• United Kingdom: NPL Network (1970s)
• Created NPL Network using Network Control Program (NCP).
• Contributed to early networking technology development.
• United States: ARPANET (1960s-1980s)
• Established ARPANET by ARPA.
• Initially used Network Control Protocol (NCP).
• Transitioned to TCP/IP in 1983.
• Pioneered packet switching and email protocols.

26
Protocols: Let’s standardize all internets!

27
Problem!

How to connect all internets?

28
Telegraph
• A telegraph is a communication
system that transmits messages
over long distances using electrical
signals.
• In the19th century, telegraph cables
were laid undersea and
underground to transmit telegraph
signals, forming the backbone of
long-distance communication. International Telegraph 1901

29
DSL and ADSL
• DSL (Digital Subscriber Line):
• 1990s: DSL technology emerged as a way to provide
high-speed internet access over existing copper
telephone lines.
• 1998: DSL gained popularity as a broadband internet
access method, offering faster speeds than dial-up
connections.
• ADSL (Asymmetric Digital Subscriber Line):
• Late 1990s: ADSL, a variation of DSL, became widely
deployed. It offered faster download speeds compared
to upload speeds, catering to the asymmetric nature of
internet usage where users typically download more
data than they upload.
30
Optical Fiber
• Late 1990s to early 2000s: Optical fiber technology
began to be deployed for internet infrastructure.
• 2000s: Fiber optic cables gradually replaced older
copper-based technologies due to their superior
speed and bandwidth capabilities.
• Present: Optical fiber is now the dominant
technology for long-distance internet backbone
connections and high-speed broadband access,
offering significantly faster speeds and greater
bandwidth compared to DSL and ADSL.

31
Submarine Telecommunication Cables

32
1983
• ARPANET officially transitioned to using
TCP/IP, leading to the modern internet
• Creation of the Domain Name System
(DNS) to translate human-readable
domain names into IP addresses
• First proposal for the World Wide Web
by Tim Berners-Lee, laying the
groundwork for the modern web

33
1989
• Sir Tim Berners-Lee proposes a system
for sharing information over the internet,
which becomes the basis for the World
Wide Web
• Berners-Lee writes the first web
browser, called WorldWideWeb, and the
first web server, running on a NeXT
computer
• Birth of the modern web and the
explosive growth of the internet as a
global communication and information
platform
34
1991
• Creation of the first website by Tim
Berners-Lee at CERN
• The first web page is created, providing
information about the World Wide Web
project
• The first web browser for the Macintosh
is released
• Beginning of the explosion of
commercial and personal use of the
internet

35
The first web page on internet

36
1993
• Creation of the first popular web
browser, Mosaic
• Introduction of the first search engine,
Archie
• Creation of the first online shopping
website, Internet Shopping Network

37
1995
• Launch of Windows 95, which included
built-in support for TCP/IP and the
internet
• Creation of the first online auction site,
eBay
• Launch of [Link], the first major
online retailer
• The first web-based email services, such
as Hotmail and Yahoo! Mail, are
launched

38
1996
• The first version of JavaScript is
released, allowing developers to create
interactive websites
• The first CSS specification is released,
providing a way to separate the
presentation of a website from its
content

39
1998
• Launch of Google, which quickly
became the dominant search engine on
the web
• Creation of the first popular social
networking site, Six Degrees
• Introduction of the term "blog" to
describe personal online journals

40
2001
• Launch of Wikipedia, a free online
encyclopedia written and maintained by
volunteers
• Introduction of the first commercial 3G
mobile networks, enabling mobile internet
access
• The first mobile web browser, WAP, is
launched, allowing users to access the web
on mobile devices
• Launch of Apple's iPod, which would
eventually lead to the widespread adoption
of digital music and the rise of streaming
services

41
2004
• Launch of Facebook, which quickly
became the dominant social networking
site
• Introduction of the first version of Gmail,
which revolutionized email with its
advanced search and organization
features
• Launch of Mozilla Firefox, a popular
alternative web browser to Microsoft's
Internet Explorer

42
2007
• Launch of the iPhone, which popularized
smartphones and mobile computing
• Creation of the first video-sharing site,
YouTube
• Introduction of the concept of "cloud
computing" with the launch of Amazon
Web Services, making it easier and
cheaper for businesses to host and
access data and applications online.

43
2010
• The launch of HTML5, providing new
features for web developers and making
it easier to create multimedia-rich
websites
• The launch of responsive web design,
allowing websites to adjust their layout
and content to different screen sizes
and devices

44
2013
• Introduction of the concept of the
"Internet of Things" (IoT), where
everyday objects are connected to the
internet and can communicate with
each other
• Revelation of the extent of government
surveillance of online activity, leading to
increased concerns about privacy and
security on the internet

45
2015
• The launch of HTTP/2, providing faster
and more efficient communication
between web servers and browsers
• The widespread adoption of mobile
devices for web browsing, with mobile
traffic surpassing desktop traffic for the
first time

46
2019
• The increasing use of artificial intelligence and
machine learning in web development, with new
tools for website optimization and content
creation
• The growing importance of web accessibility
and inclusive design, with a focus on making the
web more usable for people with disabilities
• Launch of 5G mobile networks, promising faster
and more reliable internet access
• Increased concerns about the impact of social
media on mental health and political discourse
• Ongoing debates about the role of technology
companies in shaping public opinion and the
spread of disinformation

47
2021 – Future
• Launch of ChatGPT, an AI-powered
language model designed to provide
conversational responses to user
queries.
• Continued growth of online commerce
and remote work due to the COVID-19
pandemic
• Ongoing concerns about cybersecurity
threats and privacy breaches, leading to
calls for increased regulation and
oversight of technology companies.

48
Web

JANUARY 27TH, 2023

49
What is Web ?

Definition
“web is a complex system of interconnected elements”

50
Web: a technical definition

“The web, short for World Wide Web, is a system of interconnected documents
and resources that are accessed over the internet”

51
The key components of the web
• Hyperlinks: These are clickable connections between web pages, allowing users to
navigate between different documents and resources.
• Web pages: These are individual documents written in languages such as HTML
(Hypertext Markup Language) that contain text, images, multimedia elements, and other
content.
• Web browsers: These are software applications that users use to access and navigate
the web. Popular examples include Google Chrome, Mozilla Firefox, and Safari.
• Web servers: These are computers that store and deliver web pages to users when
requested. They host websites and web applications and communicate with clients (web
browsers) over the internet.
• Uniform Resource Locators (URLs): These are addresses used to identify and locate
resources on the web. URLs consist of a protocol (such as HTTP or HTTPS), a domain
name (e.g., [Link]), and a path to the specific resource.
• Protocols: The web operates on various protocols, such as HTTP (Hypertext Transfer
Protocol) and HTTPS (HTTP Secure), which define rules and conventions for
communication between clients and servers.

52
Web 1.0
• Often referred to as the "read-only" web.
• Characterized by static web pages with basic text and images.
• Content was primarily created and controlled by website owners.
• Interaction was limited, with users mainly consuming information rather
than actively participating.
• Examples include early websites like Yahoo! and the first versions of
online encyclopedias.

53
Web 2.0
• Known as the "read-write" web or the "social web."
• Marked by the rise of dynamic and interactive websites.
• User-generated content became prominent through platforms like blogs,
social media, wikis, and forums.
• Collaboration and interaction between users became central, enabling
commenting, sharing, and community building.
• Technologies such as AJAX (Asynchronous JavaScript and XML)
facilitated richer user experiences.
• Examples include social networking sites like Facebook, video-sharing
platforms like YouTube, and collaborative encyclopedias like Wikipedia.

54
Web 3.0
• Also known as the "semantic web" or the "decentralized web."
• Envisions a more intelligent, interconnected, and decentralized internet.
• Focuses on machine understanding of data through metadata, ontologies, and
linked data, enabling computers to better understand and interpret web content.
• Involves the integration of artificial intelligence, machine learning, and natural
language processing to enhance web experiences.
• Emphasizes decentralization, with technologies like blockchain and distributed
ledger technology playing a significant role in enabling peer-to-peer interactions,
decentralized applications (DApps), and digital currencies.
• Aims to provide greater privacy, security, and ownership of data for users.
• Examples include blockchain-based platforms like Ethereum, decentralized
finance (DeFi) applications, and projects working on privacy-focused browsing
and communication tools.
55
 Web
Development

JANUARY 27TH, 2023

56
Introduction
• Web development is the process of creating websites, web applications,
and other digital products that run on the internet.
• Web development is an essential skill in today's digital age, with more and
more businesses and organizations relying on the web to connect with
customers and clients.
• In this masterclass, we will explore the fundamentals of web development
and the tools and technologies used by developers to build websites and
web applications.

57
What is Web Development?
• Web development is the process of creating web-based software
applications.
• The goal of web development is to create digital products that are
accessible over the internet.
• Web development is a complex field that involves designing, coding,
testing, and deploying web-based software applications.

58
Front-End vs Back-End
• Front-end development refers to the part of web development that deals
with the user interface of a website or web application.
• Back-end development, on the other hand, deals with the behind-the-
scenes functionality of a website or web application.
• Tools and technologies used in front-end development include HTML, CSS,
and JavaScript, while back-end development requires knowledge of
databases, servers, and programming languages like PHP, Python, and
Ruby.

59
Full-Stack Development
• Full-stack development involves developing both front-end and back-end
software applications.
• Full-stack developers have the skills and expertise to work on all layers of
a web application.
• They use programming languages such as HTML, CSS, JavaScript, and
frameworks like React, Angular, and [Link] for front-end development.
• On the back-end, they use languages like Python, Ruby, or [Link] to build
servers and databases.
• Full-stack developers need to understand business requirements and
translate them into functional, secure, and scalable software solutions.
• They require knowledge of database design, server optimization, and
system architecture.

60
Frameworks and Libraries
• Front-end frameworks and libraries, such as React, Vue, and Angular, are
pre-written sets of code that simplify the development process.
• These frameworks and libraries provide pre-built components, styles, and
functions that can be easily integrated into web applications, reducing
development time and increasing efficiency.
• Back-end frameworks, such as Express and Ruby on Rails, provide a
similar level of convenience and standardization for back-end
development.

61
HTML/CSS

JANUARY 27TH, 2023

62
What is HTML ?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is
a paragraph", "this is a link", etc.

63
A Simple HTML Document
• The <!DOCTYPE html> declaration defines that this
document is an HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about
the HTML page
• The <title> element specifies a title for the HTML page
(which is shown in the browser's title bar or in the page's
tab)
• The <body> element defines the document's body, and is
a container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph

64
What is an HTML Element?
• An HTML element is defined by a start tag, some content, and an end tag:

• <tagname> Content goes here... </tagname>

• The HTML element is everything from the start tag to the end tag:

• <h1>My First Heading</h1>

• <p>My first paragraph.</p>

65
What is an HTML Element?
• Note
• Some HTML elements have no content (like the <br> element).
• These elements are called empty elements.
• Empty elements do not have an end tag!

66
Web Browsers
• The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read
HTML documents and display them correctly.

• A browser does not display the HTML tags, but uses them to determine
how to display the document:

67
Web Browsers

68
HTML Page Structure

69
HTML Editors
• Step 1: Open Notepad (PC)
• Windows 8 or later:
• Open the Start Screen (the window symbol at the bottom left on your screen). Type
Notepad.
• Windows 7 or earlier:
• Open Start > Programs > Accessories > Notepad
• Step 1: Open TextEdit (Mac)
• Open Finder > Applications > TextEdit
• Also change some preferences to get the application to save files correctly. In
Preferences > Format > choose "Plain Text"
• Then under "Open and Save", check the box that says "Display HTML files as HTML
code instead of formatted text".
• Then open a new document to place the code.

70
HTML Editors
• Step 2: Write Some HTML

71
HTML Editors
• Step 3: Save the HTML Page
• Save the file on your computer. Select File > Save as in the Notepad menu.

• Name the file "[Link]" and set the encoding to UTF-8 (which is the preferred
encoding for HTML files).

72
HTML Editors
• Step 4: View the HTML Page in Your Browser

73
HTML Documents
• All HTML documents must start with a document type declaration:
<!DOCTYPE html>.

• The HTML document itself begins with <html> and ends with </html>.

• The visible part of the HTML document is between <body> and </body>.

74
The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration represents the document type, and helps
browsers to display web pages correctly.

• It must only appear once, at the top of the page (before any HTML tags).

• The <!DOCTYPE> declaration is not case sensitive.

• The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>

75
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.

• <h1> defines the most important heading.

• <h6> defines the least important heading.

76
HTML Headings

77
HTML Paragraphs
• HTML paragraphs are defined with the <p> tag

78
HTML Paragraphs

79
HTML Links
• HTML links are hyperlinks.
• You can click on a link and jump to another document.
• When you move the mouse over a link, the mouse arrow will turn into a
little hand.
• HTML links are defined with the <a> tag:

• A link does not have to be text. A link can be an image or any other HTML
element!

80
HTML Links

81
HTML Links - The target Attribute
• By default, the linked page will be displayed in the current browser
window. To change this, you must specify another target for the link.

• The target attribute specifies where to open the linked document.

• The target attribute can have one of the following values:

• _self - Default. Opens the document in the same window/tab as it was clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window

82
Absolute URLs vs. Relative URLs
• Both examples above are using an absolute URL (a full web address) in
the href attribute.

• A local link (a link to a page within the same website) is specified with a
relative URL (without the "[Link] part):

83
HTML Images
• HTML images are defined with the <img> tag.

• The source file (src), alternative text (alt), width, and height are provided as
attributes:

84
HTML Images

85
HTML Links - Use an Image as a Link
• To use an image as a link, just put the <img> tag inside the <a> tag:

86
Link to an Email Address
• Use mailto: inside the href attribute to create a link that opens the user's
email program (to let them send a new email):

87
Button as a Link
• To use an HTML button as a link, you have to add some JavaScript code.

• JavaScript allows you to specify what happens at certain events, such as a

click of a button:

88
Nested HTML Elements
• HTML elements can be nested (this means that elements can contain
other elements).

• All HTML documents consist of nested HTML elements.

89
Nested HTML Elements
• The <html> element is the root
element and it defines the whole
HTML document.
• It has a start tag <html> and an end
tag </html>
• Then, inside the <html> element
there is a <body> element
•…

90
Empty HTML Element
• HTML elements with no content are called empty elements.

• The <br> tag defines a line break, and is an empty element without a
closing tag:

91
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"

92
The href Attribute
• The <a> tag defines a hyperlink.

• The href attribute specifies the URL of the page the link goes to.

93
The src Attribute
• The <img> tag is used to embed an image in an HTML page.

• The src attribute specifies the path to the image to be displayed:

94
The src Attribute
• There are two ways to specify the URL in the src attribute:
• 1. Absolute URL - Links to an external image that is hosted on another
website. Example:src="[Link]
• 2. Relative URL - Links to an image that is hosted within the website. Here,
the URL does not include the domain name. If the URL begins without a
slash, it will be relative to the current page. Example: src="img_girl.jpg". If
the URL begins with a slash, it will be relative to the domain. Example:
src="/images/img_girl.jpg".
• Tip: It is almost always best to use relative URLs. They will not break if you
change domain.

95
The alt Attribute
• The required alt attribute for the <img> tag specifies an alternate text for
an image, if the image for some reason cannot be displayed.
• This can be due to a slow connection, or an error in the src attribute, or if
the user uses a screen reader.

96
The style Attribute
• The style attribute is used to add styles to an element, such as color, font,
size, and more.

97
The lang Attribute
• You should always include the lang attribute inside the <html> tag, to
declare the language of the Web page.
• This is meant to assist search engines and browsers.

• The following example specifies English as the language:

98
The lang Attribute
• Country codes can also be added to the language code in the lang
attribute. So, the first two characters define the language of the HTML
page, and the last two characters define the country.

• The following example specifies English as the language and United

States as the country:

99
Always Quote Attribute Values
• The HTML standard does not require quotes around attribute values.

• However, W3C recommends quotes in HTML, and demands quotes for

stricter document types like XHTML.

• Good >
• Bad >

• Sometimes you have to use quotes. This example will not display the title
attribute correctly, because it contains a space:

100
HTML Display
• You cannot be sure how HTML will
be displayed.
• Large or small screens, and resized
windows will create different results.
• With HTML, you cannot change the
display by adding extra spaces or
extra lines in your HTML code.
• The browser will automatically
remove any extra spaces and lines
when the page is displayed.

101
HTML Display

102
HTML Horizontal Rules
• The <hr> tag defines a thematic
break in an HTML page, and is most
often displayed as a horizontal rule.

• The <hr> element is used to

separate content (or define a
change) in an HTML page:

103
HTML Horizontal Rules

104
The Poem Problem
• This poem will display on a single line:

105
Solution - The HTML <pre> Element
• The HTML <pre> element defines preformatted text.
• The text inside a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks:

106
HTML Styles
• The HTML style attribute is used to add styles to an element, such as
color, font, size, and more.

107
The HTML Style Attribute
• Setting the style of an HTML element, can be done with the style attribute.
• The HTML style attribute has the following syntax:

• The property is a CSS property. The value is a CSS value.

108
Background Color
• The CSS background-color property defines the background color for an
HTML element.

109
Background Color
• Set background color for two different elements:

110
Text Color
• The CSS color property defines the text color for an HTML element:

111
Fonts
• The CSS font-family property defines the font to be used for an HTML
element:

112
Text Size
• The CSS font-size property defines the text size for an HTML element:

113
HTML Text Formatting
• HTML contains several elements for defining text with a special meaning.

114
HTML Formatting Elements
• 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

115
HTML Comments
• HTML comments are not displayed in the browser, but they can help
document your HTML source code.
• You can add comments to your HTML source by using the following
syntax:

116
HTML Colors
• HTML colors are specified with predefined color names, or with RGB, HEX,
HSL, RGBA, or HSLA values.
• Colors Names

117
HTML Colors

118
Colors Values
• In HTML, colors can also be specified using RGB values, HEX values, HSL
values, RGBA values, and HSLA values.

• The following three <div> elements have their background color set with
RGB, HEX, and HSL values:

119
Colors Values
• The following two <div> elements have their background color set with
RGBA and HSLA values, which add an Alpha channel to the color (here we
have 50% transparency):

120
Colors Values

121
RGB Color Values
• In HTML, a color can be specified as an RGB value, using this formula:
• rgb(red, green, blue)
• Each parameter (red, green, and blue) defines the intensity of the color with a
value between 0 and 255.
• This means that there are 256 x 256 x 256 = 16,777,216 possible colors!
• For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest
value (255), and the other two (green and blue) are set to 0.
• Another example, rgb(0, 255, 0) is displayed as green, because green is set to its
highest value (255), and the other two (red and blue) are set to 0.
• To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
• To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

122
RGB Color Values

123
RGBA Color Values
• RGBA color values are an extension of RGB color values with an Alpha
channel - which specifies the opacity for a color.
• An RGBA color value is specified with:
• rgba(red, green, blue, alpha)
• The alpha parameter is a number between 0.0 (fully transparent) and 1.0
(not transparent at all).

124
RGBA Color Values

125
HEX Color Values
• In HTML, a color can be specified using a hexadecimal value in the form:
• #rrggbb
• Where rr (red), gg (green) and bb (blue) are hexadecimal values between
00 and ff (same as decimal 0-255).
• For example, #ff0000 is displayed as red, because red is set to its highest
value (ff), and the other two (green and blue) are set to 00.
• Another example, #00ff00 is displayed as green, because green is set to
its highest value (ff), and the other two (red and blue) are set to 00.
• To display black, set all color parameters to 00, like this: #000000.
• To display white, set all color parameters to ff, like this: #ffffff.

126
HEX Color Values

127
HSL Color Values
• HSL Color Values
• In HTML, a color can be specified using hue, saturation, and lightness
(HSL) in the form:
• hsl(hue, saturation, lightness)
• Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green,
and 240 is blue.
• Saturation is a percentage value. 0% means a shade of gray, and 100% is
the full color.
• Lightness is also a percentage value. 0% is black, and 100% is white.

128
HSL Color Values

129
HSL Color Values – Saturation
• Saturation can be described as the intensity of a color.
• 100% is pure color, no shades of gray.
• 50% is 50% gray, but you can still see the color.
• 0% is completely gray; you can no longer see the color.

130
HSL Color Values – Saturation

131
HSL Color Values – Lightness
• The lightness of a color can be described as how much light you want to
give the color, where 0% means no light (black), 50% means 50% light
(neither dark nor light), and 100% means full lightness (white).

132
HSL Color Values – Lightness

133
HSLA Color Values
• HSLA color values are an extension of HSL color values, with an Alpha
channel - which specifies the opacity for a color.
• An HSLA color value is specified with:
• hsla(hue, saturation, lightness, alpha)
• The alpha parameter is a number between 0.0 (fully transparent) and 1.0
(not transparent at all):

134
HSLA Color Values

135
Shades of Gray – RGB

136
Shades of Gray – HEX

137
Shades of Gray – HSL

138
HTML Styles – CSS
• CSS stands for Cascading Style Sheets.

• CSS saves a lot of work.

• CSS can control the layout of multiple web

pages all at once.

139
What is CSS?
• Cascading Style Sheets (CSS) is used to
format the layout of a webpage.
• With CSS, you can control
• colors,
• fonts,
• the size of text,
• the spacing between elements,
• how elements are positioned and laid out,
• what background images or background
colors are to be used,
• different displays for different devices and
screen sizes,
• and much more!

140
What is CSS?
• The word cascading means that a style
applied to a parent element will also
apply to all children elements within the
parent.
• So, if you set the color of the body text to
"blue", all headings, paragraphs, and
other text elements within the body will
also get the same color (unless you
specify something else)!

141
Using CSS
• CSS can be added to HTML documents in 3 ways:

• Inline - by using the style attribute inside HTML elements

• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file

• The most common way to add CSS, is to keep the styles in external CSS
files.

142
Inline CSS
• An inline CSS is used to apply a unique style to a single HTML element.

• An inline CSS uses the style attribute of an HTML element.

• The following example sets the text color of the <h1> element to blue,
and the text color of the <p> element to red:

143
Internal CSS
• An internal CSS is used to define a style for a
single HTML page.

• An internal CSS is defined in the <head>

section of an HTML page, within a <style>
element.

• The following example sets the text color of

ALL the <h1> elements (on that page) to blue,
and the text color of ALL the <p> elements to
red. In addition, the page will be displayed with
a "powderblue" background color:

144
External CSS
• The external style sheet can be written in
any text editor.

• The file must not contain any HTML code,

and must be saved with a .css extension.

• Here is what the "[Link]" file looks like:

145
External CSS
• To use an external style sheet, add a link to it in the <head> section of
each HTML page:

146
CSS Border
• The CSS border property defines a border around an HTML element.

147
CSS Padding
• The CSS padding property defines a padding (space) between the text and
the border.

148
CSS Margin
• The CSS margin property defines a margin (space) outside the border.

149