Announcements

1
Announcements

• Due by today
• Chapters 1-4 in Fluency
• For Friday
• Read Chapter 5

2
Announcements

• Clicker registration survey is open again

3
Announcements

• D.A.'s office hours
• 130-220pm on Wednesdays MGH330J
• Marc's drop-in labs
• 1000am-Noon on MW (MGH 430)
• Aakashi's drop-in lab
• 1030-1230 Tuesdays (MGH 430)
• Volodymyr's drop-in lab
• To be announced

4
HOW TO CONNECT TO DANTE ON A MAC
HW2

• Fetch gets it for you!

5
Networking (continued)
6
WWW vs. Internet

• Internet is all the wires, routers, gateways,
  serversall using TCP/IP to transfer packets
• Many different protocols use the Internet
• ftp, smtp, chat, IM, Skype, VoIP, http

7
World Wide Web

• World Wide Web is the collection of servers the
  Web pages they store and serve
• Serverthe Web site computer
• Clientthe surfers browser
• wwwthe traditional Web server name
• Any name is OK
• Often multiple server names map to the same site
  MoMA.org and www.MoMA.org

8
Client/Server Interaction

• For Web pages, the client requests a page, the
  server returns it
• Two separate transmissions

Servers serve many clients clients visit many
servers
9
Quick Click
10
Your UW Storage Space
11
Your Web Files
12
HTTP

• HyperText Transfer Protocol
• Understands how to interpret URLs
• Uniform Resource Locators
• Divides URL into server and pathname

13
HTTP
http//faculty.washington.edu/daclem/fit100/sp09/i
ndex.html
PROTOCOL (Web)
14
HTTP
http//faculty.washington.edu/daclem/fit100/sp09/i
ndex.html
SERVER
PROTOCOL
15
HTTP
http//faculty.washington.edu/daclem/fit100/sp09/i
ndex.html
SERVER
PROTOCOL
PROTOCOL
16
HTTP
http//faculty.washington.edu/daclem/fit100/sp09/i
ndex.html
PROTOCOL
SERVER
1. Domain edu
17
HTTP
http//faculty.washington.edu/daclem/fit100/sp09/i
ndex.html
SERVER
PROTOCOL
1. Domain edu
2. Subdomain washington
18
HTTP
http//faculty.washington.edu/daclem/fit100/sp09/i
ndex.html
SERVER
PROTOCOL
1. Domain edu
2. Subdomain washington
3. Server faculty
19
HTTP
http//faculty.washington.edu/daclem/fit100/sp09/i
ndex.html
SERVER
PROTOCOL
PATHNAME
1. Domain edu
2. Subdomain washington
3. Server faculty
20
HTTP
http//faculty.washington.edu/daclem/fit100/sp09/i
ndex.html
SERVER
PROTOCOL
PATHNAME
1. Domain edu
2. Subdomain washington
3. Server faculty
21
HTTP
http//faculty.washington.edu/daclem/fit100/sp09/i
ndex.html
SERVER
PROTOCOL
PATHNAME
1. Domain edu
4. Account daclem
2. Subdomain washington
3. Server faculty
22
HTTP
http//faculty.washington.edu/daclem/fit100/sp09/i
ndex.html
SERVER
PROTOCOL
PATHNAME
1. Domain edu
4. Account daclem
2. Subdomain washington
5. Folder fit100/sp09
3. Server faculty
23
HTTP
http//faculty.washington.edu/daclem/fit100/sp09/i
ndex.html
SERVER
PROTOCOL
PATHNAME
1. Domain edu
4. Account daclem
2. Subdomain washington
5. Folder fit100/sp09
3. Server faculty
6. File index.html
24
HTTP
Case Sensitive
Not case sensitive
http//faculty.washington.edu/daclem/fit100/sp09/i
ndex.html
SERVER
PROTOCOL
PATHNAME
1. Domain edu
4. Account daclem
2. Subdomain washington
5. Folder fit100/sp09
3. Server faculty
6. File index.html
25
HTML PAGES
26
http

• http HyperText Transfer Protocol
• https secure http
• Starts every link and every Web address
• Sends pages across the Internet to Web servers

27
Hypertext links

• A Web page is a collection of hypertext links, or
  links
• Links allow you to jump to another page clear
  across the Web

28
The Language of Web Pages

• HTML HyperText Markup Language
• The language that Web browsers understand

29
HTML tags

• The content with HTML tagging

• lth1gtMy first Web page!lt/h1gt
• ltpgtA new paragraphlt/pgt

• The Web page displayed in a Web browser

• My first Web page!
• A new paragraph

30
HTML structures the content

• Tags structure the page
• Formerly, they also formatted the content now,
  thats done by CSS

31
Basic HTML page structure

• All HTML files use the same structure

lthtmlgt ltheadgt lttitlegt lt/titlegt
lt/headgt ltbodygt lt/bodygt lt/htmlgt
32
Paired tags

• Tags are pairedopening and closing tags

lthtmlgt ltheadgt lttitlegtName of Page Goes
Here lt/titlegt lt/headgt ltbodygt
lt/bodygt lt/htmlgt
33
Nested tags

• Other tags "nest" inside the lthtmlgt tags

lthtmlgt ltheadgt lttitlegtName of Page Goes
Here lt/titlegt lt/headgt ltbodygt
lt/bodygt lt/htmlgt
34
Basic HTML Structure

• An HTML file is divided into head and body
  sections.

lthtmlgt ltheadgt lttitlegtName of Page Goes
Here lt/titlegt lt/headgt ltbodygt
lt/bodygt lt/htmlgt
35
Basic HTML Structure

• The ltheadgt contains metadata.

lthtmlgt ltheadgt lttitlegtName of Page Goes
Here lt/titlegt Other header content goes
here lt/headgt ltbodygt lt/bodygt lt/htmlgt
Metadata
36
The Header section

• The head contains metadata.

lthtmlgt ltheadgt lttitlegtName of Page Goes
Here lt/titlegt Other metadata goes here
lt/headgt ltbodygt lt/bodygt lt/htmlgt
37
The Body section

• The body contains the page contenteverything
  that shows on the Web page.

lthtmlgt ltheadgt lttitlegtName of Page Goes
Here lt/titlegt lt/headgt ltbodygt
Body content goes here lt/bodygt lt/htmlgt
Content
38
Areas that are off limits

• The body contains the page contenteverything
  that shows on the Web page.

lthtmlgt ltheadgt lttitlegtName of Page Goes
Here lt/titlegt lt/headgt No content
here ltbodygt Body content goes here
lt/bodygt lt/htmlgt
39
Areas that are off limits

• The body contains the page contenteverything
  that shows on the Web page.

lthtmlgt ltheadgt lttitlegtName of Page Goes
Here lt/titlegt lt/headgt ltbodygt
Body content goes here lt/bodygt lt/htmlgt No
content here
40
HTML and Validation
41
Nesting Rulesby tag
42
Nesting RulesSpecific Tags
43
Error MessagesTag Order

• Nesting error tag2 must be closed before closing
  tag1

• lttag1gtlttag2gtcontentlt/tag1gtlt/tag2gt

• lttag1gtlttag2gtcontentlt/tag1gtlt/tag2gt
• Simile
• ltFedExgtltbubbleWrapgtPresentlt/bubbleWrapgtlt/FedExgt

44
Error MessagesTag Order

• Nesting error tag2 must be closed before closing
  tag1

• lttag1gtlttag2gtcontentlt/tag1gtlt/tag2gt

• lttag1gtlttag2gtcontentlt/tag1gtlt/tag2gt
• lttag1gt
• lttag2gtcontentlt/tag2gt
• lt/tag1gt

45
Tag Location Rules

• All tags
• Must be nested inside head or body
• Cannot be outside head or body or html
• Cannot be between head and body

46
Error MessagesTag Location

• The tag ltsometaggt is not allowed within html

• lthtmlgt
• ltheadgtlt/headgt
• ltsometaggtNeither tags nor content can go
  herelt/sometaggt
• ltbodygtlt/bodygt
• lt/htmlgtAnd the long page is done.

• lthtmlgt
• ltheadgtMetadata tags must go herelt/headgt
• ltbodygtContent tags must go herelt/bodygt
• lt/htmlgt

47
Error MessagesNo DOCTYPE

• No DOCTYPE found!

• lthtmlgt

• lt?xml version"1.0" encoding"UTF-8"?gt
• lt!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict
  .dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  xmllang"en" lang"en"gt

48
Error MessagesImage Tags

• There is no scr attribute for img
• Missing alt tag
• Missing closing img tag

• ltimg scr"kitten.jpg" gt

• ltimg src"kitten.jpg"
• alt"young spokespurrrrson" /gt