CM475 SENIOR SEMINAR IN COMM
XHTML and CSS
An Introduction

CM475 SENIOR SEMINAR IN COMM
HTML
HyperText Markup Language
The code or rules that browsers read
that defines the structure Web pages

CM475 SENIOR SEMINAR IN COMM
XHTML
eXtensible HTML
•“Cleaned up,” stricter HTML
•An application of XML

CM475 SENIOR SEMINAR IN COMM
Purpose of XHTML
Define the structure of the Web page
and its content

CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
<div class=“first”>
This is content.
</div>
<img src= “pic.jpg” alt=“ ” />

CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
Opening Tag
<div class=“first”>
This is content.
</div>
<img src= “pic.jpg” alt=“ ” />

CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
Opening Tag
<div class=“first”>
This is content.
End Tag
</div>
<img src= “pic.jpg” alt=“ ” />

CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
Opening Tag Attribute
<div class=“first”>
This is content.
End Tag
</div>
<img src= “pic.jpg” alt=“ ” />

CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
Opening Tag Attribute Value
<div class=“first”>
This is content.
End Tag
</div>
<img src= “pic.jpg” alt=“ ” />

CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
Opening Tag Attribute Value
<div class=“first”>
Nonreplaceable Element
This is content.
End Tag
</div>
<img src= “pic.jpg” alt=“ ” />

CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
Opening Tag Attribute Value
<div class=“first”>
Nonreplaceable Element
This is content.
End Tag
</div>
<img src= “pic.jpg” alt=“ ” />

CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
Opening Tag Attribute Value
<div class=“first”>
Nonreplaceable Element
This is content.
End Tag
</div>
<img src= “pic.jpg” alt=“ ” />

CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
Opening Tag Attribute Value
<div class=“first”>
Nonreplaceable Element
This is content.
End Tag
</div>
<img src= “pic.jpg” alt=“ ” />

CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
Opening Tag Attribute Value
<div class=“first”>
Nonreplaceable Element
This is content.
End Tag
</div>
<img src= “pic.jpg” alt=“ ” />

CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
Opening Tag Attribute Value
<div class=“first”>
Nonreplaceable Element
This is content.
End Tag
</div> Replaceable Element
<img src= “pic.jpg” alt=“ ” />

CM475 SENIOR SEMINAR IN COMM
CSS
Cascading Style Sheets
The code or rules that browsers read
to display and structure Web pages

CM475 SENIOR SEMINAR IN COMM
Purpose of CSS
Control the appearance or presentation
of the Web page

CM475 SENIOR SEMINAR IN COMM
CSS Terminology
h1 { font-size: 2em; color: #66666; }

CM475 SENIOR SEMINAR IN COMM
CSS Terminology
h1 { font-size: 2em; color: #66666; }
Property Property

CM475 SENIOR SEMINAR IN COMM
CSS Terminology
h1 { font-size: 2em; color: #66666; }
Property Value Property Value

CM475 SENIOR SEMINAR IN COMM
CSS Terminology
Declaration Declaration
h1 { font-size: 2em; color: #66666; }
Property Value Property Value

CM475 SENIOR SEMINAR IN COMM
CSS Terminology
Declaration block
Declaration Declaration
h1 { font-size: 2em; color: #66666; }
Property Value Property Value

CM475 SENIOR SEMINAR IN COMM
CSS Terminology
Declaration block
Selector Declaration Declaration
h1 { font-size: 2em; color: #66666; }
Property Value Property Value

CM475 SENIOR SEMINAR IN COMM
CSS Terminology
Declaration block
Selector Declaration Declaration
h1 { font-size: 2em; color: #66666; }
Property Value Property Value
Rule

CM475 SENIOR SEMINAR IN COMM
Advantages of combining
XHTML and CSS
•presentation
Separates structure and content from
•Simplifies, speeds revisions, redesigns