AR340 WEB-BASED DESIGN ● INTERTERM 2010

XHTML and CSS

An Introduction
AR340 WEB-BASED DESIGN ● INTERTERM 2010

HTML
HyperText Markup Language
The code or rules that browsers read that define the
structure Web pages
 AR340 WEB-BASED DESIGN ● INTERTERM 2010

XHTML
eXtensible HTML
• “Cleaned up,” stricter HTML
• An application of XML
AR340 WEB-BASED DESIGN ● INTERTERM 2010

Purpose of XHTML

Define the structure of the Web page and its content

AR340 WEB-BASED DESIGN ● INTERTERM 2010

XHTML Terminology

<div class=“branding”>

<h1>Branding text.</h1>
</div>
<img src=“pic.jpg” alt=“ ” />
AR340 WEB-BASED DESIGN ● INTERTERM 2010

XHTML Terminology
Opening Tag

<div class=“branding”>

<h1>Branding text.</h1>
</div>
<img src=“pic.jpg” alt=“ ” />
AR340 WEB-BASED DESIGN ● INTERTERM 2010

XHTML Terminology
Opening Tag Attribute

<div class=“branding”>

<h1>Branding text.</h1>
</div>
<img src=“pic.jpg” alt=“ ” />
AR340 WEB-BASED DESIGN ● INTERTERM 2010

XHTML Terminology
Opening Tag Attribute Value

<div class=“branding”>

<h1>Branding text.</h1>
</div>
<img src=“pic.jpg” alt=“ ” />
AR340 WEB-BASED DESIGN ● INTERTERM 2010

XHTML Terminology
Opening Tag Attribute Value

<div class=“branding”>

<h1>Branding text.</h1>
End Tag
</div>
<img src=“pic.jpg” alt=“ ” />
AR340 WEB-BASED DESIGN ● INTERTERM 2010

XHTML Terminology
Opening Tag Attribute Value

<div class=“branding”>
Nonreplaceable Element
<h1>Branding text.</h1>
End Tag
</div>
<img src=“pic.jpg” alt=“ ” />
AR340 WEB-BASED DESIGN ● INTERTERM 2010

XHTML Terminology
Opening Tag Attribute Value

<div class=“branding”>
Nonreplaceable Element
<h1>Branding text.</h1>
End Tag
</div>
<img src=“pic.jpg” alt=“ ” />
AR340 WEB-BASED DESIGN ● INTERTERM 2010

XHTML Terminology
Opening Tag Attribute Value

<div class=“branding”>
Nonreplaceable Element
<h1>Branding text.</h1>
End Tag
</div>
<img src=“pic.jpg” alt=“ ” />
AR340 WEB-BASED DESIGN ● INTERTERM 2010

XHTML Terminology
Opening Tag Attribute Value

<div class=“branding”>
Nonreplaceable Element
<h1>Branding text.</h1>
End Tag
</div>
<img src=“pic.jpg” alt=“ ” />
AR340 WEB-BASED DESIGN ● INTERTERM 2010

XHTML Terminology
Opening Tag Attribute Value

<div class=“branding”>
Nonreplaceable Element
<h1>Branding text.</h1>
Replaceable Element
End Tag
</div>
<img src=“pic.jpg” alt=“ ” />
AR340 WEB-BASED DESIGN ● INTERTERM 2010

CSS
Cascading Stylesheets

The code or rules that browsers read to render and

display Web pages
AR340 WEB-BASED DESIGN ● INTERTERM 2010

Purpose of CSS

Control the appearance or presentation of Web

pages
CM475 SENIOR SEMINAR IN COMM

CSS Terminology

h1 { font-size: 2em; color: #66666; }

CM475 SENIOR SEMINAR IN COMM

CSS Terminology

Selector

h1 { font-size: 2em; color: #66666; }

CM475 SENIOR SEMINAR IN COMM

CSS Terminology

Selector

h1 { font-size: 2em; color: #66666; }

Property Property
CM475 SENIOR SEMINAR IN COMM

CSS Terminology

Selector

h1 { font-size: 2em; color: #66666; }

Property Value Property Value

CM475 SENIOR SEMINAR IN COMM

CSS Terminology

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

CM475 SENIOR SEMINAR IN COMM

CSS Terminology

Declaration block
Selector Declaration Declaration

h1 { font-size: 2em; color: #66666; }

Property Value Property Value

Rule
AR340 WEB-BASED DESIGN

Advantages of combining XHTML and CSS

 AR340 WEB-BASED DESIGN

Advantages of combining XHTML and CSS

• Separates structure and content from

presentation
 AR340 WEB-BASED DESIGN

Advantages of combining XHTML and CSS

• Separates structure and content from

presentation
• Simplifies and speeds revisions and redesign