Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Basic html for Normal People

1,090 views

Published on

This is a simplified HTML tutorial made just for people who always use a web-based text editor to write for the web. It doesn't cover ALL the basics, but it should help with common problems you encounter with web-based writing.

  • Be the first to comment

Basic html for Normal People

  1. 1. Basic HTML for Normal People! Ted Curran.net http://j.mp/ww-html @tedcurranSunday, November 11, 12
  2. 2. Basic HTML Syntax <kitten> </kitten>Sunday, November 11, 12
  3. 3. Basic HTML Syntax <tag> </tag>Sunday, November 11, 12
  4. 4. Common tags: Paragraph <p> </p>Sunday, November 11, 12
  5. 5. Common tags: Paragraph <p> How do you like the Queen? said the Cat in a low voice. Not at all, said Alice: shes so extremely— Just then she noticed that the Queen was close behind her, listening: so she went on, —likely to win, that its hardly worth while finishing the game. The Queen smiled and passed on. Who ARE you talking to? said the King, going up to Alice, and looking at the Cats head with great curiosity. Its a friend of mine—a Cheshire Cat, said Alice: allow me to introduce it. I dont like the look of it at all, said the King: however, it may kiss my hand if it likes. Id rather not, the Cat remarked. Dont be impertinent, said the King, and dont look at me like that! He got behind Alice as he spoke. A cat may look at a king, said Alice. </p>Sunday, November 11, 12
  6. 6. Common tags: Headings 1-6 <h1> </h1>Sunday, November 11, 12
  7. 7. Common tags: Headings 1-6 <h1> The MAIN IDEA </h1> <h2> Subheading </h2> <h2> Subheading </h2> <h3> Sub- Subheading </h3> <h3> Sub- Subheading </h3>Sunday, November 11, 12
  8. 8. Common tags: Headings 1-6 <h1> My favorite Animals </h1> <h2> Dogs </h2> <h2> Cats </h2> <h3> Tabby Cats </h3> <h3> Siamese Cats </h3>Sunday, November 11, 12
  9. 9. Common tags: Links <a href=“http://tedcurran.net”> This is my link text </a>Sunday, November 11, 12
  10. 10. Common tags: Links <a href=“http://tedcurran.net”> This is my link text </a> This is my link textSunday, November 11, 12
  11. 11. Common tags: Attributes <a href=“http://tedcurran.net” title=”More information about this link”> This is my link text </a> This is my link text More information about this linkSunday, November 11, 12
  12. 12. Common tags: Images <img src= “http://placedog.com/400/300” />Sunday, November 11, 12
  13. 13. Common tags: Images <img src= “http://placedog.com/400/300” /> Careful! This one’s an exception to the rule! Can you see why?Sunday, November 11, 12
  14. 14. Common tags: Images <img src= “http://placedog.com/400/300” alt=”cute brown puppy” /> Careful! This one’s an exception to the rule! Can you see why?Sunday, November 11, 12
  15. 15. Common tags: Lists (Unordered) <ul> <li> Moe </li> •Moe <li> Larry </li> •Larry <li> Curly </li> •Curly </ul>Sunday, November 11, 12
  16. 16. Common tags: Lists (Ordered) <ol> <li> Moe </li> 1. Moe <li> Larry </li> 2. Larry <li> Curly </li> 3. Curly </ol>Sunday, November 11, 12
  17. 17. Common tags: Bold/Strong <strong> </strong>Sunday, November 11, 12
  18. 18. Common tags: Italics/Emphasis <em> </em>Sunday, November 11, 12
  19. 19. Nesting Tags: Match pairs from inside out <strong> <em> My text </em> </strong>Sunday, November 11, 12
  20. 20. Common tags: iFrames <iframe width="853" height="480" src="http://www.youtube.com/embed/SgmARwtptoo" frameborder="0" allowfullscreen></iframe>Sunday, November 11, 12
  21. 21. Common tags: Boxes (Div) <div style=”width: 100%; height: 600px; ”> <div style=” width: My text 33%; float: right;” > </div> </div>Sunday, November 11, 12
  22. 22. Markdown: Simplified HTML # Heading 1 This is a bunch of paragraph text. Here’s some more…. ## Heading 2 Here’s a paragraph with an image <img src=” http:// placedog.com/300/400” /> ### Heading 3 Here’s a paragraph with a [link](http://tedcurran/net). ### Heading 3 - list item 1 - list item 2 - list item 3 ### Heading 3 1. list item 1 2. list item 2 3. list item 3Sunday, November 11, 12
  23. 23. Tech Tools for Web WritersSunday, November 11, 12
  24. 24. Tech Tools for Web WritersSunday, November 11, 12
  25. 25. Tech Tools for Web WritersSunday, November 11, 12
  26. 26. Where can I learn more? Ted Curran.net http://j.mp/ww-html W3Schools.com http://www.w3schools.com/Sunday, November 11, 12

×