300 likes | 403 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:
E N D
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 • Understand how the web works at a high level. • HTTP • URLs • HTML • Be ableto create your own web page.
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!
HTTP In action Request Response metadata
HTTP Methods • GET – retrieve a resource • POST – create a new resource • PUT – update an existing resource • DELETE – delete a resource • Always include a URL!
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
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> • <imgsrc=“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>
Programmability with JS • De-facto programming language for the web. • Tons of resources for learning. • Makes a webpage dynamic.
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)