Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

HTML Primer

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Adam Carlile Adam Carlile
October 08, 2014
Technology
63
0

HTML Primer

What is html? An introduction to HTML as part of a series of work related workshops

Avatar for Adam Carlile

Adam Carlile

October 08, 2014

More Decks by Adam Carlile

See All by Adam Carlile
Docker: An Introduction
Avatar for Adam Carlile adamcarlile
0
36

Other Decks in Technology

See All in Technology
DGX Spark でどこまでハッキングができるのか？
Avatar for kash1064 kash1064
3
1.3k
遠藤な_めぐろLT #38 「社内のAI活用推進」@麻布台_20261009
Avatar for Naoya Endo endonanana
0
130
Optunaの最新リリースv5.0について
Avatar for Preferred Networks pfn
PRO
0
120
「Docker Desktop不要の時代」は 来たのか？
Avatar for ueponx ueponx
0
770
しろおびから始める！ログ活用の第一歩
Avatar for Shumei Ito shumei_ito
0
950
スキマバイトという雇用形態は存在しないので、雇用期間1日のアルバイト契約を事業者とワーカーが結ぶ手続きを支えるのがタイミーなんです
Avatar for しが あきとし(akitoshiga) akitoshiga
0
200
Metadata - Section 1: HTML Basics
Avatar for mohab soliman mohab1
0
120
フロントエンドカンファレンス関西2026 - 速すぎるUIに、待ち時間を
Avatar for teamLab teamlab
PRO
0
130
Claude の新機能を、 出た日に触って社内に届けるまで
Avatar for ふくだ（fukuda ryu） rfdnxbro
1
180
無理せず続ける、子育てエンジニアの学び
Avatar for コドモン開発チーム codmoninc
PRO
0
870
AI導入は済んだ。次は統制を作り替える番だ_AI×開発組織 Summit 2026
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
220
Rust で関数型ドメインモデリング
Avatar for ONDA, Takashi takonda
0
140

Featured

See All Featured
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
4
4k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
1
570
Code Reviewing Like a Champion
Avatar for maltzj maltzj
529
40k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.4k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
940
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
490
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
310
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
2
330
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
2
410
Scaling GitHub
Avatar for Zach Holman holman
464
140k

Transcript

  1. WHAT IS: HTML?

  2. BRICKS (well, elements)

  3. GIVES MEANING TO INFORMATION

  4. GIVES MEANING TO INFORMATION

  5. ELEMENTS GIVE TEXT MEANING

  6. JUST LIKE WORD!(sometimes…)

  7. HISTORY

  8. None

  9. TWENTY FOUR YEARS AGO IN A BUNKER(CERN)

  10. 1995-98: BATTLE OF THE BROWSERS

  11. 2002-2004: BATTLE OF THE BROWSERS II

  12. 2007-2010 CONSOLIATION

  13. WHAT DOES HTML LOOK LIKE?

  14. <h1  id=“springfield”>     Dr  Nick  Riviera   </h1>

  15. <h1  id=“springfield”>     Dr  Nick  Riviera   </h1> Delimiters

  16. <h1  id=“springfield”>     Dr  Nick  Riviera   </h1> Attribute

  17. <h1  id=“springfield”>     Dr  Nick  Riviera   </h1> Name

  18. <h1  id=“springfield”>     Dr  Nick  Riviera   </h1> Close

  19. A LEVEL ONE HEADING

  20. P A H1 H2 LI 
 UL OL DL DT

    DIV SPAN (many more)

  21. HTML  For  Beginners   By  Adam     -­‐  Talk

     about  HTMl     -­‐  Practical  Exercise

  22. <h1>HTML  For  Beginners</h1>   <p>     By  <a  href=‘/author’>Adam</a>

      </p>   <ul>     <li>Talk  about  HTMl</li>     <li>Practical  Exercise</li>   </ul>

  23. BUT THAT’S JUST A FRAGMENT

  24. <!DOCTYPE  html>   <html  lang=“en”>     <head>    

    </head>     <body>     </body>   </html>

  25. <!DOCTYPE  html>   <html  lang=“en”>     <head>    

    </head>     <body>     </body>   </html>

  26. <!DOCTYPE  html>   <html  lang=“en”>     <head>    

    </head>     <body>     </body>   </html>

  27. <!DOCTYPE  html>   <html  lang=“en”>     <head>    

    </head>     <body>     </body>   </html>

  28. <head>     <meta  charset="utf-­‐8">     <title>BoardIQ</title>    

    <script  src=“app.js”></script>   </head>

  29. <!DOCTYPE  html>   <html  lang=“en”>     <head>    

    </head>     <body>     </body>   </html>

  30. BLOCK VS INLINE

  31. <p>     Hello  everyone  this  is  a    

    paragraph,  it’s  <em>really     important</em>  that  you  listen       to  me  talking,  as  I  love  the     sound  of  <a  href=“/author”>     my</a>  own  voice!   </p>

  32. <p>     Hello  everyone  this  is  a    

    paragraph,  it’s  <em>really     important</em>  that  you  listen       to  me  talking,  as  I  love  the     sound  of  <a  href=“/author”>     my</a>  own  voice!   </p>

  33. <p>     Hello  everyone  this  is  a    

    paragraph,  it’s  <em>really     important</em>  that  you  listen       to  me  talking,  as  I  love  the     sound  of  <a  href=“/author”>     my</a>  own  voice!   </p>

  34. LETS DO SOME TYPING