20120424 b

2,505 views

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,505
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
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
  • 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...

    ×