Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html Table of Contents | All Slides | Link List | Examples | CSCI E-12 CSCI E-12, Fundamentals of Web Site Development Introduction, Internet and Web Basics The Course XHTML and HTML Course Syllabus | Course Schedule I. Content for the Web January 30, 2007 A. Markup (XHTML, HTML) B. Style (CSS) Harvard University C. Building a Site Division of Continuing Education D. Images and Media Extension School II. "Everything" else Course Web Site: http://cscie12.dce.harvard.edu/ A. Javascript and AJAX B. Hypertext Transfer Protocol (HTTP) Copyright 1998-2007 David P. Heitmeyer C. The Apache HTTP Server D. Keeping a site healthy Instructor email: [email protected] E. Dynamic Sites Course staff email: [email protected] The Course Staff David Heitmeyer Teaching Fellows Mike Cynn Rei Diaz Evan Elias Sonal Patel Susan Smith 1 of 39 2/7/2007 4:26 PM 2 of 39 2/7/2007 4:26 PM Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html Texts What the Course "Is" and "Is Not" In addition to the texts, there will be online readings assigned and online references cited. Is Is Not Required texts: Freeman, Elisabeth and Eric Freeman. 2005. Head First HTML with CSS & XHTML. O'Reilly & provides a foundation of many facets of strictly a design class Associates. 658 p. ISBN 0-596-10197-X Web development vocational training in a specific software learn concepts and rules of markup and package styles a programming class prepare for extending knowledge into specific area of interest or need Jennifer Niederst Robbins, 2006. Web Design in a Nutshell. O'Reilly & Associates. 826 p. ISBN 0596009879 Texts are available through: Amazon.com Barnes & Noble bookpool.com Recommended for who are not yet familiar working with Unix or Linux: Ray, Deborah S. and Eric J. Ray. 2006. UNIX: Visual QuickStart Guide, 3rd edition. Peachpit Press. 448 p. ISBN 0321442458 3 of 39 2/7/2007 4:26 PM 4 of 39 2/7/2007 4:26 PM Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html How about you? The Internet Edited a Web page? Published a Web page? Experience with XHTML/HTML ? Maintained existing Web site? Built a new site? Experience with programming? Distance/Local Distance/Hybrid/Not Distance (adapted from The Internet Book, 2nd edition by Douglas E. Comer) 5 of 39 2/7/2007 4:26 PM 6 of 39 2/7/2007 4:26 PM Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html The World Wide Web Rule By Obeying Nature's Laws The irony is that in all its various guises -- commerce, research, and surfing -- the Laws of the Web Web is already so much a part of our lives that familiarity has clouded our perception of the Web itself. The Web site creator is not in control of the User's environment Tim Berners-Lee in Weaving the Web The User is in control of her environment A variety of Platforms A variety of Connection Speeds Features of the World Wide Web A variety of Displays A variety of HTTP Clients (i.e. Web HyperText Information System browsers) Cross-Platform A variety of User Settings Distributed A variety of Devices Dynamic A variety of Users Motto of Kansas State University: Web Browser: provides a single interface to many services and gateways. A variety of Languages Rule By Obeying Nature's Laws Interactive Obeying We cannot command nature except by History Open Standards obeying her. User Control Francis Bacon A Little History of the World Wide Web Open Source How it all started. 7 of 39 2/7/2007 4:26 PM 8 of 39 2/7/2007 4:26 PM Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html Concepts, Technologies, Tools HTTP Clients and HTTP Servers Task Technology Specific Tools client-server computing Creating Resources XHTML and HTML Text editor, Dreamweaver, GoLive, etc. The interaction between two programs when they communicate across a network. A program at (Text) one site sends a request to a program at another site and awaits a response. The requesting Formatting XHTML Cascading Style Sheets (CSS) Text editor program is called a client; the program satisfying the request is called the server. (definition from and HTML The Internet Book, 2nd edition by Douglas E. Comer) Creating Image PNG, JPEG, GIF Photoshop, Fireworks, Paint Shop Pro Resources Locating Resources Uniform Resource Identifier (URI), may also see URL and URN Retrieving HyperText Transfer Protocol HTTP Client (Web Browser). Specific Resources (HTTP) examples are Ineternet Explorer, Firefox, Opera, Safari Client-Server Architecture from Webopedia, http://www.webopedia.com/ Delivering Content HyperText Transfer Protocol HTTP Server (Web Server). Specific (HTTP) examples are Apache HTTP Server, Microsoft IIS Interactive Secure Shell (SSH) SecureCRT, PuTTY Command Line Session Transferring Files SFTP (Secure File Transfer SecureFX, PuTTY Protocol) or FTP over SSH Acronyms, Technical Terms, and Jargon Webopedia is a good online technical glossary and acronym expander. See for example: HTTP HTML SGML XHTML XML W3C 9 of 39 2/7/2007 4:26 PM 10 of 39 2/7/2007 4:26 PM Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html Uniform Resource Identifier (URI) Anatomy of a URI http://cscie12.dce.harvard.edu/lecture_notes/20070130/toc.html http://cscie12.dce.harvard.edu/lecture_notes/20070130/toc.html#slide10 URI, Uniform Resource Identifier Scheme URL, Uniform Resource Locator http://cscie12.dce.harvard.edu/lecture_notes/20070130/toc.html#slide10 URN, Uniform Resource Name Common schemes: http, https, ftp, mailto, file, rtsp For those who truly wish to find out more of the details, see Untangle URIs, URLs, and URNs by Dan Connolly Host http://cscie12.dce.harvard.edu/lecture_notes/20070130/toc.html#slide10 Port http://cscie12.dce.harvard.edu:80/lecture_notes/20070130/toc.html#slide10 Path http://cscie12.dce.harvard.edu /lecture_notes/20070130/toc.html#slide10 Fragment Identifier http://cscie12.dce.harvard.edu/lecture_notes/20070130/toc.html#slide10 11 of 39 2/7/2007 4:26 PM 12 of 39 2/7/2007 4:26 PM Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html XHTML and HTTP XHTML: a simple example Hypertext Markup Language (HTML and XHTML), the lingua franca of the Web. View the example. Hypertext Transfer Protocol (HTTP) 1. <?xml version="1.0"?> 2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition.dtd"> 4. <html> 5. <head> 6. <title> 7. My Schools 8. </title> 9. </head> 10. <body> 11. <h1> 12. My Schools 13. </h1> 14. <ul> 15. <li> 16. <a href="http://www.harvard.edu/"> 17. Harvard University 18. </a> 19. <br/> 20. <img src="images/veritas.gif" alt="Harvard Shield" 21. height="84" width="72"/> 22. </li> 23. <li> 24. <a href="http://www.ku.edu/"> 25. University of Kansas 26. </a> 27. <br/> 28. <img src="images/KUSeal.gif" alt="University of Kansas Seal" 29. height="73" width="72"/> 30. </li> 31. </ul> 32. </body> 33. </html> 13 of 39 2/7/2007 4:26 PM 14 of 39 2/7/2007 4:26 PM Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html (X)HTML Document Structure Components of XHTML Elements Document Type Declaration Start Tag html Element Name head Attribute and Value Pairs body Content End Tag A Tree A Hypertext Link Example 1.1 Example 1.1 Source: 1. <a href="http://www.harvard.edu/" shape="rect" >Harvard</a> Example 1.1 Rendered: Harvard Start Tag <a href="http://www.harvard.edu/">Harvard</a> Element Name <a href="http://www.harvard.edu/">Harvard</a> Attribute <ahref="http://www.harvard.edu/">Harvard</a> Attribute Value <a href="http://www.harvard.edu/">Harvard</a> Content <a href="http://www.harvard.edu/">Harvard</a> A "tree" structure view of XHTML produced by Amaya, the open source Web editor/browser from the W3C. End Tag <a href="http://www.harvard.edu/">Harvard</a> 15 of 39 2/7/2007 4:26 PM 16 of 39 2/7/2007 4:26 PM Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout.html Structure and Style XHTML: a simple example with CSS HyperText Markup Language View the example.