View
215
Download
0
Category
Tags:
Preview:
Citation preview
INFORMATION TECHNOLOGY IN BUSINESS AND SOCIETYSESSION 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. HTTP2. URLs3. 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
Responsemetadata
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)
Recommended