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

Intro to HTML

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for lumilux lumilux
April 03, 2012
Programming
240
2

Intro to HTML

Avatar for lumilux

lumilux

April 03, 2012

Other Decks in Programming

See All in Programming
自分的「カンファレンスの楽しみ方」
Avatar for syumai syumai
0
120
ハーネス設計入門 〜プロンプト、コンテキストの次〜
Avatar for kinopee kinopeee
46
29k
Cloudflare is Agents
Avatar for chimame chimame
0
190
高専、大学編入、そして未踏へ〜プロダクト開発とキャリアの歩み - Technical College, University Transfer, and On to “Mitou” / My Journey in Product Development and Career
Avatar for __pkmiya pkmiya
0
120
Deep dive into the select statement (GopherCon UK)
Avatar for Jesús Espino jespino
0
160
KotlinConf Extended South Korea 2026 Keynote
Avatar for HyunWoo Lee l2hyunwoo
0
130
Hello, Hiroshima Geospatial Data! — Exploring DoboX with Python
Avatar for ぴっかりん ra0kley
0
130
T3DD26: From RAGs to Riches
Avatar for Martin Helmich martinhelmich
0
120
生成AIで帳票OCRが「簡単に」作れる時代になった？
Avatar for Shohei Kondo kon_shou
0
1.2k
Detecting Compromised CI with eBPF and Cilium Tetragon
Avatar for Liz Rice lizrice
0
280
Go を使い始めて 2 ヶ月の学び / My first two months with Go
Avatar for Daisuke Garaike contour_gara
0
400
わからない話を追いかけたら、プログラミング言語を作る側にいた
Avatar for ydah ydah
3
570

Featured

See All Featured
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
300
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
It's Worth the Effort
Avatar for 3n 3n
188
29k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
53k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
560
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
860
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
450
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
400

Transcript

  1. INTRO TO HTML HANS HYTTINEN

  2. <h1>Witty Headline</h1> <p>The quick brown fox jumps over the lazy

    dog.</p>

  3. HYPERTEXT MARKUP LANGUAGE semantics & structure design & presentation ✓

    ✘

  4. WHY SEMANTICS? Humans can infer structure and meaning. Browsers need

    some help.

  5. AN HTML DOCUMENT ...is just text that has been marked

    up. ...is usually saved as a .html file. ...is what your browser was made for.

  6. <h1>Witty Headline</h1> <p>The quick brown fox jumps over the lazy

    dog.</p> HEADING LEVEL ONE PARAGRAPH

  7. <h1>Witty Headline</h1> OPENING TAG ELEMENT CONTENT CLOSING TAG

  8. <h1 id=“best” class=“witty”> Witty Headline</h1> VALUES ATTRIBUTES

  9. <a href=“http://adicu.com”>ADI</a> LINK (ANCHOR) <img src=“http://adicu.com/images/ adi-logo.png” alt=“logo” /> IMAGE

  10. COMMON ELEMENTS <a> <em> <abbr> <p> <ol> <ul> <div> grouping

    <h1> <header> <footer> <section> <article> phrasing sectioning

  11. ELEMENT TYPES http://j.mp/html5-tags

  12. <header><h1>My Blog</h1></header> <section> <article> <h2>First post!</h2> <p>This is my <em>very</em>

    first post.</p> <p>I hope you like it!</p> </article> </section> <footer><p>By Joe Smith</p></footer>

  13. WHAT YOU NEED <!doctype html> <html> <head> <title>Your page title</title>

    </head> <body> <p>Your stuff goes in the body!</p> </body> </html>

  14. MORE EXAMPLES

  15. ORDERED LISTS <ol> <li>Open file</li> <li>Edit file</li> <li>Save file</li> <li>Close

    app</li> </ol> 1.Open file 2.Edit file 3.Save file 4.Close app

  16. UNORDERED LISTS <ul> <li>Eggs</li> <li>Bread</li> <li>Milk</li> <li>Saffron</li> </ul> •Eggs •Bread

    •Milk •Saffron

  17. TEXT SEMANTICS <p> <em>Emphasized</em>, <strong>Strongly emphasized</strong> </p> Emphasized, Strongly emphasized

  18. TEXT NON-SEMANTICS <p> RMS <i>Titanic</i>. This is a<br> <b>keyword</b>. </p>

    RMS Titanic. This is a keyword. SPECIAL CASES ONLY!

  19. HTML RESOURCES codecademy.com/courses/html-one-o-one developer.mozilla.org/en/HTML w3.org validator.w3.org wiki.adicu.com

  20. OTHER PEOPLE’S HTML

  21. Chrome and Firefox: ⌥ ⌘ i Ctrl ⇧ i DEVELOPER

    TOOLS Right click → View Page Source RAW PAGE SOURCE

  22. MY PAGE IS STILL UGLY HTML defines structure. Intro to

    CSS: next week CSS defines presentation!

  23. adicu.com j.mp/intro-to-html THESE SLIDES