1. © 2004, Robert K. Moniot Chapters 4 & 5 Introduction to HTML, More Details

2. © 2004, Robert K. Moniot Anchors The tag can be used to create an anchor, a marked location in a document. The anchor is given a name using the name attribute. A link can refer to this named location using the # character in the URL. Clicking on the link jumps to the marked location rather than to the head of the referenced document. Example: Create anchor with Section 1. Reference anchor with See Section 1.

3. © 2004, Robert K. Moniot Anchors The URL referring to an anchor located in the same document can omit everything except the # and the anchor name. Or, the URL can be a relative or absolute URL with the #anchorname at the end. Example: See Section 1 of the paper. Example

4. © 2004, Robert K. Moniot Tables The W3C says: “Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.” Be aware that not all your visitors will use the same hardware or software to view the page.

5. © 2004, Robert K. Moniot Table attributes summary="text" – provides a description of the table's purpose and structure for non-visual agents (e.g. speech) width="length" – specifies width of table. Length can be a percentage of the width of the window, or an absolute length in pixels. frame="spec" – specifies which part of frame around table is visible. Spec can be any of: void above below hsides vsides lhs rhs box border

6. © 2004, Robert K. Moniot Table attributes, cont'd border="pixels" – specifies width of frame drawn around table. Setting it to 0 suppresses the frame. rules="spec" – specifies placement of rules between cells. Spec can be one of: none groups rows cols all Alas, this seems to be ignored by Navigator 4. cellspacing ="pixels" – specifies spacing between cells (above, below, and to either side) cellpadding ="space" – specifies spacing between the boundary of a cell and its contents. Here space can either be a number in pixels, or a percentage of the cell size.

7. © 2004, Robert K. Moniot Elements within Table Caption: specifies a caption to appear with the table. –Allows an optional attribute align to specify where the caption appears relative to the table. The align position can be one of: top bottom left right This is the caption

8. © 2004, Robert K. Moniot Cells that Span Rows, Columns A single cell can span multiple columns or multiple rows. This is achieved using the rowspan and colspan attributes of the or element. Example: This cell spans two columns Example: This cell spans two rows You can also use the nowrap attribute to control automatic wrapping of text within a cell. Normally wrapping is good in order to prevent a cell from becoming too wide.

9. © 2004, Robert K. Moniot Elements within Tables Row groups: these allow you to structure portions of the table into head, body, and foot.... encloses rows in head of table.... encloses rows in foot of table.... encloses rows in body of table. –Note that must come before so that the browser can scroll the body independently of head and foot, or repeat head and foot on multi-page printout. –Multiple elements are allowed, in order to divide the body into groups of rows. The browser may put extra space or other indication of the separation between these groups. –The closing tags are optional.

10. © 2004, Robert K. Moniot Elements within Tables Column groups: these allow you to specify width and alignment of columns in the table. Form:... alignment is one of: left center right justify vert-alignment is one of: top middle bottom baseline width can be a number of pixels or a percentage of the table width cols is the number of columns sharing the same attributes Example