B118 Web Programming Session #3 Introduction to XHTML February 16, 2004
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…
Upcoming Assignments XHTML Resume (2/23/04) Project team roster (2/23/04)
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
Introduction to XHTML
Textbook Error The DTD string on pages 31 and 48 are incorrect. Instead of it should be
Displaying Images <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 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" />
Lists and Hyperlinks Deitel W3C Yahoo! CNN
Linking to an image <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" />
Nested Lists New games New applications For business For pleasure
Changing the Bullet Character For business For pleasure XML Java XHTML Scripts New languages
Linking to an address My address is Click the address and your browser will open an message and address it to me.
Tables – Concept
Tables – Code Cell #1 Cell #2 Cell #3 Cell #4
Tables – Customizing Appearance
Tables – Customizing Appearance
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).
Practice Exercises Exercise 4.10: create an XHTML document that uses an image as an link. Use attribute alt to provide a description of the image and link.
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.