- Understand the purpose of HTML
- Be able to read through an HTML file and anticipate what the browser will render
- Apply IDs to HTML elements
- Create buttons in HTML
Of all of the major technologies used on the web, on either the front- or the Back-End, HTML, or Hyper Text Markup Language, is the oldest. In the beginning, the web was just a bunch of HTML documents that you wrote by hand. They had these cool things called hyperlinks that would allow a user to click on a word on one page and be taken to another page.
HTML is still an essential part of modern web applications. It holds the content and creates the structure of a webpage.
Tags, Content, Elements
HTML is made up of a series of elements. Each element is made up of at least one tag, and most have content between an opening and closing tag. We can think of many elements as containers, which store and organize other elements.
The header/nav bar at the top of this page is written with code that looks something like this:
<nav> <img src="./turing-school-logo" alt="Turing School logo" /> <ul> <li>Workshops</li> <li>Turing School</li> </ul> </nav> <h1>Welcome to Try Coding</h1>
Review: Tags, Content, Elements
HTML attributes give us the ability to provide more information about a specific element. The code snippet we looked at in the previous section had one element with two attributes:
<img src="./turing-school-logo" alt="Turing School logo" />
<img /> tag above has two attributes -
alt. These are intended to be used in conjunction with the
<img /> tag.
src needs to tell the browser which image to display, and
alt should provide text describing the image in the event the user isn’t able to access the image.
Other attributes are available to us as well. The one will we focus on today can be used with any HTML element:
We might want to use IDs to differentiate the two
<li>s in this nav bar:
<nav> <img src="./turing-school-logo" alt="Turing School logo" /> <ul> <li id="workshops">Workshops</li> <li id="school">Turing School</li> </ul> </nav>
As we wrap up our review of HTML (although it may still feel very new - that’s ok!), we’ll add one more element to your toolbox:
<button> element has an opening and closing tag, and should have content.
Try It: Buttons
Fork this CodePen, then add two buttons to the HTML. The content can be whatever you choose!
Then, add a different ID to each button.