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. 2. 4. 5.
6.12. My Schools 13.
14.- 15.
- 16. 17. Harvard University 18. 19.
20. 22. 23. - 24. 25. University of Kansas 26. 27.
28. 30. 31.
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. Harvard
Example 1.1 Rendered: Harvard
Start Tag Harvard
Element Name Harvard
Attribute
Attribute Value Harvard
Content Harvard A "tree" structure view of XHTML produced by Amaya, the open source Web editor/browser from the W3C. End Tag Harvard
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.
Primary purpose: structure and content 1. 2. Cascading Style Sheets (CSS) 4. 5.
Primary purpose: style, presentation, appearance 6.14. My Schools 15.
16.- 17.
- 18. 19. Harvard University 20. 21.
22. 24. 25. - 26. 27. University of Kansas 28. 29.
30. 32. 33.
And here is the stylesheet (simple-style.css):
17 of 39 2/7/2007 4:26 PM 18 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
1. body { 2. margin-left: 10%; Well-formed (X)HTML and Valid (X)HTML 3. margin-top: 1em; 4. margin-right: 10%; 5. background: #ff9; well-formed 6. } valid 7. h1 { 8. font-family: Arial, sans-serif; 9. color: #600; 10. border-bottom: thin dotted black; Well-formed 11. } 12. li { 13. margin-top: 1em; Required for well-formed XML 14. font-size: 1.25em; 15. } 16. ul { elements must be properly nested 17. list-style-type: none; elements must have a start and end tag 18. } element names case-sensitive 19. a { 20. text-decoration: none; attribute values must be enclosed in quote marks 21. } attributes may not be repeated 22. a:link, a:visited { 23. color: blue; 24. } Good practices for HTML 25. a:hover { 26. color: white; 27. text-decoration: underline; Choose lower case conventions for element names and attributes. 28. background: blue; Use double quotes for all attribute values. 29. } Close tags even if they are optional in HTML. 30. img { 31. border: thin solid black; Use new lines and indentation (spaces or tabs) for readability. 32. }
Valid
Well-formed + Conforms to DTD = Valid
19 of 39 2/7/2007 4:26 PM 20 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
HyperText Markup Language SGML, XML, HTML, and XHTML
W3C HyperText Markup Language Home Page Defining Markup Languages
Specifications from the W3C Standard Generalized Markup Language (SGML) Extensible Markup Language (XML)
Specific Markup Languages
Hypertext Markup Language (HTML) Extensible Hypertext Markup Language (XHTML)
Relationships
SGML XML is a simplified subset of SGML HTML is an application of SGML XHTML 2.0 Working Draft XHTML is an application of XML July 2006 XHTML 1.1, Module-based XHTML May 2001 XHTML 1.0, a reformulation of HTML 4.01 into XML 1.0 January 2000 HTML 4.01 December 1999 HTML 4.0 December 1997 HTML 3.2 January 1997 HTML 2.0 November 1995
21 of 39 2/7/2007 4:26 PM 22 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
Document Type Declaration and Document Type Definition Common Document Type Declarations and DTDs (DTD) Some Document Type Declarations for HTML documents. Remember that the HTML document must conform to the rules of the The Document Type Declaration for an XHTML 1.0 strict document is: Document Type Definition that is referenced in the Document Type Declaration: XHTML 1.0 Transitional html PUBLIC XHTML 1.0 Strict An indication that the DTD is a public standard. Private standards would use "SYSTEM". The formal public identifier (FPI) for the DTD (Document Type Declaration). This identifier HTML 4.01 Strict can be used to locate the parser to a local copy of the DTD. The owner of the DTD (in this case the W3C, the World Wide Web Consortium). HTML 4.01 Transitional. DTD DTD). HTML 4.01 Frameset XHTML 1.0 Strict EN HTML 4.0 Transitional The language identifier (in this case, "EN" = English). Note that the language code is "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" HTML 4.0 Strict The URI at which the parser can locate the referenced Document Type Declaration. If the HTML 4.0 Frameset HTML 3.2 HTML 2.0
23 of 39 2/7/2007 4:26 PM 24 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
Specifications and Implementations XHTML: a closer look
XHTML 1.0 Transitional documentation 77 Elements 90 Attributes XHTML 1.0 Strict documentation 89 Elements 120 Attributes
25 of 39 2/7/2007 4:26 PM 26 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 1.0 Strict Elements Pragmatic Steps: Software Tools
XHTML 1.0 Strict documentation produced from DTD HTTP Client (Web Browser) SSH or Client Modules SFTP Client Text/HTML Editor or Authoring Package Structures Graphics Program body, head, html, title Validators and Checkers Text abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var Heading h1, h2, h3, h4, h5, h6 Block address, blockquote, div, p, pre Inline abbr, acronym, br, cite, code, dfn, em, kbd, q, samp, span, strong, var Hypertext a List dl, dt, dd, ol, ul, li Text Extension b, big, hr, i, small, sub, sup, tt Edit del, ins Bi-direction Text bdo Form form, fieldset, input, label, select, option, textarea, button, legent, optgroup Form form, fieldset Formctrl input, label, select, textarea, button Table table, td, th, tr, caption, col, colgrop, tbody, thead, tfoot Image img Server-side Image Map Object object, param Metainformation meta Scripting script, noscript Style Sheet style Link link Base base
27 of 39 2/7/2007 4:26 PM 28 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
HTTP Clients SSH Clients and SFTP Clients
Mozilla Firefox SecureCRT and Secure FX, Van Dyke Technologies, http://www.vandyke.com/products/ Web Developer Extension for Firefox PuTTY, http://www.chiark.greenend.org.uk/~sgtatham/putty/ Microsoft Internet Explorer OpenSSH, http://www.openssh.org/ Opera SSH Secure Shell, http://www.ssh.com/ Safari (Mac) Amaya
29 of 39 2/7/2007 4:26 PM 30 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
Text or HTML Editor (X)HTML Well-formedness and Validation Resources
Windows W3C HTML Validation Service http://validator.w3.org/ Dreamweaver HTML Tidy Adobe GoLive http://www.w3.org/People/Raggett/tidy/ Notepad++, Editpad or Wordpad or Notepad minerva% tidy -help
Mac / Apple
BBEdit BareBones Software http://www.barebones.com/ Dreamweaver Adobe GoLive SimpleText
Linux / UNIX
Emacs http://www.gnu.org/software/emacs/emacs.html (UNIX, Windows, Macintosh)
31 of 39 2/7/2007 4:26 PM 32 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
HTML Tidy Your Minerva Account
http://www.w3.org/People/Raggett/tidy/ 1. Hostname: minerva.dce.harvard.edu 2. ssh minerva.dce.harvard.edu 3. Username: first letter of first name concatonated with up to the first 7 letters (only count minerva% tidy -h "word" characters) of your last name, all lower-case tidy [option...] [file...] 4. Password: up to the first 8 characters of your last name, all lower-case Utility to clean up and pretty print HTML/XHTML/XML 5. Having trouble logging in? look up your username with your Harvard ID see http://www.w3.org/People/Raggett/tidy/
Options for HTML Tidy for Linux/x86 released on 1st September 2002: minerva% passwd
Processing directives ------indent or -i to indent element content -omit or -o to omit optional end tags -wrap
Character encodings ------raw to output values above 127 without conversion to entities -ascii to use US-ASCII for output, ISO-8859-1 for input -latin1 to use ISO-8859-1 for both input and output -iso2022 to use ISO-2022 for both input and output -utf8 to use UTF-8 for both input and output -mac to use MacRoman for input, US-ASCII for output -win1252 to use Windows-1252 for input, US-ASCII for output
File manipulation ------config
Miscellaneous ------version or -v to show the version of Tidy -help, -h or -? to list the command line options -help-config to list all configuration options -show-config to list the current configuration settings
You can also use --blah for any configuration option blah
Input/Output default to stdin/stdout respectively Single letter options apart from -f may be combined as in: tidy -f errs.txt -imu foo.html For further info on HTML see http://www.w3.org/MarkUp
33 of 39 2/7/2007 4:26 PM 34 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
URI to Filename Mapping Absolute and Relative Locations
User directories Absolute
Web documents for each user are kept in the user's home directory, in a directory traditionally Absolute, or fully-qualified, URIs specify the complete information. named public_html. As an example, for the user jharvard whose home directory is /home/courses/j/h/jharvard Example 1.2 URI http://minerva.dce.harvard.edu /~jharvard /index.html Example 1.2 Source: File /home/courses/j/h/jharvard/public_html /index.html 1. 1. White House 2. Example 1.3 Rendered: White House Relative Relative, or partial, URIs specify partial information. The information not given is assumed from the current location. Example 1.4 Example 1.4 Source: 1.
Example 1.4 Rendered:
Slide 1 Slide 2 Slide 3 ...
35 of 39 2/7/2007 4:26 PM 36 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
Location Shortcuts: ../ and ./ Directory Requests and index.html
./ Directory without index.html. Note that this assumes the directory permissions are set correctly. If ../ not, you may see Forbidden.
Example 1.5 Example 1.6 Example 1.5 Source: Example 1.6 Source:
1. Up a level 1. Images 2. 2. from the CSCIE12 Web Site 3. Example 1.5 Rendered: Example 1.6 Rendered: Up a level Images from the CSCIE12 Web Site
Directory withindex.html:
Example 1.7 Example 1.7 Source:
1. Harvard 2. Academics (index.html)
Example 1.7 Rendered: Harvard Academics (index.html)
37 of 39 2/7/2007 4:26 PM 38 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
Download/Viewing Source of a Web Page from another site.
Browser: "View Source" or "Save" Minerva Account: fas% lwp-download http://cscie12.dce.harvard.edu/syllabus.html Minerva Account: fas% lwp-download http://cscie12.dce.harvard.edu/syllabus.html syllabus.html
Table of Contents | All Slides | Link List | Examples | CSCI E-12
39 of 39 2/7/2007 4:26 PM