Basic html for Normal People

26
Basic HTML for Normal People! Ted Curran.net http:// j.mp / ww-html @tedcurran Sunday, November 11, 12

Transcript of Basic html for Normal People

Page 1: Basic html for Normal People

Basic HTML for Normal People!Ted Curran.net

http://j.mp/ww-html@tedcurran

Sunday, November 11, 12

Page 2: Basic html for Normal People

Basic HTML Syntax

<kitten> </kitten>

Sunday, November 11, 12

Page 3: Basic html for Normal People

Basic HTML Syntax

<tag> </tag>

Sunday, November 11, 12

Page 4: Basic html for Normal People

Common tags:Paragraph

</p>

<p>

Sunday, November 11, 12

Page 5: Basic html for Normal People

Common tags:Paragraph

</p>

<p> 'How do you like the Queen?' said the Cat in a low voice. 'Not at all,' said Alice: 'she's so extremely—' Just then she noticed that the Queen was close behind her, listening: so she went on, '—likely to win, that it's hardly worth while finishing the game.' The Queen smiled and passed on. 'Who ARE you talking to?' said the King, going up to Alice, and looking at the Cat's head with great curiosity. 'It's a friend of mine—a Cheshire Cat,' said Alice: 'allow me to introduce it.' 'I don't like the look of it at all,' said the King: 'however, it may kiss my hand if it likes.' 'I'd rather not,' the Cat remarked. 'Don't be impertinent,' said the King, 'and don't look at me like that!' He got behind Alice as he spoke. 'A cat may look at a king,' said Alice.

Sunday, November 11, 12

Page 6: Basic html for Normal People

Common tags:Headings 1-6

</h1><h1>

Sunday, November 11, 12

Page 7: Basic html for Normal People

Common tags:Headings 1-6

</h1><h1> The MAIN IDEA

</h2><h2> Subheading

</h2><h2> Subheading

</h3><h3> Sub- Subheading

</h3><h3> Sub- SubheadingSunday, November 11, 12

Page 8: Basic html for Normal People

Common tags:Headings 1-6

</h1><h1> My favorite Animals

</h2><h2> Dogs

</h2><h2> Cats

</h3><h3> Tabby Cats

</h3><h3> Siamese CatsSunday, November 11, 12

Page 9: Basic html for Normal People

Common tags:Links

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

</a>

This is my link text

Sunday, November 11, 12

Page 10: Basic html for Normal People

Common tags:Links

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

This is my link text

Sunday, November 11, 12

Page 11: Basic html for Normal People

Common tags: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

Sunday, November 11, 12

Page 12: Basic html for Normal People

Common tags:Images

<img src=

/>

“http://placedog.com/400/300”

Sunday, November 11, 12

Page 13: Basic html for Normal People

Common tags:Images

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

Careful!This one’s an

exception to the rule!Can you see why?

Sunday, November 11, 12

Page 14: Basic html for Normal People

Common tags:Images

<img src= “http://placedog.com/400/300”alt=”cute brown puppy” />

Careful!This one’s an

exception to the rule!Can you see why?

Sunday, November 11, 12

Page 15: Basic html for Normal People

Common tags:Lists (Unordered)

<ul>

Moe

</ul>

<li> </li>

Larry<li>

Curly<li>

</li>

</li>

•Moe•Larry•Curly

Sunday, November 11, 12

Page 16: Basic html for Normal People

Common tags:Lists (Ordered)

<ol>

Moe

</ol>

<li> </li>

Larry<li>

Curly<li>

</li>

</li>

1. Moe2. Larry3. Curly

Sunday, November 11, 12

Page 17: Basic html for Normal People

Common tags:Bold/Strong

<strong>

</strong>

Sunday, November 11, 12

Page 18: Basic html for Normal People

Common tags:Italics/Emphasis

<em>

</em>

Sunday, November 11, 12

Page 19: Basic html for Normal People

Nesting Tags:Match pairs from inside out

<em>

</em>

<strong>

</strong>

My text

Sunday, November 11, 12

Page 20: Basic html for Normal People

Common tags:iFrames

<iframe width="853" height="480" src="http://www.youtube.com/embed/SgmARwtptoo"

frameborder="0" allowfullscreen></iframe>

Sunday, November 11, 12

Page 21: Basic html for Normal People

Common tags:Boxes (Div)

<div style=” width: 33%; float: right;”

>

</div>

<div style=”width: 100%; height: 600px; ”>

</div>

My text

Sunday, November 11, 12

Page 22: Basic html for Normal People

Markdown: Simplified HTML# Heading 1This is a bunch of paragraph text. Here’s some more….## Heading 2Here’s a paragraph with an image <img src=” 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

Sunday, November 11, 12

Page 23: Basic html for Normal People

Tech Tools for Web Writers

Sunday, November 11, 12

Page 24: Basic html for Normal People

Tech Tools for Web Writers

Sunday, November 11, 12

Page 25: Basic html for Normal People

Tech Tools for Web Writers

Sunday, November 11, 12

Page 26: Basic html for Normal People

Where can I learn more?Ted Curran.net

http://j.mp/ww-htmlW3Schools.com

http://www.w3schools.com/

Sunday, November 11, 12