  |   AppendIx A: xhtml reference This example shows a table with three rows with three cells in each row, making it a 3x3 table. Related Tags tr, th, table <textarea></textarea> Creates a multiline text area form field. The initial value of the text area can be placed in between the opening and closing tags. See Chapter 9, “Forms.” Attributes [Common attributes] rows (required)—The number of viewable rows. cols (required)—The number of viewable columns. name—Used so that the value of the element can be processed. disabled—Disables an element. It must be used in the format disabled=”disabled”. readonly—Used to specify that the value of the element cannot be changed. It must be used in the format readonly=”readonly”. accesskey—Associates a keyboard shortcut to the element. tabindex—Where the element appears in the tab order of the page. Content Text. Example <form action=”somescript.php” /> <p>Your address</p> • • • • • • • • tAgs  |    <div><textarea name=”address” cols=”30” rows=”4”></textarea></ div> <div><input type=”submit” /></div> </form> Related Tags input, form <tfoot></tfoot> Table footer row group. Along with thead and tbody, tfoot can be used to group a series of rows. tfoot can be used just once within a table element and must appear before a tbody element. See Chapter 8, “Tables.” Attributes [Common attributes] Note: There are other valid attributes (align, valign, char, charoff) but they are presentational and so CSS should be used instead. Content One or more tr. Example <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tfoot> <tr> •   |   AppendIx A: xhtml reference <td>Footer 1</td> <td>Footer 2</td> <td>Footer 3</td> </tr> </tfoot> <tbody> <tr> <td>Cell data 1</td> <td>Cell data 2</td> <td>Cell data 3</td> </tr> <tr> <td>Cell data 4</td> <td>Cell data 5</td> <td>Cell data 6</td> </tr> <tr> <td>Cell data 7</td> <td>Cell data 8</td> <td>Cell data 9</td> </tr> </tbody> </table> Related Tags thead, tbody, table <th></th> Table header cell. Must appear within a tr element. See Chapter 8, “Tables.” Attributes [Common attributes] colspan—Specifies across how many columns the cell should spread. The default value is 1. • • tAgs  |    rowspan—Specifies across how many rows the cell should spread. The default value is 1. abbr—An abbreviated version of the content of the cell. headers—Explicitly specifies which header cells are associated to the cell. The value is a single or comma-separated list of table cell id values. scope—Explicitly specifies that the cell contains header information for the rest of the row (value row), column (value col), row group (value rowgroup), or column group (value colgroup) that contains it. axis—A category that forms a conceptual axis in n-dimensional space for hier- archical structuring. The value can be a single name or a comma-separated list of names. Note: There are other valid attributes (align, valign, char, charoff) but they are presentational and so CSS should be used instead. Content Text, block, inline, or none. Example <tr> <th>Cats</th> <th>Dogs</th> <th>Lemurs</th> </tr> Table header cells can also be used as headers for rows, for example if you had your table structured like this: <table> <tr> <th>Cats</th> <td>Tiger</td> <td>Cheetah</td> </tr> <tr> • • • • •   |   AppendIx A: xhtml reference <th>Dogs</th> <td>Grey wolf</td> <td>Cape hunting dog</td> </tr> <tr> <th>Lemurs</th> <td>Indri</td> <td>Sifaka</td> </tr> </table> Related Tags td, tr, table <thead></thead> Table header row group. Along with tfoot and tbody, thead can be used to group a series of rows. thead can be used just once within a table element and should appear before a tfoot and tbody element. See Chapter 8, “Tables.” Attributes [Common attributes] Note: There are other valid attributes (align, valign, char, charoff) but they are presentational and so CSS should be used instead. Content One or more tr. Example <table> <thead> <tr> <td>Header 1</td> • tAgs  |    <td>Header 2</td> <td>Header 3</td> </tr> </thead> <tfoot> <tr> <td>Footer 1</td> <td>Footer 2</td> <td>Footer 3</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <! etc. > </tbody> </table> Related Tags tfoot, tbody, table <title></title> This simply gives a title to the HTML document. It will appear as the title of the browser window, and is also used for bookmarks. It is required and must be placed within the head element. See Chapter 1, “Getting Started.” Attributes [I18n attributes]• 0  |   AppendIx A: xhtml reference Content Text. Example <head> <title>Uncle Jack’s Sea Cow Farm</title> </head> Related Tags head <tr></tr> Table row. Must appear within a table element. See Chapter 8, “Tables.” Attributes [Common attributes] Note: There are other valid attributes (align, valign, char, charoff) but they are presentational and so CSS should be used instead. Content One or more td or th. Example <table> <tr> <th>Question</th> <th>Answer</th> <th>Correct?</th> </tr> <tr> <td>What is the capital of Burundi?</td> • tAgs  |   1 <td>Bujumburra</td> <td>Yes</td> </tr> <tr> <td>Which came first, the chicken or the egg?</td> <td>The chicken</td> <td>No</td> </tr> <! etc. > </table> Related Tags td, table <ul></ul> Unordered list. As its name implies, an unordered list is for non-ordinal items, in which any item could feel just as at home at one point in the list as any other. See Chapter 6, “Lists.” Attributes [Common attributes] Content One or more li. Example <ul> <li>This</li> <li>That</li> <li>The Other</li> </ul> Related Tags li, ol, dl •   |   AppendIx A: xhtml reference <var></var> A variable in computer code. See Chapter 2, “Text.” Attributes [Common attributes] Content Text, inline, or none. Example <code><var>norahjonesisbland</var>=true;</code> Related Tags code Bad Tags In ancient texts you may read of the twisted mythology of tags that that have no place in the real world. Bad Tags usually come down to tags that are presentational, which is the realm of CSS, or simply not valid, leading to unreliable code that can’t be guaranteed to work on different or future browsers. See this book’s Introduction for more on why such tags should be avoided. You can also read a more detailed explanation of why the following are Bad Tags at www.htmldog.com/guides/htmlintermediate/badtags. applet—Embed a Java applet. Not valid. Use object tag. b—Bold. A valid tag, but purely presentational. Use CSS font-weight for bold or HTML em or strong tags for emphasis. big—Big text. A valid tag, but purely presentational. Use CSS font-size. • • • • blink—Blinking text. Not valid. Use JavaScript or CSS text-decoration: blink if you really insist on inflicting this. center—Center. Not valid. Use CSS margin: 0 auto or text-align: center. embed—Embed a multimedia object. Use object tag. font—Font name and size. Not valid. Use CSS font, font-family, and font-size. frame, frameset, iframe—Frames. Not valid. Framesets can be established with a different XHTML Doctype (see Chapter 1, “Getting Started”). Future standards (Xframes) dictate that frames should be completely separate from HTML, reducing usability and accessibility problems. CSS position: fixed can replicate some features of frames. JavaScript could also be used. hr—Horizontal rule. A valid tag, but presentational. Perhaps the most con- troversial of these Bad Tags, many argue that this has a genuine role as a divider of content. As it belongs to the XHTML Presentation Module and as its name implies, however, to truly separate structure and presentation, hr should be avoided. CSS borders can replicate horizontal rules, as can back- ground images. i—Italic. A valid tag, but purely presentational. Use CSS font-style for italics or HTML em or strong tags for emphasis. layer—Layer. Not valid. Use HTML div and CSS position. marquee—Scrolling text. Not valid. Use JavaScript, Flash, or other plugin. small—Small text. A valid tag, but purely presentational. Use CSS font-size. sub—Subscript. A valid tag, but purely presentational. Use CSS vertical-align or position. sup—Superscript. A valid tag, but purely presentational. Use CSS vertical-align or position. tt—Teletype. A valid tag, but purely presentational. Use CSS font courier or similar for appearance or HTML code tag for computer code. u—Underline. Not valid. Use CSS text-decoration. • • • • • • • • • • • • • • bAd tAgs  |    [...]... background-image The background image of a box The background-image property can be used to specify an image to be used as a background for just about any element box—from the page body to a paragraph to a link Use it on its own, and the image will magically tile itself across the background of the element starting from the top left corner and repeating horizontally and vertically, filling the box See Chapter... alternative, but the use of this should be questioned due to the adverse effect it has on usability and accessibility • text and bgcolor—Text color and background color Not valid Use CSS color and background-color appendix CSS Reference T h i s C SS R e f e r e n c e covers the pseudo-classes, pseudo-elements, at-rules, and properties of CSS 2 revision 1 (with the exception of aural CSS) Specific chapters... se-resize —Used to indicate something that should be moved downwards and to the right; usually a diagonal arrow • s-resize —Used to indicate something that should be moved downwards; usually an up/down arrow • sw-resize —Used to indicate something that should be moved downwards and to the left; usually a diagonal arrow • w-resize —Used to indicate something that should be moved to the left; usually... } Related properties border bottom For absolutely positioned boxes, specifies how far from the bottom of the containing positioned box (or, if there isn’t one, the page) the box should be 282  |  Appendix B: Css Reference For relatively positioned boxes, specifies how far from the bottom a box should be shifted See Chapter 5, “Layout.” Possible values • inherit • auto (default) • [percentage] • [length]... Appendix B: Css Reference Possible values • inherit • auto (default)—No clipping • rect( [top] [right] [bottom] [left] ) —Clips to the shape of a rectangle defined by the four coordinates (offset from the top left corner) Example #spod { position: absolute; clip: rect(10px 50px 30px 10px); } Related properties overflow color Foreground color This applies most commonly to text, but also to borders See... [number] The name of the counter optionally followed by the number that the counter resets to (default is 0) This can be a chain of names and numbers such as chapter 2 section 1 subsection, which will reset chapter to 2, section to 1, and subsection to 0 Example h2:before { content: counter(chapter); counter-increment: chapter; counter-reset: section; } Related properties counter-increment, content cursor The. .. visited link colors Not valid Use CSS :link, :active, and :visited pseudo-classes • marginwidth, marginheight, topmargin, and leftmargin —Page margins (used in the opening body tag) Not valid Use CSS margin or padding • name —Used to assign an identifying name to an element Invalid for all elements apart from button, input, select, textarea, meta, param, and object Use the id attribute • target—Specifies... nw-resize —Used to indicate something that should be moved upwards and to the left; usually a diagonal arrow • text—Used to indicate text; usually an I-beam • pointer—Used to indicate a link; usually a pointing hand • progress —Used to indicate that the program is processing something, but that it can still be interacted with; usually an arrow coupled with a timer • wait—Used to indicate that the user should... opening quote is applied, but the nesting order is m ­ aintained • no-close-quote —No closing quote is applied, but the nesting order is m ­ aintained • attr( [attribute name] ) The value of attribute [attribute name] in the HTML tag that is the subject of the selector • counter( [name] , [style] ) The current value of counter [name] The optional [style] is a value equivalent to that of list-style-type... image will repeat itself You don’t have to have the background image tiled (repeated over and over, horizontally and vertically as space allows)—you 276  |  Appendix B: Css Reference can decide whether you want it to repeat just horizontally, just vertically, or not at all by using the background-repeat property Those areas of the element that are not taken up by the background image will be transparent, . alternative, but the use of this should be ques- tioned due to the adverse effect it has on usability and accessibility. text and bgcolor—Text color and background color. Not valid. Use CSS color and background-color. • • • • • • • CSS. another style sheet into the current one. The value can be a string or a string wrapped by url() and can be followed by a comma-separated list of the media types that the import should apply to. . simply gives a title to the HTML document. It will appear as the title of the browser window, and is also used for bookmarks. It is required and must be placed within the head element. See