Basic HTML for Complex People

Basic HTML for

Complex People
Some rights reserved by Out Of Chicago

Tuesday, February 5, 13

Basic HTML for

Complex People
Ted Curran Some rights reserved by Out Of Chicago

http://is.gd/html4complexpeople

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


It’s all about tags
Some rights reserved by MrWoodnz

Basic HTML Syntax

<tag> </tag>

put opening and closing tags around items

Basic HTML Syntax

<puppy> </puppy>

The tags you use tell your browser
what kind of information this is.

<HTML> {CSS}

What your document How your document
MEANS. LOOKS.
image by Stella Harper

<HTML> {CSS}

Semantic Presentational
What your document How your document
MEANS. LOOKS.
image by Stella Harper

common tags
Some rights reserved by MrWoodnz

Common tags:
Paragraph

<p>

</p>

Some rights reserved by elizabethdunn


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)


Common tags:
Headings 1-6
<h1> The MAIN IDEA </h1>

<h2> Subheading </h2>

<h2> Subheading </h2>

<h3> Sub- Subheading </h3>

<h3> Sub- Subheading </h3>


Common tags:
Headings 1-6
<h1> My favorite Animals </h1>

<h2> Dogs </h2>

<h2> Birds </h2>

<h3> Parakeets </h3>

<h3> Zebra Finches </h3>


<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>

pretium in vehicula in, volutpat sed dui.
</p>
A well-
organized
<h2> Birds </h2>
document
</p>
Using
</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>


Common tags:
Span

<p> <span> </span>

</p>

Some rights reserved by elizabethdunn


Common tags:
Links
<a href=“http://tedcurran.net”>

This is my link text
</a>

Some rights reserved by WIlly Volk


Common tags:
Links

<a href=“http://tedcurran.net”> This is my link text </a>




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


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


Tables

Some rights reserved by .pst


<table>
Tables
<tr>
<td> <td> <td>

</td>
</td> </td> </tr>
<tr>

</tr>

</table>


<table>
Tables

</table>


<table>
Tables
<tr>

</tr>
<tr>

</tr>

<tr> “table row”

</table>


<table>
Tables
<tr>
<td> <td> <td>

</td>
</td> </td> </tr>
<tr>

</tr>

<td> “table data” or “cell”

</table>


<table>
Add a Row?
<tr>
Copy & Paste!
<td> Cell 1 data </td>


<td> Cell 3 data </td> Cell 1 Cell 2 Cell 3
</tr>
data data data

</table>

<table>
Add a Row?
<tr>
Copy & Paste!


<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



</tr>
</table>

<table>
Merge Cells?
<tr>
Delete a TD

Cell 1 data
</tr>
Cell 1 Cell 2 Cell 3
<tr>
data data data



</tr>
</table>

Common tags:
Bold/Strong

<strong> </strong>

Some rights reserved by Mr Moss


Common tags:
Italics/Emphasis

<em>

</em>

Some rights reserved by PGBrown1987


Basic HTML Syntax
Exceptions to the rule

<tag> </tag>

put opening and closing tags around items

Basic HTML Syntax
Exceptions to the rule
<img />
<hr />
<br />
<button />

these tags are both opening and closing

Common tags:
Images
<img
src=“http://placedog.com/400/300”
/>


Common tags:
Images
<img src=“http://placedog.com/400/300” />


tag attributes:
add information to tags

tag attributes:
add information to tags

• Attributes are always speciﬁed in the
start tag
• Attribute syntax looks like:
name="value"


Common tags:
Links with Attributes
<a
href=“http://tedcurran.net”
title=“More information about this link”
>
This is my link text </a>

More information about this link



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!


Common tags:
Boxes (Div) with Style Attributes
<div
style=“width: 100%; height: 600px; <div
background-color: blue; ”> style=“width: 33%;

Main text
ﬂoat: right;
background-color:
white;”>

sidebar
text

</div> </div>


Common tags:
Boxes (Div) with Style Attributes
<div
style=“width: 100%; height: 600px; background-
color: blue; ”>

Main Text
<div
style=“width: 33%;
ﬂoat: right;”>

Sidebar text
</div>

</div>


Common tags:
iFrames
<iframe width="853" height="480"
src="http://www.youtube.com/embed/SgmARwtptoo"
frameborder="0" allowfullscreen></iframe>


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

Nesting Tags:
Match pairs from inside out

<strong> <em>

My text
</em> </strong>


Tools for Web Writers

Markdown: Simpliﬁed 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

Tech Tools for Web Writers

Mou for Mac


Markdown Pad for Windows


Dillinger.io on the Web

Where can I learn more?
Ted Curran.net

http://j.mp/ww-html
W3Schools.com

http://www.w3schools.com/


Basic HTML for Complex People

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

Basic HTML for Complex People