Modifying the HTML
Tour the Existing HTML
- Information between the
<head>
tags does not show in the browser. It is only background information for the webpage. - Elements that live inside of the
<body>
tags will be displayed on the page (lines 13-39). - The
<div>
tags define a division or a section in an HTML document. These allow us to group important elements together and nest elements to create structure and organization.
Explore to Learn:
- What line numbers in the HTML file are responsible for the text displayed in the browser?
- What organizational structures do you notice?
- Try commenting out a line of code! Highlight a section of the code and use
cmd + /
to comment out that line. Then click the greenRun
button. What happens? Highlight it again and use the same keyboard shortcut to undo it! - What might be the purpose of the
class
that appears on some of the elements?
Breakouts: Modify the Existing Code
Now that we're getting to know HTML and this specific project a bit better, let's modify it!
- Add two more single cards, each with a card title and card text.
- Decide what content you would like for your webpage. If you're not feeling creative, make it a glossary of terms we are learning today!
- CSS: Short for Cascading Style Sheets, this language controls the look and feel of a webpage. It can change the layout of items on a page, colors, fonts, and even animate elements!
- JavaScript: This programming language is responsible for user interaction. For example, when the user clicks a button and sees a change in the browser, this action is controlled by JavaScript.
If you would like to check your work at this point, you can compare with this replit.
HTML Summary
- Elements that live inside of the
body
tags will be displayed on the page. - We can nest elements inside of other elements to create structure within the HTML.
- Classes allow us to give each element a specific label so that we can reference that element later.
- The number of elements and the content inside of the elements in the HTML file usually have a 1-to-1 correlation with what we see in the browser.