Transcript PowerPoint

CIS 228
The Internet
1/15/11
HTML 4.01
URL's
Uniform Resource Locator
protocol://domain:port/path#fragment
Protocol – a scheme for exchanging information
http (hypertext transfer protocol), ftp, etc.
Domain – identifies a server
Port – optional number for the protocol to use
Path – specifies a file on the server
Fragment – specifies a location within the file
Domain Names
Top level: com, org, net, edu, mil, …
Second level: google.com, cuny.edu, …
You can acquire these
Provided by Domain Name Registrars ($10/year)
Go Daddy, eNom, Tucows, Melbourne IT, Key-Systems
Deeper level: www.abc.com, lehman.cuny.edu
Administered by the second level name owner
Typically, the first name identifies a machine
media.lehman.cuny.edu
The Image Element
An inline element that identifies an image to display
Tag: <img> (an empty element, no closing tag)
src attribute, where to find the image
Relative path to a local file, or
Uniform Resource Locator
alt attribute, text to display when src can't be found
width attribute, coveys size information to the browser
height attribute, also resizes the image
Use width (and height) to inform the browser
Not to resize an image
Common Image Formats
jpg
Variable, lossy data compression
Good for photos (lots of colors)
gif (depricated ??)
Good for logos (small number or colors)
Transparency
png
Newer format with transparency (replacing gif ?)
psd
Proprietary, Adobe Photoshop format
Image Processing Software
Adobe Photoshop – the gold standard
GIMP – open source Photoshop replacement
Image Converter – change image file format
Pixlr – web based image processor
Splashup – web based image processor
History of the Browser
WorldWideWeb 1991 (Tim Berners-Lee, Cern)
Mosaic 1993 (Marc Andreessen, NCSA)
Netscape Navigator 1994 (Marc Andreessen)
Opera 1994, 1996 (Norway)
Internet Explorer 1995 (Microsoft)
Safari 2003 (Apple)
Firefox 2004 (Mozilla Foundation, open source)
Chrome 2008 (Goggle)
Browser Wars
1996 – 2001 Internet Explorer crushes Netscape
Netscape business model
Navigator free for non-commercial use
Sales to businesses fund research & development
Differentiate to hold market share
Internet Explorer business model
IE free to everybody
Bundled with Window
Windows monopoly profits fund R&D
Differentiate to gain market share
Browser Wars (continued)
In October 1997, Internet Explorer 4.0 was
released. The release party in San Francisco
featured a ten-foot-tall letter "e" logo. Netscape
employees showing up to work the following
morning found the giant logo on their front lawn,
with a sign attached that read "From the IE
team ... We Love You". The Netscape
employees promptly knocked it over and set a
giant figure of their Mozilla dinosaur mascot
atop it, holding a sign reading "Netscape 72,
Microsoft 18" representing the market
distribution.[8] - Wikipedia
Browser Wars (continued)
Rapid (and buggy) development / release cycles
Proprietary HTML tags:
<blink>, <marquee>
Blurring the line between “document” and “program”
Security problems
Some web developers took sides
“best viewed in Netscape / Internet Explorer” logos
Linked to the download page for the indicated browser
Neither browser was interested in standards
But the need became obvious to web developers
Browser Wars (continued)
When Microsoft won
It stopped innovating
Internet Explorer was the (de facto) standard
When Netscape lost
It created the non-profit Mozilla Foundation
It made the code for Navigator open-source
W3C continued to recommend standards
Separate structure (HTML 4.01) and presentation (CSS)
Upstarts (Firefox, Safari, Opera, Crome, etc)
Competed on their support for the W3C standards
Eventually, Internet Explorer followed
“Quirks” Mode
Today, all browsers support standards
Compliant pages are displayed similarly
There are multiple standards
HTML 4, HTML 4.01, XHTML 1.0, XHTML 1.1, …
Browsers need to know which standard a page adheres to
Browsers still need to support old web pages
Each browser does this differently (and slowly)
To avoid “quirks” mode
DOCTYPE announces the standard your page uses
Make sure your page obeys that standard.
DOCTYPE
On the top line of your html file
Only a handfull to choose from
Spelling (including capitalization) must be identical
HTML 4.01 (transitional)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 (strict)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 (strict)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Compliance Issues
Images need an alt attribute
Specify a character encoding
<meta http-equiv=”Content-Type” content=“text/html; charset=utf-8”>
Don't leave off end (or start) tag
html element required
Containing head and body elements (and nothing else)
title element required in head element
Only block elements nest directly in body or blockquote
Block elements cannot be in p or inline elements
a elements cannot contain other a elements