Your SlideShare is downloading. ×
0
HTML and CSS       Dave Kanter Academy of Art University      April 24, 2012
Quick OperaOpera.com1994, research project at Telnor inNorway2nd Oldest Browser still in UseBuilt on the Presto ECMAScript...
Act I - The Big Deal!Teeny-tiny market share (~1.6%)Completely EMCA compliantCompletely HTML compliantBoatload of Develope...
Act II - Opera MobileDesigned for Smartphones and PDAsRuns on EVERYTHING(but the iPhone)Nintendo DS and Wii!Presto is used...
Act III - Finale
HTMLHypertext Markup LanguageFor DESIGNERS, not codersDescribes page layoutDescribes page layout for....?Basis for all Web...
HTML Basics<!DOCTYPE html>or<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">What ...
Elements and Attributes<a href=”mysite.com”><input name=”text”><font color=”#FF0000”>
Two Types of Tags<div>This is a Div</div><p>This is a paragraph</p><br /><hr />HTML is all lower case!
Country GatesBad:<span><a href=”mysite.com”><em><strong>Click Me</em></a></span></strong>Good:<span><a href=”mysite.com”><...
<div>, <span>, <p>CONTAINER TAGS!<div align=”center”>You can put your entire site in this one div</div><span>Just one litt...
Lists (used w/css)Ordered Lists:<ol>     <li>Apple</li>     <li>Banana</li>     <li>Cantaloupe</li></ol>Unordered Lists:<u...
Forms<form>     First name: <input type=”text” name=”firstname” /><br />    Password: <input type=”password” name=”pwd” />...
ISO-8859-1&quot;&amp;&nbsp;&copy;&lt;&gt;
Images<img>required:altsrcoptional:alignborderheightwidth
HTML Validation!Why do it?How to do it:http://validator.w3.orgSame goes for JS, CSS, etc...
Upcoming SlideShare
Loading in...5
×

20120424 b

2,335

Published on

wmn601

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,335
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "20120424 b"

    1. 1. HTML and CSS Dave Kanter Academy of Art University April 24, 2012
    2. 2. Quick OperaOpera.com1994, research project at Telnor inNorway2nd Oldest Browser still in UseBuilt on the Presto ECMAScript EngineRuns on EVERYTHING
    3. 3. Act I - The Big Deal!Teeny-tiny market share (~1.6%)Completely EMCA compliantCompletely HTML compliantBoatload of Developer Toolshttp://www.opera.com/developer/tools/Huge support for mobile
    4. 4. Act II - Opera MobileDesigned for Smartphones and PDAsRuns on EVERYTHING(but the iPhone)Nintendo DS and Wii!Presto is used by Adobe fordocumentationIntegrates with Dragon Debugger
    5. 5. Act III - Finale
    6. 6. HTMLHypertext Markup LanguageFor DESIGNERS, not codersDescribes page layoutDescribes page layout for....?Basis for all Web pages
    7. 7. HTML Basics<!DOCTYPE html>or<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">What is the difference between HTML 4 (XHTML) and HTML 5?Simplest HTML document:<!DOCTYPE html><head><title>Title</title></head>//scripts, css, etc.<body bgcolor=”#FFFFFF” onload=”something();”></body></html>
    8. 8. Elements and Attributes<a href=”mysite.com”><input name=”text”><font color=”#FF0000”>
    9. 9. Two Types of Tags<div>This is a Div</div><p>This is a paragraph</p><br /><hr />HTML is all lower case!
    10. 10. Country GatesBad:<span><a href=”mysite.com”><em><strong>Click Me</em></a></span></strong>Good:<span><a href=”mysite.com”><em><strong>Click Me</strong></em></a></span>Even if it works, DON’T DO IT!
    11. 11. <div>, <span>, <p>CONTAINER TAGS!<div align=”center”>You can put your entire site in this one div</div><span>Just one little line of code, a small thing</span><p>this will end in a line break!</p><div><p>Here is <span>some</span> text!</p></div>
    12. 12. Lists (used w/css)Ordered Lists:<ol> <li>Apple</li> <li>Banana</li> <li>Cantaloupe</li></ol>Unordered Lists:<ul> <li></li> <li></li> <li></li></ul>Definition Lists:<dl> <dt>Fruits</dt> <dd>Apples, Bananas, Cantaloupe</dd> <dt>Vegetables</dt> <dd>Artichoke, Broccoli, Carrots</dd></dl>
    13. 13. Forms<form> First name: <input type=”text” name=”firstname” /><br /> Password: <input type=”password” name=”pwd” /><br /> <input type="radio" name="answer" value="true" /> True<br /> <input type="radio" name="sex" value="false" /> False<br /> <input type="checkbox" name="vehicle" value="green" /> Green<br /> <input type="checkbox" name="vehicle" value="red" /> Red<br /> <select name="pets"> <option value="cat">Cat</option> <option value="dog">Dog</option> <option value="fish">Fish</option> </select> <input type="submit" value="Submit" /></form>
    14. 14. ISO-8859-1&quot;&amp;&nbsp;&copy;&lt;&gt;
    15. 15. Images<img>required:altsrcoptional:alignborderheightwidth
    16. 16. HTML Validation!Why do it?How to do it:http://validator.w3.orgSame goes for JS, CSS, etc...
    1. A particular slide catching your eye?

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

    ×