Intro to html
Upcoming SlideShare
Loading in...5
×
 

Intro to html

on

  • 694 views

 

Statistics

Views

Total Views
694
Views on SlideShare
446
Embed Views
248

Actions

Likes
0
Downloads
5
Comments
0

7 Embeds 248

http://medill.co 158
http://tools.medill.co 79
http://fall405.medill.co 7
http://www.medill.co 1
http://tool.medill.co 1
http://dokcs.medill.co 1
http://2011.medill.co 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

    Intro to html Intro to html Presentation Transcript

    • HTML is StructureMonday, April 15, 13
    • CSSHTML StyleStructureWEB PAGEMonday, April 15, 13
    • CSSHTML StyleStructureWEB PAGEMonday, April 15, 13
    • HTML BASICSMonday, April 15, 13
    • <tagname>content</tagname>Monday, April 15, 13
    • <h1>Panel Calls for Broad Changes</h1>Monday, April 15, 13
    • <tagname attribute=”value”>content</tagname>Monday, April 15, 13
    • <a href=”http://nytimes.com...”>Panel Calls for Broad Changes</a>Monday, April 15, 13
    • <tagname attribute=”value” attribute=”value”>content</tagname>Monday, April 15, 13
    • <a href=“http://nytimes.com...” target=“_blank”>Panel Calls for Broad Changes</a>Monday, April 15, 13
    • <!DOCTYPE html><html></html>Monday, April 15, 13
    • <!DOCTYPE html><html><head><title>Title of your page goes here</title></head><body>Bulk of your content here.</body></html>Monday, April 15, 13
    • Zach WiseExperienceAssociate ProfessorNorthwestern UniversityEvanston, Il2011 to presentTeach interactive design and storytelling, from basicskills (HTML,CSS,JS, etc) to design to strategy. Teachphotojournalism and documentary film.Senior ProducerThe New York TimesNew York, New York2007 to 2012(bad!)Monday, April 15, 13
    • <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!)Monday, April 15, 13
    • What about color?and size?Monday, April 15, 13
    • What about color?and size?Rejected!Monday, April 15, 13
    • HTML is:Structure Weight Relationship<h1><h2><h2><h1><h3><h3><h2></h1></h2></h2></h3></h3></h2>Monday, April 15, 13
    • HTML is:Structure <main headline><category><detail> <detail><category><detail> <detail>Monday, April 15, 13
    • HTML is:Structure <Zach Wise><Experience><NU> <NYTimes><Education><OU> <UNC>Monday, April 15, 13
    • Monday, April 15, 13
    • HTML is:Structure <main headline><category><detail> <detail><category><detail> <detail>Monday, April 15, 13
    • HTML is:Structure <h1><h2><p> <p><h2><p> <p>Monday, April 15, 13
    • HTML is:Structure <h1><h2><h3> <h3><h2><h3> <h3>Monday, April 15, 13
    • HTML is:Structure <h1><p><ul> <dl><h2><h3> <h3>Monday, April 15, 13
    • HTML is:StructureWeightRelationship<h2><h3><h5><h6>Monday, April 15, 13
    • HTML is:StructureContent Meaning<h1>Headline</h1><p>Paragraph text</p><ul>Unordered list</ul><li>List item</li><blockquote>Quote</blockquote><em>Emphasis</em>Monday, April 15, 13
    • Tomorrow is the first day ofvacation!!!!!Monday, April 15, 13
    • HTML is:Structure Make things bigger<h3> Tomorrow is the first day of</h3><h1>Vacation!!!!!</h1>(bad!)Monday, April 15, 13
    • <h3>Tomorrow is the first day of</h3><h1>vacation!!!!!</h1>Monday, April 15, 13
    • HTML is:Structure Give Emphasis<p> Tomorrow is the first day of <em>Vacation!!!!!</em></p>(good!)Monday, April 15, 13
    • <p>Tomorrow is the first day of <em>vacation!!!!!</em></p>Monday, April 15, 13
    • <p>Tomorrow is the first day of <em>vacation!!!!!</em></p>(good!)Monday, April 15, 13
    • HTML is:StructureContentMeaningMonday, April 15, 13
    • HTML is:StructureContentMeaning<h3><h4><p>Monday, April 15, 13
    • HTML is:StructureContentMeaning<h3><h4><p>Monday, April 15, 13
    • HTML is:StructureContentMeaning<h3><h4><p><ul / li>Monday, April 15, 13
    • (so what?)Monday, April 15, 13
    • <em>because if we do it right, theweb is a way cooler place</em>Monday, April 15, 13
    • Monday, April 15, 13
    • Basic HTMLMonday, April 15, 13
    • <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>Monday, April 15, 13
    • <br /> end of line, but not the end of a paragraph<hr /> draw a line, or “horizontal rule”<img src=”image.jpg” /> insert a photoMonday, April 15, 13
    • HTML DocumentsHave 3 SectionsMonday, April 15, 13
    • <!DOCTYPE html><html><head><title>My First Web site</title></head><body><p>This is a great little site.</p></body></html>Monday, April 15, 13
    • <!DOCTYPE html><html><head><title>My First Web site</title></head><body><p>This is a great little site.</p></body></html>Monday, April 15, 13
    • <!DOCTYPE html><html><head><title>My First Web site</title></head><body><p>This is a great little site.</p></body></html>Monday, April 15, 13
    • <!DOCTYPE html><html><head><title>My First Web site</title></head><body><p>This is a great little site.</p></body></html>Monday, April 15, 13
    • GotchasMonday, April 15, 13
    • <b> and <i>(bad!)http://en.wikipedia.org/wiki/HTML_elementMonday, April 15, 13
    • <img src=”someimage.jpg” /><br /><hr />Monday, April 15, 13
    • <h1>There can be only one</h1>Monday, April 15, 13
    • Block-level & InlineMonday, April 15, 13
    • <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>Monday, April 15, 13
    • Block Inlineh1 - h6pdivullidladdressblockquotehraemimgabbrstrongcodespanciteqMonday, April 15, 13
    • <a href=”zach.html”><h1>Zach</h1></a>(bad!)http://en.wikipedia.org/wiki/HTML_elementMonday, April 15, 13
    • <h1><a href=”zach.html”>Zach</a></h1>(good!)Monday, April 15, 13
    • <html><head>...</head><body><h1>HTML Rocks!</h1><em>and it’s everywhere!</em></body></html>(bad!)Monday, April 15, 13