Lecture 4b: HTML:
Lists, Tables, Links and Images
What You Will Learn Today
- Use HTML tags and attributes for lists,
tables, links,
anchors and images.
- Design for various screen resolutions.
<ol> ordered (numbered) list<ul> unordered (bulleted) list
<li> list items for ordered and unordered lists- To change the bullet shape, use the type attribute (square or disc) or an
image.
<dl> a definition list contains:
<dt> definition term<dd> definition
- A list can be nested inside another list; it will be indented when
displayed, as shown in this list.
<table> is a table tag which encloses the following
table elements:
<caption> a description of the table<tr> table row, which encloses:
<th> table heading cell, generally used in the first
cell in a row or column<td> table body cell
- Table attributes include
- align: alignment of the table on the page (left, center, right)
- width, height: in pixels, or percentage of the page width; e.g.
width="100%" fills the width of the page
- border: thickness of the border around the outside of the table;
e.g. border="0" hides the border
- cellpadding: space in pixels between text and cell border; e.g.
cellpadding="1"
- cellspacing: space in pixels between two cells; e.g. cellspacing="1"
- bgcolor, bordercolor: background and border colours
- Cell and row attributes include
- align, width, height, bgcolor, bordercolor
- valign: vertical alignment of items in the cell (top, middle,
baseline or bottom)
- rowspan and colspan: if the cell extends to more than one
row or column
- nowrap: turns off word wrapping within a cell
- Absolute links begin with a protocol and a colon.
<a href="http://host/folder/file.html">link to a page
on the Internet</a><a href="file:///home/umu/gvogl/web/index.html">link to a
file on the user's computer</a><a href="mailto:user@host">link to an e-mail
address</a>
- Relative links begin with a file or folder name.
<a href="file">relative link to a file in the same
directory</a><a href="folder/file">relative link to a file in a
subdirectory</a>
<a name="anchor">defines text or other
document element to be an addressable location</a><a href="#anchor>link to an anchor within the same
page</a><a href="file.html#anchor>link to an anchor in
another page</a>
- An image always has a
src attribute indicating its
source location:
<img src="mypic.jpg"> displays an image named mypic.jpg in
the current directory<img src="images/diagram.gif"> displays an image named
diagram.gif in a subdirectory named images<img src="http://host/folder/imagefile"> displays an
image on the Internet
- To hyperlink an image to display a page or a large size picture, enclose
it in a link, e.g.:
<a href="file"><img src="imagefile"></a><a href="fullsizepicture.jpg"><img src="thumbnailpicture.jpg"></a>
- Other image attributes:
width, height: the displayed size of the image in
pixels.
If different from the actual image size, the image will appear stretched or
shrunk.
Tip: Including width and height attributes makes the page load faster.border, hspace, vspace: border width and horizontal
and vertical spacing around the image, in pixels.align: alignment and text wrapping around the image
(left, center, right, top, middle, bottom, etc.)alt: text that is shown if the image cannot be shown
or loaded.
In some browsers alt text appears as a tool tip when the mouse pointer stops
above the image.
Tip: All images should include alt text.
- A computer screen displays images by thousands of coloured dots called
pixels.
- Most screens are at least 640 pixels wide and 480 pixels high.
- Large monitors have 1024x768 or larger displays.
- The width to height ration on most monitors is 4:3.
- Tip: It is safest to design for a 640x480 screen, leaving room for the
browser's navigation and scroll bars.
To Do After Class
- Assignment: Project 1 is due tomorrow.
- Sources: Hofstetter ch.
18; QuickStudy HTML Guide; Reding & Vodnik units B, C, E; Sklar unit E; Carey
ch. 2, 4