COSC 416 week two

1
COSC 416week two http//iat.ubalt.edu/courses/co
sc416.101_sp08/
2
FTP
3
Your computer
Theserver
HTTP server
HTTP client
80
index.html
SFTP client
SFTP server
index.html
22
4
home/ robotomy_yourname/ yourname.robotomy.net
/ index.html
5
sftp//yourname.robotomy.net
home/ robotomy_yourname/ yourname.robotomy.net
/ index.html
6
http//yourname.robotomy.net/
home/ robotomy_yourname/ yourname.robotomy.net
/ index.html
7
Web standards
8
W3C
ECMA
HTTP(X)HTMLCSSXMLDOM
ECMAScript(aka JavaScript)
9
Accessibility
People with disabilities Software User-Agents
10
Maintainability
Redesigns Refreshes Additions
11
Performance
Download time Rendering time
12
HTTP
13
Your computer
Theserver
HTTP server
HTTP client
index.html
80
14
HTTP server
HTTP client
index.html
80
HTTP Request
15
GET /index.html HTTP/1.1Host www.example.com
16
GET /index.html HTTP/1.1Host www.example.com
17
HTTP methods
GETPOSTPUTDELETEHEADTRACEOPTIONSCONNECT
18
HTTP methods
GETPOSTPUTDELETEHEADTRACEOPTIONSCONNECT
19
GET /index.html HTTP/1.1Host www.example.com
20
GET /index.html HTTP/1.1Host www.example.comAcc
ept-Language en
21
HTTP server
HTTP client
index.html
80
HTTP Response
22
HTTP/1.1 200 OKDate Mon, 23 May 2005 223834
GMTServer Apache/1.3.3.7 (Unix)Last-Modified
Wed, 08 Jan 2003 231155 GMTEtag
"3f80f-1b6-3e1cb03bAccept-Ranges
bytesContent-Length 438Connection
closeContent-Type text/html charsetUTF-8 lthtm
lgtltheadgtlttitlegtHomelt/titlegtltmeta
http-equiv"Content-Type" content"text/html
charsetutf-8"/gtlt/headgtltbodygtltpgtWelcome to
example.comlt/pgtlt/bodygtlt/htmlgt
23
HTTP/1.1 200 OKDate Mon, 23 May 2005 223834
GMTServer Apache/1.3.3.7 (Unix)Last-Modified
Wed, 08 Jan 2003 231155 GMTEtag
"3f80f-1b6-3e1cb03bAccept-Ranges
bytesContent-Length 438Connection
closeContent-Type text/html charsetUTF-8 lthtm
lgtltheadgtlttitlegtHomelt/titlegtltmeta
http-equiv"Content-Type" content"text/html
charsetutf-8"/gtlt/headgtltbodygtltpgtWelcome to
example.comlt/pgtlt/bodygtlt/htmlgt
24
HTTP status codes(the somewhat interesting ones,
anyway)
200 OK301 Moved Permanently303 See Other401
Unauthorized403 Forbidden404 Not Found500
Internal Server Error
25
HTTP/1.1 200 OKDate Mon, 23 May 2005 223834
GMTServer Apache/1.3.3.7 (Unix)Last-Modified
Wed, 08 Jan 2003 231155 GMTEtag
"3f80f-1b6-3e1cb03bAccept-Ranges
bytesContent-Length 438Connection
closeContent-Type text/html charsetUTF-8 lthtm
lgtltheadgtlttitlegtHomelt/titlegtltmeta
http-equiv"Content-Type" content"text/html
charsetutf-8"/gtlt/headgtltbodygtltpgtWelcome to
example.comlt/pgtlt/bodygtlt/htmlgt
26
HTML
27
Elements ltpgtlt/pgt ltimg /gt
28
Attributes ltp class"highlight"gt
29
Common attributes classidstyletitlehrefsrc
30
XHTML
31
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN "http//www.w3.org/TR/xhtml1/D
TD/xhtml1-transitional.dtd"gt lthtml
xmlns"http//www.w3.org/1999/xhtml"gt ltheadgt
lttitlegtlt/titlegt ltmeta http-equiv"Content-Typ
e" content"text/html charsetutf-8" /gt
lt/headgt ltbodygt lt/bodygt lt/htmlgt
32
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN "http//www.w3.org/TR/xhtml1/D
TD/xhtml1-transitional.dtd"gt lthtml
xmlns"http//www.w3.org/1999/xhtml"gt ltheadgt
lttitlegtlt/titlegt ltmeta http-equiv"Content-Typ
e" content"text/html charsetutf-8" /gt
lt/headgt ltbodygt lt/bodygt lt/htmlgt
33
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN "http//www.w3.org/TR/xhtml1/D
TD/xhtml1-transitional.dtd"gt lthtml
xmlns"http//www.w3.org/1999/xhtml"gt ltheadgt
lttitlegtlt/titlegt ltmeta http-equiv"Content-Typ
e" content"text/html charsetutf-8" /gt
lt/headgt ltbodygt lt/bodygt lt/htmlgt
34
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN "http//www.w3.org/TR/xhtml1/D
TD/xhtml1-transitional.dtd"gt lthtml
xmlns"http//www.w3.org/1999/xhtml"gt ltheadgt
lttitlegtlt/titlegt ltmeta http-equiv"Content-Typ
e" content"text/html charsetutf-8" /gt
lt/headgt ltbodygt lt/bodygt lt/htmlgt
35
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN "http//www.w3.org/TR/xhtml1/D
TD/xhtml1-transitional.dtd"gt lthtml
xmlns"http//www.w3.org/1999/xhtml"gt ltheadgt
lttitlegtlt/titlegt ltmeta http-equiv"Content-Typ
e" content"text/html charsetutf-8" /gt
ltlink rel"stylesheet" href"/style.css"
type"text/css" /gt ltscript src/javascript.js
" type"text/javascript"gt lt/scriptgt
lt/headgt ltbodygt lt/bodygt lt/htmlgt
36
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN "http//www.w3.org/TR/xhtml1/D
TD/xhtml1-transitional.dtd"gt lthtml
xmlns"http//www.w3.org/1999/xhtml"gt ltheadgt
lttitlegtlt/titlegt ltmeta http-equiv"Content-Typ
e" content"text/html charsetutf-8" /gt
lt/headgt ltbodygt lt/bodygt lt/htmlgt
37
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN "http//www.w3.org/TR/xhtml1/D
TD/xhtml1-transitional.dtd"gt lthtml
xmlns"http//www.w3.org/1999/xhtml"gt ltheadgt
lttitlegtlt/titlegt ltmeta http-equiv"Content-Typ
e" content"text/html charsetutf-8" /gt
lt/headgt ltbodygt lt/bodygt lt/htmlgt
38
lt!DOCTYPE html ...gtlthtml xmlns"http//www.w3.org
/1999/xhtml"gtlthtmlgt ltheadgt
39
ltheadgtltbodygtlttitlegtlt/titlegtltbody
bgcolor"..."gt
40
Markup
41
Structure
42
NOT presentation
43
ltpgt ltfont color"red"gt...lt/fontgtlt/pgt
44
ltp class"error"gt...lt/pgt
.error color red
45
NOT layout
46
lttablegt lttrgt lttdgt ltimg
src"photo.png" alt"Photo"/gt lt/tdgt lttdgt
This is a photo of... lt/tdgt
lt/trgt lt/tablegt
47
ltdiv class"photo"gt ltimg src"photo.png"
alt"Photo"/gt This is a photo of...lt/divgt
.photo clear left .photo img float
left
48
lttablegt lttheadgt lttrgt ltthgtDatelt/thgt
ltthgtWidget countlt/thgt lt/trgt lt/theadgt
lttbodygt lttrgt lttdgtFebruary 7lt/tdgt
lttdgt1,000lt/tdgt lt/trgt lt/tbodygtlt/tablegt
49
Semantics
50
Whats lth1gt do?
51
Whats lth1gt for?
52
ltp class"error"gt...lt/pgt
.error color red voice-volume loud
53
Web Standardsin the real world Microformats
54
lth1gtRandy Souzalt/h1gt ltpgtCCTSlt/pgt ltulgt ltligtWork
410 837-6742lt/ligt ltligtMobile 443
745-8598lt/ligt lt/ulgt ltpgt 1420 North Charles
Streetltbr/gt AC 129ltbr/gt Baltimore, MD
21201 lt/pgt
55
ltdiv class"vcard"gt lth1 class"fn"gtRandy
Souzalt/h1gt ltp class"org"gtCCTSlt/pgt ltulgt
ltli class"tel"gt ltspan class"type"gtWorklt/sp
angt 410 837-6742 lt/ligt ltli
class"tel"gt ltspan class"type"gtMobilelt/span
gt 443 745-8598 lt/ligt lt/ulgt
... lt/divgt
56
ltdiv class"vcard"gt ... ltp class"addr"gt
ltspan class"street-address"gt 1420 North
Charles Streetltbr/gt AC 129 lt/spangt
ltspan class"region"gt Baltimore, MD
lt/spangt ltspan class"postal-code"gt21201lt/spangt
lt/pgt lt/divgt
57
lth1gtRandy Souzalt/h1gt ltpgtCCTSlt/pgt ltulgt ltligtWork
410 837-6742lt/ligt ltligtMobile 443
745-8598lt/ligt lt/ulgt ltpgt 1420 North Charles
Streetltbr/gt AC 129ltbr/gt Baltimore, MD
21201 lt/pgt
ltdiv class"vcard"gt lth1 class"fn"gtRandy
Souzalt/h1gt ltp class"org"gtCCTSlt/pgt ltulgt
ltli class"tel"gt ltspan class"type"gtWorklt/sp
angt 410 837-6742 lt/ligt ltli
class"tel"gt ltspan class"type"gtMobilelt/span
gt 443 745-8598 lt/ligt lt/ulgt ltp
class"addr"gt ltspan class"street-address"gt
1420 North Charles Streetltbr/gt AC 129
lt/spangt ltspan class"region"gt
Baltimore, MD lt/spangt ltspan
class"postal-code"gt21201lt/spangt lt/pgt lt/divgt
58
(No Transcript)
59
(No Transcript)
60
(No Transcript)