Computers: writing a web page

Session 3 - images and tables

Images

The image tag has several optional attributes. The src="___" attribute's value must be the filename of a .jpg or .gif file that's been uploaded to your server. The browser will display a broken-image icon if the file cannot be found (the spelling and capitalization must match exactly). Some of the more useful attributes are:

• border=n will create a border "n" pixels thick.
• hspace=n will create a horizontal buffer(margin) of "n" pixels.
• vspace=n works like hspace, but vertically.
• align="right/left" sets the alignment of the image relative to the page.
• alt="keywords" creates a message that appears when the mouse pointer hovers over the image, defines the text that appears before the image has been downloaded, and also controls what blind users hear in place of seeing the graphic.
• width=n and height=n can be used to specify the size of the image in pixels. This creates an appropriately-sized box for the image to fill while waiting for the image to download.

<img src="Tbpattern_original.jpg" border=2 hspace=10 vspace=10 alt="Alternate Text" width=120 height=98>
<img src="Tbpattern_original.jpg" border=0 hspace=0 vspace=0 alt="desktop pattern" width=90>

Tip: avoid superfluous colors and images (intense primary colors and animated graphics on a resume, for example, would be a poor choice). Don't violate copyrights: make sure you have permission to use any photos or graphics you haven't created yourself (asking usually works for non-commercial use).

Hyperlinking images

<a href="pattern_original.jpg"><img src="Tbpattern_original.jpg" border=2 hspace=10 vspace=10 align="right"></a>

Tables

Creating a table is the only way to have more than one column in a webpage design (such as a navigation bar on the left side of a webpage). Tables can be complex, with one table nested inside the cell of a larger tables, but only three tags are used (they all require a closing tag).

• The table tag "<table>" is used to open and close a table.
• The table row tag "<tr>" is used to start and end every row.
• The table data tag "<td>" used to start and end every cell.

The table tag is used once for each table. It has several important attributes which control the alignment, size, borders, and spacing of the table.

• The border attribute creates a border of "n" pixels.
• The cellpadding attribute creates a buffer or margin inside each table cell "n" pixels thick.
• The cellspacing attribute creates space between the table's cells, like ribs or a gutter, which are outlined if the border attribute is turned on.
• The bgcolor attribute sets the background color for the entire table. Note that colors can be specified for individual cells specifically(see below).
• The align attribute sets the alignment of the entire table.
• The width attribute sets the width of the table, in pixels or as a percentage of the page width (although a table will enlarge automatically if you put in an image that's too large).

<table bgcolor="cyan"
  border=2 cellpadding=10 width=200>
 <tr>
  <td>A Single-Cell Table</td>
 </tr>
</table>

<tr>

Example:

<table bgcolor="yellow"> <tr> <td>Upper Left Cell</td> <td>Upper Right Cell</td> </tr> <tr> <td>Lower Left Cell</td> <td>Lower Right Cell</td> </tr> </table>

Upper Left Cell Upper Right Cell Lower Left Cell Lower right Cell

<td align="left/center/right" bgcolor="color" colspan=n rowspan=n>

<table>
 <tr>
  <td bgcolor="white" align=left rowspan=2>Left Cell</td>
  <td>Upper Right Cell</td>
 </tr>
 <tr>
  <td>Lower Right Cell</td>
 </tr>
</table>

Other examples

<table bgcolor=yellow border=2 cellpadding=10>
 <tr>
  <td bgcolor="white" align=left
   rowspan=2 colspan=2>upper-left Cell</td>
  <td>Upper Right Cell</td>
 </tr>
 <tr>
  <td>center right cell</td>
 </tr>
 <tr>
  <td>Lower left Cell</td>
  <td>lower center Cell</td>
  <td>Lower right Cell</td>
 </table>

Exercise