Web Building Blocks


Published on

Published in: Education
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Pillars of the web; getting content up and managing content
  • signal vs. noise; not entirely true, but greater understandings of our media is always a good thing!
  • simple, clean, something to build on.
  • browsers have defaults (as we shall see), but we usually want to modify those defaults
  • structure vs. layout. brief overview of JS
  • content, things going “inside” other things, hierarchy
  • DOM (structure) vs. syntax (XML, etc.) ‘traversal’
  • elements vs. nodes. opening and closing tags. IDs vs classes
  • add h2, ul, li, button
  • span and <a> vs div and <p>
  • <div id=“header”>a site</div>
    <div id=“nav”>my nav</div>
    <div class=“article”>article text</div>
    <div id=“footer”>copyright</div>
    in w3schools
  • <header>a site</header>
    <nav>my nav</nav>
    <article>article text</article>
    in w3schools
  • default browser style
  • simple syntax! complex stylesheets. browser issues.
  • elements
    multiple descendants
    multiple selectors
  • we can only go right to left (down the tree)
    though browsers match right-to-left!
    inheritance! (cascading)
  • span { color: red; }
    .notice {color: green;}
    p .notice {color: yellow;}
    #top-note {color: blue;}
    p #top-note {color: orange;}
  • measuring units (px, pt, em, %)
    color hex
    font stacks
    inline vs block
    box model
  • and when you put it all together…
  • themes and add-ons
  • 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
    1. A particular slide catching your eye?

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