INFORMATION TECHNOLOGY IN BUSINESS AND SOCIETY SESSION 7 – THE WEB SEAN J. TAYLOR
Feb 25, 2016
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 TIPSUse 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 resourceAlways 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)