Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.edu @joegilbert
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 Image CC licensed by Flickr user arenamontanus
Why Learn the Building Blocks? Helps us understand the medium of the web Facilitates better design decisions Fosters accessible, responsive, findable sites Image CC licensed by Flickr user f- l- e- x
Building Blocks What we ll learn bit.ly/wbb- final
Building Blocks Content text, images, video Structure layout, order, grouping Style & Presentation color, size, margins, typeface Behavior clicking, submitting forms, dragging Image CC licensed by Flickr user trioxic
Building Blocks Behavior (JavaScript) Presentation (CSS) Structure (HTML & CSS) Content (HTML)
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 parent head child body descendant 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= catalog.html >! <img src= banner.jpg alt= Return to the home page > structure: <h1> <h6> <p> <ul> <ol> <li> <table> <tr> <td> emphasis: <em> <strong>
Building Blocks: HTML Play around! bit.ly/wbb-html
Building Blocks: HTML Semantic Markup Use the element that best describes the role of the content it contains. Avoid using elements simply for presentational effect. Common culprits: <b>, <i>, <table>, <br>!
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: HTML Outline of an HTML5 Document 1. Header! 1. Navigation! 2. Article! 1. Section One! 2. Section Two! 3. Sidebar! 2. Footer! Section-related elements: <body>, <section>, <article>, <aside>, <footer>, <header>, and <nav>! Implicit section elements: <h1>, <h2>,, <h6>! More info: mzl.la/wbb-outline
Building Blocks bit.ly/wbb- plain
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? #welcome.no@ce span
Building Blocks: CSS Inheritance <p><span class= notice id= top-note >Welcome</span></p> span.no@ce p.no@ce #top- note p #top- note
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 From inside to outside: Content Padding Border Margin
Building Blocks: CSS Positioning
Building Blocks bit.ly/wbb-css
Key Concepts Think DOM envision the overall structure of HTML Keep it Semantic & Separate maintain division of content & style Inherit Style leverage the cascade in CSS Learn the Tools of Layout master the box model and floating/positioning Stay Curious! read, write, create
Building Blocks: Resources Tutorials & Reference Design Tools W3Schools w3schools.com HTML Dog htmldog.com HTML5 Doctor html5doctor.com Dive into HTML5 diveintohtml5.org A List Apart alistapart.com Smashing Magazine smashingmagazine.com Boxes and Arrows boxesandarrows.com SpeckyBoy speckyboy.com Investigate Firebug (getfirebug.com), Chrome Developer Tools Validate W3C Validator (validator.w3.org) Edit TextWrangler, Notepad++, CSS Edit
Thanks! Questions? joe.gilbert@virginia.edu