Lecture 05 - XHTML
Transcript of Lecture 05 - XHTML
-
8/22/2019 Lecture 05 - XHTML
1/47
More xHTML (links & tables)
INFO/COM S 130:
Introductory Web Design and
Programming
-
8/22/2019 Lecture 05 - XHTML
2/47
Misc announcements
Sections
The right sectionAttendance
Project Groups
Web Site and CMS issuesEmail subject line
-
8/22/2019 Lecture 05 - XHTML
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
-
8/22/2019 Lecture 05 - XHTML
4/47
90% of your time will be
debugging
-
8/22/2019 Lecture 05 - XHTML
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
-
8/22/2019 Lecture 05 - XHTML
6/47
Advanced XHTML
INFO/COM S 130:
Introductory Web Design andProgramming
-
8/22/2019 Lecture 05 - XHTML
7/47
From last time
So far weve learned about some pretty
simple XHTML tags.
-
8/22/2019 Lecture 05 - XHTML
8/47
-
8/22/2019 Lecture 05 - XHTML
9/47
-
8/22/2019 Lecture 05 - XHTML
10/47
Hyperlinks
-
8/22/2019 Lecture 05 - XHTML
11/47
-
8/22/2019 Lecture 05 - XHTML
12/47
-
8/22/2019 Lecture 05 - XHTML
13/47
Hyperlinks
anchor text
CS/
INFO 130 Server
CS/INFO 130 Server
-
8/22/2019 Lecture 05 - XHTML
14/47
Absolute URLs
Give the entire web address: used to link
to outside resources
Use
Firefox!
Google
-
8/22/2019 Lecture 05 - XHTML
15/47
Relative URLsUsed to link within a site
Home
-
8/22/2019 Lecture 05 - XHTML
16/47
-
8/22/2019 Lecture 05 - XHTML
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
-
8/22/2019 Lecture 05 - XHTML
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 " ")
-
8/22/2019 Lecture 05 - XHTML
19/47
How is the Cornell site
organized?
-
8/22/2019 Lecture 05 - XHTML
20/47
-
8/22/2019 Lecture 05 - XHTML
21/47
Images
-
8/22/2019 Lecture 05 - XHTML
22/47
Adding images
Use informative alt tags!
-
8/22/2019 Lecture 05 - XHTML
23/47
-
8/22/2019 Lecture 05 - XHTML
24/47
The 5 Commandments for
Efficient Images
-
8/22/2019 Lecture 05 - XHTML
25/47
1. Use small images2. Link to larger images (e.g. via
thumbnails)
3. Specify width and height4. Reuse images5. Use alt
-
8/22/2019 Lecture 05 - XHTML
26/47
Combinations
What does the following do?
-
8/22/2019 Lecture 05 - XHTML
27/47
What if we want to organizeinformation in two dimensions?
-
8/22/2019 Lecture 05 - XHTML
28/47
Tables
-
8/22/2019 Lecture 05 - XHTML
29/47
TablesLet you structure
information on a
pageUseful for table data
Useful for laying out
forms
-
8/22/2019 Lecture 05 - XHTML
30/47
Tables made from rows
-
8/22/2019 Lecture 05 - XHTML
31/47
Simple tables
..
..
..
..
..
Let's try it
-
8/22/2019 Lecture 05 - XHTML
32/47
Example
AdmissionsAcademics
Research
Outreach
-
8/22/2019 Lecture 05 - XHTML
33/47
BordersTo make the border
appear:
To make sure of noborder:
-
8/22/2019 Lecture 05 - XHTML
34/47
Making complex tables
-
8/22/2019 Lecture 05 - XHTML
35/47
colspan combines columns
cell 1cell 2
cell 4
cell 5
cell 6
-
8/22/2019 Lecture 05 - XHTML
36/47
rowspan combines rows
cell 1cell 2
cell 3
cell 5
cell 6
-
8/22/2019 Lecture 05 - XHTML
37/47
More tricks with tables
Welcome to Cornell!
Admissions
Academics
ResearchOutreach
-
8/22/2019 Lecture 05 - XHTML
38/47
Headings
Hockey standings
TeamWins
Losses
Cornell
8
0
Harvard
0
8
-
8/22/2019 Lecture 05 - XHTML
39/47
Lists
-
8/22/2019 Lecture 05 - XHTML
40/47
Lists organize information
There are two types
of lists:
Unordered lists
Ordered lists
-
8/22/2019 Lecture 05 - XHTML
41/47
There are two types
of lists:
Unordered lists
Ordered lists
-
8/22/2019 Lecture 05 - XHTML
42/47
-
8/22/2019 Lecture 05 - XHTML
43/47
A word about coding style
Welcome to Cornell!
Admissions
Academics
ResearchOutreach
Welcome to
Cornell!
Admissions Academics Research Outreach
-
8/22/2019 Lecture 05 - XHTML
44/47
-
8/22/2019 Lecture 05 - XHTML
45/47
But our pages still look
BORING!!
-
8/22/2019 Lecture 05 - XHTML
46/47
Content vs. presentationSo far, all about content. What about
presentation?
In CSS
-
8/22/2019 Lecture 05 - XHTML
47/47
ReviewHTML structures: links, images, lists,
tables
Site organization 5 Commandments of imagesWednesday: Information architecture and
navigation design