Tables, XHTML and CSS

1
Tables, XHTML and CSS Controlling Content
Introduction to Design
http//mason.gmu.edu/pagebuilder/
2
Words to live by. . .
3
Starting out. . .
html is the native language of the Internet. It
is pleasant and easygoing, lets writers make
mistakes, makes no demands. Structural xhtml is
stronger, more flexible, more likely to be
supported in the future, and can be expanded to
fit any need. Structural CSS (Cascading Style
Sheets) is the tool used to define the appearance
of the site, the style of the display.
4
The working Space HTML
5
DOCTYPE Declaration
For HTML transitional (or loose) (Use this
doctype if your document is in HTML but contains
one or more deprecated tags.) PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN
"http//www.w3.org/TR/html4/loose.dtd"
For HTML strict (Use this doctype if your
document is in HTML and contains no deprecated
tags.) HTML 4.01//EN "http//www.w3.org/TR/html4/strict
.dtd"
6
Note. . .

• Message to the browser
• Transitional regular html, no worries
• Strict no deprecated elements

7
HTML Review
8
Font Groups

• Arial, Helvetica, sans serif
• Times New Roman, Times, serif
• Courier New, Courier, mono
• Georgia, Times New Roman, Times, serif
• Verdana, Arial, Helvetica, sans serif
• Geneva, Arial, Helvetica, sans serif

I like Comic Sans MS, Arial, Helvetica, sans
serif. . .
9
The Table. . .
10
cellspacing"0" border"0" align"left" rowspan2 valign"top" face"Comic Sans MS, Arial, Helvetica,
sans-serif" size"2"width150 height7 border0 alt""
valign"bottom" width154 height154 border0 alt"START"
usemap"topleft" align"left" valign"bottom" src"logstuff2.gif" width158 height154 border0
alt"STARS" usemap"toprite"
src"logstuff3.gif" width154 height154 border0
alt"STARworks" usemap"botleft" align"left" valign"top" src"logstuff4.gif" width158 height155 border0
alt"webSTAR" usemap"botrite"

11
Whew!!!
12
The Table. . .

• Tables can be problematic in re accessibility.
  CSS is better.
• You cant make the table too small for its
  contents the widest cell in the column
  determines the width of the entire column.
• A table sized with percentages will adjust as
  browser window is resized. Tables sized with
  pixels will not.
• You cant align a table with text the way you can
  align images with text.
• Use borders and background colors during
  development to determine proper placement of
  tables and cells.
• Cellpadding the space between the edge of the
  cell and its contents Cellspacing the space
  between cells
• Border attribute applies to table and cells if
  you use it alone (border) or borderborder
  you get a black 1 pixel outset border by default.
• Borders come in groove, ridge, inset and outset.

13
XHTML eXtensible HyperText Modeling Language
14
html is. . .

• difficult to extend (i.e. by adding new
  markup components) and have new features
  understood by existing browsers
• difficult to write software that processes
  html documents incorporating extensions or
  additions
• difficult to mix html documents with other
  forms of data (such as text, in another markup
  language)

15
xhtml. . .

• Reintroduces structure to the language
• Provides the ability to validate the document
• Accommodates new devices
• Is way more rigorous than HTML and requires
  close attention to details
• Is logical markup that is critical for
  effectively using style sheets
• Is case-sensitive (use only lower case, no caps)

16
The working Space XHTML
17
DOCTYPE Declaration
For XHTML transitional (Use this doctype if your
document is in XHTML and contains deprecated
tags.) 1.0 Transitional//EN "http//www.w3.org/TR/xhtml
1/DTD/xhtml1-transitional.dtd"

xhtml namespace
content

For XHTML strict (Use this doctype when you're
not using any deprecated or frameset tags with
XHTML.) XHTML 1.0 Strict//EN "http//www.w3.org/TR/xhtml
1/DTD/xhtml1-strict.dtd"
18
http//www.cookwood.com/html/extras/xhtml_ref.html
xhtml. . .

• Requires empty elements to close
• li (lists)
• br (break)
  
• hr (horiz. rule (without attributes)
• img (image) (
• p (paragraph
• Requires attributes to be in quotation marks

19
Markup. . .

• Elements - Labels that identify structure
• (anchor) are elements
• Attributes (Properties) - Information about
  the content of the document
• Color bgcolor src colspan
  href are attributes
• Values - describe the attribute
• red 000000 url 2 are values

20
Cascading Style Sheets (CSS)
21
Principles

• Compatible
• Structured
• Device and platform independent
• Easily maintained
• Simple
• Flexible
• Binding to other technologies
• Accessible

22
Applications

• Aural
• Braille
• Handheld
• Print
• Projection
• Screen
• TTY
• TV

23
CSS Tip
A very important thing to remember as you begin
is that you must sketch out or draft the basic
structure of the page, grounded upon the content
before beginning the CSS construction, so that
you can visualize how the page will be laid out
in CSS. CSS establishes space for the page
components.
24
Style. . .
Inline Style Sheets Inline style sheets are
useful when you want to override some other style
definition applied by an embedded or an external
style sheet, 1.) if you have just one element
in your page thats going to use this particular
style and 2.) it doesn't need to be defined in
your style sheet. Inline styles are similar to
embedded styles, in that they are a part of the
HTML document. However, they are written as an
attribute of the tag you want to style. Here is
an example of some sample code from an inline
style font-family VerdanaThis is some sample
text. Inline styles are much less
powerful than embedded or external style sheets,
because if you ever want to change the style, you
will have to do it every place the inline style
appears in the document. Use inline styles for
one-off styles that you wont use anywhere else
in your entire site.
25
Style. . .
Embedded Style Sheets Embedded Style Sheets are
an internal part of the HTML document. All of the
code is written inside the tag of the
document and affects only this one page. Simple
sample embedded CSS code looks like this. typetext/css Embedded
Style Sheets are useful if you want to apply
styles to a single page only.
26
Style. . .
External (Linked) Style Sheets External Style
Sheets, also referred to as Linked style
sheets, are the most powerful type of style sheet
because you can use one sheet to format hundreds,
thousands, and even millions of pages. If you
make a change to the external style sheet, all of
the pages that link to the style sheet are
instantly updated to reflect the new style(s).
The contents of an external style sheet file
look just like the contents of an embedded style
sheet, except it is not part of the HTML page.
Instead, it is stored as separate file with a
.css extension. The .css file simply contains a
list of styles, with no other HTML code. Instead
of embedding the code in the document, you make a
link to the external CSS file. Heres an
example hrefmystyles.css typetext/css /
27
The Working Space CSS
Style information
28
Tags
http//www.cookwood.com/html/extras/cssref.html
Element Element Selector Declarations property
value Rule Selector declaration
29
(No Transcript)
30
http//media.gmu.edu Updated to CSS
src"logstuff1.gif" width154 height154
alt"START" usemap"topleft" id"center2" src"logstuff2.gif" width158
height154 alt"STARS" usemap"toprite" id"center3" src"logstuff3.gif" width154
height154 alt"STARworks" usemap"botleft"
height155 alt"webSTAR" usemap"botrite"

31
Style sheet entries
main Margin-top 5px Float right Width
410px Height 300px
center3 float left padding-top
-30px padding-right 00px padding-left
60px padding-bottom 30px center4 float
left padding-top -30px padding-right
10px padding-left 0px padding-bottom 30px
center1 float left padding-top
-30px padding-right 0px padding-left
60px padding-bottom 0px center2 float
left padding-top -30px padding-right
10px padding-left 0px padding-bottom 0px
32
A piece of an external style sheet
Body font-familyComic Sans MS, Arial,
sans-serif color000000 font-size 11px
line-height 15px .small font 10px
"Comic Sans MS", Arial, sans-serif h1
font-familyComic Sans MS, Arial, sans-serif
color000000 font-size 11px line-height
16px container width 725px
margin-left auto margin-right auto
alink color 000000 text-decoration
none avisited color 006400
text-decoration none
ahover color 008000 text-decoration
none aactive color 4189E1
text-decoration none
33
Sneaky stuff
height"10px" alt"space" /
http//www.cookwood.com/html/extras/entities.html
html
34
Some books. . .
Castro, Elizabeth, HTML, XHTML CSS (Visual
QuickStart Guide) Sixth Edition Holszchlag,
Molly, Cascading Style Sheets the designers edge
A good, all-around guide Graham, Ian S. XHTML
language and design sourcebook