Introduction to HTML
•2 gefällt mir•416 views
Melden
Teilen
Downloaden Sie, um offline zu lesen
Basics of HTML
Más contenido relacionado
Was ist angesagt?
Was ist angesagt?(20)
Similar a Introduction to HTML
Similar a Introduction to HTML(20)
Más de Ajay Khatri
Más de Ajay Khatri(9)
Último
Último(20)
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