1 / 18

Understanding HTML and the DOM: A Guide to Structure and Markup

This guide introduces HTML (Hypertext Markup Language) and the Document Object Model (DOM), highlighting their roles in structuring web documents. Learn about the interconnected nature of documents through hyperlinks, the importance of markup, and the distinction between declarative and imperative programming. Discover how tags define the structure within HTML and how the DOM represents this structure in a tree format. This foundational knowledge is essential for aspiring web developers looking to master the basics of web programming.

airell
Download Presentation

Understanding HTML and the DOM: A Guide to Structure and Markup

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. 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

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

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

More Related