Intro to

HTML
Randy Oest
Manager of Digital Design
Williams Randall Marketing
!

@amazingrando
Why Learn HTML?
1.

Running a blog on a CMS and
want to tweak things

2. Working with a developer and
want to understand h...
What We’ll Learn
1. What is HTML
2. How to mark up a
document
3. How a page is
structured
HTML is the
Skeleton of
Web pages.
HTML is a


Markup
Language
Marky
Markup

Language
HTML uses markup
tags to describe
elements on a page.
<tag>Text</tag>
Anatomy of a Tag

<tag>Text</tag>
Start Tag

End Tag
About 80 Tags
a	
  

code	
  

abbr	
  

col	
  

acronym	
  

colgroup	
  

address	
  

dd	
  

area	
  

del	
  

b	
  ...
Some Are Used More Often
a	
  

code	
  

abbr	
  

col	
  

acronym	
  

colgroup	
  

address	
  

dd	
  

area	
  

del...
Nesting Tags
<i><b>italic & bold</b></i>
Self-closing Tags
Some tags don’t wrap
around anything. These
are self-closing tags.
<img	
  src=“”>	
  or <img	
  src=“”	...
Tags Can Have Attributes
Attributes are additional
information added to a tag.
<img	
  src=“”>	
  
<a	
  href=“”	
  class=...
Tags are used to
give semantic
meaning to text.
e.g., paragraph, header,
bold, emphasis, etc.
Let’s Learn By Example
Starting the HTML
<!DOCTYPE	
  html>	
  
<html>	
  
	
   <body>	
  
	
   	
   <!—-­‐	
  content	
  —-­‐>	
  	
  	
  
	
   ...
Let’s talk about 

Headings, Paragraphs, 

and Formatting.
Headings
Headings are defined with
the <h1> to <h6> tags.
<h1> defines the most
important heading. <h6>
defines the least ...
DO NOT use headings 

to make text BIGGER 

or BOLDER.
Styling should be done
with CSS.
You have signed up for
Intro to CSS, right?
Paragraphs

Paragraphs are defined
with the <p> tag.
<p>This is some stuff </p>
Links
Links are defined with the
<a> tag with the href
pointing to the
destination.
<a	
  href=“http://foo.com”>Text</a>
Two Varieties of Links
Absolute & Relative.
Absolute Links
Absolute links point
directly to the destination.
<a	
  href=“http://foo.com”>Text</a>

Typically starts wi...
Relative Links
Relative links are based on
where the destination is
from where you are.
<a	
  href=“/folder/page.html”>Tex...
Images
Images are self-closing tags
<img	
  src=“mocha.jpg”	
  />	
  
<img	
  src=“mocha.jpg”	
  alt=“Mocha	
  the	
  
cat...
Lists
Lists come in two varieties,
ordered and unordered.
1. Item
2. Item
3. Item

•Item
•Item
•Item
List Items
List items use the <li> tag.
<li>Loves food</li>	
  
<li>Good at cuddling</li>	
  
<li>Chews wires</li>
Lists Need An Outer Tag
Ordered lists use the <ol>
tag.
<ol>	
  
	
   <li>Loves food</li>	
  
	
   <li>Good at cuddling</l...
Lists Need An Outer Tag
Unordered lists use the
<ul> tag.
<ul>	
  
	
   <li>Loves food</li>	
  
	
   <li>Good at cuddling<...
Now let’s roll
up our sleeves
and talk about
layout.
Layout
Most pages
have a header,
content and
footer.
<div>
The Magic of <div>
The <div> tag can be used
with IDs and Classes to
become whatever they
need to be.
IDs and Classes
IDs and Classes provide
targets for CSS and
Javascript.
IDs and Classes
IDs are unique.
Classes are reusable.
Examples
<div	
  id=“header”></div>	
  
<div	
  id=“nav”></div>	
  
<div	
  class=“active-­‐region”>

</div>
Comments
The comment tag is useful
for making notes in HTML.
<!—-­‐	
  comment	
  here	
  —-­‐>
<div>’s Have No Style
By themselves <div>’s have
no style or formatting.
CSS is used to style the
presentation of HTML.
Further Learning
RandyOest.com/HTML
W3Schools (free)
Team Treehouse (not free)
Intro to HTML
Intro to HTML
Intro to HTML
Intro to HTML
Intro to HTML
Intro to HTML
Intro to HTML
Intro to HTML
Intro to HTML
Intro to HTML
Intro to HTML
Intro to HTML
Intro to HTML
Intro to HTML
Upcoming SlideShare
Loading in...5
×

Intro to HTML

8,072

Published on

These are the slides from my Intro to HTML talk that I gave for Trade School Indy on 12 Feb, 2014.

More information posted at http://randyoest.com/html/ or follow me on Twitter at @amazingrando.

Published in: Technology
3 Comments
27 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,072
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
135
Comments
3
Likes
27
Embeds 0
No embeds

No notes for slide

Intro to HTML

  1. 1. Intro to HTML
  2. 2. Randy Oest Manager of Digital Design Williams Randall Marketing ! @amazingrando
  3. 3. Why Learn HTML? 1. Running a blog on a CMS and want to tweak things 2. Working with a developer and want to understand how to talk with them 3. Web designer looking to understand how things get built
  4. 4. What We’ll Learn 1. What is HTML 2. How to mark up a document 3. How a page is structured
  5. 5. HTML is the Skeleton of Web pages.
  6. 6. HTML is a
 Markup Language
  7. 7. Marky Markup
 Language
  8. 8. HTML uses markup tags to describe elements on a page. <tag>Text</tag>
  9. 9. Anatomy of a Tag <tag>Text</tag> Start Tag End Tag
  10. 10. About 80 Tags a   code   abbr   col   acronym   colgroup   address   dd   area   del   b   dfn   base   div   bdo   dl   big   DOCTYPE   blockquote   dt   body   em   br   fieldset   button   form   caption   h1,  h2,  h3,   h4,  h5,  and   h6   cite   head   object   html   ol   hr   optgroup   i   option   img   p   input   param   ins   pre   kbd   q   label   samp   legend   script   li   select   link   small   map   span   meta   strong   noscript   style   sub   sup   table   tbody   td   textarea   tfoot   th   thead   title   tr   tt   ul   var
  11. 11. Some Are Used More Often a   code   abbr   col   acronym   colgroup   address   dd   area   del   b   dfn   base   div   bdo   dl   big   DOCTYPE   blockquote   dt   body   em   br   fieldset   button   form   caption   h1,  h2,  h3,   h4,  h5,  and   h6   cite   head   object   html   ol   hr   optgroup   i   option   img   p   input   param   ins   pre   kbd   q   label   samp   legend   script   li   select   link   small   map   span   meta   strong   noscript   style   sub   sup   table   tbody   td   textarea   tfoot   th   thead   title   tr   tt   ul   var
  12. 12. Nesting Tags <i><b>italic & bold</b></i>
  13. 13. Self-closing Tags Some tags don’t wrap around anything. These are self-closing tags. <img  src=“”>  or <img  src=“”  />
  14. 14. Tags Can Have Attributes Attributes are additional information added to a tag. <img  src=“”>   <a  href=“”  class=“”>   <div  class=“”>
  15. 15. Tags are used to give semantic meaning to text. e.g., paragraph, header, bold, emphasis, etc.
  16. 16. Let’s Learn By Example
  17. 17. Starting the HTML <!DOCTYPE  html>   <html>     <body>       <!—-­‐  content  —-­‐>         </body>   </html>  
  18. 18. Let’s talk about 
 Headings, Paragraphs, 
 and Formatting.
  19. 19. Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.
  20. 20. DO NOT use headings 
 to make text BIGGER 
 or BOLDER. Styling should be done with CSS.
  21. 21. You have signed up for Intro to CSS, right?
  22. 22. Paragraphs Paragraphs are defined with the <p> tag. <p>This is some stuff </p>
  23. 23. Links Links are defined with the <a> tag with the href pointing to the destination. <a  href=“http://foo.com”>Text</a>
  24. 24. Two Varieties of Links Absolute & Relative.
  25. 25. Absolute Links Absolute links point directly to the destination. <a  href=“http://foo.com”>Text</a> Typically starts with http://
  26. 26. Relative Links Relative links are based on where the destination is from where you are. <a  href=“/folder/page.html”>Text</a>   <a  href=“../page.html”>Text</a>
  27. 27. Images Images are self-closing tags <img  src=“mocha.jpg”  />   <img  src=“mocha.jpg”  alt=“Mocha  the   cat”  />  
  28. 28. Lists Lists come in two varieties, ordered and unordered. 1. Item 2. Item 3. Item •Item •Item •Item
  29. 29. List Items List items use the <li> tag. <li>Loves food</li>   <li>Good at cuddling</li>   <li>Chews wires</li>
  30. 30. Lists Need An Outer Tag Ordered lists use the <ol> tag. <ol>     <li>Loves food</li>     <li>Good at cuddling</li>     <li>Chews wires</li>   </ol>
  31. 31. Lists Need An Outer Tag Unordered lists use the <ul> tag. <ul>     <li>Loves food</li>     <li>Good at cuddling</li>     <li>Chews wires</li>   </ul>
  32. 32. Now let’s roll up our sleeves and talk about layout.
  33. 33. Layout Most pages have a header, content and footer.
  34. 34. <div>
  35. 35. The Magic of <div> The <div> tag can be used with IDs and Classes to become whatever they need to be.
  36. 36. IDs and Classes IDs and Classes provide targets for CSS and Javascript.
  37. 37. IDs and Classes IDs are unique. Classes are reusable.
  38. 38. Examples <div  id=“header”></div>   <div  id=“nav”></div>   <div  class=“active-­‐region”>
 </div>
  39. 39. Comments The comment tag is useful for making notes in HTML. <!—-­‐  comment  here  —-­‐>
  40. 40. <div>’s Have No Style By themselves <div>’s have no style or formatting. CSS is used to style the presentation of HTML.
  41. 41. Further Learning RandyOest.com/HTML W3Schools (free) Team Treehouse (not free)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×