Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Slides
Document related concepts
Transcript
INFORMATION
TECHNOLOGY IN
BUSINESS AND
SOCIETY
SESSION 7 – THE WEB
SEAN J. TAYLOR
ADMINISTRATIVIA
• Assignment 1 due tonight at 1am.
• My office hours: moved to 3:30-5:30pm on
FRIDAY (permanently?)
• Assignment 2 due 2/23
• Blog tips
BLOG TIPS
Use Markdown:
Include “!m” somewhere in the email.
Links are then [Link name](http://linklocation.com)
Use raw links and plain text:
This is my cool link: http://www.google.com
Don’t include dashes before your signature:
Bad: --SJT
Good: SJT
LEARNING OBJECTIVES
1. Understand how the web works at a high level.
1. HTTP
2. URLs
3. HTML
2. Be able to create your own web page.
THE WEB
WEB HISTORY
use hypertext
"... to link and access information of
various kinds as a web of nodes in
which the user can browse at will”
- Berners-Lee and Cailliau
November, 1990
WORLD WIDE WEB
• web of hypertext documents
• viewed by browsers
• using a client–server architecture
• HTTP: communication protocol
• URLs: addressability
• HTML: hypertext!
LAYERS
HTTP IN ACTION
Request
Response
metadata
HTTP IN ACTION: RESPONSE
HTTP METHODS
• GET – retrieve a resource
• POST – create a new resource
• PUT – update an existing resource
• DELETE – delete a resource
Always include a URL!
URLS
UNIFORM RESOURCE
LOCATORS
Format:
scheme://hostname:port/path?query_string#fragment_id
• Scheme: http, https, ftp, gopher, wais
• Domain: Hostname is usually
subdomain.domain.tld
• Port: Each server can have multiple ports
• Path: + query string: define a resource
• Fragment: used for web page navigation
PUTTING HTML FILES ON THE
SERVER
EDITING HTML FILES
BASIC DOCUMENT STRUCTURE
<html>
<head>
<title>My Awesome Webpage</title>
</head>
<body>
<h1>This is the heading!</h1>
<p>It was the best of webpages.</p>
<a href=“http://google.com”>Google</a>
</body>
</html>
MORE TAGS
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<h1>Big header!</h1>
<h2>Smaller header</h2>
<img src=“http://link.to/image.png”></img>
<div>Some content</div>
<span>Some content</span>
ADDING STYLE WITH CSS
<style>
h1 { color: blue; text-align: center; }
P { width: 400px }
</style>
Or put a link in your <head> area.
<link rel=“stylesheet” type=“text/css”
href=“style.css”></link>
EMBEDDING CONTENT
PROGRAMMABILITY WITH JS
• De-facto programming language for the web.
• Tons of resources for learning.
• Makes a webpage dynamic.
RAW TEXT OR WYSIWYG
MARKUP:
DISPLAY OR SEMANTIC
• Some HTML tags are intended to convey semantics.
• This allows machines to understand web pages better
but giving them an idea of what information is placed
where in the document.
“I have a dream for the Web [in which computers] become
capable of analyzing all the data on the Web – the content,
links, and transactions between people and computers. “
-- Tim Berners-Lee
Challenges? Benefits?
“DIVE INTO HTML5”
MARK PILGRIM WEB BOOK
NEXT CLASS:
ATTENTION ECONOMICS
• The Information Diet
(Chapter 3)
