Download
recall n.
Skip this Video
Loading SlideShow in 5 Seconds..
Recall PowerPoint Presentation

Recall

131 Vues Download Presentation
Télécharger la présentation

Recall

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. IP Address:204.168.0.207 RR My computer GlobalDNS http requests 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 Domain Name Table … www.breimer.org  RR … Domain Name Table … www.breimer.org  204.168.0.207 …

  2. Multi-tiered

  3. Internet Connections: Cost vs. Bandwidth

  4. Siena CS is consideringProfessional GradeCable Internet Connections: Cost vs. Bandwidth Home UsersMust be competitively priced 1990’s only option besides dialupLong term contractsstill holding Economy of scale

  5. Agenda • HTML • Dream Weaver’s HTML Styles vs • Cascading Style Sheets

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

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

  8. 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.

  9. 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.

  10. 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.

  11. 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?

  12. 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.

  13. <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>

  14. A Teaching Tool • To see the HTML code of any website • select View Source

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

  16. <html> <body> <head> <a href> <img src> <p align> <span class> <table> <tr> <td> 10 Tags you should memorize

  17. <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

  18. <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…

  19. <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.

  20. <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.

  21. <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

  22. 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

  23. 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

  24. <p align> </p> • Used to create paragraph • creates an indentation (depends upon the browser) • Option to align the paragraph

  25. <span class> </span> • Used to apply a cascading style to an element

  26. <table> • Creates a table • Has lots of attributes • <tr> defines a row • <td> defines a column in a row

  27. 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?

  28. 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)