learning html involves... learning how these elements are used learning a list of elements
TRANSCRIPT
![Page 1: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/1.jpg)
![Page 2: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/2.jpg)
![Page 3: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/3.jpg)
Learning HTML involves...
![Page 4: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/4.jpg)
Learning how these elements
are used
Learning a list of elements
![Page 5: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/5.jpg)
TAGS DESCRIBE CONTENT
Creating a page involves adding tags
to content
![Page 6: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/6.jpg)
TAGS DESCRIBE CONTENT
These tags are known as "markup"
![Page 7: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/7.jpg)
There are two types of markup...
![Page 8: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/8.jpg)
SEMANTICSTRUCTURAL
![Page 9: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/9.jpg)
HTML
<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>
HEADINGS
![Page 10: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/10.jpg)
RESULT
![Page 11: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/11.jpg)
HTML
<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>
PARAGRAPHS
![Page 12: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/12.jpg)
RESULT
![Page 13: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/13.jpg)
HTML
<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>
BOLD & ITALIC
![Page 14: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/14.jpg)
HTML
<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>
BOLD & ITALIC
![Page 15: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/15.jpg)
HTML
<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>
BOLD & ITALIC
![Page 16: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/16.jpg)
RESULT
![Page 17: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/17.jpg)
HTML
<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>
SUPERSCRIPT & SUBSCRIPT
![Page 18: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/18.jpg)
HTML
<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>
SUPERSCRIPT & SUBSCRIPT
![Page 19: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/19.jpg)
HTML
<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>
SUPERSCRIPT & SUBSCRIPT
![Page 20: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/20.jpg)
RESULT
![Page 21: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/21.jpg)
HTML
<p>The moon is
drifting away from the
earth.</p>
WHITESPACE IS COLLAPSED
![Page 22: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/22.jpg)
RESULT
![Page 23: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/23.jpg)
HTML
<p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>
LINE BREAKS
![Page 24: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/24.jpg)
HTML
<p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>
LINE BREAKS
![Page 25: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/25.jpg)
RESULT
![Page 26: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/26.jpg)
HTML
<p>Venus is the only plant that rotates clockwise</p>
<hr />
<p>Jupiter is bigger than all the other planets combined.</p>
HORIZONTAL RULES
![Page 27: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/27.jpg)
HTML
<p>Venus is the only plant that rotates clockwise</p>
<hr />
<p>Jupiter is bigger than all the other planets combined.</p>
HORIZONTAL RULES
![Page 28: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/28.jpg)
RESULT
![Page 29: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/29.jpg)
VISUAL EDITORS &THEIR CODE VIEWS
![Page 30: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/30.jpg)
VISUAL EDITORS &THEIR CODE VIEWS
![Page 31: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/31.jpg)
SEMANTIC MARKUP
WHAT IS IT?
Set of elements, for example:
The <em> tag adds emphasis
<blockquote>contains a quote
WHY USE IT?
Provides extra information about your content
Do NOT use it to alter presentation of those elements
APPLICATION
Screen readers can add emphasis to words in <em>
Search engines can find quotations in <blockquote>
![Page 32: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/32.jpg)
HTML
<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>
STRONG & EMPHASIS
![Page 33: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/33.jpg)
HTML
<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>
STRONG & EMPHASIS
![Page 34: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/34.jpg)
HTML
<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>
STRONG & EMPHASIS
![Page 35: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/35.jpg)
HTML
<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>
STRONG & EMPHASIS
![Page 36: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/36.jpg)
HTML
<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>
STRONG & EMPHASIS
![Page 37: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/37.jpg)
RESULT
![Page 38: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/38.jpg)
HTML
<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>
QUOTATIONS
![Page 39: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/39.jpg)
HTML
<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>
QUOTATIONS
![Page 40: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/40.jpg)
HTML
<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>
QUOTATIONS
![Page 41: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/41.jpg)
HTML
<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>
QUOTATIONS
![Page 42: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/42.jpg)
RESULT
![Page 43: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/43.jpg)
HTML
<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>
ABBREVIATIONS & ACRONYMS
![Page 44: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/44.jpg)
HTML
<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>
ABBREVIATIONS & ACRONYMS
![Page 45: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/45.jpg)
HTML
<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>
ABBREVIATIONS & ACRONYMS
![Page 46: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/46.jpg)
RESULT
![Page 47: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/47.jpg)
HTML
<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>
CITATIONS & DEFINITIONS
![Page 48: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/48.jpg)
HTML
<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>
CITATIONS & DEFINITIONS
![Page 49: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/49.jpg)
HTML
<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>
CITATIONS & DEFINITIONS
![Page 50: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/50.jpg)
RESULT
![Page 51: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/51.jpg)
HTML
<address> <p><a href="[email protected]"> [email protected]</a></p> <p>742 Evergreen Terrace, Springfield</p></address>
AUTHOR DETAILS
![Page 52: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/52.jpg)
HTML
<address> <p><a href="[email protected]"> [email protected]</a></p> <p>742 Evergreen Terrace, Springfield</p></address>
AUTHOR DETAILS
![Page 53: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/53.jpg)
RESULT
![Page 54: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/54.jpg)
HTML
<p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p>
<p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>
CHANGES TO CONTENT
![Page 55: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/55.jpg)
HTML
<p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p>
<p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>
CHANGES TO CONTENT
![Page 56: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/56.jpg)
HTML
<p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p>
<p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>
CHANGES TO CONTENT
![Page 57: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/57.jpg)
HTML
<p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p>
<p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>
CHANGES TO CONTENT
![Page 58: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/58.jpg)
RESULT
![Page 59: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/59.jpg)
HTML elements are used to describe the structure of the page (e.g. headings, subheadings, paragraphs).
SUMMARY
![Page 60: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/60.jpg)
They also provide semantic information (e.g. where emphasis is placed, definitions of acronyms, when text is a quotation).
SUMMARY
![Page 61: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/61.jpg)
![Page 62: Learning HTML involves... Learning how these elements are used Learning a list of elements](https://reader036.vdocuments.mx/reader036/viewer/2022062304/56649eff5503460f94c14d87/html5/thumbnails/62.jpg)