This document provides an introduction to web standards. It discusses that web standards are formal specifications that describe the World Wide Web. The main standards organizations are the World Wide Web Consortium (W3C) which makes recommendations for technologies like HTML, CSS, XML; and the Internet Engineering Task Force (IETF) which publishes RFC documents. It then gives examples of specific W3C recommendations including XHTML, CSS, XML, and how they are used to structure web pages and apply styles.
1. Intro
to
Web
Standards
Jussi
Pohjolainen
TAMK
University
of
Applied
Sciences
2. Web
Standards?
• Formal
standards
or
technical
specifica2ons
that
describe
the
World
Wide
Web
• Web
Standards
consist
of
the
following
– RecommendaDons
of
the
World
Wide
Web
ConsorDum
(W3C)
• (X)HTML,
CSS,
SVG,
DOM
...
– RFC
documents
published
by
Internet
Engineering
Task
Force
(IETF)
• URI,
HTTP,
MIME
...
– And
also
standards
by
Ecma
InternaDonal
(JavaScript),
Unicode
(Charsets)
and
IANA
(Name
and
number
registries).
3. World
Wide
Web
ConsorDum
• The
World
Wide
Web
ConsorDum
(W3C)
is
the
main
internaDonal
standards
organizaDon
for
the
World
Wide
Web
• Compa2bility
among
industry
members
• W3C
makes
recommenda)ons
for
the
web
• Several
recommendaDons
– XHTML,
DOM,
CSS,
XML...
• URL:
hXp://www.w3.org/
4. W3C
RecommendaDon:
XHTML
• XHTML™
1.0
The
Extensible
HyperText
Markup
Language
(Second
EdiDon)
– hXp://www.w3.org/TR/xhtml1/
• Markup
language
for
web
pages
• Can
be
used
to
create
structured
documents
by
using
structural
semanDcs
– headings,
paragraph,
lists,
links
...
5. Example
of
XHTML
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello</title>
<meta http-equiv="content-type" content="application/xhtml
+xml; charset=utf-8" />
</head>
<body>
<h1>Hello World!</h1>
<p>Here is a paragraph.</p>
</body>
</html>
6. XHTML,
HTML?
SGML:
Standard
Generalized
Markup
Language
Meta
language
XML
Meta
language
(subset
of
SGML)
OOXML
MathML
XHTML
HTML
(.docx)
(.mml)
(.xhtml)
(.html)
7. (X)HTML
versions
• 1996:
HTML
2.0
• 200X:
(X)HTML
5
• 1997:
HTML
3.2
– 2D
drawing,
Offline
– W3C
RecommendaDon
storage,
drag
and
drop..
• 1997:
HTML
4.0
– CSS
• 2000:
XHTML
1.0
– SeparaDon
of
layout
and
the
document
8. W3C
RecommendaDon:
XML
• eXtensible
Markup
Language,
is
a
specificaDon
for
creaDng
custom
markup
languages
• W3C
RecommendaDon
• Primary
purpose
is
to
help
computers
to
share
data
• XML
is
meta-‐language.
This
means
that
you
use
it
for
creaDng
languages.
• XML
is
an
extensive
concept.
9. XML-‐language:
XHTML
<?xml version="1.0"?>!
<!DOCTYPE html !
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"!
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">!
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">!
<head>!
<title>Minimal XHTML 1.0 Document</title>!
</head>!
<body>!
<p>This is a minimal <a href="http://www.w3.org/TR/
xhtml1/">XHTML 1.0</a> !
document.</p>!
</body>!
</html>!
12. XML-‐language:
You
can
create
your
own!
<plist version='1.0'>!
<dict>!
<key>Student and Staff Restaurant</key>!
<array>!
<string>Gratinated broccoli</string>!
<string>Oven baked sausage</string>!
<string>Beef in red wine sauce</string>!
<string>Ham and pepperoni baguette</string>!
<string>Baguette with beef roast</string>!
</array>!
<key>Cafeteria</key>!
<array>!
<string>Tomato soup with chevre &</string>!
<string>Ham and pasta salad</string>!
</array>!
</dict>!
</plist>!
13. W3C
recommendaDon:
CSS
• Cascading
Style
Sheets
is
used
to
describe
presentaDon
of
a
document
wriXen
in
some
markup
language
– Markup
language
can
be
(x)html
• Different
versions
– CSS
1,
CSS
2,
CSS
3
• Different
browsers
support
different
things
in
CSS
14. XHTML
with
CSS
<?xml version="1.0"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Minimal XHTML 1.0 Document</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<p>This is a minimal <a href="http://www.w3.org/TR/xhtml1/">XHTML
1.0</a>
document.</p>
</body>
</html>
17. JavaScript,
LiveScript,
JScript,
ECMAScript?
• ScripDng:
add
client-‐side
behaviour
to
the
site
• JavaScript
– Developed
by
Netscape
– Originally
JavaScript,
then
LiveScript
and
then
back
to
JavaScript.
• JScript
– Microsok
made
their
own
version
of
the
JavaScript
• CompaDbility
problems
• =>
ECMAScript,
effort
to
standardize
different
versions
of
the
J(ava)Script
18. ECMAScript
• ECMAScript
is
a
scripDng
language,
standardized
by
Ecma
InternaDonal
• In
Browsers,
ECMAScript
is
commonly
called
JavaScript
• Java/ECMAscript
is
nowdays
heavily
used
with
AJAX
–
based
sites
• SDll
many
problems
because
of
browser
incompaDbilites
20. HTTP?
• HTTP
(Hypertext
transfer
protocol)
is
a
stateless
protocol,
which
is
meant
to
transfer
informaDon
on
intranets
and
World
Wide
Web.
– RFC2616:
– hXp://www.w3.org/Protocols/rfc2616/rfc2616.html
• HTTP
is
a
request
/
response
standard
between
client
and
server
21. Clients
and
Servers
• Client
– Client
makes
a
hXp
request.
– Client
can
be
a
web
browser,
spider
or
other
end-‐user
tool
– Client
is
referred
as
a
user
agent
• Server
– Stores
informaDon
and
makes
them
available
to
the
client
– Gives
hXp
response
to
the
client
22. Resources
• Server
provides
resources
to
clients
• Resources
can
be
accessed
by
HTTP
using
URLs
(
Uniform
Resource
Locator
)
• Example
– hXp://www.tamk.fi/~jack/document.doc
23. Request
and
Response
Client
Client
User-‐agent:
Firefox
Apache
HTTP
Server
request
response
24. Request
GET
• HTTP
defines
eight
methods
that
define
a
acDon
which
will
be
made
to
a
resource
• Most
typical
method
is
GET
• By
using
the
GET
-‐
method,
client
gets
a
representaDon
of
the
resource.
• Example
of
geqng
a
file
– URL:
hXp://www.something.com/file.doc
– 1)
Open
connecDon
to
the
server
– 2)
Send
following
through
the
connecDon:
• GET
/path/to/file.doc
HTTP/1.0
– 3)
Read
the
response
25. More
on
Request
GET
• Typically
HTTP
client
is
a
browser
that
creates
the
request
automaDcally
when
user
opens
a
url
• Browser
creates
the
request
which
contains
addiDon
to
the
GET
lot
of
other
informaDon..
• For
example,
informa)on
about
user
agent!
26. Request
and
Response
Client
example
request
Client
User-‐agent:
Firefox
GET / HTTP/1.1! Apache
HTTP
Server
Host: www.tamk.fi!
User-Agent: Mozilla/5.0 (Mac..)!
...!
!
response
27. Response
• When
making
a
GET
request
to
a
certain
URL,
client
gets
a
response
• Response
consists
of
– 1)
Header
informaDon
– 2)
Resource
itself
• Browser
makes
decisions
based
on
the
header
informaDon..
31. Client
vs.
Server
• In
client-‐side
techniques,
browser
or
it's
plugins
executes
dynamic
behaviour
– Flash,
JavaScript,
Applets...
• In
server-‐side
techniques,
server
is
responsible
for
the
dynamic
behaviour
– PHP,
Java
EE..
– Persistant
Storage
is
implemented
by
using
databases,
for
example:
MySQL