Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Fundamental<br />HTML and CSS<br />Corey A. Spitzer<br />SKAR Advertising<br />July, 2009<br />
A web page, broken down<br />Content/Data<br />UI Logic<br />Styling<br />Rules<br />Web Browser<br />Website<br />
A web page, broken down<br />HTML<br />Javascript<br />CSS<br />Web Browser<br />Website<br />
HTML<br />HyperText = text that can link to other <br />                    text via hyperlinks <br />Markup     = semanti...
HTML Tag Structure<br />&lt;textarearows=&quot;4&quot; cols=&quot;30&quot;&gt;<br />blah blah blah<br />&lt;/textarea&gt;<...
HTML Document Structure<br />(doctype)<br />&lt;html&gt;<br />	&lt;head&gt;<br />		(head info)<br />	&lt;/head&gt;<br />	&...
HTML Doctypes<br />&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;&quot;http://www.w3.org/TR/html4/strict.d...
HTML Examples<br />Demo<br />(html_examples.html)<br />
More HTML Info<br />More comprehensive<br />HTML tutorials and examples at<br />http://www.w3schools.com/Html/<br />
Questions?<br />CSS coming up...<br />
CSS<br />Cascading = styling rules &quot;cascade&quot;<br />			  from parent tags to child<br />                     tags;...
Basic CSS Structure<br />(tag name/class/id) <br />{<br />	(rule);<br />	(rule);<br />	...<br />}<br />
A Quick Digression<br />More CSS info,<br />but first...<br />
Hexadecimal Colors<br />#F62BB5<br />
Hexadecimal Colors<br />Decimal (base 10)<br />Digit values:<br />0,1,2,3,4,5,6,7,8,9<br />Hexidecimal (base 16)<br />Digi...
Hexadecimal Colors<br /> R G B<br />#000000<br />00 = 0<br />FF = 255<br />
Hexadecimal Colors<br /> R G B<br />#000000<br />16^6 = 16,777,216 possible colors<br />
CSS Examples<br />Demo<br />(css_examples.html)<br />
More CSS Info<br />More comprehensive<br />CSS tutorials and examples at<br />http://www.w3schools.com/Css/<br />
The End?<br />Questions?<br />Requests?<br />Comments?<br />Criticisms?<br />
Nächste SlideShare
Wird geladen in …5
×

Fundamental HTML and CSS

4.226 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie, Design
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Fundamental HTML and CSS

  1. 1. Fundamental<br />HTML and CSS<br />Corey A. Spitzer<br />SKAR Advertising<br />July, 2009<br />
  2. 2. A web page, broken down<br />Content/Data<br />UI Logic<br />Styling<br />Rules<br />Web Browser<br />Website<br />
  3. 3. A web page, broken down<br />HTML<br />Javascript<br />CSS<br />Web Browser<br />Website<br />
  4. 4. HTML<br />HyperText = text that can link to other <br /> text via hyperlinks <br />Markup = semantic structure and <br /> metadata describing the<br /> content<br />Language = language<br />
  5. 5. HTML Tag Structure<br />&lt;textarearows=&quot;4&quot; cols=&quot;30&quot;&gt;<br />blah blah blah<br />&lt;/textarea&gt;<br />Tag (aka Element) name<br />Attribute name<br />Attribute value<br />Tag contents<br />
  6. 6. HTML Document Structure<br />(doctype)<br />&lt;html&gt;<br /> &lt;head&gt;<br /> (head info)<br /> &lt;/head&gt;<br /> &lt;body&gt;<br /> (main content)<br /> &lt;/body&gt;<br />&lt;/html&gt;<br />
  7. 7. HTML Doctypes<br />&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;&quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;<br />More info at<br />http://www.w3.org/QA/Tips/Doctype<br />http://htmlhelp.com/tools/validator/doctype.html<br />
  8. 8. HTML Examples<br />Demo<br />(html_examples.html)<br />
  9. 9. More HTML Info<br />More comprehensive<br />HTML tutorials and examples at<br />http://www.w3schools.com/Html/<br />
  10. 10. Questions?<br />CSS coming up...<br />
  11. 11. CSS<br />Cascading = styling rules &quot;cascade&quot;<br /> from parent tags to child<br /> tags; rules can override<br /> others<br />Style = style<br />Sheet = file<br />
  12. 12. Basic CSS Structure<br />(tag name/class/id) <br />{<br /> (rule);<br /> (rule);<br /> ...<br />}<br />
  13. 13. A Quick Digression<br />More CSS info,<br />but first...<br />
  14. 14. Hexadecimal Colors<br />#F62BB5<br />
  15. 15. Hexadecimal Colors<br />Decimal (base 10)<br />Digit values:<br />0,1,2,3,4,5,6,7,8,9<br />Hexidecimal (base 16)<br />Digit values:<br />0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F<br />
  16. 16. Hexadecimal Colors<br /> R G B<br />#000000<br />00 = 0<br />FF = 255<br />
  17. 17. Hexadecimal Colors<br /> R G B<br />#000000<br />16^6 = 16,777,216 possible colors<br />
  18. 18. CSS Examples<br />Demo<br />(css_examples.html)<br />
  19. 19. More CSS Info<br />More comprehensive<br />CSS tutorials and examples at<br />http://www.w3schools.com/Css/<br />
  20. 20. The End?<br />Questions?<br />Requests?<br />Comments?<br />Criticisms?<br />

×