intro to xhtml/css
TRANSCRIPT
XHTML and CSSAn Introduction
CM475 SENIOR SEMINAR IN COMM
CM475 SENIOR SEMINAR IN COMM
HTMLHyperText Markup Language
The code or rules that browsers readthat defines the structure Web pages
CM475 SENIOR SEMINAR IN COMM
XHTMLeXtensible 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
<div class=“first”>
This is content.
</div>
<img src= “pic.jpg” alt=“ ” />
Opening Tag
CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
<div class=“first”>
This is content.
</div>
<img src= “pic.jpg” alt=“ ” />
Opening Tag
End Tag
CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
<div class=“first”>
This is content.
</div>
<img src= “pic.jpg” alt=“ ” />
AttributeOpening Tag
End Tag
CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
<div class=“first”>
This is content.
</div>
<img src= “pic.jpg” alt=“ ” />
Attribute ValueOpening Tag
End Tag
CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
Nonreplaceable Element <div class=“first”>
This is content.
</div>
<img src= “pic.jpg” alt=“ ” />
Attribute ValueOpening Tag
End Tag
CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
Nonreplaceable Element <div class=“first”>
This is content.
</div>
<img src= “pic.jpg” alt=“ ” />
Attribute ValueOpening Tag
End Tag
CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
Nonreplaceable Element <div class=“first”>
This is content.
</div>
<img src= “pic.jpg” alt=“ ” />
Attribute ValueOpening Tag
End Tag
CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
Nonreplaceable Element <div class=“first”>
This is content.
</div>
<img src= “pic.jpg” alt=“ ” />
Attribute ValueOpening Tag
End Tag
CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
Nonreplaceable Element <div class=“first”>
This is content.
</div>
<img src= “pic.jpg” alt=“ ” />
Attribute ValueOpening Tag
End Tag
CM475 SENIOR SEMINAR IN COMM
XHTML Terminology
Nonreplaceable Element
Replaceable Element
<div class=“first”>
This is content.
</div>
<img src= “pic.jpg” alt=“ ” />
Attribute ValueOpening Tag
End Tag
CM475 SENIOR SEMINAR IN COMM
CSSCascading Style Sheets
The code or rules that browsers readto 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 PropertyValue Value
CM475 SENIOR SEMINAR IN COMM
CSS Terminology
Declaration Declaration
h1 { font-size: 2em; color: #66666; }
Property PropertyValue Value
CM475 SENIOR SEMINAR IN COMM
CSS TerminologyDeclaration block
Declaration Declaration
h1 { font-size: 2em; color: #66666; }
Property PropertyValue Value
CM475 SENIOR SEMINAR IN COMM
CSS TerminologyDeclaration block
Declaration Declaration
h1 { font-size: 2em; color: #66666; }
Selector
Property PropertyValue Value
CM475 SENIOR SEMINAR IN COMM
CSS Terminology
Rule
Declaration block
Declaration Declaration
h1 { font-size: 2em; color: #66666; }
Selector
Property PropertyValue Value
•Separates structure and content from presentation
•Simplifies, speeds revisions, redesigns
CM475 SENIOR SEMINAR IN COMM
Advantages of combining XHTML and CSS
