Download as PDF, PPTX
Uploaded byRandy Oest II
Intro to HTML
The document is an introduction to HTML by Randy Oest, outlining the purpose of learning HTML for various roles like bloggers and web designers. It covers the basic structure of HTML, including the use of tags, attributes, and semantic meanings, along with practical examples for headings, paragraphs, links, images, and lists. Additionally, it highlights the importance of CSS for styling HTML components and provides resources for further learning.
More Related Content
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Intro to HTML
- 1.
- 2. Randy Oest Manager ofDigital Design Williams Randall Marketing ! @amazingrando
- 3. Why Learn HTML? 1. Runninga 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 Skeletonof Web pages.
- 7.
- 8.
- 10. HTML uses markup tagsto describe elements on a page. <tag>Text</tag>
- 11. Anatomy of aTag <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 UsedMore 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 tagsdon’t wrap around anything. These are self-closing tags. <img src=“”> or <img src=“” />
- 16. Tags Can HaveAttributes Attributes are additional information added to a tag. <img src=“”> <a href=“” class=“”> <div class=“”>
- 17. Tags are usedto give semantic meaning to text. e.g., paragraph, header, bold, emphasis, etc.
- 18. Let’s Learn ByExample
- 20. Starting the HTML <!DOCTYPE html> <html> <body> <!—-‐ content —-‐> </body> </html>
- 21. Let’s talk about Headings, Paragraphs, and Formatting.
- 22. Headings Headings are definedwith the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.
- 23. DO NOT useheadings to make text BIGGER or BOLDER. Styling should be done with CSS.
- 24. You have signedup for Intro to CSS, right?
- 25. Paragraphs Paragraphs are defined withthe <p> tag. <p>This is some stuff </p>
- 28. Links Links are definedwith the <a> tag with the href pointing to the destination. <a href=“http://foo.com”>Text</a>
- 29. Two Varieties ofLinks Absolute & Relative.
- 30. Absolute Links Absolute linkspoint directly to the destination. <a href=“http://foo.com”>Text</a> Typically starts with http://
- 31. Relative Links Relative linksare 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-closingtags <img src=“mocha.jpg” /> <img src=“mocha.jpg” alt=“Mocha the cat” />
- 37. Lists Lists come intwo varieties, ordered and unordered. 1. Item 2. Item 3. Item •Item •Item •Item
- 38. List Items List itemsuse the <li> tag. <li>Loves food</li> <li>Good at cuddling</li> <li>Chews wires</li>
- 39. Lists Need AnOuter 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 AnOuter 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 upour sleeves and talk about layout.
- 44. Layout Most pages have aheader, content and footer.
- 45.
- 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 IDsand Classes provide targets for CSS and Javascript.
- 48. IDs and Classes IDsare unique. Classes are reusable.
- 49. Examples <div id=“header”></div> <div id=“nav”></div> <div class=“active-‐region”> </div>
- 51. Comments The comment tagis useful for making notes in HTML. <!—-‐ comment here —-‐>
- 54. <div>’s Have NoStyle 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) TeamTreehouse (not free)