1. CM475 SENIOR SEMINAR IN COMM
XHTML and CSS
An Introduction

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

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

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

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

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

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

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

9. 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=“ ” />

10. 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=“ ” />

11. 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=“ ” />

12. 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=“ ” />

13. 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=“ ” />

14. 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=“ ” />

15. 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=“ ” />

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

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

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

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

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

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

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

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

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

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