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
74
4a25d6bbb0e5ea5e1cf777fa6ede1102?s=48 slant
6
340
4a25d6bbb0e5ea5e1cf777fa6ede1102?s=48 slant
1
190
4a25d6bbb0e5ea5e1cf777fa6ede1102?s=48 slant
1
240

Other Decks in Programming

See All in Programming
C9ab1175a6981a2f67ce8d08aa17c15a?s=48 mpilquist
0
110
6e85e396c2fca10e469e67cbede8104e?s=48 yukikimoto
0
110
Db8efd836c9a09b71e3d8e1c60d6ea84?s=48 colinfay
0
130
D4b671ba3e441fa2aad85d7508ab67a2?s=48 treastrain
1
150
4131d2f57a0db2a2b4d9a62bd389fd44?s=48 tarcieri
0
250
D4f04ef104c8fbfc9caa3c80e41692fd?s=48 tsuzuki817
1
290
B67d76d100e6dbb2ec11087c44d02fbf?s=48 takahiro901
0
160
C302e84057a922dce0ecbe80207e3fcc?s=48 mu_zaru
0
220
A94b345fdc251ea9526e4709b5384b59?s=48 tsuyosh
0
190
5d0a36a99b7fa2731c2bf1ad56ed1e6f?s=48 struuuuggle
0
190
9ae4f3862d4cb0771cfd36e43252f755?s=48 kurotanshi
0
210
B7caf463b7dbc6c305ba290ec3c16521?s=48 eroispaziali
0
280

Featured

See All Featured
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
8
1.2k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
420
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
581
190k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
296
30k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
323
14k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
5
340
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
70
7k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
230
750k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
164
6.7k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
202
35k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
240
20k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
4
3.4k

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