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
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
Avatar for yimajo yimajo
2
210
データベースコネクションプール(DBCP)の変遷と理解
Avatar for k.fujikawa8 fujikawa8
1
270
イベントストーミングから始めるドメイン駆動設計
Avatar for おだかとしゆき jgeem
4
870
git worktree × Claude Code × MCP ～生成AI時代の並列開発フロー～
Avatar for hisuzuya hisuzuya
0
250
Claude Codeの使い方
Avatar for ttnyt8701 ttnyt8701
1
130
型付きアクターモデルがもたらす分散シミュレーションの未来
Avatar for Takatomo Torigoe piyo7
0
800
コード書くの好きな人向けAIコーディング活用tips #orestudy
Avatar for Hiromi Hishida 77web
3
330
Gleamという選択肢
Avatar for Comamoca comamoca
6
750
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
140
LINEヤフー データグループ紹介
Avatar for LINEヤフー株式会社 採用情報 lycorp_recruit_jp
0
770
C++20 射影変換
Avatar for Akira Takahashi faithandbrave
0
500
Using AI Tools Around Software Development
Avatar for inouehi inouehi
0
1.2k

Featured

See All Featured
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.4k
It's Worth the Effort
Avatar for 3n 3n
184
28k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.5k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.3k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k

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