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.
Web Building Blocks
HTML, CSS, and Content
Management Systems
Why Learn the Building
Blocks?
“The idea that you could make a website
and not know HTML blows my mind
because it’s like b...
Building Blocks
http://bit.ly/aJWAu6
What we’ll make
Building Blocks
• Content (text, images, video)
• Structure (layout, order)
• Presentation/style (color, size, margins,
ty...
Building Blocks
Behaviors
(JavaScript)
Structure
(HTML &
CSS)
Presentation
(CSS)
Content
(HTML)
Building Blocks: HTML
Content + Structure
<!doctype html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>He...
Building Blocks: HTML
html
bodyhead
title h1 p
DOM: Document Object
Model
childparent
ancestor
descendant
Building Blocks: HTML
Elements, Nodes, Tags,
Attributes, IDs, and Classes
<p id=“welcome” class=“notice”>
<span class=“fir...
Building Blocks: HTML
links & images:
<a href=“this.html”>
<img src=“that.jpg” alt=“that img”>
abstract:
<div> <span>
stru...
Building Blocks: HTML
Play around!
http://bit.ly/cGI3Jk
Building Blocks: HTML
inline elements
block
elements
Building Blocks: HTML
Structure of an XHTML
Document
Building Blocks: HTML
Structure of an HTML5
Document
Building Blocks
http://bit.ly/c0B4VS
Building Blocks: CSS
Cascading Style Sheets
selector {
property: value;
}
Building Blocks: CSS
Selectors
p
.notice
#welcome
p.notice
.first.intro-word
div .notice
a:hover
#welcome .notice span
.no...
Building Blocks: CSS
Selectors: going down?
#welcome
.notice
span
Building Blocks: CSS
Inheritance
span
.notice
p .notice
#top-note
p #top-note
Building Blocks: CSS
Properties & Values
height: 100px;
width: 50%;
color: #FF0000;
background-color: #000;
font-size: 12p...
Building Blocks: CSS
Box Model
Building Blocks: CSS
Positioning
Normal Relative/Absolute
Float
“Cleared” floats
Building Blocks
http://bit.ly/9S35oq
Building Blocks: CMS
“I don’t want to write HTML for every
minor website update.”
“Our site has too many pages to manage
t...
Building Blocks: CMS
• Create content (static pages, time-stamped
posts, images, video)
• Organize content (order, categor...
Building Blocks: CMS
WordPress
Drupal
SilverStripe
Joomla!
ExpressionEngine
opensourcecms.com
Building Blocks: CMS
Building Blocks: CMS
Building Blocks: CMS
Building Blocks: CMS
Building Blocks: CMS
Building Blocks: Resources
• Tutorials/Reference
– W3Schools: w3schools.com
– HTML Dog: htmldog.com
• Design
– A List Apar...
Upcoming SlideShare
Loading in …5
×

Web Building Blocks

1,895 views

Published on

Published in: Education
  • Be the first to comment

Web Building Blocks

  1. 1. Web Building Blocks HTML, CSS, and Content Management Systems
  2. 2. Why Learn the Building Blocks? “The idea that you could make a website and not know HTML blows my mind because it’s like building a building and not knowing what a brick is…You can be a CSS wizard or you can know the basics, but you should at least have some foundational knowledge of what your building material is.” - Ryan Singer, 37Signals
  3. 3. Building Blocks http://bit.ly/aJWAu6 What we’ll make
  4. 4. Building Blocks • Content (text, images, video) • Structure (layout, order) • Presentation/style (color, size, margins, typeface) • Behaviors (clicking, submitting forms, dragging)
  5. 5. Building Blocks Behaviors (JavaScript) Structure (HTML & CSS) Presentation (CSS) Content (HTML)
  6. 6. Building Blocks: HTML Content + Structure <!doctype html> <html> <head> <title>My First Page</title> </head> <body> <h1>Hello, World!</h1> <p>Welcome to my site.</p> </body> </html>
  7. 7. Building Blocks: HTML html bodyhead title h1 p DOM: Document Object Model childparent ancestor descendant
  8. 8. Building Blocks: HTML Elements, Nodes, Tags, Attributes, IDs, and Classes <p id=“welcome” class=“notice”> <span class=“first intro-word”>Welcome</span> to my site. </p>
  9. 9. Building Blocks: HTML links & images: <a href=“this.html”> <img src=“that.jpg” alt=“that img”> abstract: <div> <span> structure: <h1>…<h6> <p> <ul> <ol> <li> <table> <tr> <td> emphasis: <em> <strong>
  10. 10. Building Blocks: HTML Play around! http://bit.ly/cGI3Jk
  11. 11. Building Blocks: HTML inline elements block elements
  12. 12. Building Blocks: HTML Structure of an XHTML Document
  13. 13. Building Blocks: HTML Structure of an HTML5 Document
  14. 14. Building Blocks http://bit.ly/c0B4VS
  15. 15. Building Blocks: CSS Cascading Style Sheets selector { property: value; }
  16. 16. Building Blocks: CSS Selectors p .notice #welcome p.notice .first.intro-word div .notice a:hover #welcome .notice span .notice, .warning
  17. 17. Building Blocks: CSS Selectors: going down? #welcome .notice span
  18. 18. Building Blocks: CSS Inheritance span .notice p .notice #top-note p #top-note
  19. 19. Building Blocks: CSS Properties & Values height: 100px; width: 50%; color: #FF0000; background-color: #000; font-size: 12pt; font-family: “Times New Roman”, serif; font-weight: bold; text-align: center; display: block; float: left; padding: 3em; margin: 10px 20px 5px 10px;
  20. 20. Building Blocks: CSS Box Model
  21. 21. Building Blocks: CSS Positioning Normal Relative/Absolute Float “Cleared” floats
  22. 22. Building Blocks http://bit.ly/9S35oq
  23. 23. Building Blocks: CMS “I don’t want to write HTML for every minor website update.” “Our site has too many pages to manage them all by hand.” “We have a bunch of content creators who need different levels of access.” “I’m not a programmer, and my site needs custom functionality that HTML & CSS alone can’t provide.”
  24. 24. Building Blocks: CMS • Create content (static pages, time-stamped posts, images, video) • Organize content (order, categories, tags) • Add consistent presentation/style (templates) • Add new functionality (plugins, extensions, modules)
  25. 25. Building Blocks: CMS WordPress Drupal SilverStripe Joomla! ExpressionEngine opensourcecms.com
  26. 26. Building Blocks: CMS
  27. 27. Building Blocks: CMS
  28. 28. Building Blocks: CMS
  29. 29. Building Blocks: CMS
  30. 30. Building Blocks: CMS
  31. 31. Building Blocks: Resources • Tutorials/Reference – W3Schools: w3schools.com – HTML Dog: htmldog.com • Design – A List Apart: alistapart.com – Smashing Magazine: smashingmagazine.com – Boxes and Arrows: boxesandarrows.com – Pattern Tap: patterntap.com • Tools – Firebug (getfirebug.com), Chrome Developer Toolbar, IE Developer Toolbar – validator.w3.org – TextWrangler, Notepad++, CSS Edit

×