Pro Yearly is on sale from $80 to $50! »

ASOS Prince's Trust Get Into Technology - HTML

4c967f43fa170c77f3a7ae60dafa0ec8?s=47 Si Jobling
February 23, 2016

ASOS Prince's Trust Get Into Technology - HTML

4c967f43fa170c77f3a7ae60dafa0ec8?s=128

Si Jobling

February 23, 2016
Tweet

Transcript

  1. Prince’s Trust Get Into Tech Basic Coding with Si Jobling

    Tuesday 23 February 2016 <HTML> Building Your Webpage
  2. Basic Coding with Si Jobling • What is HTML? •

    Inline Elements (highlighting, links, extra meaning) • Block Elements (H1-6, paragraphs, lists, divisions) • Multimedia (images, audio, video) • Forms
  3. Basic Coding with Si Jobling Hyper Text Markup Language

  4. Basic Coding with Si Jobling <html>

  5. Basic Coding with Si Jobling <HTML>

  6. Basic Coding with Si Jobling <HTML> </HTML>

  7. Basic Coding with Si Jobling Think of HTML as a

    sandwich
  8. <html> <body> </body> </html> <!-- contents -->

  9. Basic Coding with Si Jobling <HTML> <HEAD> </HEAD> </HTML>

  10. Basic Coding with Si Jobling <HTML> <HEAD> <TITLE>My page</TITLE> </HEAD>

    </HTML>
  11. Basic Coding with Si Jobling <HTML> <HEAD> <TITLE>My page</TITLE> </HEAD>

    <BODY> </BODY> </HTML>
  12. Basic Coding with Si Jobling <HTML> <HEAD> <TITLE>My page</TITLE> </HEAD>

    <BODY> <HEADER> </HEADER> <MAIN> </MAIN> <FOOTER> </FOOTER> </BODY> </HTML>
  13. Basic Coding with Si Jobling <HTML> <HEAD> <TITLE>My page</TITLE> </HEAD>

    <BODY> <HEADER> <IMG SRC=“logo.png” /> </HEADER> <MAIN> <H1>Welcome to my page</H1> </MAIN> <FOOTER> <P>Some credits</P> </FOOTER> </BODY> </HTML>
  14. Basic Coding with Si Jobling Inline elements

  15. Basic Coding with Si Jobling <strong>This text will be bold</strong>

    This text will be bold
  16. Basic Coding with Si Jobling <em>This text will be italic</em>

    This text will be italic
  17. Basic Coding with Si Jobling This will link to Facebook

    <a href=“http://www.facebook.com/“ title=“Link to Facebook” class=“external- link”> This will link to Facebook</a>
  18. Basic Coding with Si Jobling You can even mix them

    up with strong, italic and linked text <strong> You can even mix them up with strong, <em>italic</em> and <a href=“http://www.facebook.com/“> linked text</a> </strong>
  19. Basic Coding with Si Jobling Try it out

  20. Basic Coding with Si Jobling Block elements

  21. Basic Coding with Si Jobling This will create a new

    paragraph. And another paragraph. Notice the gap? <p> This will create a new paragraph. </p> <p> And another paragraph. Notice the gap? </p>
  22. Basic Coding with Si Jobling We can create a heading!

    Even a sub-heading if we want. Followed by a standard paragraph. <h1> We can create a heading! </h1> <h2> Even a sub-heading if we want. </h2> <p> Followed by a standard paragraph. </p>
  23. Basic Coding with Si Jobling • The web loves lists!

    • They’re great for listing options • Or even some bullet points <ul> <li>The web loves lists!</li> <li>They’re great for listing options</li> <li>Or even some bullet points</li> </ul>
  24. Basic Coding with Si Jobling Top 3 UK Sites 1.

    Google 2. Facebook 3. YouTube <h1>Top 3 UK Sites</h1> <ol> <li><a href=“http://www.google.com/“>Google</a> </li> <li><a href=“http://www.facebook.com“>Facebook</a> </li> <li><a href=“http://www.youtube.com“>YouTube</a> </li> </ol>
  25. Basic Coding with Si Jobling Video Title Available on Youtube

    <div class=“content-group”> <h2>Video title</h2> <img src=“video-thumb.jpg” /> <p> Available on <a href=“http://www.youtube.com“>YouTube</a> </p> </div>
  26. Basic Coding with Si Jobling Try it out

  27. Basic Coding with Si Jobling Multimedia

  28. Basic Coding with Si Jobling <img src=“my-cat-animation.gif”>

  29. Basic Coding with Si Jobling <audio src=“annoying-music.mp3”>

  30. Basic Coding with Si Jobling s <video src=“batdad.mp4”>

  31. Basic Coding with Si Jobling Try it out

  32. Basic Coding with Si Jobling Forms

  33. Basic Coding with Si Jobling <form> </form>

  34. Basic Coding with Si Jobling <form> <fieldset> </fieldset> </form>

  35. Basic Coding with Si Jobling <form> <fieldset> <select> <option>UK 8</option>

    </select> </fieldset> </form>
  36. Basic Coding with Si Jobling <form> <fieldset> <select> <option>UK 8</option>

    <option>UK 10</option> </select> </fieldset> </form>
  37. Basic Coding with Si Jobling <form> <fieldset> <select> <option>UK 8</option>

    <option>UK 10</option> </select> <input type=“number” /> </fieldset> </form>
  38. Basic Coding with Si Jobling <form> <fieldset> <select> <option>UK 8</option>

    <option>UK 10</option> </select> <input type=“number” /> <button>Add to bag</button> </fieldset> </form>
  39. Basic Coding with Si Jobling Try it out

  40. Basic Coding with Si Jobling There’s more

  41. Basic Coding with Si Jobling <html> <head> <title> <base> <link>

    <meta> <style> <script> <noscript> <body> <section> <nav> <article> <aside> <h1> <h2> <h3> <h4> <h5> <h6> <header> <footer> <address> <main> <p> <hr> <pre> <blockquote> <ol> <ul> <li> <dl> <dt> <dd> <figure> <figcaption> <div> <a> <em> <strong> <small> <s> <cite> <q> <dfn> <abbr> <data> <time> <code> <var> <samp> <kbd> <sub> <sup> <i> <b> <u> <mark> <ruby> <rt> <rp> <bdi> <bdo> <span> <br> <wbr> <ins> <del> <img> <iframe> <embed> <object> <param> <video> <audio> <source> <track> <canvas> <map> <area> <svg> <math> <table> <caption> <colgroup> <col> <tbody> <thead> <tfoot> <tr> <td> <th> <form> <fieldset> <legend> <label> <input> <button> <select> <datalist> <optgroup> <option> <textarea> <keygen> <output> <progress> <meter> <details> <summary> <menuitem> <menu>
  42. Basic Coding with Si Jobling Your Task

  43. Basic Coding with Si Jobling • Login to codepen.io •

    Add the ASOS logo as an image • Create a list of 3 products including • Image thumbnail • Product name • Price • Show one product detail with larger image • Simple form to add item to bag (size, quantity and button)