Basic HTML for Complex People
-
Upload
ted-curran -
Category
Documents
-
view
646 -
download
0
description
Transcript of Basic HTML for Complex People
![Page 1: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/1.jpg)
Basic HTML for
Complex People Some rights reserved by Out Of Chicago
Tuesday, February 5, 13
![Page 2: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/2.jpg)
Basic HTML for
Complex PeopleTed Curran
http://is.gd/html4complexpeople Some rights reserved by Out Of Chicago
Tuesday, February 5, 13
![Page 3: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/3.jpg)
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
![Page 4: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/4.jpg)
It’s all about tagsSome rights reserved by MrWoodnz
Tuesday, February 5, 13
![Page 5: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/5.jpg)
Basic HTML Syntax
<tag> </tag>
put opening and closing tags around itemsTuesday, February 5, 13
![Page 6: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/6.jpg)
Basic HTML Syntax
<puppy> </puppy>
The tags you use tell your browser what kind of information this is.
Tuesday, February 5, 13
![Page 7: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/7.jpg)
<HTML>
What your document MEANS.
How your document LOOKS.
{CSS}
image by Stella HarperTuesday, February 5, 13
![Page 8: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/8.jpg)
<HTML>
What your document MEANS.
How your document LOOKS.
{CSS}
image by Stella Harper
Semantic Presentational
Tuesday, February 5, 13
![Page 9: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/9.jpg)
common tagsSome rights reserved by MrWoodnz
Tuesday, February 5, 13
![Page 10: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/10.jpg)
Common tags:Paragraph
</p>
<p>
Some rights reserved by elizabethdunn
Tuesday, February 5, 13
![Page 11: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/11.jpg)
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
![Page 12: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/12.jpg)
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
![Page 13: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/13.jpg)
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
![Page 14: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/14.jpg)
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
![Page 15: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/15.jpg)
Common tags:Span
</p>
<p>
Some rights reserved by elizabethdunn
<span> </span>
Tuesday, February 5, 13
![Page 16: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/16.jpg)
Common tags:Links
</a>
This is my link text<a href=“http://tedcurran.net”>
Some rights reserved by WIlly Volk
Tuesday, February 5, 13
![Page 17: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/17.jpg)
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
![Page 18: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/18.jpg)
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
![Page 19: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/19.jpg)
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
![Page 20: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/20.jpg)
Tables
Some rights reserved by .pst
Tuesday, February 5, 13
![Page 21: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/21.jpg)
Tables
Some rights reserved by .pst
<table>
</table>
<tr>
</tr>
<tr>
</tr>
<td>
</td>
<td>
</td>
<td>
</td>
Tuesday, February 5, 13
![Page 22: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/22.jpg)
Tables
Some rights reserved by .pst
<table>
</table>
Tuesday, February 5, 13
![Page 23: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/23.jpg)
Tables
Some rights reserved by .pst
<table>
</table>
<tr>
</tr>
<tr>
</tr>
<tr> “table row”
Tuesday, February 5, 13
![Page 24: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/24.jpg)
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
![Page 25: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/25.jpg)
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
![Page 26: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/26.jpg)
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
![Page 27: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/27.jpg)
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
![Page 28: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/28.jpg)
Common tags:Bold/Strong
<strong> </strong>
Some rights reserved by Mr Moss
Tuesday, February 5, 13
![Page 29: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/29.jpg)
Common tags:Italics/Emphasis
<em>
</em>
Some rights reserved by PGBrown1987
Tuesday, February 5, 13
![Page 30: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/30.jpg)
Basic HTML SyntaxExceptions to the rule
<tag> </tag>
put opening and closing tags around itemsTuesday, February 5, 13
![Page 31: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/31.jpg)
Basic HTML SyntaxExceptions to the rule
<img />
these tags are both opening and closing
<hr /><br />
<button />
Tuesday, February 5, 13
![Page 32: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/32.jpg)
Common tags:Images
<img
/>
src=“http://placedog.com/400/300”
Tuesday, February 5, 13
![Page 33: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/33.jpg)
Common tags:Images
<img src=“http://placedog.com/400/300” />
Tuesday, February 5, 13
![Page 34: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/34.jpg)
tag attributes:add information to tags
Tuesday, February 5, 13
![Page 35: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/35.jpg)
tag attributes:add information to tags
• Attributes are always specified in the start tag
• Attribute syntax looks like: name="value"
Tuesday, February 5, 13
![Page 36: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/36.jpg)
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
![Page 37: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/37.jpg)
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
![Page 38: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/38.jpg)
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
![Page 39: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/39.jpg)
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
![Page 40: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/40.jpg)
Common tags:iFrames
<iframe width="853" height="480" src="http://www.youtube.com/embed/SgmARwtptoo"
frameborder="0" allowfullscreen></iframe>
Tuesday, February 5, 13
![Page 41: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/41.jpg)
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
![Page 42: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/42.jpg)
Nesting Tags:Match pairs from inside out
<em>
</em>
<strong>
</strong>
My text
Tuesday, February 5, 13
![Page 43: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/43.jpg)
Tools for Web WritersTuesday, February 5, 13
![Page 44: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/44.jpg)
Markdown: Simplified HTML# Heading 1This is a bunch of paragraph text. Here’s some more….## Heading 2Here’s a paragraph with an image ![Cute Dog](http://placedog.com/300/400)### 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
![Page 46: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/46.jpg)
Tech Tools for Web Writers
Markdown Pad for WindowsTuesday, February 5, 13
![Page 47: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/47.jpg)
Tech Tools for Web Writers
Dillinger.io on the WebTuesday, February 5, 13
![Page 48: Basic HTML for Complex People](https://reader035.fdocuments.net/reader035/viewer/2022081519/559b69241a28aba07f8b4678/html5/thumbnails/48.jpg)
Where can I learn more?Ted Curran.net
http://j.mp/ww-htmlW3Schools.com
http://www.w3schools.com/
Tuesday, February 5, 13