Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

HTML Elements and
CSS Declarations
An Introduction

Bruce Clary, McPherson C...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

HTML
HyperText Markup Language
The code or rules that browsers read that def...
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

The HTML Element
<div class=“branding”>
<h1>Branding text.</h1>
</div>
<img ...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The HTML Element
Opening Tag

<div class=“branding”>
<h1>Branding text.</h1>...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The HTML Element
Opening Tag

Attribute

<div class=“branding”>
<h1>Branding...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The HTML Element
Opening Tag

Attribute

Value

<div class=“branding”>
<h1>B...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The HTML Element
Opening Tag

Attribute

Value

<div class=“branding”>
<h1>B...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The HTML Element
Opening Tag

Attribute

Value

<div class=“branding”>

Nonr...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The HTML Element
Opening Tag

Attribute

Value

<div class=“branding”>

Nonr...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The HTML Element
Opening Tag

Attribute

Value

<div class=“branding”>

Nonr...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The HTML Element
Opening Tag

Attribute

Value

<div class=“branding”>

Nonr...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The HTML Element
Opening Tag

Attribute

Value

<div class=“branding”>
<h1>B...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

CSS
Cascading Stylesheets
The code or rules that browsers read to render and...
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
Selector

h1 { font-size: 2em; color: #66666; }
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The CSS Declaration
Selector

h1 { font-size: 2em; color: #66666; }
Property...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The CSS Declaration
Selector

h1 { font-size: 2em; color: #66666; }
Property...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The CSS Declaration
Selector

Declaration

Declaration

h1 { font-size: 2em;...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The CSS Declaration
Declaration block
Selector

Declaration

Declaration

h1...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The CSS Declaration
Declaration block
Selector

Declaration

Declaration

h1...
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
presenta...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Advantages of HTML and CSS

•

Separates structure and content from
presenta...
Intro to HTML Elements and CSS Declarations
Upcoming SlideShare
Loading in …5
×

Intro to HTML Elements and CSS Declarations

1,780 views

Published on

HTML tags, attributes and values. CSS selectors, properties, and values.

Published in: Education, Technology, Design
  • Be the first to comment

Intro to HTML Elements and CSS Declarations

  1. 1. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION HTML Elements and CSS Declarations An Introduction Bruce Clary, McPherson College, McPherson, Kansas
  2. 2. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION HTML HyperText Markup Language The code or rules that browsers read that define the structure Web pages
  3. 3. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Purpose of HTML Define the structure of the Web page and its content
  4. 4. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The HTML Element <div class=“branding”> <h1>Branding text.</h1> </div> <img src=“pic.jpg” alt=“ ” />
  5. 5. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The HTML Element Opening Tag <div class=“branding”> <h1>Branding text.</h1> </div> <img src=“pic.jpg” alt=“ ” />
  6. 6. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The HTML Element Opening Tag Attribute <div class=“branding”> <h1>Branding text.</h1> </div> <img src=“pic.jpg” alt=“ ” />
  7. 7. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The HTML Element Opening Tag Attribute Value <div class=“branding”> <h1>Branding text.</h1> </div> <img src=“pic.jpg” alt=“ ” />
  8. 8. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The HTML Element Opening Tag Attribute Value <div class=“branding”> <h1>Branding text.</h1> </div> End Tag <img src=“pic.jpg” alt=“ ” />
  9. 9. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The HTML Element Opening Tag Attribute Value <div class=“branding”> Nonreplaceable Element <h1>Branding text.</h1> </div> End Tag <img src=“pic.jpg” alt=“ ” />
  10. 10. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The HTML Element Opening Tag Attribute Value <div class=“branding”> Nonreplaceable Element <h1>Branding text.</h1> </div> End Tag <img src=“pic.jpg” alt=“ ” />
  11. 11. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The HTML Element Opening Tag Attribute Value <div class=“branding”> Nonreplaceable Element <h1>Branding text.</h1> </div> End Tag <img src=“pic.jpg” alt=“ ” />
  12. 12. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The HTML Element Opening Tag Attribute Value <div class=“branding”> Nonreplaceable Element <h1>Branding text.</h1> </div> End Tag <img src=“pic.jpg” alt=“ ” />
  13. 13. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The HTML Element Opening Tag Attribute Value <div class=“branding”> <h1>Branding text.</h1> </div> End Tag Nonreplaceable Element Replaceable Element <img src=“pic.jpg” alt=“ ” />
  14. 14. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CSS Cascading Stylesheets The code or rules that browsers read to render and display Web pages
  15. 15. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Purpose of CSS Control the appearance or presentation of Web pages
  16. 16. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The CSS Declaration h1 { font-size: 2em; color: #66666; }
  17. 17. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The CSS Declaration Selector h1 { font-size: 2em; color: #66666; }
  18. 18. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The CSS Declaration Selector h1 { font-size: 2em; color: #66666; } Property Property
  19. 19. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The CSS Declaration Selector h1 { font-size: 2em; color: #66666; } Property Value Property Value
  20. 20. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The CSS Declaration Selector Declaration Declaration h1 { font-size: 2em; color: #66666; } Property Value Property Value
  21. 21. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The CSS Declaration Declaration block Selector Declaration Declaration h1 { font-size: 2em; color: #66666; } Property Value Property Value
  22. 22. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The CSS Declaration Declaration block Selector Declaration Declaration h1 { font-size: 2em; color: #66666; } Property Rule Value Property Value
  23. 23. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Advantages of HTML and CSS
  24. 24. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Advantages of HTML and CSS • Separates structure and content from presentation
  25. 25. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Advantages of HTML and CSS • Separates structure and content from presentation • Simplifies and speeds revisions and redesign

×