1 / 62

Learning HTML Tags and Elements: A Comprehensive Guide

Learning HTML involves understanding a list of elements and how to use tags to describe content. Creating a webpage requires adding tags to the content, known as "markup," with two types: structural and semantic. Explore headings, paragraphs, bold and italic text, superscript, subscript, whitespace, line breaks, horizontal rules, and semantic markup with visual editors and code views.

rstover
Télécharger la présentation

Learning HTML Tags and Elements: A Comprehensive Guide

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Learning HTML involves...

  2. Learning a list of elements Learning how these elements are used

  3. TAGS DESCRIBE CONTENT Creating a page involves adding tags to content

  4. TAGS DESCRIBE CONTENT These tags are known as "markup"

  5. There are two types of markup...

  6. STRUCTURAL SEMANTIC

  7. HEADINGS <h1>This is a Main Heading</h1> <h2>This is a level 2 heading</h2> <h3>This is a level 3 heading</h3> <h4>This is a level 4 heading</h4> <h5>This is a level 5 heading</h5> <h6>This is a level 6 heading</h6>

  8. PARAGRAPHS <p>A paragraph consists of one or more sentences that form a self-contained unit of discourse. The start of a paragraph is indicated by a new line.</p> <p>Text is easier to understand when it is split up into units of text. For example, a book may have chapters. Chapters can have subheadings. Under each heading will be one or more paragraphs.</p>

  9. BOLD & ITALIC <p>This is how we make a word appear <b>bold</b>.</p><p>This is how we make a word appear <i>italic</i>.</p>

  10. BOLD & ITALIC <p>This is how we make a word appear <b>bold</b>.</p><p>This is how we make a word appear <i>italic</i>.</p>

  11. BOLD & ITALIC <p>This is how we make a word appear <b>bold</b>.</p><p>This is how we make a word appear <i>italic</i>.</p>

  12. SUPERSCRIPT & SUBSCRIPT <p>On the 4<sup>th</sup> September you will learn about E=MC<sup>2</sup>.</p><p>The amount of C0<sub>2</sub> in the atmosphere grew by 2ppm in2009<sub>1</sub>.</p>

  13. SUPERSCRIPT & SUBSCRIPT <p>On the 4<sup>th</sup> September you will learn about E=MC<sup>2</sup>.</p><p>The amount of C0<sub>2</sub> in the atmosphere grew by 2ppm in2009<sub>1</sub>.</p>

  14. SUPERSCRIPT & SUBSCRIPT <p>On the 4<sup>th</sup> September you will learn about E=MC<sup>2</sup>.</p><p>The amount of C0<sub>2</sub> in the atmosphere grew by 2ppm in2009<sub>1</sub>.</p>

  15. WHITESPACE IS COLLAPSED <p>The moon is drifting away from the earth.</p>

  16. LINE BREAKS <p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>

  17. LINE BREAKS <p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>

  18. HORIZONTAL RULES <p>Venus is the only plant that rotates clockwise</p><hr /><p>Jupiter is bigger than all the other planets combined.</p>

  19. HORIZONTAL RULES <p>Venus is the only plant that rotates clockwise</p><hr /><p>Jupiter is bigger than all the other planets combined.</p>

  20. VISUAL EDITORS &THEIR CODE VIEWS

  21. VISUAL EDITORS &THEIR CODE VIEWS

  22. SEMANTIC MARKUP WHAT IS IT? WHY USE IT? APPLICATION Screen readers can add emphasis to words in <em> Search engines can find quotations in <blockquote> Set of elements, for example: The <em> tag adds emphasis <blockquote>contains a quote Provides extra information about your content Do NOT use it to alter presentation of those elements

  23. STRONG & EMPHASIS <p><strong>Beware</strong> pickpockets operate in this area.</p><p>I <em>think</em> Ivy was the first.</p><p>I think <em>Ivy</em> was the first.</p><p>I think Ivy was the <em>first</em>.</p>

  24. STRONG & EMPHASIS <p><strong>Beware</strong> pickpockets operate in this area.</p><p>I <em>think</em> Ivy was the first.</p><p>I think <em>Ivy</em> was the first.</p><p>I think Ivy was the <em>first</em>.</p>

  25. STRONG & EMPHASIS <p><strong>Beware</strong> pickpockets operate in this area.</p><p>I <em>think</em> Ivy was the first.</p><p>I think <em>Ivy</em> was the first.</p><p>I think Ivy was the <em>first</em>.</p>

  26. STRONG & EMPHASIS <p><strong>Beware</strong> pickpockets operate in this area.</p><p>I <em>think</em> Ivy was the first.</p><p>I think <em>Ivy</em> was the first.</p><p>I think Ivy was the <em>first</em>.</p>

  27. STRONG & EMPHASIS <p><strong>Beware</strong> pickpockets operate in this area.</p><p>I <em>think</em> Ivy was the first.</p><p>I think <em>Ivy</em> was the first.</p><p>I think Ivy was the <em>first</em>.</p>

  28. QUOTATIONS <blockquote cite="http://en.wikipedia.org/wiki/ Winnie-the-Pooh"> <p>Did you ever stop to think, and forget to start again?</p></blockquote><p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem.</q></p>

  29. QUOTATIONS <blockquote cite="http://en.wikipedia.org/wiki/ Winnie-the-Pooh"> <p>Did you ever stop to think, and forget to start again?</p></blockquote><p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem.</q></p>

  30. QUOTATIONS <blockquote cite="http://en.wikipedia.org/wiki/ Winnie-the-Pooh"> <p>Did you ever stop to think, and forget to start again?</p></blockquote><p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem.</q></p>

  31. QUOTATIONS <blockquotecite="http://en.wikipedia.org/wiki/ Winnie-the-Pooh"> <p>Did you ever stop to think, and forget to start again?</p></blockquote><p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem.</q></p>

  32. ABBREVIATIONS & ACRONYMS <p><abbr title="Professor">Prof</abbr>Stephen Hawking is a theoretical physicist and cosmologist.</p><p><acronym title="National Aeronauticsand Space Administration">NASA</acronym>do some crazy space stuff.</p>

  33. ABBREVIATIONS & ACRONYMS <p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p><p><acronym title="National Aeronauticsand Space Administration">NASA</acronym>do some crazy space stuff.</p>

  34. ABBREVIATIONS & ACRONYMS <p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p><p><acronym title="National Aeronauticsand Space Administration">NASA</acronym>do some crazy space stuff.</p>

  35. CITATIONS & DEFINITIONS <p><cite>A Brief History of Time</cite> byStephen Hawking has sold over ten million copies worldwide.</p><p>A <dfn>black hole</dfn> is a region of space from which nothing, note even light, can escape.</p>

  36. CITATIONS & DEFINITIONS <p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies worldwide.</p><p>A <dfn>black hole</dfn> is a region of space from which nothing, note even light, can escape.</p>

  37. CITATIONS & DEFINITIONS <p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies worldwide.</p><p>A <dfn>black hole</dfn> is a region of space from which nothing, note even light, can escape.</p>

More Related