Final Thoughts- Chapter 9
Developer Tools
We’ve gone through a lot of information in this course, but there are a few more things I want to discuss as an introduction to HTML and web development.
The elements that we used actually serve a very useful purpose—browsers use them to create a structure...an interface that can be used to dynamically change a website.
The Document Object Model (or DOM Tree) is a programming interface that sets up the structure for an HTML document and allows it to be changed and manipulated by other programming languages. This can be very useful when you want to dynamically change your website. So there is a “method to the madness”.
To get an understanding of this, let’s take a look at the document we created in your browser’s window.
We have already been viewing our document in a browser, but to get an idea of how the elements we’ve created have meaning, we will view our file with developer tools.
Developer Tools
Every major browser has developer tools. They help you perform a variety of tasks. In Safari, you go to Preferences, then Advanced, then select “Show Develop menu in menu bar.” Once you’ve enabled developer tools, you can right click anywhere on a page and the tools will open.
In Chrome you can simply right click anywhere on the page and their developer tools will open up, or you can click on the dots in the far right-hand corner and select More Tools, then Developer Tools and the tools will open up.
You will see that there is an interface that the browser has created. You will also notice that everything on our webpage is a box. This will be important when we come to CSS because we can style just about everything associated with a box (i.e., padding, color, etc.). Also, you can model changes to the content of our website. Do not worry, we aren’t changing the actual file—we are just modeling (through the DOM) what changes could look like.
Refer to the course booklet for the code for Exercise #9.
Thank you for taking this course. You can take more courses like this, or visit our YouTube channel: Computer Science Through the Web.