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
4a25d6bbb0e5ea5e1cf777fa6ede1102?s=48 slant
0
76
4a25d6bbb0e5ea5e1cf777fa6ede1102?s=48 slant
6
340
4a25d6bbb0e5ea5e1cf777fa6ede1102?s=48 slant
1
190
4a25d6bbb0e5ea5e1cf777fa6ede1102?s=48 slant
1
250

Other Decks in Programming

See All in Programming
3187acdb47cb44678ad716c3228bf91b?s=48 keeeeen
0
250
0620564f0125b8b3b7f4fe40c10b8b4e?s=48 tattn
6
590
5d769d109697012317c09c6a27a6a4bf?s=48 linyows
1
180
218473ff7abad0fcd72865da2b23bb5b?s=48 memory1994
6
670
C27317d1ebe4e4a01504acab9d87fe61?s=48 hellsquirrel
0
370
64e95d2d8051ee58501f21987f46b9e7?s=48 chck
5
2.3k
13824f545937c1ae0a80739aea2e396c?s=48 mlopskr
0
310
B85111454fe19a425c375a28bc27996b?s=48 kitsuneeee
1
340
07fe43bbec550b3230b3a7f9a81de7cc?s=48 nishigori
2
1.5k
42a6a049ac8f5265f31858a9509217fb?s=48 uhooi
0
140
3a622e726b35fe71480166a16edcb66e?s=48 ariarijp
1
320
0ed10d1154c696886ca483fe827cb299?s=48 thatjeffsmith
0
320

Featured

See All Featured
78b475797a14c84799063c7cd073962f?s=48 holman
290
130k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
4k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
1.5k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
17k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
118
5k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
252
11k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
81
3.5k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
14
810
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
73
270k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
193
8.8k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
37
1.8k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
371
43k

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