SlideShare a Scribd company logo
The Internet,
  HTML & CSS
        NO MORE CONFUSION




Photo by emagic
DM 250 Week 1 - The Internet, XHTML, & CSS
DM 250 Week 1 - The Internet, XHTML, & CSS
DM 250 Week 1 - The Internet, XHTML, & CSS
THAT’S NOT THE INTERNET!
IT’S NOT
   A TRUCK EITHER



        Senator Ted Stevens -- 2006




                                      Photo by beardenb
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
else connected to the
Internet.

-- HTMLSource

                  Graphic by itspaulkelly
DM 250 Week 1 - The Internet, XHTML, & CSS
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
DM 250 Week 1 - The Internet, XHTML, & CSS
DM 250 Week 1 - The Internet, XHTML, & CSS
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.



                         Photo by Travelin Libarian
Why Is XHTML Better?

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

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

img#lolcat{
    height: 640px;
    width: 539px;
    border: none;
    }
DM 250 Week 1 - The Internet, XHTML, & CSS
Cascading
Cascading Style
Cascading Style Sheets
DM 250 Week 1 - The Internet, XHTML, & CSS
<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>


         This text is red with CSS styling it.
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 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Let’s Create an
    XHTML
   Skeleton


          Phote by: an_untrained_eye

More Related Content

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