• hypertext links
• adding images
• urls and your directories
• introduction to tables
• table elements
• using tables for layout
• readings

• inline elements
• <a></a> - anchor element
  • doesn't work by itself; must point it to something
  • add href attribute (hyperlink reference)
• one of the most important elements when designing a web site
  • bookmark - links within documents (<a href="#link">click here</a>; <a name="link">...to jump to here</a>)
  • relative - links within website
    • <a href="index.html">click here for home page</a>
    • <a href="../index.html">click here for home page</a>
    • <a href="products/index.html">click here for products page</a>
    • <a href="/products/index.html">click here for products page</a>
  • absolute - links between websites <a href="http://www.signalflare.ca/1850/">click here for the class home page</a>)
  • email - launches email message window (<a href="mailto:bcit1850@gmail.com">email me (#98;cit1850@gmail.com)</a>)
• relative link refers to location in relation to current working directory, e.g., up or down the directory tree (../../images/logo.gif) or starting from the root (/readings/index.shtml)
• absolute link refers to inclusion of protocol, server/host (http://www.eighteenfifty.com/)

• images are inline elements
• <img> - image element
• note that there is no "anti-tag" for this element - it is an inline tag
• usage: <img src="/images/widget_logo.gif">
• one of the most essential (and attribute-heavy!) tags
• some notes about images in general:
  • when used in word documents, usually a bitmap or windows metafile (.bmp, .wmf)
  • on web: must be one of two formats: .gif or .jpeg (.jpg)
  • referenced like hyperlinks, if you know complete url
  • more commonly referenced as inline, that is, as part of the document
  • common to have a directory where all images are placed: /images, /pics, /gifs, etc.
  • path names must be exact to access file
• attributes:
  • source of image (src):
    e.g., <img src="images/widget_logo.gif">
  • dimensions (width, height) in pixels:
    e.g., <img src="images/widget_logo.gif" width="574" height="99">
  • alternate display (alt):
    e.g., <img src="images/widget_logo.gif" width="574" height="99" alt="widget logo">
  • border width (border):
    e.g., <img src="images/widget_logo.gif" width="574" height="99" alt="widget logo" border="2">
  • text alignment (top, bottom, middle) - refers to text alignment in relation to image
  • image alignment (left, right) - refers to image position on page:
    e.g., <img src="images/widget_logo.gif" width="574" height="99" alt="widget logo" border="2" align="left">
  • spacing (hspace, vspace):
    e.g., <img src="images/widget_logo.gif" width="574" height="99" alt="widget logo" border="2" align="left" hspace="10" vspace="10">
• why do we need to be specific?
  • the more you can tell the browser about the structure of the document, the faster it will be served up to the user - and speed is crucial to this medium

Use the notes above (and your textbook) to add links and images to your WidgetWerks pages from last week. Download the week03 folder from the shared FTP space on signalflare. The starting files are located in a directory called ex01.

1. On the home page, add text at the end of the Technical Evolution section that says "Learn more about our stuff." and link it to the stuff page.
2. Also on the home page, add text at the end of the Friends & Neighbours section that says "Learn more about our partners." and link it to the partners page.
3. In the footer of all pages, make the phrase "runwithscissors design" a fully-qualified link to the runwithscissors site.
4. Also in the footer on all pages, create a bookmark link from the word "top" that links to the top of the page. Remember: you will need a label to link to (see notes).
5. On the stuff page, make the email address that appears near the bottom of the page a clickable link that points to your email address.
6. On each page add in a reference to the image with the same name, e.g., partners.jpg goes with partners.html. Add home.jpg to your index.html file. Be sure to include the width, height and alt attributes for each image.
7. On every page, add the WidgetWerks logo to the top of the page. Make it a link back to the home page.
8. Create a navigation bar horizontally across each page under the logo. Separate each element with a pipe (|) character. Here's an example:

   Home | Stuff | Partners

   Make sure you take the link off the text for the current page. Experiment with other formatting or ways to separate the navigation from content (horizontal rules, etc.).

9. Bonus: Align the images on each page to the right so that text wraps around them (excluding the logo).
10. Bonus: experiment with the background and text colours for your pages.

• we have seen that HTML is a structural language - tags(markup) tells browser how to display information based on it's semantic function:
  • heading
  • paragraph
  • sub-heading
  • list
• each element comes with predetermined set of characterisitcs with regard to font, colour, spacing, etc.
• HTML can change the appearance - that is, the presentation of a page - using attribute and values
• examples of presentational HTML:
  • <body bgcolor="#ffcc00" link="#005577" vlink="#5d5d5d" alink="#337799">
  • <h1 align="center"><font color="red" size="2">My heading</font></h1>
  • <table border="0 cellpadding="5" cellspacing="5">
  • <td bgcolor="#ffcc88" valign="top">
  • <blink>this text will blink</blink>
  • <marquee>this is a marquee</marquee>
• presentational HTML needs to be added on a per page basis - e.g., for links to be the same colour throughout a site, markup would have to be added to every page, which can get cumbersome and difficult to maintain
• olde-fashioned web design (circa 1995-1999) relied heavily on presentational markup to make pages look "sweet" - indeed proprietary tags fueled the browser wars and browser companies introduced proprietary tags in an effort to attract users and developers
• olde-fashioned web design also relies heavily on the <table> element to achieve page layout
• understanding tables is more than a history lesson:
  • many editors and authoring software continue to use tables as a primary layout tool
  • many sites are still built using these editors
  • as a web developer, it is important that you understand how they work and how they're used for layout, as not everyone is ready to switch to pure CSS-based development
• ideally, as we move from olde-fashioned to standards-based web design, we want to eliminate presentational markup from our pages and put them into separate style sheets - but it's not required for this introductory class
• both methods are not without their challenges - let's look at how we used to do it...

• originally intended for displaying tabular data - information in rows and columns
• quickly became indispensible to web designers looking to adhere to design principles of alignment and proximity
• common uses:
  • data display - schedules, statistics, etc.
  • text alignment - indents, columns, additional whitespace, etc.
  • page layout - establishing a layout grid for page elements such as headers, navigation, content, etc.
• markup behind tables is a bit tricky and not entirely intuitive:
  • constructed in rows, but columns are implied by number of cells in each row
  • a 3x3 table consists of 3 rows, but we must be sure to include 3 separate cells within each row for table to display as intended
• tables can be nested within tables allowing for complex and dynamic page layouts

• three elements required to make a table: <table><tr><td></td></tr></table>
• <table></table> - signifies that you are creating a table
• <tr></tr> - delimits a table row
• <td></td> - delimits the data in a table cell
• a sample table:
  

  <table>
<tr><td>top left</td><td>top right</td></tr>
<tr><td>bottom left</td><td>bottom right</td></tr>
</table>


• table attributes:
  • border - draws lines around your table: <table border="1">
  • width - specifies width of table in percentage or pixels:
    <table border="1" width="300">
  • cellpadding - adds space (in pixels) around objects in table cells:
    <table border="1" width="300" cellpadding="10">
  • cellspacing - adds space to borders between cells:
    <table border="1" width="300" cellpadding ="10" cellspacing="10">
• as with many attributes, there are default values - if you want them set to "zero" you must specify
• <td> attributes
  • width - width of cell in pixels
  • align - alignment of elements in cell (left (default), center, right)
  • valign - vertical alignment of elements in cell (top, middle (default), bottom)
  • colspan - cell spans 2 or more columns
  • rowspan - cell spans 2 or more rows
  • bgcolor - often specified in hexidecimal code (e.g. #ff0000)
• <tr> tag can also accept align, valign and bgcolor to apply the same values to an entire table row

Use the notes above to help recreate the tables on this page.

If you get through the two tables quickly enough, experiment with the attributes listed above. Here are some ideas:

1. Add cellpadding and cellspacing to the tables.
2. Change the background colour of the tables.
3. Change the background colour of one of the rows of the tables.
4. Change the background colour for one or more of the table cells in the tables.
5. Add an overall width to the table. What happnes if you use a percentage value versus a pixel value?
6. Add more text to one of your cells. What happens to the table? The other cells?
7. Change the vertical alignment of text so that it's different for every cell in a row. Do you see a change? What if you add more text?
8. Try adding another table inside one of the cells. What is inherited from the first table? What isn't?

• using tables for layout (in addition to being oldefashioned) can be tricky
• if you use them for layout, we suggest the following development steps:
  1. sketch the table
  2. identify the underlying grid
  3. plan where cells will span columns or rows
  4. create the structure in HTML
  5. add your content to the cell containers
• if your rowspan and colspan configurations get too complex, try nesting tables within cells or create separate tables for each horizontal element of a page (i.e., navbar, content, footer, etc.)
• remember that you can use valign, align and bgcolor in your <tr> tags to control settings in all cells in a table row
• decide on fixed width, relative width or combination layout:
  • fixed width:
    Advantage: greater control over proximity and design elements
    Disadvantage: horizontal scrollbars may be required on lower screen resolutions; can cause printing problems
  • relative width:
    Advantage: scales to suit the user's window
    Disadvantage: harder to control design elements
  • combination:
    Advantage: the best of both worlds: design harmony and usability!
    Disadvantage: can be extremely complex to construct, causing some browsers to choke on bloated table markup
• design with room for text to expand - don't place much emphasis on height
• beware of collapsing cells; every cell should contain at least a  
• fill in cell widths and be as specific as possible whenever you can - the less the browser has to guess about the less headaches you'll have!

Objective:
Reformat the WidgetWerks pages using tables for layout. Raw files available in the week03 folder under ex03.

Proposed layout:

General Steps:

1. Download the raw materials (text files, images, etc.) from the shared server.
2. Identify the underlying grid for the table: how many rows does it have? How many columns?
3. Plan where cells span columns or rows.
4. Build your table structure in HTML.
5. add your content into the empty cell containers.

Layout Specifications:

1. The entire table should fill a browser window. This means you will need to add an attribute to the <table> tag and give it a certain value.
2. The table should not have any extra spacing between the cells.
3. The table should not have any extra padding within the cells.
4. The logo cell should have a background colour that uses the following value: #eeeecc.
5. All cells in the middle row should have their content vertically aligned to the top of the row
6. The cell that contains the navigation buttons should use a fixed width of 200 pixels and have a background colour that uses the following value: #dddddd.
7. The cell that contains the navigation buttons should contain a nested table (one column, three rows, and one cell per row). Each cell should have a coloured background (pick a colour!).
8. Use the shim.gif image to hold the 2nd and 4th columns open to 25 pixels.
9. The content cell should be the only flexible cell in the second row.
10. The cell that contains the image should use a fixed width of 150 pixels.
11. The footer cell should use a background colour (again - pick one!)