Basic HTML for      Complex People                          Some rights reserved by Out Of ChicagoTuesday, February 5, 13
Basic HTML for      Complex People                                     Ted Curran         Some rights reserved by Out Of C...
Outcomes           You will understand and be able to write...           Basic HTML Syntax        Images           Paragra...
It’s all about tags                             Some rights reserved by MrWoodnzTuesday, February 5, 13
Basic HTML Syntax                          <tag>          </tag>              put opening and closing tags around itemsTue...
Basic HTML Syntax                          <puppy>                </puppy>                          The tags you use tell ...
<HTML>          {CSS}       What your document   How your document            MEANS.               LOOKS.                 ...
<HTML>          {CSS}       Semantic             Presentational       What your document   How your document            ME...
common tags                             Some rights reserved by MrWoodnzTuesday, February 5, 13
Common tags:                                   Paragraph                     <p>                           </p>           ...
Common tags:               <h1>                                  Headings 1-6                          <h2>               ...
Common tags:                                   Headings 1-6                          <h1>          The MAIN IDEA       </h...
Common tags:                                   Headings 1-6                          <h1>     My favorite Animals   </h1> ...
<h1>           My Favorite Animals </h1>   <h2> Dogs </h2>     <p>            Morbi auctor dolor eu odio auctor non semper...
Common tags:                                     Span                     <p>      <span>    </span>                      ...
Common tags:                             Links                          <a href=“http://tedcurran.net”>                   ...
Common tags:                             Links  <a href=“http://tedcurran.net”>   This is my link text   </a>             ...
Common tags:                             Lists (Ordered)         <ol>                  <li>    Moe     </li>   1. Moe     ...
Common tags:                           Lists (Unordered)         <ul>                  <li>    Moe     </li>   •Moe       ...
Tables                                   Some rights reserved by .pstTuesday, February 5, 13
<table>                                        Tables                          <tr>                                 <td>  ...
<table>                          Tables                                     </table>                                   Som...
<table>                                         Tables                          <tr>                                      ...
<table>                                        Tables                          <tr>                                 <td>  ...
<table>                                                Add a Row?   <tr>                                         Copy & Pa...
<table>                                                 Add a Row?   <tr>                                          Copy & ...
<table>                                                 Merge Cells?   <tr>                                            Del...
Common tags:                           Bold/Strong         <strong>             </strong>                                 ...
Common tags:                          Italics/Emphasis                           <em>                                     ...
Basic HTML Syntax                           Exceptions  to  the  rule                          <tag>             </tag>   ...
Basic HTML Syntax                          Exceptions  to  the  rule                                 <img />              ...
Common tags:                            Images                                         <img                          src=“...
Common tags:                                 Images                          <img src=“http://placedog.com/400/300” />Tues...
tag attributes:          add information to tagsTuesday, February 5, 13
tag attributes:                  add information to tags              • Attributes are always specified in the             ...
Common tags:                          Links with Attributes                                              <a               ...
Common tags:                          Images with Attributes                                               <img           ...
Common tags:     Boxes (Div) with Style Attributes   <div   style=“width: 100%; height: 600px;          <div   background-...
Common tags:     Boxes (Div) with Style Attributes   <div   style=“width: 100%; height: 600px; background-   color: blue; ...
Common tags:                            iFrames                <iframe width="853" height="480"      src="http://www.youtu...
Outcomes           You will understand and be able to write...           Basic HTML Syntax         Images           Paragr...
Nesting Tags:         Match pairs from inside out       <strong>           <em>                          My text          ...
Tools for Web WritersTuesday, February 5, 13
Markdown: Simplified HTML                   # Heading 1                   This is a bunch of paragraph text. Here’s some mo...
Tech Tools for Web Writers                          Mou for MacTuesday, February 5, 13
Tech Tools for Web Writers           Markdown Pad for WindowsTuesday, February 5, 13
Tech Tools for Web Writers                     Dillinger.io on the WebTuesday, February 5, 13
Where can I learn more?            Ted Curran.net            http://j.mp/ww-html            W3Schools.com            http:...
Upcoming SlideShare
Loading in …5
×

Basic HTML for Complex People

1,026 views

Published on

Most of us don’t need to know HTML, but we all write on the web, so we’re using HTML whether we understand it or not. Knowing a few simple tricks will save you from some common frustrations and help you organize your online writing more clearly.

This guide will give you a simplified look at only the HTML tags, styles, and syntax that you can do in a visual text editor (or “WYSIWYG” editor) like the ones in webmail, blogs, and LMSes. It’s not intended to be a complete education in HTML, but rather a commonsense guide for everyday users who want to get more out of their online writing.

This course is for you if…

A lot of the writing you do ends up on websites, blogs, learning management systems, or other online spaces.
You’re pretty happy writing in web-based text editors but you’re curious about how HTML works.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,026
On SlideShare
0
From Embeds
0
Number of Embeds
171
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Basic HTML for Complex People

  1. 1. Basic HTML for Complex People Some rights reserved by Out Of ChicagoTuesday, February 5, 13
  2. 2. Basic HTML for Complex People Ted Curran Some rights reserved by Out Of Chicago http://is.gd/html4complexpeopleTuesday, February 5, 13
  3. 3. Outcomes You will understand and be able to write... Basic HTML Syntax Images Paragraphs Horizontal Line Headers 1-6 Attributes Hyperlinks Where to learn more! Bulleted Lists Numbered Lists Tables Bold & ItalicsTuesday, February 5, 13
  4. 4. It’s all about tags Some rights reserved by MrWoodnzTuesday, February 5, 13
  5. 5. Basic HTML Syntax <tag> </tag> put opening and closing tags around itemsTuesday, February 5, 13
  6. 6. Basic HTML Syntax <puppy> </puppy> The tags you use tell your browser what kind of information this is.Tuesday, February 5, 13
  7. 7. <HTML> {CSS} What your document How your document MEANS. LOOKS. image by Stella HarperTuesday, February 5, 13
  8. 8. <HTML> {CSS} Semantic Presentational What your document How your document MEANS. LOOKS. image by Stella HarperTuesday, February 5, 13
  9. 9. common tags Some rights reserved by MrWoodnzTuesday, February 5, 13
  10. 10. Common tags: Paragraph <p> </p> Some rights reserved by elizabethdunnTuesday, February 5, 13
  11. 11. Common tags: <h1> Headings 1-6 <h2> <h3> <h4> <h5> <h6> <h7> </h1> </h2> </h3> </h4> </h5> </h6> </h7> Some rights reserved by archer10 (Dennis)Tuesday, February 5, 13
  12. 12. Common tags: Headings 1-6 <h1> The MAIN IDEA </h1> <h2> Subheading </h2> <h2> Subheading </h2> <h3> Sub- Subheading </h3> <h3> Sub- Subheading </h3>Tuesday, February 5, 13
  13. 13. Common tags: Headings 1-6 <h1> My favorite Animals </h1> <h2> Dogs </h2> <h2> Birds </h2> <h3> Parakeets </h3> <h3> Zebra Finches </h3>Tuesday, February 5, 13
  14. 14. <h1> My Favorite Animals </h1> <h2> Dogs </h2> <p> Morbi auctor dolor eu odio auctor non semper erat rhoncus. Nunc dolor erat, pretium in vehicula in, volutpat sed dui. </p> <p> Morbi auctor dolor eu odio auctor non semper erat rhoncus. Nunc dolor erat, pretium in vehicula in, volutpat sed dui. </p> A well- organized <h2> Birds </h2> document <p> Morbi auctor dolor eu odio auctor non semper erat rhoncus. Nunc dolor erat, </p> pretium in vehicula in, volutpat sed dui. Using <p> Morbi auctor dolor eu odio auctor non semper erat rhoncus. Nunc dolor erat, pretium in vehicula in, volutpat sed dui. </p> Paragraphs & <h3> Parakeets </h3> Headings Morbi auctor dolor eu odio auctor non semper erat rhoncus. <p> Nunc dolor erat, pretium in vehicula in, volutpat sed dui. </p> <h3> Zebra Finches </h3> Morbi auctor dolor eu odio auctor non semper erat rhoncus. <p> Nunc dolor erat, pretium in vehicula in, volutpat sed dui. </p>Tuesday, February 5, 13
  15. 15. Common tags: Span <p> <span> </span> </p> Some rights reserved by elizabethdunnTuesday, February 5, 13
  16. 16. Common tags: Links <a href=“http://tedcurran.net”> This is my link text </a> Some rights reserved by WIlly VolkTuesday, February 5, 13
  17. 17. Common tags: Links <a href=“http://tedcurran.net”> This is my link text </a> This is my link text Some rights reserved by WIlly VolkTuesday, February 5, 13
  18. 18. Common tags: Lists (Ordered) <ol> <li> Moe </li> 1. Moe <li> Larry </li> 2. Larry <li> Curly </li> 3. Curly </ol> Some rights reserved by State Records NSWTuesday, February 5, 13
  19. 19. Common tags: Lists (Unordered) <ul> <li> Moe </li> •Moe <li> Larry </li> •Larry <li> Curly </li> •Curly </ul> Some rights reserved by State Records NSWTuesday, February 5, 13
  20. 20. Tables Some rights reserved by .pstTuesday, February 5, 13
  21. 21. <table> Tables <tr> <td> <td> <td> </td> </td> </td> </tr> <tr> </tr> </table> Some rights reserved by .pstTuesday, February 5, 13
  22. 22. <table> Tables </table> Some rights reserved by .pstTuesday, February 5, 13
  23. 23. <table> Tables <tr> </tr> <tr> </tr> <tr> “table row” </table> Some rights reserved by .pstTuesday, February 5, 13
  24. 24. <table> Tables <tr> <td> <td> <td> </td> </td> </td> </tr> <tr> </tr> <td> “table data” or “cell” </table> Some rights reserved by .pstTuesday, February 5, 13
  25. 25. <table> Add a Row? <tr> Copy & Paste! <td> Cell 1 data </td> <td> Cell 2 data </td> <td> Cell 3 data </td> Cell 1 Cell 2 Cell 3 </tr> data data data </table>Tuesday, February 5, 13
  26. 26. <table> Add a Row? <tr> Copy & Paste! <td> Cell 1 data </td> <td> Cell 2 data </td> <td> Cell 3 data </td> Cell 1 Cell 2 Cell 3 </tr> data data data Cell 1 Cell 2 Cell 3 <tr> data data data <td> Cell 1 data </td> <td> Cell 2 data </td> <td> Cell 3 data </td> </tr> </table>Tuesday, February 5, 13
  27. 27. <table> Merge Cells? <tr> Delete a TD <td> Cell 1 data </td> Cell 1 data </tr> Cell 1 Cell 2 Cell 3 <tr> data data data <td> Cell 1 data </td> <td> Cell 2 data </td> <td> Cell 3 data </td> </tr> </table>Tuesday, February 5, 13
  28. 28. Common tags: Bold/Strong <strong> </strong> Some rights reserved by Mr MossTuesday, February 5, 13
  29. 29. Common tags: Italics/Emphasis <em> </em> Some rights reserved by PGBrown1987Tuesday, February 5, 13
  30. 30. Basic HTML Syntax Exceptions  to  the  rule <tag> </tag> put opening and closing tags around itemsTuesday, February 5, 13
  31. 31. Basic HTML Syntax Exceptions  to  the  rule <img /> <hr /> <br /> <button /> these tags are both opening and closingTuesday, February 5, 13
  32. 32. Common tags: Images <img src=“http://placedog.com/400/300” />Tuesday, February 5, 13
  33. 33. Common tags: Images <img src=“http://placedog.com/400/300” />Tuesday, February 5, 13
  34. 34. tag attributes: add information to tagsTuesday, February 5, 13
  35. 35. tag attributes: add information to tags • Attributes are always specified in the start tag • Attribute syntax looks like: name="value"Tuesday, February 5, 13
  36. 36. Common tags: Links with 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 link Some rights reserved by WIlly VolkTuesday, February 5, 13
  37. 37. Common tags: Images with Attributes <img src=“http://placedog.com/400/300” alt=“cute brown puppy” title=“hey buddy!” width=“400px” height=“300px” /> hey buddy!Tuesday, February 5, 13
  38. 38. Common tags: Boxes (Div) with Style Attributes <div style=“width: 100%; height: 600px; <div background-color: blue; ”> style=“width: 33%; Main text float: right; background-color: white;”> sidebar text </div> </div>Tuesday, February 5, 13
  39. 39. Common tags: Boxes (Div) with Style Attributes <div style=“width: 100%; height: 600px; background- color: blue; ”> Main Text <div style=“width: 33%; float: right;”> Sidebar text </div> </div>Tuesday, February 5, 13
  40. 40. Common tags: iFrames <iframe width="853" height="480" src="http://www.youtube.com/embed/SgmARwtptoo" frameborder="0" allowfullscreen></iframe>Tuesday, February 5, 13
  41. 41. Outcomes You will understand and be able to write... Basic HTML Syntax Images Paragraphs Horizontal Line Headers 1-6 Attributes Hyperlinks Boxes (Divs) Bulleted Lists Markdown Numbered Lists Apps for Web Writers Tables Where to learn more! Bold & ItalicsTuesday, February 5, 13
  42. 42. Nesting Tags: Match pairs from inside out <strong> <em> My text </em> </strong>Tuesday, February 5, 13
  43. 43. Tools for Web WritersTuesday, February 5, 13
  44. 44. 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 ![Cute Dog](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 3Tuesday, February 5, 13
  45. 45. Tech Tools for Web Writers Mou for MacTuesday, February 5, 13
  46. 46. Tech Tools for Web Writers Markdown Pad for WindowsTuesday, February 5, 13
  47. 47. Tech Tools for Web Writers Dillinger.io on the WebTuesday, February 5, 13
  48. 48. Where can I learn more? Ted Curran.net http://j.mp/ww-html W3Schools.com http://www.w3schools.com/Tuesday, February 5, 13

×