how the web works june 2010
DESCRIPTION
Introductory concepts to what is the web and the basics of HTML document creation.TRANSCRIPT
![Page 1: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/1.jpg)
How the Web WorksHow the Web Works
![Page 2: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/2.jpg)
Internet vs Web
![Page 3: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/3.jpg)
Internet vs Web
There is no “center” or main-server of the Internet; it is a highly decentralized network designed for sharing information.
Email, VoIP, and the World Wide Web are parts of the Internet.
![Page 4: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/4.jpg)
Server
A server computer is a computer dedicated to running a server application.
Apache (open source) & Microsoft Internet Information Services (IIS)
![Page 5: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/5.jpg)
Client
A user's software program that interacts with a "server"
![Page 6: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/6.jpg)
Protocol
Protocol:a convention or standard that controls or enables the connection, communication, and data transfer between computing endpoints. In its simplest form, a protocol can be defined as the rules governing the syntax, semantics, and synchronization of communication.
Common ProtocolsIP - Internet Protocol
UDP - User Datagram Protocol
TCP - Transmission Control Protocol
DHCP - Dynamic Host Configuration Protocol
HTTP - Hypertext Transfer Protocol
FTP - File Transfer Protocol
Telnet - Telnet Remote Protocol
SSH - Secure Shell Remote Protocol
POP3 - Post Office Protocol 3
SMTP - Simple Mail Transfer Protocol
IMAP - Internet Message Access Protocol
![Page 7: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/7.jpg)
Web Page Address (URL)
Uniform Resource Locator (URL)
http://www.youtube.com/watch?v=aOhb7uc8IGU
![Page 8: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/8.jpg)
http Protocol used in the communication between the browser and the web server.
: Colon simply separates the protocol from the other part of the web address.
// Indicates a request to a server
www.youtube.com Name of the web server
/ Indicates the root folder of the folder system hosted by the web server www.youtube.com
watch?v=a0hb7uc8IGU Name of file to be served
Web Page Address (URL)http://www.youtube.com/watch?v=aOhb7uc8IGU
![Page 9: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/9.jpg)
HTML Document
Usually comprised of 2 or more parts
1. text document with code
2. separate graphic file(s)
ex. http://www.learningwebdesign.com/materials/chapter02/kitchen.html
![Page 10: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/10.jpg)
Diversity & Accessibility
Use clean HTML - marked with appropriate and meaningful HTML, content in logical order
Provide alternatives - alternative text, transcripts for audio, captions for video
Allow text to resize - font size in em or %
No text in graphics
Use accessibility features in tables & forms
Be careful with colors and backgrounds - plenty of contrast
![Page 11: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/11.jpg)
Coping with the Differences
User Preferences
Different Platforms
Connection Speed
Browser Window Size and Monitor Resolution
Monitor Color
![Page 12: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/12.jpg)
User Preferencesin addition to font and color changes
Ignore style sheets or apply own
images off
Java and Javascript off
turn off pop-up windows
![Page 13: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/13.jpg)
User Preferences
Tools -> Internet Options (IE)
Tools -> Options -> Content (Firefox)
Change fonts and / or color
Need to design for flexibility
![Page 14: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/14.jpg)
Different Platforms
Operating systems have different fonts
Form elements - lists, pull down menus
Plug-in media players - Windows Media Player not supported, Flash and Quicktime are supported
![Page 15: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/15.jpg)
Connection Speed
Not everyone is on broadband
We have a long way to go to catch the number one country, South Korea. The Koreans have 85% high speed penetration while the US is stuck at less than 50%. Of those 50% very few have a connection faster than cable or DSL.
http://www.internetworldstats.com/stats.htm
http://news.cnet.com/8301-1035_3-10454133-94.html
![Page 16: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/16.jpg)
Browser Window Size and Monitor Resolution
Common resolutions / Page Dimensionhttp://en.wikipedia.org/wiki/Display_resolution
![Page 17: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/17.jpg)
Coping with Window Size
Liquid Layout http://www.w3.org
Fixed Layout http://www.csszengarden.com/?cssfile=/211/211.css&page=0
![Page 18: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/18.jpg)
Monitor Color
Gamma - overall brightness of a monitor. Macintosh has a lighter gamma than Windows or Unix
Number of colors - over 80% have 24-bit or 17 million colors. Rest have 16-bit monitors that display 65,000 colors.
http://www.techbomb.com/websafe/
http://en.wikipedia.org/wiki/Computer_monitor
![Page 19: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/19.jpg)
Creating a Simple Page
Creating a Simple Page
![Page 20: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/20.jpg)
Step by Step
Start with Content
Give document structure by adding XHTML elements
Identify the text elements
Add image
Change the look with a style sheet
![Page 21: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/21.jpg)
ContentBlack Goose Bistro
The Restaurant
The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients.
Catering Services
You have fun... we'll do the cooking. Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers.
Location and Hours
Bakers Corner in Seekonk, Massachusetts
Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight
![Page 22: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/22.jpg)
File Naming Conventions
Use correct suffixes (.html, .gif, .png, .jpg)
Never use spaces in file names
Avoid using special characters (?, %, #, /, :, ;, •) Letters, numbers, underscores, hyphens, and periods only
Use lowercase letters only
Keep filenames short as possible
Be consistent with your naming
![Page 23: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/23.jpg)
Document Structure
• <element name> CONTENT </element name>
• <opening tag> CONTENT </closing tag>
![Page 24: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/24.jpg)
Document Structure<html>
</html>
<head>
</head><title> Title Here </title>
<body>
</body>Web Page Content Here
![Page 25: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/25.jpg)
Add Basic Doc Structure
<html>
<head>
<title>Black Goose Bistro</title>
</head>
<body>
Black Goose Bistro
The Restaurant
The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients.
Catering Services
You have fun... we'll do the cooking. Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers.
Location and Hours
Bakers Corner in Seekonk, Massachusetts
Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight
</body>
</html>
![Page 26: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/26.jpg)
Add Text ElementsBlock and inline
<html><head><title>Black Goose Bistro</title></head>
<body>
<h1>Black Goose Bistro</h1>
<h2>The Restaurant</h2>
<p>The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients.</p>
<h2>Catering Services</h2>
<p>You have fun... <em> we'll do the cooking </em>. Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers. </p>
<h2>Location and Hours</h2>
<p>Bakers Corner in Seekonk, Massachusetts </p>
<p>Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight </p>
</body></html>
![Page 27: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/27.jpg)
Empty Text Elements
Elements which do not have text content because they provide a simple directive.
<directive space />
<img /> - Load a graphic
<br /> - insert a line feed
<hr />- insert a horizontal rule (line)
Example: <p>100 Church St. <br />Burlington, VT </p>
![Page 28: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/28.jpg)
Adding an Image
<html><head><title>Black Goose Bistro</title></head>
<body>
<h1><img src=”blackgoose.gif” alt=”Black Goose logo” />Black Goose Bistro</h1>
<h2>The Restaurant</h2>
…
![Page 29: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/29.jpg)
Changing the look with Style Sheets
<style type=”text/css”>
body {
background-color: #C2A7F2; font-family: sans-serif;
}
h1 {
color: #2A1959;border-bottom: 2px solid #2A1959;
}
h2 {
color: #474B94;font-size: 1.2 em;
}
h2, p {
margin-left: 120px;
}
</style>
Added before the </head> tag.This is an example of an embedded style sheet
![Page 30: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/30.jpg)
Questions?
![Page 31: How the web works june 2010](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b87f9f4a7959812a8b4634/html5/thumbnails/31.jpg)
Assignment
work through chapter 4 in book
1-paper on how to register a domain name