20120424 b
Upcoming SlideShare
Loading in...5
×
 

20120424 b

on

  • 1,448 views

wmn601

wmn601

Statistics

Views

Total Views
1,448
Views on SlideShare
1,448
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

20120424 b 20120424 b Presentation Transcript

  • 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 EngineRuns on EVERYTHING
  • 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
  • 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
  • Act III - Finale
  • HTMLHypertext Markup LanguageFor DESIGNERS, not codersDescribes page layoutDescribes page layout for....?Basis for all Web pages
  • 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>
  • 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”><em><strong>Click Me</strong></em></a></span>Even if it works, DON’T DO IT!
  • <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>
  • 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>
  • 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>
  • 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...