Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
630
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML is StructureMonday, April 15, 13
  • 2. CSSHTML StyleStructureWEB PAGEMonday, April 15, 13
  • 3. CSSHTML StyleStructureWEB PAGEMonday, April 15, 13
  • 4. HTML BASICSMonday, April 15, 13
  • 5. <tagname>content</tagname>Monday, April 15, 13
  • 6. <h1>Panel Calls for Broad Changes</h1>Monday, April 15, 13
  • 7. <tagname attribute=”value”>content</tagname>Monday, April 15, 13
  • 8. <a href=”http://nytimes.com...”>Panel Calls for Broad Changes</a>Monday, April 15, 13
  • 9. <tagname attribute=”value” attribute=”value”>content</tagname>Monday, April 15, 13
  • 10. <a href=“http://nytimes.com...” target=“_blank”>Panel Calls for Broad Changes</a>Monday, April 15, 13
  • 11. <!DOCTYPE html><html></html>Monday, April 15, 13
  • 12. <!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
  • 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
  • 14. <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
  • 15. What about color?and size?Monday, April 15, 13
  • 16. What about color?and size?Rejected!Monday, April 15, 13
  • 17. HTML is:Structure Weight Relationship<h1><h2><h2><h1><h3><h3><h2></h1></h2></h2></h3></h3></h2>Monday, April 15, 13
  • 18. HTML is:Structure <main headline><category><detail> <detail><category><detail> <detail>Monday, April 15, 13
  • 19. HTML is:Structure <Zach Wise><Experience><NU> <NYTimes><Education><OU> <UNC>Monday, April 15, 13
  • 20. Monday, April 15, 13
  • 21. HTML is:Structure <main headline><category><detail> <detail><category><detail> <detail>Monday, April 15, 13
  • 22. HTML is:Structure <h1><h2><p> <p><h2><p> <p>Monday, April 15, 13
  • 23. HTML is:Structure <h1><h2><h3> <h3><h2><h3> <h3>Monday, April 15, 13
  • 24. HTML is:Structure <h1><p><ul> <dl><h2><h3> <h3>Monday, April 15, 13
  • 25. HTML is:StructureWeightRelationship<h2><h3><h5><h6>Monday, April 15, 13
  • 26. 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
  • 27. Tomorrow is the first day ofvacation!!!!!Monday, April 15, 13
  • 28. HTML is:Structure Make things bigger<h3> Tomorrow is the first day of</h3><h1>Vacation!!!!!</h1>(bad!)Monday, April 15, 13
  • 29. <h3>Tomorrow is the first day of</h3><h1>vacation!!!!!</h1>Monday, April 15, 13
  • 30. HTML is:Structure Give Emphasis<p> Tomorrow is the first day of <em>Vacation!!!!!</em></p>(good!)Monday, April 15, 13
  • 31. <p>Tomorrow is the first day of <em>vacation!!!!!</em></p>Monday, April 15, 13
  • 32. <p>Tomorrow is the first day of <em>vacation!!!!!</em></p>(good!)Monday, April 15, 13
  • 33. HTML is:StructureContentMeaningMonday, April 15, 13
  • 34. HTML is:StructureContentMeaning<h3><h4><p>Monday, April 15, 13
  • 35. HTML is:StructureContentMeaning<h3><h4><p>Monday, April 15, 13
  • 36. HTML is:StructureContentMeaning<h3><h4><p><ul / li>Monday, April 15, 13
  • 37. (so what?)Monday, April 15, 13
  • 38. <em>because if we do it right, theweb is a way cooler place</em>Monday, April 15, 13
  • 39. Monday, April 15, 13
  • 40. Basic HTMLMonday, April 15, 13
  • 41. <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
  • 42. <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
  • 43. HTML DocumentsHave 3 SectionsMonday, April 15, 13
  • 44. <!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
  • 45. <!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
  • 46. <!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
  • 47. <!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
  • 48. GotchasMonday, April 15, 13
  • 49. <b> and <i>(bad!)http://en.wikipedia.org/wiki/HTML_elementMonday, April 15, 13
  • 50. <img src=”someimage.jpg” /><br /><hr />Monday, April 15, 13
  • 51. <h1>There can be only one</h1>Monday, April 15, 13
  • 52. Block-level & InlineMonday, April 15, 13
  • 53. <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
  • 54. Block Inlineh1 - h6pdivullidladdressblockquotehraemimgabbrstrongcodespanciteqMonday, April 15, 13
  • 55. <a href=”zach.html”><h1>Zach</h1></a>(bad!)http://en.wikipedia.org/wiki/HTML_elementMonday, April 15, 13
  • 56. <h1><a href=”zach.html”>Zach</a></h1>(good!)Monday, April 15, 13
  • 57. <html><head>...</head><body><h1>HTML Rocks!</h1><em>and it’s everywhere!</em></body></html>(bad!)Monday, April 15, 13