Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Web Building Blocks

on

  • 1,407 views

 

Statistics

Views

Total Views
1,407
Views on SlideShare
1,407
Embed Views
0

Actions

Likes
1
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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
  • a sitemy navarticle textcopyrightin w3schools
  • a sitemy navarticle textcopyrightin w3schools
  • default browser style
  • simple syntax! complex stylesheets. browser issues.http://www.w3schools.com/css/tryit.asp?filename=trycss_default
  • elementsclassesidselement.classclass.classdescendantspseudo-selectorsmultiple descendantsmultiple selectors
  • we can only go right to left (down the tree)thoughbrowsers 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 hexfont stacksinline vs blockbox model
  • and when you put it all together…
  • themes and add-ons

Web Building Blocks Web Building Blocks Presentation Transcript

  • 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 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
  • Building Blocks
    What we’ll make
    http://bit.ly/aJWAu6
  • Building Blocks
    Content (text, images, video)
    Structure(layout, order)
    Presentation/style (color, size, margins, typeface)
    Behaviors (clicking, submitting forms, dragging)
  • Building Blocks
  • 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>
  • Building Blocks: HTML
    DOM: Document Object Model
    html
    ancestor
    body
    head
    descendant
    child
    parent
    title
    h1
    p
  • 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>
  • Building Blocks: HTML
    abstract:
    <div> <span>
    links & images:
    <a href=“this.html”>
    <imgsrc=“that.jpg” alt=“that img”>
    structure:
    <h1>…<h6> <p> <ul> <ol> <li> <table> <tr> <td>
    emphasis:
    <em> <strong>
  • 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
    .notice, .warning
  • Building Blocks: CSS
    Selectors: going down?
  • Building Blocks: CSS
    Inheritance
  • 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;
  • Building Blocks: CSS
    Box Model
  • Building Blocks: CSS
    Positioning
    Relative/Absolute
    Normal
    “Cleared” floats
    Float
  • 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 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.”
  • 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)
  • Building Blocks: CMS
    WordPress
    SilverStripe
    Drupal
    ExpressionEngine
    Joomla!
    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 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