1-06: More HTML Elements

2,349 views

Published on

  • Be the first to comment

1-06: More HTML Elements

  1. 1. More HTML Elements<br />Colin Gourlay & Kevin Vanderbeken<br />
  2. 2. Today:<br />Tables<br />Forms<br />Block Quotes<br />
  3. 3. tables<br />
  4. 4. the good tables<br />
  5. 5. when tables are bad<br />
  6. 6. the base table elements<br /><table border="1" cellpadding="1" <br />cellspacing="0">    <tr>        <th>Month</th>        <th>Savings</th>    </tr>    <tr>        <td>January</td>        <td>$100</td>    </tr></table><br />
  7. 7.
  8. 8. <table> <th><br /><tr><td><br />
  9. 9. column & row spans<br /><td rowspan="3"><br /><td colspan="4"><br /><thcolspan="4"><br />
  10. 10. <td colspan="4"><br />
  11. 11. <td rowspan="3"><br />
  12. 12. special table elements<br /><thead>, <tfooter> and <tbody><br /><colgroup> and <col><br />
  13. 13. so how do we actually make tables look good?<br />
  14. 14. markup<br /> <tr><br /> <td>Josephin Tan</td><br />      <td>$150</td><br />      <td>-</td><br />      <td>Annie</td><br />    </tr><br />    <tr><br />      <td>Joyce Ming</td><br />      <td>$200</td><br />      <td>$35</td><br />      <td>Andy</td><br />    </tr><br />    <tr><br />      <td>James A. Pentel</td><br />      <td>$175</td><br />      <td>$25</td><br />      <td>Annie</td><br />    </tr><br />  </tbody><br /></table><br /><table id="hor-minimalist-b" <br /> summary="Employee Pay Sheet"><br /> <thead><br />   <tr><br />     <th scope="col">Employee</th><br />      <th scope="col">Salary</th><br />      <th scope="col">Bonus</th><br />      <th scope="col">Supervisor</th><br />    </tr><br />  </thead><br />  <tbody><br />    <tr><br />       <td>Stephen C. Cox</td><br />       <td>$300</td><br />       <td>$50</td><br />       <td>Bob</td><br />     </tr><br />...<br />
  15. 15. style<br />#hor-minimalist-b {<br />font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;<br />  font-size: 12px;<br />  background-color: #fff;<br />  margin: 45px;<br />  width: 480px;<br />  border-collapse: collapse;<br />  text-align: left;<br />}<br />#hor-minimalist-b th {<br />  font-size: 14px;<br />  font-weight: normal;<br />  color: #039;<br />  padding: 10px 8px;<br />  border-bottom: 2px solid #6678b1;<br />}<br />#hor-minimalist-b td {<br />  border-bottom: 1px solid #ccc;<br />  color: #669;<br />  padding: 6px 8px;<br />}<br />#hor-minimalist-b tbodytr:hover td {<br />  color: #009;<br />}<br />
  16. 16. the result<br />(Table design attributed to Smashing Magazine)<br />
  17. 17. forms<br />
  18. 18. <form action="form.html" method="post"><br />   <fieldset><br />      <legend>Join our email list</legend><br />      <p>Get news about us sent to your email.</p><br />      <ol><br />         <li><br />            <label for="name">Name:</label><br />            <input type="text" name="name" id="name" /><br />         </li><br />         <li><br />            <label for="name">Email:</label><br />            <input type="text" name="email" id="email" /><br />         </li><br />        </ol><br />      <input type="submit" value="Submit" /><br />   </fieldset><br /></form><br />
  19. 19.
  20. 20. <form><br />This element is a container for all the content of the form and can contain many types of other elements, except another <form><br />
  21. 21. <form action="/register.html" method="post"><br />
  22. 22. <fieldset> and <legend><br />The fieldset element is used to indicate a logical group of form controls. A fieldset may also include a legend element that provides a caption for the fields it wraps.<br />
  23. 23. <label><br />This element is used to link up descriptive text with a form field like an input element. It's fundamental to making your forms accessible.<br />
  24. 24. <label for="age">Age: </label><br />
  25. 25. <input type="text" /><br />One of the most simple types of form control is the text entry field used for entering a single word or line of text.<br />
  26. 26. <input type="text" name="username" value="" /><br />
  27. 27. <input type="submit" /><br />By using the type of submit, this control looks like a button. When clicked, the submit button immediately sends the collected form data to the server for processing.<br />
  28. 28. <input type="submit" value="Submit" /><br /><input type="image" src="button.png"/><br />
  29. 29. other common input<br />
  30. 30. <textarea>...</textarea><br />This one is a multi-line, scrollable text entry box. You see it many places - like our competition forms for example.<br />
  31. 31. <input type="radio" /><br />By giving them the same "name" attribute in groups, you can have a group of radio buttons restricted to a single choice. <br /><input type="radio" name="vote" value="a" /><br /><input type="radio" name="vote" value="b" /><br /><input type="radio" name="vote" value="c" /><br />
  32. 32. <input type="checkbox" /><br />For single or multiple selections. We commonly use these to get visitors to indicate that they have read our terms and conditions. <br /><input type="checkbox" name="t-and-c"checked="checked" /><br />
  33. 33. <select><option>...<br />The select element, which contains option elements, displays as a pull-down menu by default when no size<br />is specified or if the size attribute is set to 1. In pull-down menus, only one item may be selected<br />
  34. 34. block quotes<br />
  35. 35. <p><br />Renowned type designer, Matthew Carter, has this to say <br /> about his profession:<br /></p><br /><blockquote><br />  <p><br />Our alphabet hasn't changed in eons; there isn't <br /> much latitude in what a designer can do with the <br /> individual letters.<br /></p><br />  <p><br />Much like a piece of classical music, the score is <br /> written down – it’s not something that is tampered <br /> with – and yet, each conductor interprets that score <br /> differently. There is tension in <br /> the interpretation.<br /></p><br /></blockquote><br />
  36. 36. preformatted text<br />We told you browsers ignore white space between elements in html right?<br />What if we wanted to keep the whitespace, like tabs and spaces... intact?<br />
  37. 37. Wrap it in the <pre> ... </pre> tags,and you let the browser know that it's preformatted!<br />
  38. 38. the syntax glossary<br />http://apnwebdev.pbworks.com/Syntax-Glossary<br />
  39. 39. more references<br />http://www.htmldog.com/guides/ <br /> - Guides on best practice web stuff.<br />http://www.w3schools.com/tags/default.asp<br /> - The XHTML tag references.<br />http://www.w3schools.com/css/css_reference.asp<br /> - The CSS property references.<br />
  40. 40. next week...<br />
  41. 41. The CSS Box Model<br />

×