Introduction, Internet and Web Basics, XHTML and HTML http://localhost:8080/cocoon/projects/cscie12/slides/20070130/handout. 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 . 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. 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 :

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, , 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. 7. My Schools 8. 9. 10. 11.

12. My Schools 13.

14. 32. 33.

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 Harvard

Attribute Value Harvard

Content Harvard A "tree" structure view of XHTML produced by , 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. 7. My Schools This is really more of a "separation of concerns" -- let each one do what they were designed for. 8. 9. 10. css" type="text/css"/> 11. 12. 13.

14. My Schools 15.

16. 34. 35.

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 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 to wrap text at the specified (default is 68) -upper or -u to force tags to upper case (default is lower case) -clean or -c to replace FONT, NOBR and CENTER tags by CSS -bare or -b to strip out smart quotes and em dashes, etc. -numeric or -n to output numeric rather than named entities -errors or -e to only show errors -quiet or -q to suppress nonessential output -xml to specify the input is well formed XML -asxml to convert HTML to well formed XHTML -asxhtml to convert HTML to well formed XHTML -ashtml to force XHTML to well formed HTML -slides to burst into slides on H2 elements -access to do additional accessibility checks ( = 1, 2, 3)

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 to set configuration options from the specified -f to write errors to the specified -modify or -m to modify the original input files

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