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

HTML

Avatar for Ryan Krug Ryan Krug
January 18, 2012
Programming
10
560

 HTML

Using semantic markup
Avatar for Ryan Krug

Ryan Krug

January 18, 2012
Tweet

Other Decks in Programming

See All in Programming
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
Avatar for Yuuki Tsubouchi (yuuk1) yuukit
3
620
Proxmoxをまとめて管理できる コンソール作ってみました
Avatar for karugamo karugamo
1
410
「兵法」から見る質とスピード
Avatar for ICKX ickx
0
200
iOSアプリ開発もLLMで自動運転する
Avatar for Yuya Hirayama hiragram
6
2.2k
當開發遇上包裝： AI 如何讓產品從想法變成商品
Avatar for Caesar Chi clonn
0
2.6k
tsconfigのオプションで変わる型世界
Avatar for Keisuke Ikeda keisukeikeda
1
130
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
Avatar for mackey0225 mackey0225
0
140
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
Avatar for Mutsuha Asada momeemt
1
120
技術懸念に立ち向かい 法改正を穏便に乗り切った話
Avatar for popCashew pop_cashew
0
840
複数アプリケーションを育てていくための共通化戦略
Avatar for irof irof
3
770
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
Avatar for Masayuki Izumi izumin5210
4
480
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ～他言語変換の仕組み～ / cdk-language-transformation
Avatar for k.goto gotok365
7
380

Featured

See All Featured
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
336
57k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
850
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
6.6k
It's Worth the Effort
Avatar for 3n 3n
184
28k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
42
2.3k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
55
5.6k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
30
970

Transcript

  1. HTML Using semantic markup

  2. What are we here for?

  3. User Interfaces Content Presentation Behavior

  4. User Interfaces Content: HTML Presentation: CSS Behavior: Javascript

  5. 1996 2002 2005 html css javascript

  6. Why? Accessible Portable Maintainable

  7. Why? Accessible: SEO Portable: Different Devices Maintainable: Client Edits

  8. http://foodsense.is/ Example

  9. HTML defines content & structure

  10. HTML is not a programming language But it is a

    formatting language

  11. Content informs the formatting. Based on meaning rather than look.

  12. <em>text</em> vs <i>text</i> <strong>text</strong> vs <b>text</b>

  13. Bad Tags b bold text big makes text slightly larger

    center centers text font specifies size, color, and typeface i italic text small makes text slightly smaller strike strike-through text u underline text

  14. HTML first > Semantic markup CSS After > Presentation

  15. HTML Boilerplate <!doctype html> <html> <head> <title>My Title</title> </head> <body>

    <!-- content here --> </body> </html>

  16. <tagname attribute=“value”> content </tagname> <p class=“demotext”> I’m <em>really</em> sad </p>

    Content Tags

  17. <tagname attribute=“value”> <img src=“smile.png”> Empty Content Tags

  18. Tags Headings h1,h2,h3,h4,h5,h6 Paragraphs p Quotes blockquote Lists ol,ul,li,dl,dt,dd Tables

    table,tr,th,td Forms form,label,input,textarea,select Text em,strong Images img Links a

  19. Special Characters & &amp; < &lt; > &gt; © &copy;

    ® &reg; ™ &trade; – &ndash; — &mdash; … &hellip; ‘ &lsquo; ’ &rsquo; “ &ldquo; ” &rdquo;

  20. Demo http://github.com/krug/art304.demos