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

HTML

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

 HTML

Using semantic markup

Avatar for Ryan Krug

Ryan Krug

January 18, 2012

Other Decks in Programming

See All in Programming
脱 雰囲気実装！ AgentCoreを良い感じに WEBアプリケーションに組み込むために
Avatar for Takuya Yonezawa takuyay0ne
3
420
Mastering Event Sourcing: Your Parents Holidayed in Yugoslavia
Avatar for Marek Matulka super_marek
0
130
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
1.3k
生成 AI 時代のスナップショットテストってやつを見せてあげますよ（α版）
Avatar for ojun ojun9
0
330
Geminiをパートナーに神社DXシステムを個人開発した話（いなめぐDX 開発振り返り）
Avatar for T. Fujiba fujiba
0
130
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
Avatar for Seitaro Fujigaki seitarof
3
1.3k
RSAが破られる前に知っておきたい 耐量子計算機暗号(PQC)入門 / Intro to PQC: Preparing for the Post-RSA Era
Avatar for mackey0225 mackey0225
3
110
AI時代のシステム設計：ドメインモデルで変更しやすさを守る設計戦略
Avatar for 増田 亨 masuda220
PRO
6
1.1k
20260315 AWSなんもわからん🥲
Avatar for Chiaki Okamoto chiilog
2
180
それはエンジニアリングの糧である：AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
Avatar for nrs nrslib
1
810
コードレビューをしない選択 #でぃーぷらすトウキョウ
Avatar for Takuma Kajikawa kajitack
3
1.2k
へんな働き方
Avatar for Yusuke Wada yusukebe
6
2.9k

Featured

See All Featured
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
290
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
190
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
170
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.5k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
280
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
37k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
100
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
110
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
140

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