0
The Internet,
  HTML & CSS
        NO MORE CONFUSION




Photo by emagic
THAT’S NOT THE INTERNET!
IT’S NOT
   A TRUCK EITHER



        Senator Ted Stevens -- 2006




                                      Photo by beard...
The Internet
  A SERIES OF TUBES

It’s just a giant network.
The Internet
  A SERIES OF TUBES

It’s just a giant network.
The Word Wide Web is
 something different.
Introducing the World Wide Web
What is <HTML>?
HTML is a computer
language devised to
allow website creation.
These websites can then
be viewed by anyone...
HyperText
HyperText Markup
HyperText Markup Language
HTML Is the
 Foundation
of a Web Page
BUT
<b>how</b>
  does it
 <i>work</i>?   Photo by Rutty
XHTML
eXtensible HyperText Markup Language
html <tags>



              Photo by Jesper
<b>bold</b>
     <i>italic</i>
<p>Paragraph text.</p>



                         Photo by Jesper
Why Is XHTML Better?




                  Photo by Travelin Libarian
Why Is XHTML Better?

• It’s Strict.



                   Photo by Travelin Libarian
Why Is XHTML Better?

• It’s Strict.
• Helps you avoid
 cross-browser
 compatibility issues.



                         P...
Why Is XHTML Better?

• It’s Strict.
• Helps you avoid
 cross-browser
 compatibility issues.

• It makes you cool.
       ...
Introducing
.css {
     font-size: 36px;
     color: green;
     font-weight: bold;
     text-align: left;
     }

img#lol...
Cascading
Cascading Style
Cascading Style Sheets
<html>
<p class=“redText”>
This text is red with CSS styling it.
</p>
</html>
<style>
p.redText { color: red; }
</style>

<html>
<p class=“redText”>
This text is red with CSS styling it.
</p>
</html>
<style>
p.redText { color: red; }
</style>

<html>
<p class=“redText”>
This text is red with CSS styling it.
</p>
</html>
<style>
p.redText { color: red; }
</style>

<html>
<p class=“redText”>
This text is red with CSS styling it.
</p>
</html>
...
Anatomy of an
  XHTML
 Document

 Doctype
  Head
  Body
Document Type Definition
                  AKA: DTD or Doctype

For Example:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
Let’s Create an
    XHTML
   Skeleton


          Phote by: an_untrained_eye
DM 250 Week 1 - The Internet, XHTML, & CSS
DM 250 Week 1 - The Internet, XHTML, & CSS
DM 250 Week 1 - The Internet, XHTML, & CSS
DM 250 Week 1 - The Internet, XHTML, & CSS
DM 250 Week 1 - The Internet, XHTML, & CSS
DM 250 Week 1 - The Internet, XHTML, & CSS
DM 250 Week 1 - The Internet, XHTML, & CSS
DM 250 Week 1 - The Internet, XHTML, & CSS
Upcoming SlideShare
Loading in...5
×

DM 250 Week 1 - The Internet, XHTML, & CSS

1,230

Published on

Introduction to Internet/Web, HTML, CSS. Made for my first time teaching a college-level course at Greenville College.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,230
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
51
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "DM 250 Week 1 - The Internet, XHTML, & CSS"

  1. 1. The Internet, HTML & CSS NO MORE CONFUSION Photo by emagic
  2. 2. THAT’S NOT THE INTERNET!
  3. 3. IT’S NOT A TRUCK EITHER Senator Ted Stevens -- 2006 Photo by beardenb
  4. 4. The Internet A SERIES OF TUBES It’s just a giant network.
  5. 5. The Internet A SERIES OF TUBES It’s just a giant network. The Word Wide Web is something different.
  6. 6. Introducing the World Wide Web
  7. 7. What is <HTML>? HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. -- HTMLSource Graphic by itspaulkelly
  8. 8. HyperText
  9. 9. HyperText Markup
  10. 10. HyperText Markup Language
  11. 11. HTML Is the Foundation of a Web Page
  12. 12. BUT <b>how</b> does it <i>work</i>? Photo by Rutty
  13. 13. XHTML eXtensible HyperText Markup Language
  14. 14. html <tags> Photo by Jesper
  15. 15. <b>bold</b> <i>italic</i> <p>Paragraph text.</p> Photo by Jesper
  16. 16. Why Is XHTML Better? Photo by Travelin Libarian
  17. 17. Why Is XHTML Better? • It’s Strict. Photo by Travelin Libarian
  18. 18. Why Is XHTML Better? • It’s Strict. • Helps you avoid cross-browser compatibility issues. Photo by Travelin Libarian
  19. 19. Why Is XHTML Better? • It’s Strict. • Helps you avoid cross-browser compatibility issues. • It makes you cool. Photo by Travelin Libarian
  20. 20. Introducing .css { font-size: 36px; color: green; font-weight: bold; text-align: left; } img#lolcat{ height: 640px; width: 539px; border: none; }
  21. 21. Cascading
  22. 22. Cascading Style
  23. 23. Cascading Style Sheets
  24. 24. <html> <p class=“redText”> This text is red with CSS styling it. </p> </html>
  25. 25. <style> p.redText { color: red; } </style> <html> <p class=“redText”> This text is red with CSS styling it. </p> </html>
  26. 26. <style> p.redText { color: red; } </style> <html> <p class=“redText”> This text is red with CSS styling it. </p> </html>
  27. 27. <style> p.redText { color: red; } </style> <html> <p class=“redText”> This text is red with CSS styling it. </p> </html> This text is red with CSS styling it.
  28. 28. Anatomy of an XHTML Document Doctype Head Body
  29. 29. Document Type Definition AKA: DTD or Doctype For Example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  30. 30. Let’s Create an XHTML Skeleton Phote by: an_untrained_eye
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×