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
Download