intro to html elements and css declarations
DESCRIPTION
HTML tags, attributes and values. CSS selectors, properties, and values.TRANSCRIPT
HTML Elements and CSS DeclarationsAn Introduction
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Bruce Clary, McPherson College, McPherson, Kansas
HTMLHyperText Markup Language
The code or rules that browsers read that define the structure Web pages
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Purpose of HTML
Define the structure of the Web page and its content
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
<div class=“branding”>
<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />
The HTML Element
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
<div class=“branding”>
<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />
The HTML ElementOpening Tag
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
<div class=“branding”>
<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />
The HTML ElementAttributeOpening Tag
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
<div class=“branding”>
<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />
The HTML ElementAttribute ValueOpening Tag
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
<div class=“branding”>
<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />
The HTML ElementAttribute ValueOpening Tag
End Tag
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
<div class=“branding”>
<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />
Nonreplaceable Element
The HTML ElementAttribute ValueOpening Tag
End Tag
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
<div class=“branding”>
<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />
Nonreplaceable Element
The HTML ElementAttribute ValueOpening Tag
End Tag
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
<div class=“branding”>
<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />
Nonreplaceable Element
The HTML ElementAttribute ValueOpening Tag
End Tag
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
<div class=“branding”>
<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />
Nonreplaceable Element
The HTML ElementAttribute ValueOpening Tag
End Tag
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Replaceable Element
<div class=“branding”>
<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />
Nonreplaceable Element
The HTML ElementAttribute ValueOpening Tag
End Tag
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
CSSCascading Stylesheets
The code or rules that browsers read to render and display Web pages
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Purpose of CSS
Control the appearance or presentation of Web pages
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The CSS Declaration
h1 { font-size: 2em; color: #66666; }
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The CSS Declaration
h1 { font-size: 2em; color: #66666; }
Selector
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The CSS Declaration
h1 { font-size: 2em; color: #66666; }
Selector
Property Property
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The CSS Declaration
h1 { font-size: 2em; color: #66666; }
Selector
Property PropertyValue Value
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The CSS Declaration
Declaration Declaration
h1 { font-size: 2em; color: #66666; }
Selector
Property PropertyValue Value
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The CSS Declaration
Declaration block
Declaration Declaration
h1 { font-size: 2em; color: #66666; }
Selector
Property PropertyValue Value
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The CSS Declaration
Rule
Declaration block
Declaration Declaration
h1 { font-size: 2em; color: #66666; }
Selector
Property PropertyValue Value
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Advantages of HTML and CSS
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Advantages of HTML and CSS
• Separates structure and content from presentation
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Advantages of HTML and CSS
• Separates structure and content from presentation
• Simplifies and speeds revisions and redesign
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
