Embed Size (px)
DESCRIPTION
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.
Citation preview
Basic HTML for
Complex People Some rights reserved by Out Of Chicago
Tuesday, February 5, 13
Basic HTML for
Complex PeopleTed Curran
http://is.gd/html4complexpeople Some rights reserved by Out Of Chicago
Tuesday, February 5, 13
OutcomesBasic HTML SyntaxParagraphsHeaders 1-6HyperlinksBulleted Lists Numbered ListsTablesBold & Italics
ImagesHorizontal LineAttributesWhere to learn more!
You will understand and be able to write...
Tuesday, February 5, 13
It’s all about tagsSome rights reserved by MrWoodnz
Tuesday, February 5, 13
Basic HTML Syntax
<tag> </tag>
put opening and closing tags around itemsTuesday, February 5, 13
Basic HTML Syntax
<puppy> </puppy>
The tags you use tell your browser what kind of information this is.
Tuesday, February 5, 13
<HTML>
What your document MEANS.
How your document LOOKS.
{CSS}
image by Stella HarperTuesday, February 5, 13
<HTML>
What your document MEANS.
How your document LOOKS.
{CSS}
image by Stella Harper
Semantic Presentational
Tuesday, February 5, 13
common tagsSome rights reserved by MrWoodnz
Tuesday, February 5, 13
Common tags:Paragraph
</p>
<p>
Some rights reserved by elizabethdunn
Tuesday, February 5, 13
Common tags:Headings 1-6
Some rights reserved by archer10 (Dennis)
<h1>
</h2>
<h2>
</h4>
<h4>
</h1>
<h5>
</h5></h3>
<h3>
<h6>
</h6>
<h7>
</h7>
Tuesday, February 5, 13
Common tags:Headings 1-6
<h1> The MAIN IDEA
</h2><h2> Subheading
</h2><h2> Subheading
</h3><h3> Sub- Subheading
</h3><h3> Sub- Subheading
</h1>
Tuesday, February 5, 13
Common tags:Headings 1-6
<h1> My favorite Animals
</h2><h2> Dogs
</h2><h2> Birds
</h3><h3> Parakeets
</h3><h3> Zebra Finches
</h1>
Tuesday, February 5, 13
A well-organized document
Using Paragraphs &
Headings
</h1><h1> My Favorite Animals</h2><h2> Dogs
</h2><h2> Birds
</h3><h3> Parakeets
</h3><h3> Zebra Finches
</p><p> Morbi auctor dolor eu odio auctor non semper erat rhoncus. Nunc dolor erat, pretium in vehicula in, volutpat sed dui.
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
Morbi auctor dolor eu odio auctor non semper erat rhoncus. Nunc dolor erat, pretium in vehicula in, volutpat sed dui.
Morbi auctor dolor eu odio auctor non semper erat rhoncus. Nunc dolor erat, pretium in vehicula in, volutpat sed dui.
Morbi auctor dolor eu odio auctor non semper erat rhoncus. Nunc dolor erat, pretium in vehicula in, volutpat sed dui.
Morbi auctor dolor eu odio auctor non semper erat rhoncus. Nunc dolor erat, pretium in vehicula in, volutpat sed dui.
Morbi auctor dolor eu odio auctor non semper erat rhoncus. Nunc dolor erat, pretium in vehicula in, volutpat sed dui.
Tuesday, February 5, 13
Common tags:Span
</p>
<p>
Some rights reserved by elizabethdunn
<span> </span>
Tuesday, February 5, 13
Common tags:Links
</a>
This is my link text<a href=“http://tedcurran.net”>
Some rights reserved by WIlly Volk
Tuesday, February 5, 13
Common tags:Links
<a href=“http://tedcurran.net”> </a>This is my link text
This is my link text
Some rights reserved by WIlly Volk
Tuesday, February 5, 13
Common tags:Lists (Ordered)
<ol>
</ol>
<li> </li>
<li>
<li>
</li>
</li>
1. Moe2. Larry3. Curly
Moe
Larry
Curly
Some rights reserved by State Records NSW
Tuesday, February 5, 13
Common tags:Lists (Unordered)
<ul>
Moe
</ul>
<li> </li>
Larry<li>
Curly<li>
</li>
</li>
•Moe•Larry•Curly
Some rights reserved by State Records NSW
<ul>
</ul>
<li> </li>
<li>
<li>
</li>
</li>
Tuesday, February 5, 13
Tables
Some rights reserved by .pst
Tuesday, February 5, 13
Tables
Some rights reserved by .pst
<table>
</table>
<tr>
</tr>
<tr>
</tr>
<td>
</td>
<td>
</td>
<td>
</td>
Tuesday, February 5, 13
Tables
Some rights reserved by .pst
<table>
</table>
Tuesday, February 5, 13
Tables
Some rights reserved by .pst
<table>
</table>
<tr>
</tr>
<tr>
</tr>
<tr> “table row”
Tuesday, February 5, 13
Tables
Some rights reserved by .pst
<table>
</table>
<tr>
</tr>
<tr>
</tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td> “table data” or “cell”
Tuesday, February 5, 13
Add a Row?
Copy & Paste!
</table>
<table>
</tr>
<tr>
</td><td> Cell 1 data</td><td> Cell 2 data</td><td> Cell 3 data Cell 1
dataCell 2 data
Cell 3 data
Tuesday, February 5, 13
Add a Row?
Copy & Paste!
</table>
<table>
</tr>
<tr>
</td><td> Cell 1 data</td><td> Cell 2 data</td><td> Cell 3 data
</tr>
<tr>
</td><td> Cell 1 data</td><td> Cell 2 data</td><td> Cell 3 data
Cell 1 data
Cell 2 data
Cell 3 data
Cell 1 data
Cell 2 data
Cell 3 data
Tuesday, February 5, 13
Merge Cells?
Delete a TD
</table>
<table>
</tr>
<tr>
</td><td> Cell 1 data
</tr>
<tr>
</td><td> Cell 1 data</td><td> Cell 2 data</td><td> Cell 3 data
Cell 1 data
Cell 1 data
Cell 2 data
Cell 3 data
Tuesday, February 5, 13
Common tags:Bold/Strong
<strong> </strong>
Some rights reserved by Mr Moss
Tuesday, February 5, 13
Common tags:Italics/Emphasis
<em>
</em>
Some rights reserved by PGBrown1987
Tuesday, February 5, 13
Basic HTML SyntaxExceptions to the rule
<tag> </tag>
put opening and closing tags around itemsTuesday, February 5, 13
Basic HTML SyntaxExceptions to the rule
<img />
these tags are both opening and closing
<hr /><br />
<button />
Tuesday, February 5, 13
Common tags:Images
<img
/>
src=“http://placedog.com/400/300”
Tuesday, February 5, 13
Common tags:Images
<img src=“http://placedog.com/400/300” />
Tuesday, February 5, 13
tag attributes:add information to tags
Tuesday, February 5, 13
tag attributes:add information to tags
• Attributes are always specified in the start tag
• Attribute syntax looks like: name="value"
Tuesday, February 5, 13
Some rights reserved by WIlly Volk
Common tags:Links with Attributes
<a href=“http://tedcurran.net”
title=“More information about this link”>
</a>This is my link text
This is my link textMore information about this link
Tuesday, February 5, 13
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
Common tags:Boxes (Div) with Style Attributes
<div style=“width: 33%;
float: right; background-color:
white;”>
</div>
<div style=“width: 100%; height: 600px; background-color: blue; ”>
</div>
Main textsidebar
text
Tuesday, February 5, 13
Common tags:Boxes (Div) with Style Attributes
<div style=“width: 33%;
float: right;”>
</div>
<div style=“width: 100%; height: 600px; background-color: blue; ”>
</div>
Main Text
Sidebar text
Tuesday, February 5, 13
Common tags:iFrames
<iframe width="853" height="480" src="http://www.youtube.com/embed/SgmARwtptoo"
frameborder="0" allowfullscreen></iframe>
Tuesday, February 5, 13
OutcomesBasic HTML SyntaxParagraphsHeaders 1-6HyperlinksBulleted Lists Numbered ListsTablesBold & Italics
ImagesHorizontal LineAttributesBoxes (Divs)MarkdownApps for Web WritersWhere to learn more!
You will understand and be able to write...
Tuesday, February 5, 13
Nesting Tags:Match pairs from inside out
<em>
</em>
<strong>
</strong>
My text
Tuesday, February 5, 13
Tools for Web WritersTuesday, February 5, 13
Markdown: Simplified HTML# Heading 1This is a bunch of paragraph text. Here’s some more….## Heading 2Here’s a paragraph with an image ### Heading 3Here’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
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-htmlW3Schools.com
http://www.w3schools.com/
Tuesday, February 5, 13
![[Basic HTML/CSS] 1. html - basic tags](https://img.dokumen.tips/doc/110x75/58ce75c41a28abdc578b67db/basic-htmlcss-1-html-basic-tags.jpg)
![[Basic HTML/CSS] 2. html - list tags](https://img.dokumen.tips/doc/110x75/58ce75c41a28abdc578b67d9/basic-htmlcss-2-html-list-tags.jpg)
![[Basic HTML/CSS] 3. html - table tags](https://img.dokumen.tips/doc/110x75/58ed3bb51a28ab7a278b4589/basic-htmlcss-3-html-table-tags.jpg)
