INFORMATION TECHNOLOGY IN

pogonotomygobbleAI and Robotics

Nov 15, 2013 (3 years and 8 months ago)

62 views

INFORMATION
TECHNOLOGY IN
BUSINESS AND
SOCIETY

SESSION 7


THE WEB

SEAN J.
TAYLOR

ADMINISTRATIVIA


Assignment 1
d
ue 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
semantic
s.


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)