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 />
Upcoming SlideShare
Loading in...5
×

Fundamental HTML and CSS

3,890
-1

Published on

Published in: Technology, Design
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,890
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
144
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide
  • What is the content? What does it look like? How does it function?
  • 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 />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×