Save 37% off PRO during our Black Friday Sale! »

An Intro to HTML & CSS

F99870f7587bb733ec9ebe2f85eada26?s=47 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.

F99870f7587bb733ec9ebe2f85eada26?s=128

Shay Howe

December 02, 2011
Tweet

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