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

HTML Primer

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
570
Context Engineeringが企業で不可欠になる理由
Avatar for Hirosato Gamo hirosatogamo
PRO
3
530
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
13k
データの整合性を保ちたいだけなんだ
Avatar for ShoheiMitani shoheimitani
8
3.1k
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
420
Azure Durable Functions で作った NL2SQL Agent の精度向上に取り組んだ話/jat08
Avatar for TonyTonyKun thara0402
0
170
We Built for Predictability; The Workloads Didn’t Care
Avatar for Michael Stahnke stahnma
0
140
配列に見る bash と zsh の違い
Avatar for kazzpapa3 kazzpapa3
1
130
プロダクト成長を支える開発基盤とスケールに伴う課題
Avatar for yuu26 yuu26
4
1.3k
10Xにおける品質保証活動の全体像と改善 #no_more_wait_for_test
Avatar for nihonbuson nihonbuson
PRO
2
230
Amazon S3 Vectorsを使って資格勉強用AIエージェントを構築してみた
Avatar for usanchuu usanchuu
3
450
茨城の思い出を振り返る ～CDKのセキュリティを添えて～ / 20260201 Mitsutoshi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
230

Featured

See All Featured
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
110
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
4.9k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
6.9k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
48
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.1k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.6k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
61
52k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
130
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k

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