Slide 1
Slide 1 text
XHTML/CSS
Structure and Presentation
Tuesday, September 1, 2009
Slide 2
Slide 2 text
XHTML
Structure
http://www.w3schools.com/Xhtml/
http://www.daaq.net/old/xhtml/index.php
Tuesday, September 1, 2009
Slide 3
Slide 3 text
tag based
![]()
Tuesday, September 1, 2009
Slide 4
Slide 4 text
close vs. self close
Tuesday, September 1, 2009
Slide 6
Slide 6 text
self-close
(never use this) Tuesday, September 1, 2009
(never use this) Tuesday, September 1, 2009
Slide 7
Slide 7 text
What goes with what?
div division, structurally grouping
other tags together
p paragraph of text
h1-h6 headings for
sections of content
strong bold, really emphasize
em italic, slightly emphasize
img image
a link to something
Tuesday, September 1, 2009
Slide 8
Slide 8 text
attributes
id, class, href, src, alt
name = ”value”
Tuesday, September 1, 2009
Slide 9
Slide 9 text
id
no two elements can have same id
think social security number
Tuesday, September 1, 2009
Slide 10
Slide 10 text
class
extra hooks for styling and selecting
descriptors like item, content, post, message
Tuesday, September 1, 2009
Slide 12
Slide 12 text
src and alt
Tuesday, September 1, 2009
Tuesday, September 1, 2009
Slide 13
Slide 13 text
inline vs. block
Tuesday, September 1, 2009
Slide 14
Slide 14 text
inline
a, img, span, strong, em
http://www.daaq.net/old/xhtml/index.php?page=xhtml+inline+elements&parent=xhtml+basics
Tuesday, September 1, 2009
Slide 15
Slide 15 text
block
div, p, h1-h6,
http://www.daaq.net/old/xhtml/index.php?page=xhtml+block+elements&parent=xhtml+basics
Tuesday, September 1, 2009
Slide 16
Slide 16 text
basic structure
Tuesday, September 1, 2009
Slide 17
Slide 17 text
Tuesday, September 1, 2009
Slide 18
Slide 18 text
Tuesday, September 1, 2009
Slide 19
Slide 19 text
Tuesday, September 1, 2009
Slide 20
Slide 20 text
Example
Tuesday, September 1, 2009
Slide 21
Slide 21 text
Example
Tuesday, September 1, 2009
Slide 23
Slide 23 text
Example
Tuesday, September 1, 2009
Slide 24
Slide 24 text
Paths
absolute, relative, root-relative
Tuesday, September 1, 2009
Slide 25
Slide 25 text
absolute
http://nd.edu/aboutnd/history/
Tuesday, September 1, 2009
Slide 26
Slide 26 text
relative
if we are on nd.edu/aboutnd/
and we link to history/
it would go to nd.edu/aboutnd/history/
Tuesday, September 1, 2009
Slide 27
Slide 27 text
root-relative
if we are on the site nd.edu
and we link to /aboutnd/history/
it would go to nd.edu/aboutnd/history/
Tuesday, September 1, 2009
Slide 28
Slide 28 text
css
presentation
http://www.daaq.net/old/css/index.php
http://www.w3schools.com/css/
Tuesday, September 1, 2009
Slide 29
Slide 29 text
selectors
id uses #
div#navigation
#navigation
class uses .
div.post
.post
Tuesday, September 1, 2009
Slide 30
Slide 30 text
div#navigation
XHTML CSS
div.post
.post
#navigation
Tuesday, September 1, 2009
Slide 31
Slide 31 text
syntax
selector { attribute:value; attribute2:value2 }
Tuesday, September 1, 2009
Slide 32
Slide 32 text
examples
div#navigation {background:black}
div.post {width:400px; font-size:11px;}
Tuesday, September 1, 2009
Slide 33
Slide 33 text
WebFile
http://webfile.nd.edu
http://eds.nd.edu/
http://oit.nd.edu/shared_file_space/
Tuesday, September 1, 2009