More xHTML (links & tables)

INFO/COM S 130: Introductory Web Design and Programming

Misc announcements
Sections The right section Attendance Project Groups Web Site and CMS issues Email subject line

Review
On the web, content is separate from presentation XHTML annotates content so computers can present it
By embedding tags

Browsers are inconsistent in interpretation

Test early, test often

90% of your time will be debugging

Some really nice tools for Firefox

Firebug https://addons.mozilla.org/en-US/firefox/ addon/1843 Xray - http://www.westciv.com/xray/ IE Tab - http://ietab.mozdev.org/ Web Developer https://addons.mozilla.org/en-US/firefox/ addon/60

Advanced XHTML

INFO/COM S 130: Introductory Web Design and Programming

From last time

So far weve learned about some pretty simple XHTML tags.

Hyperlinks

Hyperlinks
<a href=URL>anchor text</a> <a href=http://cs130.cs.cornell.edu> CS/ INFO 130 Server</a>
CS/INFO 130 Server

Absolute URLs
Give the entire web address: used to link to outside resources <a href="http://www.mozilla.org/">Use Firefox!</a> <a href="http://www.google.com"> Google</a>

Relative URLs
Used to link within a site <a href="index.html">Home</a> <a href=People/fred.html">Fred's subpage</a> In Fred's page: <a href="../index.html">Home</a> Why not use http:// www.myco.com/People/ fred.html?

Linking into a page

<a href=#news> Click here to go to the news section </a> <h2 id=news>The News</h2>
One can also link to/from other pages this way: <a href=http://www.liver.com/#news>Liver Lovers Club News</a>

Structuring linked sites

Main page = "index.html" Subpages organized into directories
(e.g. academics/, admissions/) Relative URLs

Outside links: absolute URLs

Don't open in separate window

Avoid funny characters (including " ")

How is the Cornell site organized?

Images

Adding images
<img src="cornell_logo.gif" width="100" height="200" alt="Cornell" />

Use informative alt tags!

The 5 Commandments for Efficient Images

1. Use small images 2. Link to larger images (e.g. via thumbnails) 3. Specify width and height 4. Reuse images 5. Use alt

Combinations
What does the following do? <a href=http://www.cornell.edu> <img src=cornell_logo.gif width=100 height=200 alt=Cornell /> </a>

What if we want to organize information in two dimensions?

Tables

Tables
Let you structure information on a page Useful for table data Useful for laying out forms

Tables made from rows

Simple tables
<table> <tr> <td>..</td> <td>..</td> </tr> <tr> <td>..</td> <td>..</td> </tr> .. </table> Let's try it

Example
<table> <tr> <td>Admissions</td> <td>Academics</td> </tr> <tr> <td>Research</td> <td>Outreach</td> </tr> </table>

Borders
To make the border appear: <table border="1">

To make sure of no border: <table border="0">

Making complex tables

colspan combines columns

<table border="1"> <tr> <td>cell 1</td> <td colspan="2">cell 2</td> <!-- no third cell is needed, since cell 2 takes up two spaces --> </tr> <tr> <td>cell 4</td> <td>cell 5</td> <td>cell 6</td> </tr> </table>

rowspan combines rows

<table border="1"> <tr> <td rowspan="2">cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> <tr> <!-- note that I don't list the first cell in this row, since cell 1 overlaps it --> <td>cell 5</td> <td>cell 6</td> </tr> </table>

More tricks with tables

<table border="1"> <caption> Welcome to Cornell! </caption> <tr> <td>Admissions</td> <td>Academics</td> </tr> <tr> <td>Research</td> <td>Outreach</td> </tr> </table>

Headings
<table border="1"> <caption> Hockey standings </ caption> <thead> <tr> <th>Team</th> <th>Wins</th> <th>Losses</th> </tr> </thead> <tr> <td>Cornell</td> <td>8</td> <td>0</td> </tr> <tr> <td>Harvard</td> <td>0</td> <td>8</td> </tr> </table>

Lists

Lists organize information

<p> There are two types of lists: <ul> <li> Unordered lists </li> <li> Ordered lists </li> </ul> </p>

<p> There are two types of lists: <ol> <li> Unordered lists </li> <li> Ordered lists </li> </ol> </p>

A word about coding style

<table border="1"> <caption> Welcome to Cornell! </caption> <tr> <td>Admissions</td> <td>Academics</td> </tr> <tr> <td>Research</td> <td>Outreach</td> </tr> </table> <table border="1"> <caption> Welcome to Cornell! </caption> <tr> <td> Admissions</td> <td> Academics</td> </tr> <tr> <td> Research </td><td>Outreach</td> </tr> </table>

But our pages still look BORING!!

Content vs. presentation

So far, all about content. What about presentation? In CSS

Review
HTML structures: links, images, lists, tables Site organization 5 Commandments of images Wednesday: Information architecture and navigation design