1 / 18

B118 Web Programming

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…. Term Project.

mikasi
Download Presentation

B118 Web Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. 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

  4. Introduction to XHTML

  5. 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

  6. Displaying Images <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Adding images with XHTML --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program -Welcome</title> </head> <body> <p><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" /> </p> </body> </html>

  7. Lists and Hyperlinks <!-- create an unordered list --> <ul> <!-- add four list items --> <li><a href = "http://www.deitel.com">Deitel</a></li> <li><a href = "http://www.w3.org">W3C</a></li> <li><a href = "http://www.yahoo.com">Yahoo!</a></li> <li><a href = "http://www.cnn.com">CNN</a></li> </ul>

  8. Linking to an image <a href = "links.html"> <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /> </a>

  9. Nested Lists <ul> <li>New games</li> <li> New applications <!-- ordered nested list --> <ol> <li>For business</li> <li>For pleasure</li> </ol> </li> </ul>

  10. Changing the Bullet Character <ol type = "I"> <li>For business</li> <li>For pleasure</li> </ol> <!-- another nested ordered list --> <ol type = "a"> <li>XML</li> <li>Java</li> <li>XHTML</li> <li>Scripts</li> <li>New languages</li> </ol>

  11. Linking to an e-mail address <p>My email address is <a href = "mailto:deitel@deitel.com"> deitel@deitel.com </a> . Click the address and your browser will open an e-mail message and address it to me. </p>

  12. Tables – Concept <table> <tr> </tr> </table>

  13. Tables – Code <!-- 2x2 table --> <table> <tr> <td> Cell #1 </td> <td> Cell #2 </td> </tr> <tr> <td> Cell #3 </td> <td> Cell #4 </td> </tr> </table>

  14. Tables – Customizing Appearance <table border=“3"> <tr> <td>1</td> <td colspan=3>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </table>

  15. Tables – Customizing Appearance <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td rowspan="2">2</td> <td>3</td> </tr> <tr> <td>1</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> </table>

  16. 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 <img> 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).

  17. 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.

  18. Practice Exercises Exercise 5.11: create an XHTML document that displays a tic-tac-toe table with player X winning. Use <h2> to mark up both Xs and Os. Center the letters in each cell horizontally. Title the game using an <h1> tag. This title should span all three columns. Set the table border to one.

More Related