dm 250 week 1 - the internet, xhtml, & css
Post on 29-Jan-2018
1.661 Views
Preview:
TRANSCRIPT
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 beardenb
The Internet
It’s just a giant network.
A SERIES OF TUBES
The Internet
It’s just a giant network.
The Word Wide Web is something different.
A SERIES OF TUBES
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
HyperText
HyperText Markup
HyperText MarkupLanguage
HTML Is the Foundation
of a Web Page
Photo by Rutty
BUT<b>how</b>
d o e s i t<i>work</i>?
XHTMLeXtensible 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.
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;}
Cascading
Cascading Style
Cascading Style Sheets
<html><p class=“redText”>This text is red with CSS styling it.</p></html>
<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>
This text is red with CSS styling it.
Anatomy of an XHTML
Document
DoctypeHeadBody
Document Type DefinitionAKA: 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 anXHTML Skeleton
Phote by: an_untrained_eye
top related