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
45

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
77
ASOS Prince's Trust Get Into Technology - CSS
si
0
64
The Working and Managements Styles of Five Different Industries
si
0
270
Sponsor a Mac
si
1
140
Tweets for Balls
si
0
100

Other Decks in Technology

See All in Technology
Engineer Career Talk
lycorp_recruit_jp
0
190
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
710
複雑なState管理からの脱却
sansantech
PRO
1
160
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
560
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
Mastering Quickfix
daisuzu
1
110
"とにかくやってみる"で始めるAWS Security Hub
maimyyym
2
100
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
880
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110

Featured

See All Featured
Practical Orchestrator
shlominoach
186
10k
Six Lessons from altMBA
skipperchong
27
3.5k
Embracing the Ebb and Flow
colly
84
4.5k
For a Future-Friendly Web
brad_frost
175
9.4k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
6.9k
Code Reviewing Like a Champion
maltzj
520
39k
Documentation Writing (for coders)
carmenintech
65
4.4k
How to Ace a Technical Interview
jacobian
276
23k
Building Applications with DynamoDB
mza
90
6.1k
Optimizing for Happiness
mojombo
376
70k
Building Adaptive Systems
keathley
38
2.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k

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)