CM475 SENIOR SEMINAR IN COMM




              XHTML and CSS
                               An Introduction
CM475 SENIOR SEMINAR IN COMM




                               HTML
     HyperText Markup Language
    The code or rules ...
CM475 SENIOR SEMINAR IN COMM




                          XHTML
                   eXtensible HTML

   •“Cleaned up,” str...
CM475 SENIOR SEMINAR IN COMM




                 Purpose of XHTML
    Define the structure of the Web page
              ...
CM475 SENIOR SEMINAR IN COMM



  XHTML Terminology

             <div class=“first”>
             This is content.
       ...
CM475 SENIOR SEMINAR IN COMM



  XHTML Terminology
         Opening Tag


             <div class=“first”>
             Th...
CM475 SENIOR SEMINAR IN COMM



  XHTML Terminology
         Opening Tag


             <div class=“first”>
             Th...
CM475 SENIOR SEMINAR IN COMM



  XHTML Terminology
         Opening Tag Attribute


             <div class=“first”>
     ...
CM475 SENIOR SEMINAR IN COMM



  XHTML Terminology
         Opening Tag Attribute   Value


             <div class=“first...
CM475 SENIOR SEMINAR IN COMM



  XHTML Terminology
         Opening Tag Attribute   Value


             <div class=“first...
CM475 SENIOR SEMINAR IN COMM



  XHTML Terminology
         Opening Tag Attribute   Value


             <div class=“first...
CM475 SENIOR SEMINAR IN COMM



  XHTML Terminology
         Opening Tag Attribute   Value


             <div class=“first...
CM475 SENIOR SEMINAR IN COMM



  XHTML Terminology
         Opening Tag Attribute   Value


             <div class=“first...
CM475 SENIOR SEMINAR IN COMM



  XHTML Terminology
         Opening Tag Attribute   Value


             <div class=“first...
CM475 SENIOR SEMINAR IN COMM



  XHTML Terminology
         Opening Tag Attribute   Value


             <div class=“first...
CM475 SENIOR SEMINAR IN COMM




                               CSS
           Cascading Style Sheets
     The code or rul...
CM475 SENIOR SEMINAR IN COMM




                    Purpose of CSS
  Control the appearance or presentation
             ...
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 ...
CM475 SENIOR SEMINAR IN COMM



  CSS Terminology


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

             Property ...
CM475 SENIOR SEMINAR IN COMM



  CSS Terminology
                  Declaration                 Declaration




         h...
CM475 SENIOR SEMINAR IN COMM



  CSS Terminology
                                Declaration block
                  Decl...
CM475 SENIOR SEMINAR IN COMM



  CSS Terminology
                                   Declaration block
      Selector     ...
CM475 SENIOR SEMINAR IN COMM



  CSS Terminology
                                   Declaration block
      Selector     ...
CM475 SENIOR SEMINAR IN COMM



  Advantages of combining
  XHTML and CSS

     •presentation
      Separates structure an...
Intro to XHTML/CSS
Upcoming SlideShare
Loading in …5
×

Intro to XHTML/CSS

828 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
828
On SlideShare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Intro to XHTML/CSS

  1. 1. CM475 SENIOR SEMINAR IN COMM XHTML and CSS An Introduction
  2. 2. CM475 SENIOR SEMINAR IN COMM HTML HyperText Markup Language The code or rules that browsers read that defines the structure Web pages
  3. 3. CM475 SENIOR SEMINAR IN COMM XHTML eXtensible HTML •“Cleaned up,” stricter HTML •An application of XML
  4. 4. CM475 SENIOR SEMINAR IN COMM Purpose of XHTML Define the structure of the Web page and its content
  5. 5. CM475 SENIOR SEMINAR IN COMM XHTML Terminology <div class=“first”> This is content. </div> <img src= “pic.jpg” alt=“ ” />
  6. 6. CM475 SENIOR SEMINAR IN COMM XHTML Terminology Opening Tag <div class=“first”> This is content. </div> <img src= “pic.jpg” alt=“ ” />
  7. 7. CM475 SENIOR SEMINAR IN COMM XHTML Terminology Opening Tag <div class=“first”> This is content. End Tag </div> <img src= “pic.jpg” alt=“ ” />
  8. 8. CM475 SENIOR SEMINAR IN COMM XHTML Terminology Opening Tag Attribute <div class=“first”> This is content. End Tag </div> <img src= “pic.jpg” alt=“ ” />
  9. 9. CM475 SENIOR SEMINAR IN COMM XHTML Terminology Opening Tag Attribute Value <div class=“first”> This is content. End Tag </div> <img src= “pic.jpg” alt=“ ” />
  10. 10. CM475 SENIOR SEMINAR IN COMM XHTML Terminology Opening Tag Attribute Value <div class=“first”> Nonreplaceable Element This is content. End Tag </div> <img src= “pic.jpg” alt=“ ” />
  11. 11. CM475 SENIOR SEMINAR IN COMM XHTML Terminology Opening Tag Attribute Value <div class=“first”> Nonreplaceable Element This is content. End Tag </div> <img src= “pic.jpg” alt=“ ” />
  12. 12. CM475 SENIOR SEMINAR IN COMM XHTML Terminology Opening Tag Attribute Value <div class=“first”> Nonreplaceable Element This is content. End Tag </div> <img src= “pic.jpg” alt=“ ” />
  13. 13. CM475 SENIOR SEMINAR IN COMM XHTML Terminology Opening Tag Attribute Value <div class=“first”> Nonreplaceable Element This is content. End Tag </div> <img src= “pic.jpg” alt=“ ” />
  14. 14. CM475 SENIOR SEMINAR IN COMM XHTML Terminology Opening Tag Attribute Value <div class=“first”> Nonreplaceable Element This is content. End Tag </div> <img src= “pic.jpg” alt=“ ” />
  15. 15. CM475 SENIOR SEMINAR IN COMM XHTML Terminology Opening Tag Attribute Value <div class=“first”> Nonreplaceable Element This is content. End Tag </div> Replaceable Element <img src= “pic.jpg” alt=“ ” />
  16. 16. CM475 SENIOR SEMINAR IN COMM CSS Cascading Style Sheets The code or rules that browsers read to display and structure Web pages
  17. 17. CM475 SENIOR SEMINAR IN COMM Purpose of CSS Control the appearance or presentation of the Web page
  18. 18. CM475 SENIOR SEMINAR IN COMM CSS Terminology h1 { font-size: 2em; color: #66666; }
  19. 19. CM475 SENIOR SEMINAR IN COMM CSS Terminology h1 { font-size: 2em; color: #66666; } Property Property
  20. 20. CM475 SENIOR SEMINAR IN COMM CSS Terminology h1 { font-size: 2em; color: #66666; } Property Value Property Value
  21. 21. CM475 SENIOR SEMINAR IN COMM CSS Terminology Declaration Declaration h1 { font-size: 2em; color: #66666; } Property Value Property Value
  22. 22. CM475 SENIOR SEMINAR IN COMM CSS Terminology Declaration block Declaration Declaration h1 { font-size: 2em; color: #66666; } Property Value Property Value
  23. 23. CM475 SENIOR SEMINAR IN COMM CSS Terminology Declaration block Selector Declaration Declaration h1 { font-size: 2em; color: #66666; } Property Value Property Value
  24. 24. CM475 SENIOR SEMINAR IN COMM CSS Terminology Declaration block Selector Declaration Declaration h1 { font-size: 2em; color: #66666; } Property Value Property Value Rule
  25. 25. CM475 SENIOR SEMINAR IN COMM Advantages of combining XHTML and CSS •presentation Separates structure and content from •Simplifies, speeds revisions, redesigns

×