1 / 24

Chapter 25 – Introduction to XHTML Basic: Part II

Chapter 25 – Introduction to XHTML Basic: Part II. Outline 25.1 Introduction 25.2 Simple XHTML Basic Tables 25.3 Unordered Lists 25.4 Nested and Ordered Lists 25.5 Simple XHTML Basic Forms 25.6 More Complex XHTML Basic Forms. 25.1 Introduction.

orde
Download Presentation

Chapter 25 – Introduction to XHTML Basic: Part II

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. Chapter 25 – Introduction to XHTML Basic: Part II Outline 25.1 Introduction 25.2 Simple XHTML Basic Tables 25.3 Unordered Lists 25.4 Nested and Ordered Lists 25.5 Simple XHTML Basic Forms 25.6 More Complex XHTML Basic Forms

  2. 25.1 Introduction • Discuss more substantial XHTML Basic elements and features • Tables • Lists • Information collection

  3. 25.3 Simple XHTML Basic Tables • Tables • Organize data into rows and columns • table element • Defines a table • Basic tables do render the same as XHTML tables in PIXO microbrowser • Use non-breaking space character (nbsp;) to add space to columns

  4. summary attribute describes table’s contents (can be “spoken” with voice synthesizer.) Provides accessibility. caption element describes table’s contents (accessibility) tr elements create table rows td element defines data cells 1 <?xml version ="1.0"?>2 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML Basic 1.0//EN"3 "http://www.w3.org/TR/xhtml-basic/DTD/xhtml-basic10.dtd">4 5 <!-- Fig. 25.1: Fig25_01.html -->6 <!-- Creating a basic table -->7 8 <html xmlns ="http://www.w3.org/1999/xhtml">9 <head>10 <title>A simple XHTML Basic table</title>11 </head>12 13 <body>14 15 <!-- The <table> tag opens a new table and lets -->16 <!-- you put in design options and instructions -->17 <table width = "40%"18 summary ="This table provides information about19 the price of fruit">20 21 <!-- The <caption> tag summarizes the table's contents -->22 <caption><strong>Price of Fruit</strong></caption>23 24 <tr>25 <strong>26 <td>Fruit</td> 27 <td>Price</td>28 </strong> 29 </tr>30 31 <tr>32 <td>Apple</td>33 <td>$0.25</td>34 </tr> Fig25_01.html Creates a data table strong element creates bold text, used in place of th element (not supported by PIXO browser).

  5. Each td element is nested within a tr element. 35 36 <tr>37 <td>Orange</td>38 <td>$0.50</td>39 </tr>40 41 <tr>42 <td>Banana</td>43 <td>$1.00</td>44 </tr>45 46 <tr>47 <td>Pineapple</td>48 <td>$2.00</td>49 </tr>50 </table>51 </body>52 </html> Fig25_01.html Creates a data table

  6. Fig25_01.html (Courtesy of Pixo)

  7. 25.3 Unordered Lists • Lists • Unordered • Lists items with bullets (discs) • Uses ul element • Ordered • Lists items with numbers or letters • Definition • Lists items and their “definitions” beneath them, indented

  8. ul element defines unordered list li elements define list items 1 <?xml version ="1.0"?>2 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML Basic 1.0//EN"3 "http://www.w3.org/TR/xhtml-basic/DTD/xhtml-basic10.dtd">4 5 <!-- Fig. 25.2: Fig25_02.html -->6 <!-- Unordered list containing hyperlinks -->7 8 <html xmlns ="http://www.w3.org/1999/xhtml">9 <head>10 <title>An Unordered List</title>11 </head>12 13 <body>14 <p><strong>Select a Web site.</strong></p>15 16 <!-- The <ul> tag begins the unordered list -->17 <ul>18 19 <!-- use the li element to insert list entries -->20 <li><a href ="http://www.deitel.com">21 Deitel & Associates</a></li>22 23 <li><a href = "http://www.prenhall.com">Prentice Hall24 </a></li>25 </ul>26 </body>27 </html> Fig25_02.html Creating an unordered list. Presents each li item as a string with a bullet at the beginning.

  9. Fig25_02.html Unordered lists (Courtesy of Pixo) (Courtesy of Pixo)

  10. 25.4 Nested and Ordered Lists • Represent hierarchical relationships • Outline • Nested lists • List within another list • Ordered lists • Numbered or lettered items

  11. ol element defines ordered list Type attribute defines numbering convention (in this case, upper-case roman numeral) Nested list 1 <?xml version ="1.0"?>2 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML Basic 1.0//EN"3 "http://www.w3.org/TR/xhtml-basic/DTD/xhtml-basic10.dtd">4 5 <!-- Fig. 25.3: Fig25_03.html -->6 <!-- Advanced Lists: nested and ordered -->7 8 <html xmlns ="http://www.w3.org/1999/xhtml">9 <head>10 <title>An Ordered List</title>11 </head>12 13 <body>14 <h1>Web Site Outline</h1>15 16 <ol>17 <li>Home page</li>18 <li>Links page</li>19 20 <!-- This starts the first nested list -->21 <ol type = "I">22 <li>Links to search engines</li>23 <li>Links to information sites</li>24 25 <!-- Another nested list -->26 <!-- There is no nesting limit -->27 <ol type = "A">28 <li>News sites</li>29 <ol> 30 <li type ="i">TV based</li>31 <ol type ="a">32 <li>CNN</li>33 <li>Headline News</li>34 </ol> Fig25_03.html Creates a nested, ordered list

  12. 35 <li type ="i">Text based</li> 36 <ol type ="a">37 <li>New York Times</li>38 <li>Washington Post</li>39 </ol> 40 </ol> 41 <li>Stock sites</li>42 </ol> <!-- ends a nested list --> 43 </ol> <!-- ends the double nested list -->44 <li>Feedback page</li>45 </ol> <!-- ends the primary ordered list -->46 </body>47 </html> Fig25_03.html (Courtesy of Pixo)

  13. 25.5 Simple XHTML Basic Forms • Form • Collects user information • Information is submitted to an application (in the following example a CGI script.) • Processes information • Must have server-side functionality to process without errors • Visual components • Clickable buttons • GUI components • Non-visual components • Hidden inputs • Store data such as email addresses or file names

  14. 25.5 Simple XHTML Basic Forms • Forms, cont. • Methods • Post • appends form data to browser request containing browser request (HTTP) • Get • Appends form data to the end of sumbitted URL

  15. E-mail address that receives the data form element defines form “hidden” input tags are usually placed at the beginning of a form. value attribute provides value that is posted or sent action attribute specifies URL of script on Web server post method appends form data to browser request containing browser request (HTTP) method attribute specifies how data is sent to server name attribute identifies input element type attribute hidden sends information to the server that is not entered by the user input elements specify data to provide to script that processes the form E-mail subject line entry Web site that displays after e-mail is submitted 1 <?xml version = "1.0"?>2 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML Basic 1.0//EN"3 "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">4 5 <!-- Fig. 25.4: Fig25_04.html -->6 <!-- Form Design Example -->7 8 <html xmlns ="http://www.w3.org/1999/xhtml">9 <head>10 <title>A Simple Form</title>11 </head>12 13 <body>14 <h1>Feedback Form</h1>15 16 <p>Please fill out this form to help 17 us improve our site.</p>18 19 <!-- the <form> tag starts the form, gives -->20 <!-- the method of sending information and -->21 <!-- the location of form scripts. -->22 <form method ="post"23 action ="/cgi-bin/formmail">24 25 <p>26 27 <!-- Hidden inputs give the server -->28 <!-- non-visual information -->29 <input type = "hidden"name ="recipient"30 value ="deitel@deitel.com"/>31 <input type = "hidden"name ="subject"32 value ="Feedback Form" />33 <input type ="hidden"name ="redirect"34 value ="main.html"/>35 </p> Fig25_04.html Creates a form with “hidden” inputs and text field input.

  16. “submit” input is a button that sends form data to Web server “reset” input is a button that clears form values maxlength attribute limits number of characters input into the textbox size attribute specifies number of visible characters in the text box text input creates a text box label element determines purpose of form elements 36 37 <!-- <input type = "text"> inserts a text box -->38 <p>39 <label>40 Name:41 <input name ="name"type ="text" 42 size ="25" maxlength = "30" />43 </label>44 45 <!-- input types "submit" and "reset" insert -->46 <!-- buttons for submitting and clearing the -->47 <!-- form's contents -->48 <input type = "submit"49 value = "Submit Your Entries"/>50 <input type ="reset"51 value ="Clear Your Entries"/>52 </p>53 </form>54 </body>55 </html> Fig25_04.html (Courtesy of Pixo)

  17. 25.5 Simple XHTML Basic Forms Fig. 25.4 Simple XHTML Basic form. (Courtesy of Pixo, Inc.)

  18. name attribute is the same for all checkboxes in a checkbox group checkboxform element enables users to select items from a list of options 1 <?xml version ="1.0"?>2 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML Basic 1.0//EN"3 "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">4 5 <!-- Fig. 25.5: Fig25_05.html -->6 <!-- Form with text areas and checkboxes -->7 8 <html xmlns ="http://www.w3.org/1999/xhtml">9 <head>10 <title>A More Complex Form</title>11 </head>12 13 <body>14 <h1>Feedback Form</h1>15 16 <p>Please fill out this form to help 17 us improve our site.</p>18 19 <form method ="post"action = "/cgi-bin/formmail">2021 <p>22 <input type = "hidden"name = "recipient"23 value ="deitel@deitel.com"/>24 <input type ="hidden"name = "subject" 25 value = "Feedback Form"/>26 <input type ="hidden"name ="redirect"27 value ="main.html"/>28 </p>29 30 <p>31 <strong>Things you liked:</strong><br />32 33 <label>34 Site design35<input name = "thingsliked"type ="checkbox“ Fig25_05.html Creates a Web form with checkbox and textarea inputs

  19. textarea element creates a multi-line text box (text area) rows and cols attributes define text area dimensions If name attribute is the same for multiple inputs, the inputs must have different names assigned to each value attribute so the script can distinguish between them value ="Design" />37 </label><br />38 39 <label>40 Links41 <input name = "thingsliked"type = "checkbox" 42 value ="Links"/>43 </label><br />44 45 <label>46 Source code47 <input name = "thingsliked"type ="checkbox"48 value ="Code"/>49 </label><br />50 </p>51 52 <!-- <textarea> creates a textbox of the size given -->53 <p>54 <label>55 Comments:56 <textarea name ="comments" rows ="4"57 cols = "36">58 </textarea>59 </label>60 </p>61 62 <p>63 <input type ="submit"64 value = "Submit Your Entries"/>65 <input type = "reset"66 value ="Clear Your Entries"/>67 </p> 68 </form>69 </body>70 </html> Fig25_05.html Creates a Web form with checkbox and textarea inputs

  20. Fig25_05.html (Courtesy of Pixo) (Courtesy of Pixo)

  21. 1 <?xml version = "1.0"?>2 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML Basic 1.0//EN"3 "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">4 5 <!-- Fig. 25.6: Fig25_06.html -->6 <!-- Form with radio buttons and a drop-down list -->7 8 <html xmlns ="http://www.w3.org/1999/xhtml">9 <head>10 <title>Complex Form</title>11 </head>12 13 <body>14 <h1>Feedback Form</h1>15 16 <p>17 Please fill out this form to help 18 us improve our site.19 </p>20 21 <form method ="post"action ="/cgi-bin/formmail">22 23 <p>24 <input type ="hidden"name = "recipient"25 value ="deitel@deitel.com"/>26 <input type ="hidden"name ="subject" 27 value ="Feedback Form"/>28 <input type ="hidden" name = "redirect" 29 value ="main.html" /> 30 </p>31 32 <!-- <input type = "radio" /> creates a radio -->33 <!-- button. The difference between radio buttons -->34 <!-- and checkboxes is that only one radio button -->35 <!-- in a group can be selected --> Fig25_06.html Creates a form with radio button and drop-down list inputs

  22. radio button inputs. Only one in a group can be selected at a time checked attribute sets which radio button or checkbox is checked initially 36 <p>37 <strong>How did you get to our site?:</strong><br />38 39 <label>40 Search engine41 <input name ="howtosite"type ="radio"42 value = "search engine"checked ="checked"/>43 </label>44 45 <label>46 Links from another site47 <input name ="howtosite"type ="radio"48 value ="link" /> 49 </label>50 51 <label>52 Deitel.com Web site53 <input name = "howtosite"type = "radio" 54 value ="deitel.com"/>55 </label>56 57 <label>58 Reference in a book59 <input name ="howtosite"type ="radio" 60 value ="book"/>61 </label>62 63 <label>64 Other65 <input name ="howtosite"type ="radio" 66 value ="other"/>67 </label>68 </p>69 70 <p> Fig25_06.html Creates a form with radio button and drop-down list inputs

  23. select element creates a drop-down list where each option is an element on the list 71 <label>72 Rate our site:73 74 <!-- The <select> tag presents a menu with -->75 <!-- choices indicated by the <option> tags -->76 <select name ="rating">77 <option selected ="selected">Amazing</option>78 <option>*****</option>79 <option>****</option>80 <option>***</option>81 <option>**</option>82 <option>*</option>83 <option>Awful</option>84 </select>85 86 </label>87 </p>88 89 <p>90 <input type = "submit"91 value ="Submit Your Entries" />92 <input type ="reset"value = "Clear Your Entries"/>93 </p> 94 </form>95 </body>96 </html> Fig25_06.html Creates a form with radio button and drop-down list inputs

  24. Fig25_06.html Creates a form with radio button and drop-down list inputs (Courtesy of Pixo) (Courtesy of Pixo) (Courtesy of Pixo)

More Related