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

Introduction to HTML5 and CSS3

Introduction to HTML5 and CSS3

Delivered at #dev8ed in Birmingham, UK on 30th May 2012

Alex Bilbie

May 30, 2012
Tweet

More Decks by Alex Bilbie

Other Decks in Technology

Transcript

  1. @alexbilbie • Developer at @unilincoln • #PHP #CodeIgniter #APIs #REST

    #MongoDB #OAuth #LinkedData Wednesday, 30 May 12
  2. Popularity Value 1 footer 2 menu 3 style1 4 msonormal

    5 text 6 content 7 title 8 style2 9 header 10 copyright Wednesday, 30 May 12
  3. Popularity Value 1 footer 2 content 3 header 4 logo

    5 container 6 main 7 table1 8 menu 9 layer1 10 autonumber1 Wednesday, 30 May 12
  4. <div id=”header”> <div id=”header”> <div id=”sideb ar”> <div class=”post”> <div

    id=”sideb ar”> <div class=”post”> <div id=”footer”> <div id=”footer”> Wednesday, 30 May 12
  5. <header> ! <a href=”/> ! ! <img src=”logo.png” alt=”Dev8D Logo”>

    ! </a> ! <h1>Dev8D</h1> </header> Wednesday, 30 May 12
  6. <nav> ! <ul> ! ! <li> ! ! ! <a

    href=”/”>Home</a> ! ! </li> ! ! <li> ! ! ! <a href=”/about”>About Us</a> ! ! </li> ! </ul> </nav> Wednesday, 30 May 12
  7. <article> ! <header> ! ! <h1>Hello world!</h1> ! ! <aside>

    ! ! ! <p>Written by Alex</p> ! ! </aside> ! </header> ! ! The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amino acid lysine. Unless they're continually supplied with lysine by us, they'll slip into a coma and die. ! <footer> ! ! <p>Tagged with <a href=”#”>Slipsum</a> ! </footer> </article> Wednesday, 30 May 12
  8. <div id=”logo”> ! <h1> ! ! Dev8D ! ! <sup>

    ! ! ! Developer Happiness ! ! </sup> ! </h1> </div> Wednesday, 30 May 12
  9. <hgroup id=”logo”> ! <h1> ! ! Dev8D ! </h1> !

    <h2> ! ! Developer happiness ! </h2> </hgroup> Wednesday, 30 May 12
  10. <details> ! <summary> ! ! HTML5 Talk with Alex Bilbie

    ! </summary> ! <p> ! ! A talk looking at all the exciting new web technologies. ! </p> </details> Wednesday, 30 May 12
  11. HTML5 talk with Alex Bilbie A talk looking at all

    the exciting new web technologies. Python with Richard Jones - + Wednesday, 30 May 12
  12. <figure> ! <img src=”dev8d.png” alt=””> ! <figcaption> ! ! Dev8D

    logo ! </figcaption> </figure> Wednesday, 30 May 12
  13. <p> ! Dev8D is the major UK event in the

    year for developers in the education sector to <mark>learn</mark> from one another and ultimately create <mark>better</mark>, <mark>smarter</ mark> technology for learning and research. </p> Wednesday, 30 May 12
  14. Dev8D is the major UK event in the year for

    developers in the education sector to learn from one another and ultimately create better, smarter technology for learning and research. Wednesday, 30 May 12
  15. <p>Best Star Wars characters</p> <ol reversed> ! <li>Luke Skywalker</li> !

    <li>Admiral Ackbar</li> ! <li>Chewie</li> ! <li>Han Solo</li> ! <li>R2D2</li> </ol> Wednesday, 30 May 12
  16. <p>Star Wars characters</p> <dl> ! <dt>Goodies</dt> ! ! <dd>Han Solo</dd>

    ! ! <dd>Luke Skywalker</dd> ! <dt>Baddies</dt> ! ! <dd>Darth Vader</dd> ! ! <dd>The Emperor</dd> </dl> Wednesday, 30 May 12
  17. <article> ! ... ! ... ! <footer> ! ! <p>

    ! ! ! Contact the author ! ! ! <address> ! ! ! ! <a href=”mailto:[email protected]”> ! ! ! ! ! via email ! ! ! ! </a> ! ! ! </address> ! ! <p> ! </footer> </article> Wednesday, 30 May 12
  18. <p> ! We ate <i>unagi</i>, <i>aburi- zake</i>, and <i>tako</i> sushi

    last night, but the <i>torosushi</i> was all fished out </p> Wednesday, 30 May 12
  19. <article id=”chapter-25”> ! // Frodo and Sam in Mordor !

    <hr> ! // Gandalf fighting in Minas Tirith ! <hr> ! // Aragorn, Legolas and Gimli fighting Orcs in the field </article> Wednesday, 30 May 12
  20. <address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> ! Alex Bilbie<br> ! <span itemprop="name">

    ! ! ICT Services ! </span><br> ! <span itemprop="streetAddress"> ! ! University of Lincoln<br> ! ! Brayford Pool ! </span><br> ! <span itemprop="addressLocality"> ! ! Lincoln ! </span><br> ! <span itemprop="addressRegion"> ! ! Lincolnshire ! </span><br> ! <span itemprop="postalCode"> ! ! LN6 7TS ! </span><br> ! <span itemprop="addressCountry"> ! ! United Kingdom ! </span> </address> Wednesday, 30 May 12
  21. <form method=”post”> ! <label for=”name”>Name</label> ! <input id=”name” type=”text” required

    value=”” placeholder=”John Doe”> ! <label for=”email”>Email</label> ! <input id=”email” type=”email” required value=”” placeholder=”[email protected]”> ! <label for=”url”>Website</label> ! <input id=”url” type=”url” placeholder=”www.example.com”> ! <label for=”comment”>Your comment</label> ! <textarea id=”comment”> </form> Wednesday, 30 May 12
  22. <video> ! <source src=”dev8d.webm” type=”video/webm”> ! <source src=”dev8d.mp4” type=”video/mp4”> !

    ! <embed> ! ! <!-- flash fallback --> ! </embed> </video> Wednesday, 30 May 12
  23. <audio> ! <source src=”dev8d.ogg” type=”audio/ogg”> ! <source src=”dev8d.mp3” type=”audio/mp3”> !

    ! <embed> ! ! <!-- flash fallback --> ! </embed> </video> Wednesday, 30 May 12
  24. body { color: rgb(0, 0, 0); color: rgba(0, 0, 0,

    0.5); color: hsl(0, 0%, 0%); color: hsla(0, 0%, 0%, 0.5); } Wednesday, 30 May 12
  25. body { background: url(body-top.png) top left no-repeat, url(body-bottom.png) bottom left

    no-repeat, url(body-middle.png) left repeat-y; } Wednesday, 30 May 12
  26. @font-face { font-family: Comic; src: local("Comic Sans"), local("Comic Sans MT"),

    url(comic-sans.ttf); font-weight: bold; } p { font-family: Comic, sans- serif; } Wednesday, 30 May 12