lecture 05 - xhtml

8/22/2019 Lecture 05 - XHTML

1/47

More xHTML (links & tables)

INFO/COM S 130:

Introductory Web Design and

Programming


2/47

Misc announcements

Sections

The right sectionAttendance

Project Groups

Web Site and CMS issuesEmail subject line


3/47

Review

On the web, content is separate frompresentation

XHTML annotates content socomputers can present it

By embedding tagsBrowsers are inconsistent ininterpretation

Test early, test often


4/47

90% of your time will be

debugging


5/47

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


6/47

Advanced XHTML

INFO/COM S 130:

Introductory Web Design andProgramming


7/47

From last time

So far weve learned about some pretty

simple XHTML tags.


8/47


9/47


10/47

Hyperlinks


11/47


12/47


13/47

Hyperlinks

anchor text

CS/

INFO 130 Server

CS/INFO 130 Server


14/47

Absolute URLs

Give the entire web address: used to link

to outside resources

Use

Firefox!

Google


15/47

Relative URLsUsed to link within a site

Home


16/47


17/47

Linking into a page Click here to go to the

news section

The News

One can also link to/from other pages this way:

Liver

Lovers Club News


18/47

Structuring linked sites

Main page = "index.html"

Subpages organized into directories

(e.g. academics/, admissions/)

Relative URLs

Outside links: absolute URLs

Don'topen in separate window

Avoid funny characters (including " ")


19/47

How is the Cornell site

organized?


20/47


21/47

Images


22/47

Adding images

Use informative alt tags!


23/47


24/47

The 5 Commandments for

Efficient Images


25/47

1. Use small images2. Link to larger images (e.g. via

thumbnails)

3. Specify width and height4. Reuse images5. Use alt


26/47

Combinations

What does the following do?


27/47

What if we want to organizeinformation in two dimensions?


28/47

Tables


29/47

TablesLet you structure

information on a

pageUseful for table data

Useful for laying out

forms


30/47

Tables made from rows


31/47

Simple tables

..

..

..

..

..

Let's try it


32/47

Example

AdmissionsAcademics

Research

Outreach


33/47

BordersTo make the border

appear:

To make sure of noborder:


34/47

Making complex tables


35/47

colspan combines columns

cell 1cell 2

cell 4

cell 5

cell 6


36/47

rowspan combines rows

cell 1cell 2

cell 3

cell 5

cell 6


37/47

More tricks with tables

Welcome to Cornell!

Admissions

Academics

ResearchOutreach


38/47

Headings

Hockey standings

TeamWins

Losses

Cornell

8

0

Harvard

0

8


39/47

Lists


40/47

Lists organize information

There are two types

of lists:

Unordered lists

Ordered lists


41/47

There are two types

of lists:

Unordered lists

Ordered lists


42/47


43/47

A word about coding style

Welcome to Cornell!

Admissions

Academics

ResearchOutreach

Welcome to

Cornell!

Admissions Academics Research Outreach


44/47


45/47

But our pages still look

BORING!!


46/47

Content vs. presentationSo far, all about content. What about

presentation?

In CSS


47/47

ReviewHTML structures: links, images, lists,

tables

Site organization 5 Commandments of imagesWednesday: Information architecture and

navigation design

lecture 05 - xhtml

Documents