Slide 1
Slide 1 text
101
Web Standards
URL, HTTP, HTML, CSS, JavaScript
Slide 2
Slide 2 text
URL
uniform resource locator
Purpose: Make data addressable
Slide 3
Slide 3 text
http://www.google.com
/search?q=flowers#foot
Slide 4
Slide 4 text
http://
protocol scheme
http, https, file, mailto, ...
Slide 5
Slide 5 text
http://
root
double slash
Slide 6
Slide 6 text
bob:s3cr3t@www.
example.com:8080
Slide 7
Slide 7 text
bob:s3cr3t@www.
example.com:8080
domain
required
Slide 8
Slide 8 text
bob:s3cr3t@www.
example.com:8080
port
optional
default is 80
range: 1-65,535
Slide 9
Slide 9 text
bob:s3cr3t@www.
example.com:8080
authentication credentials
optional
rarely used, legacy
not how modern web apps handle logins
Slide 10
Slide 10 text
reddit.com/r/IAmA/top
path
convention to omit “index.html”
slashes “/” denote hierarchy
leading slash is the root directory
reference current level with single dot “.”
can be relative by using double dot “..”
Slide 11
Slide 11 text
Current page:
reddit.com/r/IAmA/top
Link:
./new
Result:
reddit.com/r/IAmA/new
Slide 12
Slide 12 text
Current page:
reddit.com/r/IAmA/top
Link:
new
Result:
reddit.com/r/IAmA/new
Slide 13
Slide 13 text
Current page:
reddit.com/r/IAmA/top
Link:
../pics/new
Result:
reddit.com/r/pics/new
Slide 14
Slide 14 text
Current page:
reddit.com/r/IAmA/top
Link:
/
Result:
reddit.com/
Slide 15
Slide 15 text
http://www.google.com
/search?q=flowers#foot
query string
after the question mark “?”
key=value pairs
used to pass information to the web server
Slide 16
Slide 16 text
http://www.google.com
/search?q=flowers#foot
fragment identifier
after the hash sign
points to specific content in the page
Slide 17
Slide 17 text
HTTP
hyper-text transfer protocol
Purpose: Transfer content from a web
server to a web browser
Slide 18
Slide 18 text
Demo
https://gist.github.com/cbas/5378704
Syntax
request/response
method, URI, version
headers
body
Slide 19
Slide 19 text
hyper-text markup language
Purpose: Structures content of the
document semantically
User agent: Browsers, crawlers, screen
scrapers, file converters
HTML
Slide 20
Slide 20 text
Demo
https://gist.github.com/cbas/5379047
Syntax
doctype
elements
attributes
text
comments
Slide 21
Slide 21 text
doctype
describes HTML version the document uses
HTML5 simplified it to “”
Slide 22
Slide 22 text
elements
opening and closing tags: ![]()
equals ![]()
some text
self closing tags:Slide 23
Slide 23 text
must wrap values in double or single quotes
if they contains spaces,
so just always do it
attributes
attributes
Slide 24
Slide 24 text
attributes
white space separated
Slide 25
Slide 25 text
attributes
names case insensitive,
but lowercase looks better
equals
equals
Slide 26
Slide 26 text
text
escape special characters
< “<” or > “>” & or “&”
white space collapses into single space
“Hi there!” becomes “Hi there!”
Slide 27
Slide 27 text
comments
begin with “”
useful to hide a section, or describe it to
other developers (ie. future self)
contains any HTML except comments
Slide 28
Slide 28 text
CSS
cascading style sheets
Purpose: Presentation of the data, typically
through visual layout and design
Targets: Screen, print, or assistive
technology (eg. screen readers)
Slide 29
Slide 29 text
Demo
https://gist.github.com/cbas/5379150
Syntax
selectors
blocks
properties
values
Slide 30
Slide 30 text
selectors
universal selector
asterisk “*”
Slide 31
Slide 31 text
selectors
type
element name
Slide 32
Slide 32 text
selectors
class
space separated list
re-usable on any elements
Slide 33
Slide 33 text
selectors
id
single value
unique in the page
Slide 34
Slide 34 text
selectors
attributes
element has attribute “img[title]”
attribute value equals
“input[type=’password’]”
Slide 35
Slide 35 text
selectors
pseudo classes
:first-child, :last-child, :nth-child()
:hover, :active, :focus
:visited
:not()
Slide 36
Slide 36 text
selectors
pseudo elements
::first-line, ::first-letter
::before, ::after
Slide 37
Slide 37 text
selectors
combinators
child of “>”
preceded by “~“
immediately preceded by “+”
Slide 38
Slide 38 text
blocks
wrapped in curly braces “{ }”
Slide 39
Slide 39 text
blocks
required: one block per selector
h1 { }
optional: multiple selectors per block
h1, h2, h3, h4, h5, h6 { }
Slide 40
Slide 40 text
properties
examples:
font-family, color, background, padding, ...
vendor prefixes
-webkit-*, -moz-*, -ms-*, -o-*
Slide 41
Slide 41 text
values
amount + unit
Slide 42
Slide 42 text
amount
integer 5, number 4.5
Slide 43
Slide 43 text
units
percentage 5%, length 5px, time 5ms,
colour #5030bf, string "Arial",
url url(me.jpg), angle 90deg, ...
Slide 44
Slide 44 text
JavaScript
Purpose: Interactive behaviour on a web
page
Examples: Popup dialogs, visual effects, in-
place data loading, ...
Slide 45
Slide 45 text
JavaScript is a programming language
outside the scope of this course.
We can however use code snippets to
achieve many useful behaviours.
Slide 46
Slide 46 text
Demo
https://gist.github.com/cbas/5379212
Syntax
Embedded:
... source code ...
Linked: