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

HTML Primer

Avatar for Adam Carlile Adam Carlile
October 08, 2014
Technology
0
54

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
Tweet

More Decks by Adam Carlile

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

Other Decks in Technology

See All in Technology
20260204_Midosuji_Tech
Avatar for Takuya Yonezawa takuyay0ne
1
140
顧客の言葉を、そのまま信じない勇気
Avatar for yamatai12 yamatai1212
1
350
ClickHouseはどのように大規模データを活用したAIエージェントを全社展開しているのか
Avatar for Miki Matsumoto mikimatsumoto
0
210
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
Avatar for ないとー bwkw
3
920
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.8k
IaaS/SaaS管理における SREの実践 - SRE Kaigi 2026
Avatar for Shun bbqallstars
4
1.8k
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
570
GitHub Issue Templates + Coding Agentで簡単みんなでIaC/Easy IaC for Everyone with GitHub Issue Templates + Coding Agent
Avatar for AEON aeonpeople
1
200
学生・新卒・ジュニアから目指すSRE
Avatar for Hiroya Onoe hiroyaonoe
2
590
OWASP Top 10:2025 リリースと 少しの日本語化にまつわる裏話
Avatar for Riotaro OKADA okdt
PRO
3
590
Claude_CodeでSEOを最適化する_AI_Ops_Community_Vol.2__マーケティングx_AIはここまで進化した.pdf
Avatar for 小笠原理久 riku_423
2
530
AIエージェントを開発しよう！-AgentCore活用の勘所-
Avatar for YukiOgawa yukiogawa
0
140

Featured

See All Featured
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
120
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
430
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Designing for Performance
Avatar for Lara Hogan lara
610
70k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
650
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
150
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
0
3.4k

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