Scribd
Upload
47 views

More XHTML (Links & Tables) : INFO/COM S 130: Introductory Web Design and Programming

This document discusses various XHTML tags for structuring web content, including hyperlinks, images, tables, and lists. It provides examples of how to implement these tags and notes best practices for image usage, table design, and site organization. The document also previews that the next session will cover information architecture and navigation design using CSS for presentation.

Uploaded by

Mark Lu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
47 views

More XHTML (Links & Tables) : INFO/COM S 130: Introductory Web Design and Programming

This document discusses various XHTML tags for structuring web content, including hyperlinks, images, tables, and lists. It provides examples of how to implement these tags and notes best practices for image usage, table design, and site organization. The document also previews that the next session will cover information architecture and navigation design using CSS for presentation.

Uploaded by

Mark Lu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 47

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

You might also like