Get documents about "Lecture 2 - XHTML and CSS
Document Sample
Class Business
XHTML and CSS ϒ
λ !
"#
λ $ !
λ % &
λ
ϒ $ '
λ &
λ (
λ )
λ % * +
Class Business Coming Attractions
ϒ ϒ ' )
1 2.3 ( )
λ , ! λ . 4 (
λ * & + λ . 5 ( !
ϒ ( ϒ '
ϒ - & λ & ! '
λ 6 / / !
ϒ . /
ϒ . & ! 0 & ϒ 7! 0
λ ! . .
λ 4 ! (
ϒ . / &
λ !
Conceptual Categories Diagram HyperText Markup Language
XML Raw Data
Database File System
ϒ ' 2. &
Data Store
Data ϒ ' 2.
Web Server
.Net Java Servlets CGI λ ( & 7 !
Crypto λ &
Server API SSI Modules
Web Server λ )/ 7& ! 7
Middleware
ϒ %7
SSL HTTP FTP λ 8 9 8 9 7
Internet
Communications
λ : 8
JavaScript HTML/CSS DOM ;<
& =9$ 8 9
Web Browser
User Interface
Adapted from http://www.wdvl.com/Authoring/Tools/Tutorial/examples.html
1
History of HTML Sample HTML Document
ϒ ' 2. / /
ϒ / 6
5 >. %
(-
λ ! &
λ '
& & 2. ?
"?
λ : #@ ?A
"?
λ 5
( * (+ ?B
"?
λ 5 * ) "A A+ @@
#@
ϒ %7 ! 0 >
!
λ 5 0 C C &
λ & 8 09
XHTML XHTML Requirements
ϒ 1 2.
' ! / & ϒ 8 9
( ' 2. & ϒ 4 !
λ 1
C ' 2."@; ' 2. @"
8 ;<
& =9' 8 9
ϒ ??
"?D < ! 0 =
ϒ 4 / E
@"
#@
ϒ
ϒ '
1 2. 1 C
& 2. 8 94 . 8 9
0 & & ϒ ) ! 9
8 9
ϒ '
1 2.#@ && ϒ 4 7
λ 0! 8 ;< 0 7= 0 ;< 0 = 9
λ
XHTML Requirements DOCTYPE
ϒ 2 1 2.
' ϒ ) & ! / & ' 2.
1
ϒ / 1
& ' 2.
λ '
1 2."@)
λ ( F% ϒ 12. C
λ '
1 2."@
λ '
1 2. ϒ 4 !
λ ( & λ '
1 2."@
ϒ ! &
ϒ '
1 2. ! ϒ G '
1 2.)
ϒ ( F% &
λ / 1 C
& ' 2. 0 &
8H ( F % 5
I .( J> ( '
1 2."@
) %J
< !!! ! -7 " 7 ">
J9
2
Namespace Character Encoding
ϒ 8 9 / 7 ϒ 8 9 &8 9
ϒ &
ϒ . 0 & ! ϒ % C
8 & !
7 ;J !!! ! ??
"? 7 8 > E /;J( > <
J9 ;J 7 D ;I >KJ 9
XHTML Tag Basics Sample XHTML Document
8H ( F % 5
I .( J> ( '
1 2."@
ϒ 2 7 ! ) %<J !!! ! -7 " 7 ">
J9
8 7 ;J !!! ! ??
"? 7 J9
8 9' 8 9
8 > E /;J( > <
8 9 ;J 7 D ;I >K< 9
8 9' 8 9 8 9: 1 2.
' 8 9
8 9
ϒ ' 2. 8 9
8 9 8 9
8 9
ϒ 0 8 9$ 8 ;J
& ! J9
I / & 8 98 9
8 9
8 9
XHTML Validation Text Formatting
ϒ '
1 2. / &! ϒ 5 * +
ϒ ( / / / λ 8 9 8 9 7
/ ! ϒ * +
λ ( 0 & -
I . / λ 8 9 8 9 7
λ . & / '
1 2.
3
Text Formatting Page Headers
ϒ 8 9 8 9L ϒ C 7 !
λ . C
λ 4 '
1 2.#@
λ
ϒ ( 7 L
λ 8 98 9 8 "94 ' 8 "9
M L8 98 9 8 #9' 8 #9
λ *) &+
ϒ " B
ϒ 8 9 8 9L
λ '
1 2."@
λ ( & ! 0
Lists Miscellaneous
ϒ ! & * +
ϒ 8 9 ! M
* +
* +
ϒ ϒI
ϒ 8 9 0
8 9 8 9 λ 8
C 9
0
8 92 8 9 8 9. 8 9
8 9( 8 9 8 9)
8 9 8 9 . 8 9
8 9 8 9$ 8 9
8 9
Links (Anchors) Relative Links
ϒ 8 9 *N =+ 0 ϒ . 0
/
$ 8
ϒ ! 0 7 0 &
;< =9 8 9
*< =+
&
8
&
;< !!! =9$
ϒ ! 0 &< =
8 9
4
Relative Links Relative Links
ϒ / ϒ - > / . 0
: 8
8 ;<
& 7 =9
&
;< =9 8 9
8 9
λ <)
λ ! <$ = & ! / =
5
λ & ! 0 /
& /
Absolute Links Email Links
ϒ . 0 / ϒ
) ! 8
&;< !!! =9$ 8 ϒ 5 ! !
9 < = 0
λ &
ϒ %7 & &
ϒ 4/
ϒ / 0 !
& !
Images Tables
ϒ !
ϒ 8 9 0 & &
8 9
8 9
ϒ 7 & 8 9
! "! # $ #
8 9 ""
-( "#
-(
ϒ 4 8 9
8 ""
9- ( 8 9
8 "#
9- ( 8 9
λ > 8 9 #"
-( ##
-(
8 9
λ > / 7C& O 8 #"
9- ( 8 9
8 ##
9- ( 8 9
8 9
8 9
5
Content vs. Presentation
Cascading Style Sheets ϒ % / '
& 2.
&
λ ! C
λ C&
λ ) !
& >
Content vs. Presentation The Principle of Separation
ϒ ! / ϒ 2 ! / &
!
λ 4 ! * (C λ 5 ! )+
*( ) *' 2.+
+ λ 5 ! )
*P +
λ 4 ! & & *' 2.+
* 7+ λ 5 ! &
λ / λ 5 !
ϒ ) &7 C
ϒ
The Old Way Cascading Style Sheets
8 9 ϒ / &
8 9 & '
1 2. 12.
8 9 8 9
8 9
ϒ I ! 7
8 ;J J
0 7;J! J9
8& & @J
;JQ& @ @ & ;J' /
@ J9
R D > A7 S
D
7 ' / C ϒ 4 ! & &
8 & 9 &
8 9 λ
8 9 ϒ ' 2.
λ 5 !
ϒ I
6
Style Format Three Ways to Add Style
ϒ & ϒ . 0 &
8 0 ;J J ;J 7 J
R / D # ;J&
& J 9
/ D
# S ϒ 8 9 8 9
ϒ %7 8 9
R & >& ' / D D 8 ;J 7 J9
A D
R& > M " 7 S
S
8 9
R 0 > / DS 8 9
ϒ 4 & ϒ !
8 ;J DJ9' 8
H 9
Classes and IDs Using IDs
ϒ 6 ϒ Q &
! !
ϒ '! / C! ! Q R DS
& T
ϒ 8 9 7 8 9
& & 8 ;J J9 7 8 9
Using Classes More on Classes
ϒ % E ϒ &
ϒ ( &
ϒ * + & ϒ % /
)
()
p.small { font-size: small; } /* applies to p only
R& > M DS */
T .green { color: green; } /* applies to all */
8 9 7 8 9 …
8 ;< =9 7
8 9 <p class="small green">Small and green</p>
8 ;< =9) H
8 9 <li class="green">Just green</li>
7
div and span Representing Color
div and span have no specific formatting
ϒ
λ Use classes or IDs
ϒ CSS can change the color of page
ϒ Handy if you don’t want to redefine a common element elements
div#footer { color: silver; } ϒ CSS/XHTML provide a range of
span.mono { font-family: Courier; } predefined colors
…
<p>This is <span class="code">code text</span></p> λ Silver, Blue, GreenYellow, DarkRed
<div id="footer">This is the page footer</div>
λ List of named colors
ϒ Inline elements (like span) must be within block-level http://www.w3schools.com/html/html_colorna
elements (div, ul or ol, p) mes.asp
ϒ div is usually rendered as a p (i.e. wrapped with a double
line break)
Custom Colors Units of Measurement
ϒ Can specify additional colors in RGB format ϒ CSS provides multiple units of measurement for
λ Additive color model: combines red, green, blue to sizing and positioning objects
create any color λ px: pixels
ϒ Format: #rrggbb λ pt: points (1/72nd of an inch)
λ Where rr, gg, and bb are values in hexadecimal (base λ %: percent
16, or "hex") λ in: inch
λ Values range between 00 (0) and FF (255)
λ em: em unit (more on this later)
p { color: #ff0000; } /* red */ ϒ px is recommended for on-screen items and em
li { color: #990099; } /* purple */ for fonts
a {color: #000000; } /* black */ p.small { font-size: 0.8em; }
div.box { width: 400px; }
ϒ See
ϒ • See http://www.w3schools.com/css/css_units.asp
http://www.w3schools.com/html/html_colors.asp
What’s an “em unit” CSS For People and Devices
ϒ ϒ Multiple style sheets may exist for a single
ϒ & document
ϒ "@ ; ! & ϒ Author may specify different style sheets for
different types of readers
ϒ / /
λ PC screens
λ "A ; "A7 ! & M
λ Mobile phones
ϒ . / M
λ Screen readers
ϒ 2 &7 & ϒ Use the media attribute of <link> tag to specify
ϒ ( & !
& ! M ϒ a separate style sheet for different devices
7
8
Specifying Media Type CSS Overview
<html> ϒ CSS can change a large number of attributes
λ Color
<head> λ Font
<title>Blah blah blah</title> λ Positioning
λ Element spacing
<link rel="stylesheet" type="text/css“ λ Spoken characteristics (for spoken browsers)
href="screen.css" media="screen"/> λ …and many more
<link rel="stylesheet" type="text/css“ ϒ Advanced CSS can radically change a page
λ Change layout, images, colors
href="mobile.css" media="handheld, print"/>
ϒ Good reference:
</head> ϒ http://www.w3schools.com/css/css_reference.asp
9
Related docs
