20120424 b

HTML and CSS
Dave Kanter
Academy of Art University
April 24, 2012

Quick Opera
Opera.com
1994, research project at Telnor in
Norway
2nd Oldest Browser still in Use
Built on the Presto ECMAScript Engine
Runs on EVERYTHING

Act I - The Big Deal!
Teeny-tiny market share (~1.6%)
Completely EMCA compliant
Completely HTML compliant
Boatload of Developer Tools
http://www.opera.com/developer/tools/
Huge support for mobile

Act II - Opera Mobile
Designed for Smartphones and PDAs
Runs on EVERYTHING
(but the iPhone)
Nintendo DS and Wii!
Presto is used by Adobe for
documentation
Integrates with Dragon Debugger

HTML
Hypertext Markup Language
For DESIGNERS, not coders
Describes page layout
Describes 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 Gates
Bad:
<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>

Images
<img>

required:
alt
src

optional:
align
border
height
width

HTML Validation!
Why do it?
How to do it:
http://validator.w3.org
Same goes for JS, CSS, etc...

20120424 b

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (7)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie 20120424 b

Ähnlich wie 20120424 b (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

20120424 b

Hinweis der Redaktion