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

ASOS Prince's Trust Get Into Technology - HTML

Si Jobling
February 23, 2016
Technology
0
42

ASOS Prince's Trust Get Into Technology - HTML

Si Jobling

February 23, 2016
Tweet

More Decks by Si Jobling

See All by Si Jobling
ASOS Prince's Trust Get Into Technology - Basic Coding
si
0
75
ASOS Prince's Trust Get Into Technology - CSS
si
0
56
The Working and Managements Styles of Five Different Industries
si
0
240
Sponsor a Mac
si
1
130
Tweets for Balls
si
0
93

Other Decks in Technology

See All in Technology
Cracking the KubeCon CfP
inductor
2
250
開発生産性大幅アップ！Postman VS Code拡張機能
nagix
2
380
開発パフォーマンスを最大化するための開発体制
ham0215
2
440
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
540
データベース02: データベースの概念
trycycle
0
160
VS CodeでAWSを操作しよう
smt7174
8
1.7k
Python と Snowflake はズッ友だょ！~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
120
リテール金融（キャッシュレス・ネット銀行・ネット証券）の競争環境と経済圏
8maki
0
1.2k
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
130
Databricks における 『MLOps』
databricksjapan
2
170

Featured

See All Featured
GraphQLとの向き合い方2022年版
quramy
32
12k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Faster Mobile Websites
deanohume
299
30k
How GitHub (no longer) Works
holman
304
140k
Documentation Writing (for coders)
carmenintech
60
3.9k
Code Reviewing Like a Champion
maltzj
514
39k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Designing for humans not robots
tammielis
248
25k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
The Invisible Side of Design
smashingmag
294
49k

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)