intro to xhtml/css

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