Download presentation
Presentation is loading. Please wait.
1
B118 Web Programming Session #3 Introduction to XHTML February 16, 2004
2
Tonight’s Agenda XHTML introduction W3C XHTML Validation Service demo Lists Tables Using images for links Quiz - next week on chapter 4 !!! –Chapter 5 after that… –Chapters 3 & 6 after that…
3
Upcoming Assignments XHTML Resume (2/23/04) Project team roster (2/23/04)
4
Term Project Project teams –Positions available / Positions wanted? 2/23 term project deliverables: –Team roster and staffing responsibilities Project manager Software development Content creation Quality assurance (QA) and testing –Group name –One sentence tag line –One paragraph company summary
5
Introduction to XHTML
6
Textbook Error The DTD string on pages 31 and 48 are incorrect. Instead of http://www/w3/org/TR it should be http://www.w3.org/TR
7
Displaying Images <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Internet and WWW How to Program -Welcome <img src = "xmlhtp.jpg" height = "238" width = "183" alt = "XML How to Program book cover" /> <img src = "jhtp.jpg" height = "238" width = "183" alt = "Java How to Program book cover" />
8
Lists and Hyperlinks Deitel W3C Yahoo! CNN
9
Linking to an image <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" />
10
Nested Lists New games New applications For business For pleasure
11
Changing the Bullet Character For business For pleasure XML Java XHTML Scripts New languages
12
Linking to an e-mail address My email address is deitel@deitel.com. Click the address and your browser will open an e-mail message and address it to me.
13
Tables – Concept
14
Tables – Code Cell #1 Cell #2 Cell #3 Cell #4
15
Tables – Customizing Appearance 1 2 3 1 2 3 4 5 6
16
Tables – Customizing Appearance 1 2 3 1 2 3 1 3 1 2 3
17
Practice Exercises Exercise 4.6: An image named deitel.gif is 200 pixels wide and 150 pixels high. Use the width and height attributes of the tag to (a) increase the size of the image by 100%; (b) increase the size of the image by 50%; and (c) change the width-to- height ratio to 2:1, keeping the width attained in part (a). Write separate XHTML statements for parts (a), (b) and (c).
18
Practice Exercises Exercise 4.10: create an XHTML document that uses an image as an e-mail link. Use attribute alt to provide a description of the image and link.
19
Practice Exercises Exercise 5.11: create an XHTML document that displays a tic-tac-toe table with player X winning. Use to mark up both Xs and Os. Center the letters in each cell horizontally. Title the game using an tag. This title should span all three columns. Set the table border to one.
Similar presentations
