Intro to HTML
•
31 likes•13,505 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Intro to HTML
Similar to Intro to HTML (20)
More from Randy Oest II
Recently uploaded
Recently uploaded (20)
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.
- 10. HTML uses markup tags to describe elements on a page. <tag>Text</tag>
- 11. Anatomy of a Tag <tag>Text</tag> Start Tag End Tag
- 12. 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
- 13. 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
- 14. Nesting Tags <i><b>italic & bold</b></i>
- 15. Self-closing Tags Some tags don’t wrap around anything. These are self-closing tags. <img src=“”> or <img src=“” />
- 16. Tags Can Have Attributes Attributes are additional information added to a tag. <img src=“”> <a href=“” class=“”> <div class=“”>
- 17. Tags are used to give semantic meaning to text. e.g., paragraph, header, bold, emphasis, etc.
- 18. Let’s Learn By Example
- 20. Starting the HTML <!DOCTYPE html> <html> <body> <!—-‐ content —-‐> </body> </html>
- 21. Let’s talk about Headings, Paragraphs, and Formatting.
- 22. Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.
- 23. DO NOT use headings to make text BIGGER or BOLDER. Styling should be done with CSS.
- 24. You have signed up for Intro to CSS, right?
- 25. Paragraphs Paragraphs are defined with the <p> tag. <p>This is some stuff </p>
- 28. Links Links are defined with the <a> tag with the href pointing to the destination. <a href=“http://foo.com”>Text</a>
- 29. Two Varieties of Links Absolute & Relative.
- 30. Absolute Links Absolute links point directly to the destination. <a href=“http://foo.com”>Text</a> Typically starts with http://
- 31. 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>
- 34. Images Images are self-closing tags <img src=“mocha.jpg” /> <img src=“mocha.jpg” alt=“Mocha the cat” />
- 37. Lists Lists come in two varieties, ordered and unordered. 1. Item 2. Item 3. Item •Item •Item •Item
- 38. List Items List items use the <li> tag. <li>Loves food</li> <li>Good at cuddling</li> <li>Chews wires</li>
- 39. 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>
- 40. 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>
- 43. Now let’s roll up our sleeves and talk about layout.
- 44. Layout Most pages have a header, content and footer.
- 45. <div>
- 46. The Magic of <div> The <div> tag can be used with IDs and Classes to become whatever they need to be.
- 47. IDs and Classes IDs and Classes provide targets for CSS and Javascript.
- 48. IDs and Classes IDs are unique. Classes are reusable.
- 49. Examples <div id=“header”></div> <div id=“nav”></div> <div class=“active-‐region”> </div>
- 51. Comments The comment tag is useful for making notes in HTML. <!—-‐ comment here —-‐>
- 54. <div>’s Have No Style By themselves <div>’s have no style or formatting. CSS is used to style the presentation of HTML.
- 55. Further Learning RandyOest.com/HTML W3Schools (free) Team Treehouse (not free)