1 06-more html-elements


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • During your travels in the world of HTML/XHTML and CSS - you'll encounter lots more tags than you'll probably care to know about. Because we're pretty nice, we'll show you what some of the more common ones are, so you know what they do, and how to handle them when you make edits.
  • Tables are very useful to markup because the data suddenly gets structure and meaning rather than being listed out. We can organise data into rows of columns, and add in headings and captions to make columns have marked up sense. If you understand the purpose of a spreadsheet - you've already been sold on tables! 
  • In the old days, there wasn't a good reliable way to do layout on the web - If you wanted some columns under a header for example, you would have to create a table with fixed dimensions for the cells, and then hide the borders or backgrounds so the table itself is invisible. IT'S HORRIBLE. NEVER DO THIS IF YOU CAN AVOID IT. Tables imply a semantic relationship just like other elements. Putting things in them, makes them tablular data, and distorts the meaning of your content if you use it for layout purposes.
  • This is a fully defined table. It has two rows (<tr>) - the first containing two headings (<th>), and the second containing two cells (<td>).That gives us...
  • But remember the way it looks......is controlled by the stylesheet!!Lets have a look at how these elements create a table structure:
  • <tr> elements are row containers. All they exist for, is to contain <td> elements, much like the <ul> or <ol>list elements do. They still have semantic purpose of course, as they group rows of those <td> cell elements. <th> elements are heading cells and <td> elements are regular cells.With both of these, you can specify the alignment of the content inside of them with some of their attributes,align="" for horizontal alignment of contents, and valign="" for vertical alignment. There are many intricate ways of referencing and nesting cells.
  • Want a row or column to be one cell, spanning over the space where normally other cells would be? You need the colspan and rowspan attributes for <td> elements! <td rowspan="3"> - this cellwill eat up a cell one row down to become one larger cell. Remove 3 extra <td>(cells) from other <tr> (rows).<td colspan="4"> - this cell will eat up 4 cells across to become one larger cell. Remove 3 <th> (cells) on this <tr> (row).<th colspan="4"> - this heading cell will eat up 4 cells across to become one larger cell. Remove 3 <th>(heading cells) on this <tr> (row).Let’s look at these in action:
  • More detail on these is in the article on the Wiki
  • If it ever comes to this point though, you're best to get the front-end developers to help sort this out for you! :-)
  • Forms are quite out of the scope of this initial course, but you should be able to understand and identify them in markup.There are two parts to normal forms. The first part is the form that you see on the page itself - buttons, text fields, and pull-down menus (together known as form controls) used to collect info from the user, but can also some regular html text elements. The other part of a web form is the programming or script on the server that processes the info in the form and returns a useful reply. That will handle all the logic. In other words, you can't just put up an (X)HTML page with form elements - we need progamming know-how of backend developers.
  • Awesomely becomes:
  • It is current best practice to wrap form controls in lists, most commonly ordered lists as shown in this example. Not only is it semantically correct, it also makes it easier to format the form with style sheets later.Some of the elements can be explained as:
  • A type of "password" masks the input text with dots. It's multipurpose!
  • You could also use the type of "reset" and it would be a button that sets all the form controls to the state they were in when the form loaded.
  • We've used it in the previous workshop... so we should probably make a mention of what it's used for. If you have a long quotation, a testimonial, or a section of copy from another source, particularly one that spans four lines or morae, you should mark it up as a blockquote element. It is recommended that content within blockquotes be contained in other elements, such as paragraphs, headings, or lists.
  • It's appropriate when only one option from the group is allowed (such as Yes or No, or Male or Female).
  • You can create groups of checkboxes by assigning them the same "name" attribute value, but unlike the radio input, all the on or off states for each checkbox are sent to the server, not just one!
  • To allow for multiple selections and make the element display as a scrolling list instead, set a size attribute value of higher than 1, and you can also set the attribute multiple="multiple".After we cover the box model in a future lesson, we'll show you how using form elements inside list elements, can help us semantically and help styling.
  • We've used it in the previous workshop... so we should probably make a mention of what it's used for. If you have a long quotation, a testimonial, or a section of copy from another source, particularly one that spans four lines or morae, you should mark it up as a blockquote element. It is recommended that content within blockquotes be contained in other elements, such as paragraphs, headings, or lists.
  • With default styling - it will become indented, and on some browsers can even become italicized.
  • 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 />