Uploaded on

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

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Nice presentation. All 55 slides are very useful You have done a terrific job. I liked the quote 'HTML is really the skeleton of web pages.'
    Are you sure you want to
    Your message goes here
  • Glad that you found it useful. I have some more info posted on my blog at http://randyoest.com/html if you're looking for more.
    Are you sure you want to
    Your message goes here
  • Thanks, that was both very useful and easy to read!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,543
On Slideshare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
115
Comments
3
Likes
26

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Intro to HTML
  • 2. Randy Oest Manager of Digital Design Williams Randall Marketing ! @amazingrando
  • 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. What We’ll Learn 1. What is HTML 2. How to mark up a document 3. How a page is structured
  • 5. HTML is the Skeleton of Web pages.
  • 6. HTML is a
 Markup Language
  • 7. Marky Markup
 Language
  • 8. HTML uses markup tags to describe elements on a page. <tag>Text</tag>
  • 9. Anatomy of a Tag <tag>Text</tag> Start Tag End Tag
  • 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. 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. Nesting Tags <i><b>italic & bold</b></i>
  • 13. Self-closing Tags Some tags don’t wrap around anything. These are self-closing tags. <img  src=“”>  or <img  src=“”  />
  • 14. Tags Can Have Attributes Attributes are additional information added to a tag. <img  src=“”>   <a  href=“”  class=“”>   <div  class=“”>
  • 15. Tags are used to give semantic meaning to text. e.g., paragraph, header, bold, emphasis, etc.
  • 16. Let’s Learn By Example
  • 17. Starting the HTML <!DOCTYPE  html>   <html>     <body>       <!—-­‐  content  —-­‐>         </body>   </html>  
  • 18. Let’s talk about 
 Headings, Paragraphs, 
 and Formatting.
  • 19. Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.
  • 20. DO NOT use headings 
 to make text BIGGER 
 or BOLDER. Styling should be done with CSS.
  • 21. You have signed up for Intro to CSS, right?
  • 22. Paragraphs Paragraphs are defined with the <p> tag. <p>This is some stuff </p>
  • 23. Links Links are defined with the <a> tag with the href pointing to the destination. <a  href=“http://foo.com”>Text</a>
  • 24. Two Varieties of Links Absolute & Relative.
  • 25. Absolute Links Absolute links point directly to the destination. <a  href=“http://foo.com”>Text</a> Typically starts with http://
  • 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. Images Images are self-closing tags <img  src=“mocha.jpg”  />   <img  src=“mocha.jpg”  alt=“Mocha  the   cat”  />  
  • 28. Lists Lists come in two varieties, ordered and unordered. 1. Item 2. Item 3. Item •Item •Item •Item
  • 29. List Items List items use the <li> tag. <li>Loves food</li>   <li>Good at cuddling</li>   <li>Chews wires</li>
  • 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. 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. Now let’s roll up our sleeves and talk about layout.
  • 33. Layout Most pages have a header, content and footer.
  • 34. <div>
  • 35. The Magic of <div> The <div> tag can be used with IDs and Classes to become whatever they need to be.
  • 36. IDs and Classes IDs and Classes provide targets for CSS and Javascript.
  • 37. IDs and Classes IDs are unique. Classes are reusable.
  • 38. Examples <div  id=“header”></div>   <div  id=“nav”></div>   <div  class=“active-­‐region”>
 </div>
  • 39. Comments The comment tag is useful for making notes in HTML. <!—-­‐  comment  here  —-­‐>
  • 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. Further Learning RandyOest.com/HTML W3Schools (free) Team Treehouse (not free)