Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An Intro to HTML & CSS

Shay Howe
December 02, 2011

An Intro to HTML & CSS

HTML and CSS can be a little daunting at first. This workshop covers the basics, breaks down the barrier to entry and shows you how you can start using HTML and CSS now.

Shay Howe

December 02, 2011
Tweet

More Decks by Shay Howe

Other Decks in Design

Transcript

  1. AN INTRO TO HTML & CSS Shay Howe November 2011

    www.shayhowe.com – @shayhowe
  2. An Intro to HTML & CSS SHAY HOWE www.shayhowe.com –

    @shayhowe @shayhowe
  3. An Intro to HTML & CSS WHAT IS DESIGN? @shayhowe

  4. An Intro to HTML & CSS WHAT IS DESIGN? “In

    most people’s vocabularies, design is a veneer. It’s interior decorating. It’s the fabric of the curtains, of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product.” – Steve Jobs @shayhowe
  5. An Intro to HTML & CSS WHAT IS HTML &

    CSS? @shayhowe
  6. An Intro to HTML & CSS HTML Markup language to

    give content structure and meaning. @shayhowe CSS Presentation language to give content style and appearance.
  7. An Intro to HTML & CSS HTML Content. @shayhowe CSS

    Style.
  8. An Intro to HTML & CSS HTML Hyper Text Markup

    Language @shayhowe
  9. An Intro to HTML & CSS ELEMENTS, ATTRIBUTES, & TAGS

    Elements body,  h1,  p,  div,  strong,  em,  span Elements are HTML designators that define certain objects. Attributes href="http://shayhowe.com"  title="Shay  Howe" Attributes provide additional information to the given element. Tags <div  id="shayhowe"  class="awesome"></div> Tags encompass elements and their corresponding attributes. @shayhowe
  10. BLOCK & INLINE ELEMENTS Block Block level elements begin on

    a new line within the document and occupy the full available width. Inline Inline level elements do not begin on a new line and fall into the flow of the document, maintaing their necessary width. An Intro to HTML & CSS @shayhowe header footer article section aside div h1...h6 p table form ul,  ol,  li dl,  dt,  dd span a strong em img br input abbr
  11. An Intro to HTML & CSS DOCUMENT STRUCTURE <!DOCTYPE  html>

    <html>    <head>        <title>Hello  World</title>    </head>    <body>        <h1>Hello  World</h1>        <p>This  is  a  website.</p>    </body> </html> @shayhowe
  12. An Intro to HTML & CSS QUIZ @shayhowe

  13. An Intro to HTML & CSS SAMPLE NAVIGATION HTML <ul

     id="social">    <li  class="tumblr">        <a  href="http://blog.codeacademy.org">            Code  Academy  Tumblr  Blog        </a>    </li>    <li  class="mail">        <a  href="mailto:contact@codeacademy.org">            Email  Code  Academy        </a>    </li>    <li  class="twitter">        <a  href="http://twitter.com/#!/codeacademy">            Code  Academy  Twitter        </a>    </li>    ... </ul> @shayhowe
  14. An Intro to HTML & CSS SAMPLE NAVIGATION CSS ul#social

     {    list-­‐style:  none;  } ul#social  li  {    float:  left;    margin:  12px  0  0  0;    padding:  0  3px;  } ul#social  li  a  {    background:  url("icons.png")  0  0  no-­‐repeat;    display:  block;    height:  17px;    text-­‐indent:  -­‐9999px;    width:  16px;  } ul#social  li.tumblr  a  {    background-­‐position:  0  -­‐64px;  } ul#social  li.mail  a  {    background-­‐position:  0  -­‐81px;  } ul#social  li.twitter  a  {    background-­‐position:  0  -­‐98px;  } @shayhowe
  15. An Intro to HTML & CSS TAGS <ul  id="social">  

     <li  class="tumblr">        <a  href="http://blog.codeacademy.org">            Code  Academy  Tumblr  Blog        </a>    </li>    <li  class="mail">        <a  href="mailto:contact@codeacademy.org">            Email  Code  Academy        </a>    </li>    <li  class="twitter">        <a  href="http://twitter.com/#!/codeacademy">            Code  Academy  Twitter        </a>    </li>    ... </ul> @shayhowe
  16. An Intro to HTML & CSS ELEMENTS <ul  id="social">  

     <li  class="tumblr">        <a  href="http://blog.codeacademy.org">            Code  Academy  Tumblr  Blog        </a>    </li>    <li  class="mail">        <a  href="mailto:contact@codeacademy.org">            Email  Code  Academy        </a>    </li>    <li  class="twitter">        <a  href="http://twitter.com/#!/codeacademy">            Code  Academy  Twitter        </a>    </li>    ... </ul> @shayhowe
  17. An Intro to HTML & CSS ATTRIBUTES <ul  id="social">  

     <li  class="tumblr">        <a  href="http://blog.codeacademy.org">            Code  Academy  Tumblr  Blog        </a>    </li>    <li  class="mail">        <a  href="mailto:contact@codeacademy.org">            Email  Code  Academy        </a>    </li>    <li  class="twitter">        <a  href="http://twitter.com/#!/codeacademy">            Code  Academy  Twitter        </a>    </li>    ... </ul> @shayhowe
  18. An Intro to HTML & CSS ID & CLASS <ul

     id="social">    <li  class="tumblr">        <a  href="http://blog.codeacademy.org">            Code  Academy  Tumblr  Blog        </a>    </li>    <li  class="mail">        <a  href="mailto:contact@codeacademy.org">            Email  Code  Academy        </a>    </li>    <li  class="twitter">        <a  href="http://twitter.com/#!/codeacademy">            Code  Academy  Twitter        </a>    </li>    ... </ul> @shayhowe
  19. An Intro to HTML & CSS REFERENCING A CSS FILE

    <!DOCTYPE  html> <html>    <head>        <title>Hello  World</title>        <link  rel="stylesheet"  href="file.css">    </head>    <body>        <h1>Hello  World</h1>        <p>This  is  a  website.</p>    </body> </html> @shayhowe
  20. An Intro to HTML & CSS CSS Cascading Style Sheets

    @shayhowe
  21. An Intro to HTML & CSS SELECTOR, PROPERTY, VALUE Selector

    h1  {    font:  bold  16px/24px  Arial,  sans-­‐serif;  } A selector determines which element to apply style to. Property h1  {    font:  bold  16px/24px  Arial,  sans-­‐serif;  } A property is the style that will be applied to the element. Value h1  {    font:  bold  16px/24px  Arial,  sans-­‐serif;  } A value is the determines the behavior of a property. @shayhowe
  22. An Intro to HTML & CSS RULE SETS & DECLARATIONS

    Rule Set h1  {    font:  bold  16px/24px  Arial,  sans-­‐serif;  } A rule set includes a selector and all corresponding declarations. Declarations h1  {    font:  bold  16px/24px  Arial,  sans-­‐serif;  } Declarations are individual lines of CSS within a rule set. @shayhowe
  23. An Intro to HTML & CSS ELEMENT, ID, & CLASS

    SELECTORS Element Selector h1  {    font:  bold  16px/24px  Arial,  sans-­‐serif;  } An element selector targets and element by its name. ID Selector #logo  {    background:  url("logo.png")  0  0  no-­‐repeat;  } An ID selector targets and element by its ID. ID’s are to be reserved to one a page. Class Selector .column  {    width:  200px;  } A class selector targets and element by its class. Classes may appear multiple times within a page. @shayhowe
  24. An Intro to HTML & CSS QUIZ @shayhowe

  25. An Intro to HTML & CSS QUIZ ul#social  {  

     list-­‐style:  none;  } ul#social  li  {    float:  left;    margin:  12px  0  0  0;    padding:  0  3px;  } ul#social  li  a  {    background:  url("icons.png")  0  0  no-­‐repeat;    display:  block;    height:  17px;    text-­‐indent:  -­‐9999px;    width:  16px;  } ul#social  li.tumblr  a  {    background-­‐position:  0  -­‐64px;  } ul#social  li.mail  a  {    background-­‐position:  0  -­‐81px;  } ul#social  li.twitter  a  {    background-­‐position:  0  -­‐98px;  } @shayhowe
  26. An Intro to HTML & CSS SELECTORS ul#social  {  

     list-­‐style:  none;  } ul#social  li  {    float:  left;    margin:  12px  0  0  0;    padding:  0  3px;  } ul#social  li  a  {    background:  url("icons.png")  0  0  no-­‐repeat;    display:  block;    height:  17px;    text-­‐indent:  -­‐9999px;    width:  16px;  } ul#social  li.tumblr  a  {    background-­‐position:  0  -­‐64px;  } ul#social  li.mail  a  {    background-­‐position:  0  -­‐81px;  } ul#social  li.twitter  a  {    background-­‐position:  0  -­‐98px;  } @shayhowe
  27. An Intro to HTML & CSS PROPERTIES ul#social  {  

     list-­‐style:  none;  } ul#social  li  {    float:  left;    margin:  12px  0  0  0;    padding:  0  3px;  } ul#social  li  a  {    background:  url("icons.png")  0  0  no-­‐repeat;    display:  block;    height:  17px;    text-­‐indent:  -­‐9999px;    width:  16px;  } ul#social  li.tumblr  a  {    background-­‐position:  0  -­‐64px;  } ul#social  li.mail  a  {    background-­‐position:  0  -­‐81px;  } ul#social  li.twitter  a  {    background-­‐position:  0  -­‐98px;  } @shayhowe
  28. An Intro to HTML & CSS VALUES ul#social  {  

     list-­‐style:  none;  } ul#social  li  {    float:  left;    margin:  12px  0  0  0;    padding:  0  3px;  } ul#social  li  a  {    background:  url("icons.png")  0  0  no-­‐repeat;    display:  block;    height:  17px;    text-­‐indent:  -­‐9999px;    width:  16px;  } ul#social  li.tumblr  a  {    background-­‐position:  0  -­‐64px;  } ul#social  li.mail  a  {    background-­‐position:  0  -­‐81px;  } ul#social  li.twitter  a  {    background-­‐position:  0  -­‐98px;  } @shayhowe
  29. An Intro to HTML & CSS THE BOX MODEL @shayhowe

  30. An Intro to HTML & CSS THE BOX MODEL div

     {    border:  4px  solid  #000;    height:  300px;    margin:  20px;    padding:  20px;    width:  300px; } Breakdown Total Width = Width + (Margin x 2) + (Border x 2) + (Padding x 2) 388  Pixels  =  300  +  (20  x  2)  +  (4  x  2)  +  (20  x  2) Total Height = Height + (Margin x 2) + (Border x 2) + (Padding x 2) 388  Pixels  =  300  +  (20  x  2)  +  (4  x  2)  +  (20  x  2) @shayhowe
  31. An Intro to HTML & CSS FLOATS img  {  

     border:  1px  solid  #ccc;    float:  right    margin:  10px  0  10px  20px;    padding:  4px; } <p>Ut  wisi  enin  ad  minim...</p> <p><img  src="chicago.jpg"  alt="Chicago"  /> Lorem  ipsum  dolor  sit  amet...</p> <p>Mimimum  veniami  ex  ea  con...</p> @shayhowe
  32. An Intro to HTML & CSS FLOATS @shayhowe

  33. An Intro to HTML & CSS FLOATS & CLEARS .col

     {    float:  left;    margin:  0  10px;    width:  400px; } .clear  {    clear:  both; } <p  class="col">Lorem  ipsum  dolor  sit  amet...</p> <p  class="col">Con  minimim  venami  quis...</p> <div  class="clear"></div> <p>Quis  nostrud  ad  nostris  pro  amat...</p> @shayhowe
  34. An Intro to HTML & CSS FLOATS & CLEARS @shayhowe

  35. An Intro to HTML & CSS QUESTIONS? Thank you! @shayhowe