Introduction to HTML
Download as PPTX, PDF2 likes651 views
This document provides an introduction to HTML and covers several key topics: 1. It explains what HTML is and that it is the skeleton or structure of web pages, describing elements with markup tags. 2. It reviews important HTML tags like headings, paragraphs, links, images, and lists and how they are used to provide structure and semantics to text. 3. It also discusses other useful tags like comments and provides additional resources for further learning HTML.
Introduction to HTML
- 2. Ajay Khatri Assistant Professor Information Technology Department Acropolis Institute of Technology & Research www.ajaykhatri.in
- 3. Why Learn HTML? 1. Running a blog on a CMS. 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.
- 9. HTML uses markup tags to describe elements on a page. <tag>Text</tag>
- 10. Anatomy of a Tag <tag>Text</tag> Start Tag EndTag
- 11. About 80 Tags a abbr acronym address area b base bdo big blockquote body br button caption c i t e code col colgroup dd del dfn div d l DOCTYPE dt em f ieldset form h1, h2, h3, h4, h5, and h6 head html hr i img input ins kbd label legend l i l i n k map meta noscript object o l optgroup option p param pre q samp script select small span strong style sub sup table tbody td textarea t f o o t th thead t i t l e t r t t u l var
- 12. Some Are Used More Often a abbr acronym address area b base bdo big blockquote body br button caption c i t e code col colgroup dd del dfn div d l DOCTYPE dt em f ieldset form h1, h2, h3, h4, h5, and h6 head html hr i img input ins kbd label legend l i l i n k map meta noscript object ol optgroup option p param pre q samp script select small span strong style sub sup table tbody td textarea t f o o t th thead t i t l e t r t t ul var
- 13. Nesting Tags <i><b>italic & bold</b></i>
- 14. Self-closing Tags Some tags don’t wrap around anything. These are self-closing tags. <img src=“”> or <img src=“” />
- 15. Tags Can Have Attributes Attributes are additional information added toa tag. <img src=“”> <a href=“” class=“”> <div class=“”>
- 16. Tags are used to give semantic meaning to text. e.g., paragraph, header, bold, emphasis, etc.
- 17. Let’s Learn By Example
- 19. Starting the HTML <!DOCTYPE html> <html> <body> <! —-‐ cont ent —-‐> </body> </html>
- 20. Let’s talk about Headings, Paragraphs, and Formatting.
- 21. Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.
- 22. DO NOT useheadings to make text BIGGER or BOLDER. Styling should be done with CSS.
- 23. Paragraphs Paragraphs are defined with the <p> tag. <p>This is some stuff </p>
- 26. Links Links are defined with the <a> tag with the href pointing to the destination. <a href=“http://foo.com”>Text</a>
- 27. Two Varieties of Links Absolute & Relative.
- 28. Absolute Links Absolute links point directly to the destination. <a href=“http://foo.com”>Text</a> Typicallystartswitthhttp://
- 29. 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>
- 32. Images Images are self-closing tags <img <img src=“mocha.jpg” src=“mocha.jpg” /> alt=“Mocha the cat” />
- 35. Lists Lists come in two varieties, ordered and unordered. 1. Item 2. Item 3. Item •Item •Item •Item
- 36. List Items List items use the <li> tag. <li>Loves food</li> <li>Good at cuddling</li> <li>Chews wires</li>
- 37. 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>
- 38. 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>
- 41. Comments The comment tag is useful for making notes in HTML. <!-- comment here -->
- 42. Further Learning W3Schools (free) Android App (HTML Prog) https://play.google.com/store/apps/details?id=learn.apps.htmlprogramming
- 43. Thanks You