Your SlideShare is downloading. ×
Intro to html
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro to html

663

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
663
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
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

×