Recall A Host’s IP Address is associated with a domain name Mapping: DomainName  IPAddr This mapping is stored in multi-tiered set of Domain Name Servers My computer IP Address: RR Domain Name Table …  … Global DNS http requests Domain Name Table …  RR …

Multi-tiered

Internet Connections: Cost vs. Bandwidth Connection BandwidthCostKbps/$ Dial-up 0.1 Mbps$ DSL 0.7 Mbps$ Cable 0.8 Mbps$ Cable Pro 1.5 Mbps$ T Mbps$ T Mbps$10, OC Mbps$40,

Internet Connections: Cost vs. Bandwidth Connection BandwidthCostKbps/$ Dial-up 0.1 Mbps$ DSL 0.7 Mbps$ Cable 0.8 Mbps$ Cable Pro 1.5 Mbps$ T Mbps$ T Mbps$10, OC Mbps$40, Home Users Must be competitively priced 1990’s only option besides dialup Long term contracts still holding Economy of scale Siena CS is considering Professional Grade Cable

Agenda HTML Dream Weaver’s HTML Styles vs Cascading Style Sheets

HTML Hypertext Markup Language Marks up a document with tags Each tag specifies the format/appearance of the webpage

HTML Special tags are used to insert Links to other documents – Images – Tables – Other Media Flash MP3 Java Applets Etc.

Tags An element is a fundamental component of the structure of a text document. Examples: – Heads – Tables – Paragraphs – lists. To denote the various components in an HTML document, you use tags.

Tags HTML tags consist of a left angle bracket ( ). Tags are usually paired – start tag – end tag The end tag looks just like the start tag except a slash (/) precedes the text within the brackets.

Tags Some tags may include an attribute, – which is additional information that is included inside the start tag. – Example NOTE: HTML is not case sensitive. is equivalent to or. Not all tags are supported by all browsers. – If a browser does not support a tag, it will simply ignore it. – Any text placed between a pair of unknown tags will still be displayed, however.

Browsers Netscape – Once the best, now #2, polluted with AOL Internet Explorer – Microsoft’s enormous monster Mozilla – the original, still good, no gimmicks Opera – very compact, skins Amaya - W3C's testbed browser, seamlessly integrated with the editing and remote access Lynx – text browser, why?

Browsers Neoplanet - offers diverse interface skins and customizable, sharable, content channels. Apple Safari - KHTML-based web browser from Apple Computer optimized for Mac OS X. Konqueror - Unix-based Web browser, file manager, and universal viewer from KDE. iCab - web browser for Macintosh.

A Simple HTML Example HTML is Easy To Learn Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph! And this is the second paragraph.

A Teaching Tool To see the HTML code of any website – select View Source

Another Teaching Tool Compose what you want And see the resulting HTML

10 Tags you should memorize

This tells the browser that Everything inside this tag is HTML code Some browsers won’t display a page unless you include this tag

Everything inside this tag makes up the body of the actual document Web pages have elements that don’t appear in the body of a document Examples – Meta info (key words, description, etc.) – JavaScript code – Title (appears in the title bar of the browser) – Etc…

Special place for storing info that does not appear in the body a document More examples – Author’s comments – Code for linking style sheets – Information for different browsers – Etc.

Example: Link to my resume – a  stands for anchor – href  stands for hypertext reference Everything inside this tag becomes a hyperlink You can put text inside or other elements – like images.

Example: – img  stands for image – src  stands for source This tag does not use an end tag Inserts an image into the document – Assuming src points to a valid image

Standard Image Formats (supported by web browsers) In the early days 2 types of images emerged gif (Graphics Interchange Format) – CompuServe – outdated, only 256 colors, compact size jpg (Joint Photographic Experts Group) – 16 million colors – compressed encoding – higher quality and sometime more compact than GIF These image formats are still the standard

Other Image Formats (not support by Web Browsers) BMP: The Bitmap file format is used for bitmap graphics on the Windows platform only JIF: JPEG Related Image format PCT: Macintosh PICT format PPM: Portable Pixel Map (UNIX) TIFF: Aldus Corporation format EPS: The Encapsulated PostScript PNG: The Portable Network Graphics format will likely be the successor to the GIF file format

Used to create paragraph creates an indentation (depends upon the browser) Option to align the paragraph

Used to apply a cascading style to an element

Creates a table Has lots of attributes defines a row defines a column in a row

Web Styles vs. CSS CSS (Cascading Style Sheets) Web Styles are not as good as CSS Why? CSS allow you to separate content from style An example shows it all Why is this so important?

Homework Take a look at the HTML Guide Memorize the purpose and format of the 10 tags I showed today – They’ll be on the first exam (Oct. 9 th )