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
ClickHouseはどのように大規模データを活用したAIエージェントを全社展開しているのか
Avatar for Miki Matsumoto mikimatsumoto
0
200
IaaS/SaaS管理における SREの実践 - SRE Kaigi 2026
Avatar for Shun bbqallstars
4
1.7k
Embedded SREの終わりを設計する　「なんとなく」から計画的な自立支援へ
Avatar for SansanTech sansantech
PRO
3
2.2k
データ民主化のための LLM 活用状況と課題紹介（IVRy の場合）
Avatar for 和田 悠佑 wxyzzz
2
680
OWASP Top 10:2025 リリースと 少しの日本語化にまつわる裏話
Avatar for Riotaro OKADA okdt
PRO
2
300
ZOZOにおけるAI活用の現在 ~開発組織全体での取り組みと試行錯誤~
Avatar for ZOZO Developers zozotech
PRO
5
4.9k
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
42k
あたらしい上流工程の形。 0日導入からはじめるAI駆動PM
Avatar for 熊井悠 kumaiu
5
760
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
360
SREのプラクティスを用いた3領域同時 マネジメントへの挑戦 〜SRE・情シス・セキュリティを統合した チーム運営術〜
Avatar for coconala_engineer coconala_engineer
2
610
MCPでつなぐElasticsearchとLLM - 深夜の障害対応を楽にしたい / Bridging Elasticsearch and LLMs with MCP
Avatar for Sashimimochi sashimimochi
0
150
（金融庁共催）第4回金融データ活用チャレンジ勉強会資料
Avatar for tak takumimukaiyama
0
140

Featured

See All Featured
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
230
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.4k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
110
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
74
11k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
230
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
4.9k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
47

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