Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Xhtml Part2

908 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Xhtml Part2

  1. 1. XHTML Review Part 2 Instructor: Nancy Lee
  2. 2. Course Objectives <ul><li>To be able to create tables with rows and columns of data. </li></ul><ul><li>To be able to control table formatting </li></ul><ul><li>To be able to create and use forms </li></ul><ul><li>To be able to create and use image maps to aid in Web-page navigation </li></ul><ul><li>To be able to make Web pages accessible to search engines using <meta> tags </li></ul><ul><li>To be able to use the frameset element to display multiple Web pages in a single browser window. </li></ul>
  3. 3. Introduction <ul><li>Using tables to present information on web page </li></ul><ul><li>Forms to gather data </li></ul>
  4. 4. Basic XHTML Tables <ul><li>Used to organize data into rows and columns </li></ul><ul><li>table1.html </li></ul><ul><li>element <table> </table> </li></ul><ul><ul><li>defines a table </li></ul></ul><ul><ul><li>attributes </li></ul></ul><ul><ul><ul><li>border </li></ul></ul></ul><ul><ul><ul><ul><li>no border= “0” </li></ul></ul></ul></ul><ul><ul><ul><li>width </li></ul></ul></ul><ul><ul><ul><li>summary </li></ul></ul></ul><ul><ul><ul><ul><li>used by speech synthesizers </li></ul></ul></ul></ul>
  5. 5. Basic XHTML Tables <ul><li>element <caption> </caption> </li></ul><ul><ul><li>accessibility element in XHTML </li></ul></ul><ul><ul><li>describes table contents </li></ul></ul>
  6. 6. Basic XHTML Tables <ul><li>Table has three parts </li></ul><ul><ul><li>Head </li></ul></ul><ul><ul><li>Body </li></ul></ul><ul><ul><li>foot </li></ul></ul>
  7. 7. Basic XHTML Tables <ul><li>Table has three parts </li></ul><ul><ul><li>head </li></ul></ul><ul><ul><ul><li>column names </li></ul></ul></ul><ul><ul><ul><li><thead> </thead> element </li></ul></ul></ul><ul><ul><ul><li><tr></tr> element </li></ul></ul></ul><ul><ul><ul><ul><li>Defines rows </li></ul></ul></ul></ul><ul><ul><ul><li><th></th> </li></ul></ul></ul><ul><ul><ul><ul><li>Defines header column </li></ul></ul></ul></ul>
  8. 8. Basic XHTML Tables <ul><li>Table has three parts </li></ul><ul><ul><li>head </li></ul></ul><ul><ul><li>body </li></ul></ul><ul><ul><ul><li><tbody> </tbody> element </li></ul></ul></ul><ul><ul><ul><li><tr></tr> </li></ul></ul></ul><ul><ul><ul><ul><li>Rows </li></ul></ul></ul></ul><ul><ul><ul><li><td> </td> </li></ul></ul></ul><ul><ul><ul><ul><li>columns </li></ul></ul></ul></ul>
  9. 9. Basic XHTML Tables <ul><li>Table has three parts </li></ul><ul><ul><li>head </li></ul></ul><ul><ul><li>body </li></ul></ul><ul><ul><li>foot </li></ul></ul><ul><ul><ul><li>Contains totals and footnotes </li></ul></ul></ul><ul><ul><ul><li><tfoot></tfoot> </li></ul></ul></ul><ul><ul><ul><ul><li>Defines foot of table </li></ul></ul></ul></ul><ul><ul><ul><li><tr></tr> </li></ul></ul></ul><ul><ul><ul><li><th></th> element </li></ul></ul></ul>
  10. 10. Intermediate XHTML Tables and Formatting <ul><li>Elements required to build more complex tables </li></ul><ul><li>table2.html </li></ul><ul><li><colgroup> </colgroup> element </li></ul><ul><ul><li>Groups and formats columns </li></ul></ul><ul><ul><li><col> </col> element </li></ul></ul><ul><ul><ul><li>Attributes </li></ul></ul></ul><ul><ul><ul><ul><li>Align </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Span </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Value how many columns the <col> formats </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>colspan </li></ul></ul></ul></ul><ul><ul><ul><ul><li>rowspan </li></ul></ul></ul></ul><ul><ul><ul><ul><li>valign </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>“ top” </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>“ middle” </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>“ bottom” </li></ul></ul></ul></ul></ul>
  11. 11. Basic XHTML Forms <ul><li>Used to collect data from user. </li></ul><ul><li>Used to collect data from user. </li></ul><ul><li>XHTML uses HTTP (Hypertext Transfer Protocol). </li></ul>
  12. 12. Basic XHTML Forms <ul><li>Used to collect data from user </li></ul><ul><li>XHTML uses HTTP (Hypertext Transfer Protocol) </li></ul><ul><li>Example program sends the form data to the Web Server which passes the form to a CGI (Common Gateway Interface) </li></ul><ul><ul><li>Written in Perl, C or some other language </li></ul></ul><ul><ul><li>Submit will cause error as server is not configured </li></ul></ul><ul><ul><ul><li>We will do that later in ASP.NET </li></ul></ul></ul>
  13. 13. Basic XHTML Forms <ul><li>Used to collect data from user </li></ul><ul><li>XHTML uses HTTP (Hypertext Transfer Protocol) </li></ul><ul><li>Example program sends the form data to the Web Server which passes the form to a CGI (Common Gateway Interface) </li></ul><ul><ul><li>Written in Perl, C or some other language </li></ul></ul><ul><ul><li>Submit will cause error as server is not configured </li></ul></ul><ul><ul><ul><li>We will do that later in ASP.NET </li></ul></ul></ul><ul><li>Forms can contain visual and non visual components </li></ul><ul><ul><li>Hidden inputs </li></ul></ul><ul><ul><ul><li>Store data in documents specified </li></ul></ul></ul>
  14. 14. Basic XHTML Forms <ul><li><form> </form> element </li></ul><ul><ul><li>Attributes </li></ul></ul><ul><ul><ul><li>method </li></ul></ul></ul><ul><ul><ul><ul><li>Specifies how form’s data is sent to the Web server </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Value “post” appends form data to the browser request </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Contains the protocol </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Requested sources URL </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Scripts in the web server will process the data </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>Value “get” appends for data directly to the end of the URL </li></ul></ul></ul></ul><ul><ul><ul><ul><li>We will discuss these in detail later </li></ul></ul></ul></ul><ul><ul><ul><li>action </li></ul></ul></ul><ul><ul><ul><ul><li>specifies the URL of a script on the Web server </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Most ISPs have a formmail script </li></ul></ul></ul></ul>
  15. 15. Basic XHTML Forms <ul><li><input /> element </li></ul><ul><ul><li>Attributes </li></ul></ul><ul><ul><ul><li>type </li></ul></ul></ul><ul><ul><ul><ul><li>value </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>“ hidden” used by web server script </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>“ text” </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>“ submit” button sends form to server </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>“ reset” resets all the components in form </li></ul></ul></ul></ul></ul><ul><ul><ul><li>name </li></ul></ul></ul><ul><ul><ul><ul><li>identifies element to script </li></ul></ul></ul></ul><ul><ul><ul><ul><li>value is used by server to process input </li></ul></ul></ul></ul><ul><ul><ul><li>size </li></ul></ul></ul><ul><ul><ul><ul><li>sets the length of the component </li></ul></ul></ul></ul><ul><ul><ul><li>maxlength </li></ul></ul></ul><ul><ul><ul><ul><li>sets the maximum number of characters </li></ul></ul></ul></ul>
  16. 16. Basic XHTML Forms <ul><li><label></label> element is used to label the form components. </li></ul>
  17. 17. More Complex XHTML Forms <ul><li>Add some components to the basic form to enhance it. </li></ul><ul><li>form2.html </li></ul><ul><li>adds some new components </li></ul><ul><ul><li><textarea> </textarea> </li></ul></ul><ul><ul><ul><li>Attributes </li></ul></ul></ul><ul><ul><ul><ul><li>rows </li></ul></ul></ul></ul><ul><ul><ul><ul><li>cols </li></ul></ul></ul></ul>
  18. 18. More Complex XHTML Forms <ul><ul><li><input /> </li></ul></ul><ul><ul><ul><li>type </li></ul></ul></ul><ul><ul><ul><ul><li>“password” fills text box with “*”, sends info to server </li></ul></ul></ul></ul><ul><ul><ul><ul><li>“checkbox” </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Assigned individually </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Groups with same name </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Must have different value so server can identify them. </li></ul></ul></ul></ul></ul>
  19. 19. More Complex XHTML Forms <ul><ul><li><input /> </li></ul></ul><ul><ul><ul><li>Form3.html </li></ul></ul></ul><ul><ul><ul><ul><ul><li>“radio” radio button </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Only one in a group can be selected at a given time </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Attribute checked=”checked” sets default selection </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Name must be the same for all radio buttons in a group </li></ul></ul></ul></ul></ul>
  20. 20. More Complex XHTML Forms <ul><ul><ul><li><select> </select> element </li></ul></ul></ul><ul><ul><ul><ul><li>Dropdown list from which to select item </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Attributes </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>name </li></ul></ul></ul></ul></ul><ul><ul><ul><li><option></option> </li></ul></ul></ul><ul><ul><ul><ul><li>Attributes </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>selected = “selected” sets the default option </li></ul></ul></ul></ul></ul>
  21. 21. Internal Linking <ul><li>Enables user to jump between locations in the same document. </li></ul><ul><li>Useful for long documents </li></ul><ul><li>Eliminates scrolling </li></ul><ul><li>links.html </li></ul><ul><li>use id = “name” in a text element to create hyperlink destination </li></ul><ul><li>Use <a href =”#linkname”>directions </a> </li></ul><ul><li>href = “filename.html#id” </li></ul><ul><ul><li>links to an anchor on another page </li></ul></ul>
  22. 22. Creating and Using Image Maps <ul><li>Image maps create hyperlink spots on an image called “hotspots.” </li></ul><ul><li>picture.html </li></ul><ul><li>current browsers do not support XHTML 1.1, so use XHTML 1.0 Transitional </li></ul><ul><ul><li>note <!DOCTYPE… </li></ul></ul>
  23. 23. Creating and Using Image Maps <ul><li>picture.html </li></ul><ul><ul><li><map> </map> element image map definition </li></ul></ul><ul><ul><ul><li>Attribute </li></ul></ul></ul><ul><ul><ul><ul><li>id = “mapname” </li></ul></ul></ul></ul>
  24. 24. Creating and Using Image Maps <ul><li>picture.html </li></ul><ul><ul><li><area /> element defines the hotspot </li></ul></ul><ul><ul><ul><li>Attributes </li></ul></ul></ul><ul><ul><ul><ul><li>href specifies hyperlink </li></ul></ul></ul></ul><ul><ul><ul><ul><li>shape specifies the shape </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>rect rectangular shape </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>poly polygon shape </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>circle circle shape </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>alt text to be displayed on mouseover </li></ul></ul></ul></ul><ul><ul><ul><ul><li>coords the coordinates in pixels </li></ul></ul></ul></ul>
  25. 25. Creating and Using Image Maps <ul><li>picture.html </li></ul><ul><ul><li><img /> element add attribute </li></ul></ul><ul><ul><ul><li>usemap = “mapname” </li></ul></ul></ul>

×