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.
1. Basic HTML for
Complex People
Some rights reserved by Out Of Chicago
Tuesday, February 5, 13
2. Basic HTML for
Complex People
Ted Curran Some rights reserved by Out Of Chicago
http://is.gd/html4complexpeople
Tuesday, February 5, 13
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 & Italics
Tuesday, February 5, 13
4. It’s all about tags
Some rights reserved by MrWoodnz
Tuesday, February 5, 13
5. Basic HTML Syntax
<tag> </tag>
put opening and closing tags around items
Tuesday, February 5, 13
6. Basic HTML Syntax
<puppy> </puppy>
The tags you use tell your browser
what kind of information this is.
Tuesday, February 5, 13
7. <HTML> {CSS}
What your document How your document
MEANS. LOOKS.
image by Stella Harper
Tuesday, February 5, 13
8. <HTML> {CSS}
Semantic Presentational
What your document How your document
MEANS. LOOKS.
image by Stella Harper
Tuesday, February 5, 13
9. common tags
Some rights reserved by MrWoodnz
Tuesday, February 5, 13
10. Common tags:
Paragraph
<p>
</p>
Some rights reserved by elizabethdunn
Tuesday, February 5, 13
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. 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. 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. <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. Common tags:
Span
<p> <span> </span>
</p>
Some rights reserved by elizabethdunn
Tuesday, February 5, 13
16. Common tags:
Links
<a href=“http://tedcurran.net”>
This is my link text
</a>
Some rights reserved by WIlly Volk
Tuesday, February 5, 13
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 Volk
Tuesday, February 5, 13
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 NSW
Tuesday, February 5, 13
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 NSW
Tuesday, February 5, 13
20. Tables
Some rights reserved by .pst
Tuesday, February 5, 13
21. <table>
Tables
<tr>
<td> <td> <td>
</td>
</td> </td> </tr>
<tr>
</tr>
</table>
Some rights reserved by .pst
Tuesday, February 5, 13
22. <table>
Tables
</table>
Some rights reserved by .pst
Tuesday, February 5, 13
23. <table>
Tables
<tr>
</tr>
<tr>
</tr>
<tr> “table row”
</table>
Some rights reserved by .pst
Tuesday, February 5, 13
24. <table>
Tables
<tr>
<td> <td> <td>
</td>
</td> </td> </tr>
<tr>
</tr>
<td> “table data” or “cell”
</table>
Some rights reserved by .pst
Tuesday, February 5, 13
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. <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. <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. Common tags:
Bold/Strong
<strong> </strong>
Some rights reserved by Mr Moss
Tuesday, February 5, 13
29. Common tags:
Italics/Emphasis
<em>
</em>
Some rights reserved by PGBrown1987
Tuesday, February 5, 13
30. Basic HTML Syntax
Exceptions to the rule
<tag> </tag>
put opening and closing tags around items
Tuesday, February 5, 13
31. Basic HTML Syntax
Exceptions to the rule
<img />
<hr />
<br />
<button />
these tags are both opening and closing
Tuesday, February 5, 13
32. Common tags:
Images
<img
src=“http://placedog.com/400/300”
/>
Tuesday, February 5, 13
33. Common tags:
Images
<img src=“http://placedog.com/400/300” />
Tuesday, February 5, 13
34. tag attributes:
add information to tags
Tuesday, February 5, 13
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. 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 Volk
Tuesday, February 5, 13
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. 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. 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. Common tags:
iFrames
<iframe width="853" height="480"
src="http://www.youtube.com/embed/SgmARwtptoo"
frameborder="0" allowfullscreen></iframe>
Tuesday, February 5, 13
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 & Italics
Tuesday, February 5, 13
42. Nesting Tags:
Match pairs from inside out
<strong> <em>
My text
</em> </strong>
Tuesday, February 5, 13
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 3
Tuesday, February 5, 13
45. Tech Tools for Web Writers
Mou for Mac
Tuesday, February 5, 13
46. Tech Tools for Web Writers
Markdown Pad for Windows
Tuesday, February 5, 13
47. Tech Tools for Web Writers
Dillinger.io on the Web
Tuesday, February 5, 13
48. Where can I learn more?
Ted Curran.net
http://j.mp/ww-html
W3Schools.com
http://www.w3schools.com/
Tuesday, February 5, 13