Concepts in Computing
CS4 - Winter 2007
Instructor: Fabio Pellacini

CS 4, Summer 2006: Lecture 3: More HTML

Overview

  • Review, plus a few extras
    • Markup -- see also XML, e.g., as used to catalog iTunes (Music/iTunes/iTunes Music Library.xml)
    • Structure vs. physical appearance
    • An HTML Validator will check your HTML for "bugs" (e.g., a missing close tag). It wants you to include a DOCTYPE; you may want to use the one at the top of this document.
  • Linking pages together
  • Putting images on a page
  • Organizing information in tables

Links

The web is more than just a bunch of individual pages. They are woven together, with references/links internally and to each other. That's what makes hypertext and not just text. (The idea of associative links can be seen in Vanevar Bush's proposed Memex machine, towards the end of his 1945 Atlantic Monthly article.) How do we specify links?

  • A link to another document begins with <a href="URL"> and ends with </a>. The text between the tags is linked to the destination URL (the CS home page).
  • The href="..." part of the tag is called an attribute, and is the mechanism by which you give more information about the tag (beyond the text it encloses).
  • A link to another part of the same document uses the attribute href="#xxx", where xxx designates the section of the document you wish to link to.
  • The destination of a link (an anchor) begins with <a name="xxx"> and ends with </a>. (You need not place anything between the begin and end tags, but can.)
  • A link to a section in another document works by combining these two constructions: a whole URL followed by an anchor.
  • Relative URL: Missing pieces are provided based on the page where the link is found; e.g., a link to another document in the notes directory as just href="02_html1.html".
 

This is the target for the internal link above.  

Images

How can we use text markup to include pictures?

smiley face
  • An inline image is specified by <img src="URL" /> where URL specifies where to find the image.
  • Image files are typically in GIF, PNG, or JPEG formats. GIF files should have the suffix ".gif", PNG files should have the suffix ".png", and JPEG files should have a suffix of either ".jpg" or ".jpeg".
  • A separate HTTP request and response!
  • Relative tags often the best way to keep pictures and text together, e.g., <img src="03_html2/smiley.png">.
  • Since not all WWW browsers display images, you can (and should) specify alternate text by using <img src="URL" alt="ALTERNATE TEXT">.
  • To specify the width and/or height of the image, you may include width="xxx" and/or height="yyy" in the specification of the image. For example, <img src="URL" width="100"> specifies an image whose width is 100 units (the units are usually pixels). It's best to resize an image with an external program, and use the size info simply as a hint to the browser, to enable faster page display.

Tables

So far, we've had fairly little control over the horizontal and vertical layout of our documents. Tables provide one mechanism for specifying such relationships among elements. The table tag occupies an odd place between physical and logical tags. It's physical in that it specifies what is mostly a visual layout, but it's logical in that it only conveys the relationships between the various cells of the table.

So, what do we need to be able to do with tables, and how do we specify it so the computer understands?

stooges Stooge Preference
Moe Larry Curly
Major CS 30% 20% 50%
Non-CS 45% 25% 30%

Also good with images (e.g., supporting cast). See also most web pages out there, which use tables for layout (e.g., a College we all know and love).

A table can be thought of as a rectangular grid with a number of rows and columns:

row 1, col 1row 1, col 2...row 1, col n
row 2, col 1row 2, col 2...row 2, col n
............
row m, col 1row m, col 2...row m, col n
  • Tables are surrounded by <table> and </table> tags.
  • You specify the contents of a table row-by-row. Each row is surrounded by <tr> and </tr> tags. (Mnemonic: table row)
  • The heading of a table row is surrounded by <th> and </th> tags. (Mnemonic: table heading)
  • Data items within a row are surrounded by <td> and </td> tags. (Mnemonic: table data)
  • To leave a table cell blank, just leave the contents of your <td></td> empty.

Example: Simple table

Col 2 Col 3 Col 4
Row 2 A B C
Row 3 D E F

Sometimes, tables look better with a border drawn around each cell. You can achieve this by specifying a number for the border attribute to the table tag. The number specifies how thick the border should be. The border of a table can also be controlled (with more precision) using the various border attributes in a Cascading Style Sheet (later).

Example: Border

Col 2 Col 3 Col 4
Row 2 A B C
Row 3 D E F

The basic rule for a table is that each row has the same number of columns. But, sometimes you want a cell that spans more than one column, or more than one row. To permit this, the td and th tags have two important attributes:

  • colspan="NUM" -- makes the cell NUM columns high (default = 1)
  • rowspan="NUM" -- makes the cell NUM rows wide (default = 1)

Example: Spans

Col 2 Col 3 Col 4
Row 2 A and B C and F
Row 3 D E

The cells are generally "shrink-wrapped" to fit as tightly as possible around the biggest element in each row and column. We can put extra room inside each cell with the cellpadding attribute of the table, and extra room between adjacent cells with the cellspacing attribute.

Example: cellpadding=20

Col 2 Col 3 Col 4
Row 2 A B C
Row 3 D E F

Example: cellspacing=20

Col 2 Col 3 Col 4
Row 2 A B C
Row 3 D E F

The preferred width of the entire table can be specified by giving the width attribute to the <table> tag. You can give a number of units (e.g., width="600" but be careful not to make it so large that it won't fit on some people's displays!), or a percentage of the window's width (e.g., width="50%").

Similarly, you can specify the width of table cells by adding a width attribute to the <th> or <td> tags. Cell width works in much the same way as table width, except that percentage widths are a percent of the table's width rather than the screen width. Height works similarly.

Example: sizes (100%, with col 2 getting 50 units)

Col 2 Col 3 Col 4
Row 2 A B C
Row 3 D E F

Finally (for what we'll cover here), there are attributes to control the vertical and horizontal alignment of elements inside table cells. For example, the align attribute of a cell or row can be set to values including left, center, and right, and the valign to values including top, middle, and bottom.

Example: horizontal alignment

Col 2 Col 3 Col 4
Row 2 A (left) B (center) C (right)
Row 3 D (center) E (right) F (left)

Example: vertical alignment

Col 2 Col 3 Col 4
Row 2
(top)
A
more about A
B C
Row 3 D
more about D
(center)
E F