Transcript Document
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 Domain Name Table Name Servers Domain Name Table … IP Address: www.breimer.org RR 204.168.0.207 … … www.breimer.org 204.168.0.207 RR … My computer Global DNS http requests Multi-tiered Internet Connections: Cost vs. Bandwidth Connection Bandwidth Cost Kbps/$ Dial-up 0.1 Mbps $25 4.00 DSL 0.7 Mbps $37 17.50 Cable 0.8 Mbps $45 17.78 Cable Pro 1.5 Mbps $150 10.00 T-1 2.0 Mbps $750 2.67 T-3 30.0 Mbps $10,000 3.00 145.0 Mbps $40,000 3.63 OC-3 Internet Connections: Cost vs. Bandwidth Home Users Must be competitively priced Connection Bandwidth Siena CS is considering Professional Grade Cable Cost Kbps/$ Dial-up 0.1 Mbps $25 4.00 DSL 0.7 Mbps $37 17.50 0.8 Mbps 1990’s only option Cable Pro besides dialup 1.5 Mbps Long term contracts still holding T-1 2.0 Mbps $45 17.78 $150 10.00 $750 2.67 30.0 Mbps $10,000 Economy of scale 3.00 Cable T-3 OC-3 145.0 Mbps $40,000 3.63 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 (<), a tag name, and a right angle bracket (>). Tags are usually paired – – <b> start tag </b> 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 <p align=center> NOTE: HTML is not case sensitive. <title> is equivalent to <TITLE> or <TitLe>. 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. <html> <head> <TITLE> A Simple HTML Example </TITLE> </head> <body> <H1> HTML is Easy To Learn </H1> <P> Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph! </P> <P> And this is the second paragraph. </P> </body> </html> 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 1. 2. 3. 4. 5. <html> <body> <head> <a href> <img src> <p align> 7. <span class> 8. <table> 9. <tr> 10. <td> 6. <html> </html> This tells the browser that Everything inside this tag is HTML code Some browsers won’t display a page unless you include this tag <body> </body> 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… <head> </head> 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. <a href> </a> Example: <a href=“resume.html”>Link to my resume</a> – – 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. <img src> Example: <img src=“picture.jpg”> – – img stands for image src stands for source This tag does not use an end tag </img> 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) – – jpg (Joint Photographic Experts Group) – – – CompuServe outdated, only 256 colors, compact size 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 <p align> </p> Used to create paragraph creates an indentation (depends upon the browser) Option to align the paragraph <span class> </span> Used to apply a cascading style to an element <table> Creates a table Has lots of attributes <tr> defines a row <td> 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. 9th)