Intro to html

HTML is Structure
Monday, April 15, 13

CSSHTML StyleStructure
WEB PAGE

HTML BASICS

<tagname>
content
</tagname>

<h1>
Panel Calls for Broad Changes
</h1>

<tagname attribute=”value”>
content
</tagname>

<tagname attribute=”value” attribute=”value”>
content
</tagname>

<!DOCTYPE html>
<html>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Title of your page goes here</title>
</head>
<body>
Bulk of your content here.
</body>
</html>

Zach Wise
Experience
Associate Professor
Northwestern University
Evanston, Il
2011 to present
Teach interactive design and storytelling, from basic
skills (HTML,CSS,JS, etc) to design to strategy. Teach
photojournalism and documentary film.
Senior Producer
The New York Times
New York, New York
2007 to 2012
(bad!)

<h1>Zach Wise</h1>
<section>
<h2>Experience</h2>
<div>
<h3>Associate Professor</h3>
<p><a href="http://northwestern.edu">Northwestern University</a></p>
<p>Evanston, Il</p>
<p>2011 to present</p>
<ul>
<li>Teach interactive design and storytelling, from basic skills
(HTML,CSS,JS, etc) to design to strategy.</li>
<li>Teach photojournalism and documentary film.</li>
</ul>
</div>
<div>
<h3>Senior Producer</h3>
<p><a href="http://nytimes.com">The New York Times</a></p>
<p>New York, NY</p>
<p>2007 to 2012 </p>
</div>
</section>
(good!)

What about color?
and size?

What about color?
and size?
Rejected!

HTML is:
Structure Weight Relationship
<h1>
<h2>
<h2>
<h1>
<h3>
<h3>
<h2>
</h1>
</h2>
</h2>
</h3>
</h3>
</h2>

HTML is:
Structure <main headline>
<category>
<detail> <detail>
<category>
<detail> <detail>

HTML is:
Structure <Zach Wise>
<Experience>
<NU> <NYTimes>
<Education>
<OU> <UNC>

HTML is:
Structure <h1>
<h2>
<p> <p>
<h2>
<p> <p>

HTML is:
Structure <h1>
<h2>
<h3> <h3>
<h2>
<h3> <h3>

HTML is:
Structure <h1>
<p>
<ul> <dl>
<h2>
<h3> <h3>

HTML is:
Structure
Weight
Relationship
<h2>
<h3>
<h5>
<h6>

HTML is:
Structure
Content Meaning
<h1>Headline</h1>
<p>Paragraph text</p>
<ul>Unordered list</ul>
<li>List item</li>
<blockquote>Quote</blockquote>
<em>Emphasis</em>

Tomorrow is the ﬁrst day of
vacation!!!!!

HTML is:
Structure Make things bigger
<h3> Tomorrow is the ﬁrst day of</h3>
<h1>Vacation!!!!!</h1>
(bad!)

<h3>Tomorrow is the ﬁrst day of</h3>
<h1>vacation!!!!!</h1>

HTML is:
Structure Give Emphasis
<p> Tomorrow is the ﬁrst day of <em>Vacation!!!!!</em></p>
(good!)

<p>Tomorrow is the ﬁrst day of <em>vacation!!!!!</em></p>

<p>Tomorrow is the ﬁrst day of <em>vacation!!!!!</em></p>
(good!)

HTML is:
Structure
Content
Meaning

HTML is:
Structure
Content
Meaning
<h3>
<h4>
<p>

HTML is:
Structure
Content
Meaning
<h3>
<h4>
<p>
<ul / li>

(so what?)

<em>because if we do it right, the
web is a way cooler place</em>

Basic HTML

<h1>This is a heading</h1>
<p>This is a paragraph</p>
<blockquote>This is a pull quote</blockquote>
<ul>
<li>I’m a list item within an unordered list</li>
<li>Notice the ul and li tags are properly “nested”</li>
</ul>

<br /> end of line, but not the end of a paragraph
<hr /> draw a line, or “horizontal rule”
<img src=”image.jpg” /> insert a photo

HTML Documents
Have 3 Sections

<!DOCTYPE html>
<html>
<head>
<title>My First Web site</title>
</head>
<body>
<p>This is a great little site.</p>
</body>
</html>

<b> and <i>
(bad!)
http://en.wikipedia.org/wiki/HTML_element

<h1>There can be only one</h1>

Block-level & Inline

<h1>Block-level tag</h1>
<p>Block-level tag</p>
<p>Block-level tag with some
<em>inline elements</em>mixed
<strong>in</strong>.</p>

Block Inline
h1 - h6
p
div
ul
li
dl
address
blockquote
hr
a
em
img
abbr
strong
code
span
cite
q

<a href=”zach.html”><h1>Zach</h1></a>
(bad!)
http://en.wikipedia.org/wiki/HTML_element

<h1><a href=”zach.html”>Zach</a></h1>
(good!)

<html>
<head>...</head>
<body>
<h1>HTML Rocks!</h1>
<em>and it’s everywhere!</em>
</body>
</html>
(bad!)

Intro to html

More Related Content

What's hot (10)

Viewers also liked (7)

Similar to Intro to html (20)

Recently uploaded (20)

Intro to html