Basic html for Normal People

Post on 15-Jul-2015

802 views 0 download

Tags:

Transcript of Basic html for Normal People

Basic HTML for Normal People!Ted Curran.net

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

Sunday, November 11, 12

Basic HTML Syntax

<kitten> </kitten>

Sunday, November 11, 12

Basic HTML Syntax

<tag> </tag>

Sunday, November 11, 12

Common tags:Paragraph

</p>

<p>

Sunday, November 11, 12

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

Common tags:Headings 1-6

</h1><h1>

Sunday, November 11, 12

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

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

Common tags:Links

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

</a>

This is my link text

Sunday, November 11, 12

Common tags:Links

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

This is my link text

Sunday, November 11, 12

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

Common tags:Images

<img src=

/>

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

Sunday, November 11, 12

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

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

Common tags:Lists (Unordered)

<ul>

Moe

</ul>

<li> </li>

Larry<li>

Curly<li>

</li>

</li>

•Moe•Larry•Curly

Sunday, November 11, 12

Common tags:Lists (Ordered)

<ol>

Moe

</ol>

<li> </li>

Larry<li>

Curly<li>

</li>

</li>

1. Moe2. Larry3. Curly

Sunday, November 11, 12

Common tags:Bold/Strong

<strong>

</strong>

Sunday, November 11, 12

Common tags:Italics/Emphasis

<em>

</em>

Sunday, November 11, 12

Nesting Tags:Match pairs from inside out

<em>

</em>

<strong>

</strong>

My text

Sunday, November 11, 12

Common tags:iFrames

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

frameborder="0" allowfullscreen></iframe>

Sunday, November 11, 12

Common tags:Boxes (Div)

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

>

</div>

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

</div>

My text

Sunday, November 11, 12

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

Tech Tools for Web Writers

Sunday, November 11, 12

Tech Tools for Web Writers

Sunday, November 11, 12

Tech Tools for Web Writers

Sunday, November 11, 12

Where can I learn more?Ted Curran.net

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

http://www.w3schools.com/

Sunday, November 11, 12