Introduction to Web Standards

Intro
to
Web
Standards

Jussi
Pohjolainen

Tampere
University
of
Applied
Sciences

Web
Standards?

•  Formal
standards
or
technical
speciﬁca2ons
that

describe
the
World
Wide
Web

•  Web
Standards
consist
of
the
following

–  RecommendaBons
of
the
World
Wide
Web

ConsorBum
(W3C)

•  (X)HTML,
CSS,
SVG,
DOM
...

–  RFC
documents
published
by
Internet
Engineering

Task
Force
(IETF)

•  URI,
HTTP,
MIME
...

–  And
also
standards
by
Ecma
InternaBonal
(JavaScript),

Unicode
(Charsets)
and
IANA
(Name
and
number

registries).

World
Wide
Web
ConsorBum

•  The
World
Wide
Web
ConsorBum
(W3C)
is
the

main
internaBonal
standards
organizaBon
for

the
World
Wide
Web

•  Compa2bility
among
industry
members

•  W3C
makes
recommenda)ons
for
the
web

•  Several
recommendaBons

–  XHTML,
DOM,
CSS,
XML...

•  URL:
hWp://www.w3.org/

W3C
RecommendaBon:
XHTML

•  XHTML™
1.0
The
Extensible
HyperText

Markup
Language
(Second
EdiBon)

–  hWp://www.w3.org/TR/xhtml1/

•  Markup
language
for
web
pages

•  Can
be
used
to
create
structured
documents

by
using
structural
semanBcs

–  headings,
paragraph,
lists,
links
...

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>

XHTML,
HTML?

SGML:
Standard
Generalized
Markup
Language

Meta
language

XML

Meta
language
(subset
of
SGML)

OOXML
MathML
XHTML
HTML

(.docx)
(.mml)
(.xhtml)
(.html)

(X)HTML
versions

•  1996:
HTML
2.0
•  200X:
(X)HTML
5

•  1997:
HTML
3.2
–  2D
drawing,
Oﬄine

–  W3C
RecommendaBon
storage,
drag
and
drop..

•  1997:
HTML
4.0

–  CSS

•  2000:
XHTML
1.0

–  SeparaBon
of
layout
and

the
document

W3C
RecommendaBon:
XML

•  eXtensible
Markup
Language,
is
a
speciﬁcaBon

for
creaBng
custom
markup
languages

•  W3C
RecommendaBon

•  Primary
purpose
is
to
help
computers
to
share

data

•  XML
is
meta-‐language.
This
means
that
you

use
it
for
creaBng
languages.

•  XML
is
an
extensive
concept.

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>!

XML-‐language:
SVG

<!DOCTYPE svg !
PUBLIC "-//W3C//DTD SVG 1.1//EN" !
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">!
<svg width="100%" height="100%" version="1.1"!
xmlns="http://www.w3.org/2000/svg">!
!
<circle cx="100" cy="50" r="40" stroke="black"!
stroke-width="2" fill="red"/>!
!
</svg>!

XML-‐language:
MathML

<!DOCTYPE math:math PUBLIC "-//OpenOffice.org//DTD Modified W3C
MathML 1.01//EN" "math.dtd">!
<math:math xmlns:math="http://www.w3.org/1998/Math/MathML">!
<math:semantics>!
<math:mrow>!
<math:mi>x</math:mi>!
<math:mo math:stretchy="false">=</math:mo>!
<math:mfrac>!
<math:mrow>!
...!
</math:mrow>!
<math:annotation math:encoding="StarMath 5.0">x = {-b +-sqrt{b^
{2}-4{ac}} } over {2 {a}} </math:annotation>!
</math:semantics>!
</math:math>!

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>!

W3C
recommendaBon:
CSS

•  Cascading
Style
Sheets
is
used
to
describe

presentaBon
of
a
document
wriWen
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

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>

CSS:
mystyle.css

p {
font-family: Arial, serif;
color: RGB(255,0,0);
}

JavaScript,
LiveScript,
JScript,

ECMAScript?

•  ScripBng:
add
client-‐side
behaviour
to
the
site

•  JavaScript

–  Developed
by
Netscape

–  Originally
JavaScript,
then
LiveScript
and
then
back
to

JavaScript.

•  JScript

–  Microsoj
made
their
own
version
of
the
JavaScript

•  CompaBbility
problems

•  =>
ECMAScript,
eﬀort
to
standardize
diﬀerent

versions
of
the
J(ava)Script

ECMAScript

•  ECMAScript
is
a
scripBng
language,

standardized
by
Ecma
InternaBonal

•  In
Browsers,
ECMAScript
is
commonly
called

JavaScript

•  Java/ECMAscript
is
nowdays
heavily
used
with

AJAX
–
based
sites

•  SBll
many
problems
because
of
browser

incompaBbilites

Client-‐Server
Architecture

HTTP?

•  HTTP
(Hypertext
transfer
protocol)
is
a

stateless
protocol,
which
is
meant
to

transfer
informaBon
on
intranets
and
World

Wide
Web.

–  RFC2616:

–  hWp://www.w3.org/Protocols/rfc2616/rfc2616.html

•  HTTP
is
a
request
/
response
standard

between
client
and
server

Clients
and
Servers

•  Client

–  Client
makes
a
hWp
request.

–  Client
can
be
a
web
browser,
spider
or
other
end-‐user

tool

–  Client
is
referred
as
a
user
agent

•  Server

–  Stores
informaBon
and
makes
them
available
to
the

client

–  Gives
hWp
response
to
the
client

Resources

•  Server
provides
resources
to
clients

•  Resources
can
be
accessed
by
HTTP
using

URLs
(
Uniform
Resource
Locator
)

•  Example

–  hWp://www.tamk.ﬁ/~jack/document.doc

Request
and
Response

Client
Client

User-‐agent:
Firefox
Apache
HTTP
Server

request

response

Request
GET

•  HTTP
defines
eight
methods
that
define
a
acBon

which
will
be
made
to
a
resource

•  Most
typical
method
is
GET

•  By
using
the
GET
-‐
method,
client
gets
a

representaBon
of
the
resource.

•  Example
of
gepng
a
file

–  URL:
hWp://www.something.com/file.doc

–  1)
Open
connecBon
to
the
server

–  2)
Send
following
through
the
connecBon:

•  GET
/path/to/file.doc
HTTP/1.0

–  3)
Read
the
response

More
on
Request
GET

•  Typically
HTTP
client
is
a
browser
that

creates
the
request
automaBcally
when
user

opens
a
url

•  Browser
creates
the
request
which
contains

addiBon
to
the
GET
lot
of
other
informaBon..

•  For
example,
informa)on
about
user
agent!

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

Response

•  When
making
a
GET
request
to
a
certain
URL,

client
gets
a
response

•  Response
consists
of

–  1)
Header
informaBon

–  2)
Resource
itself

•  Browser
makes
decisions
based
on
the
header

informaBon..

Example
of
Response

HTTP/1.1 200 OK!
Date: Fri, 12 Jan 2007 07:51:41 GMT!
Server: Apache/1.3.37 (Unix)!
Last-Modified: Wed, 10 Jan 2007 12:43:34 GMT!
Header
ETag: "479a0-16a9-45a4df76"!
Accept-Ranges: bytes!
Content-Length: 5801!
Connection: close!
Content-Type: text/html; charset=iso-8859-1!
!
<html>!
Resource
<head>!
<title>...!
!

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..)!
...!

example
response

HTTP/1.1 200 OKDate: Fri, 12 Jan
2007 07:51:41 GMTServer: Apache/
1.3.37 (Unix)...!
...!
<html><head><title>...!
!

Firefox
and
HTTP
headers

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

Introduction to Web Standards

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (7)

Similar to Introduction to Web Standards

Similar to Introduction to Web Standards (20)

More from Jussi Pohjolainen

More from Jussi Pohjolainen (20)

Recently uploaded

Recently uploaded (20)

Introduction to Web Standards