HTML and the DOM

1. HTML and the DOM

2. What is HTML? • Hypertext • Interconnected documents • Markup • Our code goes around our documents • Language • Yes, it’s programming

3. What you want not how you want it Declarative programming

4. Imperative programming • C/C++ • JavaScript • Most everything you think of as programming

5. Markup • We surround our data with tags to declare how they are to be treated.

6. <p>This is my first paragraph. In this paragraph some parts <em>need to be emphasized</em>.</p> • <ul> • <li>This is the first item in a list</li> • <li>The browser wouldn’t know it’s a list</li> • <li>Except for the tags around this text</li> • </ul>

7. HyperText • The text documents are interconnected inside the text

8. Anchor tag • <a href="http://example.org/somedocument.html">Check out some document!</a>

9. Hypertext markup language Hyper reference Hypertext transfer protocol Hyper === interconnected

10. So what is HTML? • A way of defining the *structure* of a document.

11. Document Object Model • The in-memory model of an HTML Document

12. This is the DOM

13. Another View of the DOM

14. The DOM is a tree The file system is a tree The DOM is a tree The DOM is a tree made up of text nodes and HTML Element nodes (tags) • The filesystem is a tree made up of files and directories.

15. 2 Types of Tags get Rendered • Block Tags • Inline Tags

17. Seebasicpage.html demo. Let’s take a look at some code

18. HTML is about STRUCTURE. HTML is not where we change font, colours, sizes, etc.