HTML and CSS

<html> Wednesday, September 19, 12

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 deﬁne 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

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

Anatomy of an HTML ﬁle • Elements (or tags) My
paragraph. • Attributes <a href="">click here</a> <html> <head>  <title>Simple Title</title> </head> <body>  <a href="http://google.com">Google</a> </body> </html> Wednesday, September 19, 12

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 ﬁle index.html stylesheet.css HTML CSS Wednesday, September 19, 12

This is an HTML paragraph. <h1>Welcome!</h1> HTML in action p
{ color: blue; font-weight: bold; } h1 { background: gray; } CSS in action Wednesday, September 19, 12

HTML CSS deﬁnes the structure deﬁnes 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

Old and Busted New Hotness Types of Markup Structural markup
only! HTML HTML Not much Handles all presentation code CSS CSS • Structural • Presentational o hai Methodologies Wednesday, September 19, 12

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 o hai o hai p { color: red; } Wednesday, September 19, 12

Why does it matter? 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. 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

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

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

<!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> Just saying hi. </body> </html> ! DOCTYPE Wednesday, September 19, 12

"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

Doctypes tell your browser how to render your code. Wednesday,
September 19, 12

<!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

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

<demo /> Wednesday, September 19, 12

</html> Wednesday, September 19, 12

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

HTML and CSS

HTML and CSS

Ryan L. Cross

More Decks by Ryan L. Cross

Other Decks in Programming

Featured

Transcript

<html> Wednesday, September 19, 12

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

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

Anatomy of an HTML ﬁle • Elements (or tags) <p>My

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

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

HTML CSS deﬁnes the structure deﬁnes the appearance HyperText Markup

Old and Busted New Hotness Types of Markup Structural markup

Why does this matter? • Looks nasty • Hard to

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

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

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

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

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

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

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

<!-- HTML has two basic

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

<demo /> Wednesday, September 19, 12

</html> Wednesday, September 19, 12

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