Transcript Chapters 4&5 - Fordham University

Chapters 4 & 5
Introduction to HTML,
More Details
© 2004, Robert K. Moniot
Anchors
• The <a> 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
<a name="section1">Section 1.</a>
Reference anchor with
<a href="#section1">See Section 1.</a>
© 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:
<a href="http://www.mysite.org/pubs/paper.html#section1">
See Section 1 of the paper.</a>
Example
© 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.
© 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
lhs rhs box border
vsides
© 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.
© 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
<caption align="position">This is the caption</caption>
© 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 <th> or <td> element.
Example:
<td colspan="2">This cell spans two columns</td>
Example:
<td rowspan="2">This cell spans two rows</td>
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.
© 2004, Robert K. Moniot
Elements within Tables
• Row groups: these allow you to structure portions of the
table into head, body, and foot.
<thead> ... </thead> encloses rows in head of table.
<tfoot> ... </tfoot> encloses rows in foot of table.
<tbody> ... </tbody> encloses rows in body of table.
– Note that <tfoot> must come before <tbody> so that the
browser can scroll the body independently of head and foot, or
repeat head and foot on multi-page printout.
– Multiple <tbody> 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.
© 2004, Robert K. Moniot
Elements within Tables
• Column groups: these allow you to specify width and
alignment of columns in the table.
Form:
<colgroup>
<col align="alignment" width="width" span="cols">
<col valign="vert-alignment" span="cols">
...
Example
</colgroup>
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
© 2004, Robert K. Moniot