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

HTML Primer

Adam Carlile
October 08, 2014
Technology
0
51

HTML Primer

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

Adam Carlile

October 08, 2014
Tweet

More Decks by Adam Carlile

See All by Adam Carlile
Docker: An Introduction
adamcarlile
0
27

Other Decks in Technology

See All in Technology
止まらないLinuxシステムを構築する_高信頼性クラスタ入門
koedoyoshida
1
160
R3のコードから見る実践LINQ実装最適化・コンカレントプログラミング実例
neuecc
3
2.3k
EM完全に理解した と思ったけど、 やっぱり何も分からなかった話 / EM Night Fukuoka #1
hirutas
0
280
Gradle Build Scanを使ってビルドのことを知ろう potatotips #87
tomorrowkey
2
150
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
400
AWS学習者向けにAzureの解説スライドを作成した話
handy
3
190
Rustで「プリズモイダル法」を利用して「土量計算」をガチでやる
nokonoko1203
1
280
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
1
360
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
150
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
270
AOAI をきっかけに​ 社内の Azure 管理を見直した話​
recruitengineers
PRO
1
450

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
20
1.6k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
GitHub's CSS Performance
jonrohan
1025
450k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Building an army of robots
kneath
300
41k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Web development in the modern age
philhawksworth
203
10k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Web Components: a chance to create the future
zenorocha
306
41k

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