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

HTML and CSS

4a25d6bbb0e5ea5e1cf777fa6ede1102?s=47 Ryan L. Cross
April 26, 2011
Programming
1
190

HTML and CSS

4a25d6bbb0e5ea5e1cf777fa6ede1102?s=128

Ryan L. Cross

April 26, 2011
Tweet

More Decks by Ryan L. Cross

See All by Ryan L. Cross
Nest & Hue
4a25d6bbb0e5ea5e1cf777fa6ede1102?s=48 slant
0
77
jQuery
4a25d6bbb0e5ea5e1cf777fa6ede1102?s=48 slant
6
350
Introduction to Ruby
4a25d6bbb0e5ea5e1cf777fa6ede1102?s=48 slant
1
190
jQuery
4a25d6bbb0e5ea5e1cf777fa6ede1102?s=48 slant
1
250

Other Decks in Programming

See All in Programming
夕食断食にTRY!/for-lt-12th
82492720940b57cec5072e190213ba3a?s=48 pachikuriii
0
230
ESM移行は無理だけどおれもSindreのライブラリが使いたい！
208355d7af69fa84a78048f78077048a?s=48 sosukesuzuki
2
540
WindowsコンテナDojo: 第4回 Red Hat OpenShift Localを使ってみよう
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
180
Edge Side Frontend という新領域
3aebd86547bfc5cdb451d5f2f95ed5d8?s=48 mizchi
22
10k
アジャイルで始める データ分析基盤構築
384e4d8bab8ac2a5e6f64dab1300c491?s=48 nagano
1
880
Records の使い方はこれでいいの？
をみんなで考えたい / Java DO #20
8c6c1f0c4c41d0640ade76bd71e9e475?s=48 gishi_yama
0
120
FullStack eXchange, July 2022
6f3ec7315ad0715ae2a5f89a52877218?s=48 brucel
0
200
企業内スモールデータでのデータ解析
6aceb3377c71b05c1285459c596d1d1f?s=48 hamage9
0
890
このタイミングで知っておきたい 開発生産性の高いエンジニア組織の特徴とは / dev-sumi-20220721-productivity-features
6f425ca5b796b421dca359b95046184f?s=48 findyinc
7
2.6k
Pythonで鉄道指向プログラミング
Cc15f7fbb06e96bdb56992e3d42ea8cd?s=48 usabarashi
0
130
Rに管理されてみる
154699a2e3d8b497494a5ee118f211a5?s=48 kazutan
0
250
閱讀原始碼 - 再戰十年的 jQuery
Dbfa12cd7e1ff8b06a588609369d6e49?s=48 eddie
1
290

Featured

See All Featured
Building Applications with DynamoDB
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
84
4.8k
Faster Mobile Websites
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
The Invisible Side of Design
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
290
48k
The Straight Up "How To Draw Better" Workshop
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
225
120k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
Fight the Zombie Pattern Library - RWD Summit 2016
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
226
15k
Unsuck your backbone
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
659
55k
Debugging Ruby Performance
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
65
10k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
12
940
In The Pink: A Labor of Love
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
131
21k
Bootstrapping a Software Product
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
296
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
151
13k

Transcript

  1. <html> Wednesday, September 19, 12

  2. What is HTML? What is CSS? Wikipedia: The purpose of

    a web browser is to read HTML documents and compose them into visual or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both the HTML and the CSS standards, encourages the use of CSS over explicitly presentational HTML markup. It primarily exists to separate the content from the presentation. Better question: What is HTML for? Wednesday, September 19, 12

  3. Anatomy of HTML Elements <a href="http://google.com">Google</a> <element attribute="value">Content</element> <img src="thing.jpg"

    /> Wednesday, September 19, 12

  4. Anatomy of an HTML file • Elements (or tags) <p>My

    paragraph.</p> • Attributes <a href="">click here</a> <html> <head> <!-- Information about the content --> <title>Simple Title</title> </head> <body> <!-- Actual content --> <a href="http://google.com">Google</a> </body> </html> Wednesday, September 19, 12

  5. p { color: red; } <html> <head> <title>Simple Title</title> <link

    rel="stylesheet" href="stylesheet.css" /> </head> <body> <a href="http://google.com">Google</a> </body> </html> How to use a CSS file index.html stylesheet.css HTML CSS Wednesday, September 19, 12

  6. <p>This is an HTML paragraph.</p> <h1>Welcome!</h1> HTML in action p

    { color: blue; font-weight: bold; } h1 { background: gray; } CSS in action Wednesday, September 19, 12

  7. HTML CSS defines the structure defines the appearance HyperText Markup

    Language Cascading Style Sheets what is presented how it’s presented -VS- this is a paragraph all paragraphs are red Wednesday, September 19, 12

  8. Old and Busted New Hotness Types of Markup Structural markup

    only! HTML HTML Not much Handles all presentation code CSS CSS • Structural <p> • Presentational <font> <P> <FONT color="red">o hai</FONT> </P> Methodologies Wednesday, September 19, 12

  9. Why does this matter? • Looks nasty • Hard to

    maintain • Repetitive Old • Compatibility • Organization • Reusability New old_html.html new_html.html new_stylesheet.css Structural and presentational markup together Structural Presentational <P> <FONT color="red">o hai</FONT> </P> <p>o hai</p> p { color: red; } Wednesday, September 19, 12

  10. Why does it matter? <p>Never gonna give you up,</p> <p>Never

    gonna let you down,</p> <p>Never gonna run around and desert you.</p> <p>Never gonna make you cry,</p> <p>Never gonna say goodbye,</p> <p>Never gonna tell a lie and hurt you.</p> p { color: ; } Never gonna give you up, Never gonna let you down, Never gonna run around and desert you. Never gonna make you cry, Never gonna say goodbye, Never gonna tell a lie and hurt you. output red blue Never gonna give you up, Never gonna let you down, Never gonna run around and desert you. Never gonna make you cry, Never gonna say goodbye, Never gonna tell a lie and hurt you. output Wednesday, September 19, 12

  11. HTML Tags Doctype: Strict, Traditional, Frameset Wednesday, September 19, 12

  12. CSS Properties CSS 1 or CSS 2 Wednesday, September 19,

    12

  13. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>

    <title>Hello World!</title> </head> <body> <p>Just saying hi.</p> </body> </html> ! DOCTYPE Wednesday, September 19, 12

  14. "OJOTUSVDUJPOUIBUBTTPDJBUFTBQBSUJDVMBS4(.-PS9.-EPDVNFOU GPSFYBNQMF BXFCQBHF XJUIB%PDVNFOU5ZQF%FpOJUJPO %5%  GPS FYBNQMF UIFGPSNBMEFpOJUJPOPGBQBSUJDVMBSWFSTJPOPG)5.- 

    doc•type dec•la•ra•tion noun c㷦EÅLU⒒Q㷧EFLMⓒ㷦S⒑TIⓒOc "OJOTUSVDUJPOUIBUBTTPDJBUFTBQBSUJDVMBS4(.-PS9.-EPDVNFOU GPSFYBNQMF BXFCQBHF XJUIB%PDVNFOU5ZQF%FpOJUJPO %5%  GPS FYBNQMF UIFGPSNBMEFpOJUJPOPGBQBSUJDVMBSWFSTJPOPG)5.-  (or Doctype) markup languages HTML v4.01, HTML v5, XHTML 1.1, etc Wednesday, September 19, 12

  15. Doctypes tell your browser how to render your code. Wednesday,

    September 19, 12

  16. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML

    PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:// www.w3.org/TR/html4/strict.dtd"> HTML 4.01 DOCTYPES HTML5 DOCTYPE <!DOCTYPE html> LAME! Wednesday, September 19, 12

  17. <!--================== HTML content models ===============================--> <!-- HTML has two basic

    content models: %inline; character level elements and text strings %block; block-like elements e.g. paragraphs and lists --> <!ENTITY % block "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS"> <!ENTITY % flow "%block; | %inline;"> HTML 4.01 Strict Doctype Wednesday, September 19, 12

  18. So, why use a doctype? Using a doctype ensures maximum

    compatibility across browsers. Think of a doctype as a set of rules by which all browsers must play. Q: A: Wednesday, September 19, 12

  19. <demo /> Wednesday, September 19, 12

  20. </html> Wednesday, September 19, 12

  21. Thank you! Ryan L. Cross Cylence, Inc. (cylence.com) Twitter: @slant,

    @cylenceinc Upcoming Enclave Discussions May iOS June UX July jQuery August Photoshop enclavecoop.com/discussions Wednesday, September 19, 12