IT350 Web & Internet Programming Fall 2012
advertisement
IT350 Web & Internet Programming Fall 2012 Asst. Prof. Adina Crăiniceanu http://www.usna.edu/Users/cs/adina/teaching/it350/fall2012/ 2 Outline • Class Survey / Role Call • What is: - the web/internet? - web programming? - this class? • Course Admin – Syllabus – Policy – Tips • XHTML Adapted from 2008 Prentice Hall, Inc. All rights reserved. 1 3 Web vs. Internet • Internet – collections of computers/devices that can communicate – telnet, ftp, SMTP(mail) • Web – software/protocols that has been installed on (most of) these computers – http / https Adapted from 2008 Prentice Hall, Inc. All rights reserved. 4 Client/Server Computing Computation can occur in ____________ location Adapted from 2008 Prentice Hall, Inc. All rights reserved. 2 5 Things we’ll learn and do • • • • • XHTML – basics, tables, forms Cascading Style Sheets JavaScript Dynamic HTML CGI / Perl Adapted from 2008 Prentice Hall, Inc. All rights reserved. 6 Things we’ll hear about • Human Computer Interaction • Accessibility • Web ethics Adapted from 2008 Prentice Hall, Inc. All rights reserved. 3 7 Things we won’t have time for • • • • • • ASP, .NET Java Servlets JavaServer Pages (JSP) jQuery PHP Flash, Photoshop Adapted from 2008 Prentice Hall, Inc. All rights reserved. 8 Admin – Assignments • Assignments will be on the course calendar • First homework – email due tomorrow by 0800 – Read course policy – Read Lab Guidance (on the web) – pick a topic – Email topic to instructor (subject: “IT350 Lab topic”) • First reading – due next Tuesday (quiz) – Skim chapters 1, 2, 4 – Read chapter 4.10- 4.15 • Deadlines – Reading (+ quiz) – often Tuesdays, but see calendar – Lab – usually due Monday 2359 (electronically). Hard copy before lab on Tuesday • Late assignments – see policy – Late quizzes (online) not accepted! Adapted from 2008 Prentice Hall, Inc. All rights reserved. 4 Admin - Policy • Workload: – – – – – Readings Quizzes Labs: start in class, usually finish outside class Project Exams • Collaboration • Honor • Class/lab behavior Adapted from 2008 Prentice Hall, Inc. All rights reserved. 10 Success in IT350 • Do the reading (don’t forget online quizzes!) • Lecture – stay engaged – Brief lecture to highlight key points – Ask & answer questions – Take notes – provided slides are not enough! – Exams closed-book – but open-note! • Make the most of in-class lab time – Read lab in advance – Think before you start typing – Don’t stay stuck! • Don’t fall behind – Finish lab early and leave time for reading – See me for help and/or talk to friends – Course material builds on itself and gets more complex Adapted from 2008 Prentice Hall, Inc. All rights reserved. 5 Chapter 4 - Introduction to XHTML: Part 1 Adapted from 2008 Prentice Hall, Inc. All rights reserved. 4.1 Introduction / 4.2 Editing XHTML • Extensible HyperText Markup Language (XHTML) – A markup language based on HTML – Separates document presentation from information – Standard defined by W3C • XHTML documents – Source-code form – Text editor (e.g. Notepad, Wordpad, emacs, etc.) – .html or .htm file-name extension – Web server – stores XHTML documents – Web browser – requests XHTML documents Adapted from 2008 Prentice Hall, Inc. All rights reserved. 6 Basic Syntax <a href=“links.html”> Useful links </a> <br /> Adapted from 2008 Prentice Hall, Inc. All rights reserved. Example 1 <?xml version = "1.0" encoding = "utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> main.html (1 of 1) 4 5 <!-- Fig. 4.1: main.html --> 6 <!-- First XHTML example. --> 7 <html xmlns = "http://www.w3.org/1999/xhtml"> 8 9 10 <head> <title>Welcome</title> </head> 11 12 13 14 <body> <p>Welcome to XHTML!</p> </body> 15 </html> 7 4.4 W3C XHTML Validation Service • Validation service ( validator.w3.org ) – Checking a document’s syntax – Provide URL or upload file • Local validation service http://intranet.cs.usna.edu/w3c-validator/ Adapted from 2008 Prentice Hall, Inc. All rights reserved. Block vs. inline tags in XHTML • Block tags – Start their content on a new line • Inline tags – Their content continues on the same line • Restrictions – Inline tags (and text) must be nested inside block tags, not directly under <body> or <form> – Block tags cannot be nested inside inline tags ILLEGAL: <b> <h1> Foo </h1> </b> Adapted from 2008 Prentice Hall, Inc. All rights reserved. 8 4.5 Headers – h1 to h6 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <?xml version = "1.0" encoding = "utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig. 4.2: heading.html --> <!-- Heading elements h1 through h6. --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Headings</title> </head> <body> <h1>Level <h2>Level <h3>Level <h4>Level <h5>Level <h6>Level </body> </html> 1 2 3 4 5 6 Heading</h1> heading</h2> heading</h3> heading</h4> heading</h5> heading</h6> Adapted from 2008 Prentice Hall, Inc. All rights reserved. 4.6 Linking • Hyperlink – References other sources such as XHTML documents and images – Both text and images can act as hyperlinks – Created using the a (anchor) element • Attribute href – Specifies the location of a linked resource • Link to e-mail addresses using mailto: URL Adapted from 2008 Prentice Hall, Inc. All rights reserved. 9 1 <?xml version = "1.0" encoding = "utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 4.3: links.html --> 6 <!-- Linking to other web pages. --> 7 <html xmlns = "http://www.w3.org/1999/xhtml"> 8 9 10 <head> <title>Links</title> </head> 11 12 <body> 13 <h1>Here are my favorite sites</h1> 14 <p><strong>Click a name to go to that page.</strong></p> 15 16 <!-- Create four text hyperlinks --> 17 <p><a href = "http://www.deitel.com">Deitel</a></p> 18 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p> 19 20 21 <p><a href = "http://www.yahoo.com">Yahoo!</a></p> <p><a href = "http://www.usatoday.com">USA Today</a></p> </body> 22 </html> Relative vs. Absolute Links • Absolute links <a href=“http://www.cs.usna.edu/textbooks.htm”>Textbooks</a> <a href=“http://www.nytimes.com”> NYT </a> • Relative links <a href=“textbooks.htm”>Textbooks</a> <a href=“../textbooks.htm”>Textbooks</a> <a href=“../common/dogs.html”>More on dogs</a> Adapted from 2008 Prentice Hall, Inc. All rights reserved. 10 4.7 Images picture.html (1 of 1) 1 <?xml version = "1.0" encoding = "utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 4.5: picture.html --> 6 <!-- Images in XHTML files. --> 7 <html xmlns = "http://www.w3.org/1999/xhtml"> 8 9 10 <head> <title>Images</title> </head> 11 12 <body> 13 <p> <img src = "cpphtp6.jpg" width = "92" height = "120" 14 alt = "C++ How to Program book cover" /> 15 <img src = "jhtp.jpg" width = "92" height = "120" 16 alt = "Java How to Program book cover" /> 17 18 </p> 19 </body> 20 </html> 4.9 Lists • Unordered list element ul – Creates a list in which each item begins with a bullet symbol (called a disc) – li (list item) • Entry in an unordered list • Ordered list element ol – Creates a list in which each item begins with a number • Lists may be nested to represent hierarchical data relationships Adapted from 2008 Prentice Hall, Inc. All rights reserved. 11 1 <?xml version = "1.0" encoding = "utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 4.8: links2.html --> 6 <!-- Unordered list containing hyperlinks. --> 7 <html xmlns = "http://www.w3.org/1999/xhtml"> 8 9 10 links2.html (1 of 1) <head> <title>Links</title> </head> 11 12 <body> 13 <h1>Here are my favorite sites</h1> 14 <p><strong>Click on a name to go to that page.</strong></p> 15 16 <!-- create an unordered list --> 17 <ul> 18 <!-- add four list items --> 19 <li><a href = "http://www.deitel.com">Deitel</a></li> 20 <li><a href = "http://www.w3.org">W3C</a></li> 21 <li><a href = "http://www.yahoo.com">Yahoo!</a></li> <li><a href = "http://www.cnn.com">CNN</a></li> 22 </ul> 23 24 </body> 25 </html> Web Resources • • • • • • Google www.w3.org/TR/xhtml11 www.xhtml.org www.w3schools.com/xhtml/default.asp validator.w3.org wdvl.com/Authoring/Languages/XML/XHTML Adapted from 2008 Prentice Hall, Inc. All rights reserved. 12 Lab Accounts • Student Web Server Accounts – Mapping web-server account: • • • • • File Explorer: Tools Map Network Drive (pick drive W) \\intranet.cs.usna.edu\mXXXXXX Check the “Reconnect at login” box. Click on “Finish” Username: USNA\mXXXXXX – Set up the web server: • Ssh into intranet.cs.usna.edu • Create public_html directory (mkdir public_html) • Change permissions for directory to allow web access (chmod a+rx public_html) – URL for each student website on the department web server: http://intranet.cs.usna.edu/~mXXXXXX Adapted from 2008 Prentice Hall, Inc. All rights reserved. 13
