Embedded Files
Once you've added text, links, and images, you've got most of the basic pieces you're likely see in the websites you visit every day. However, the last essential components are interactive elements. Any time you put a username and password into a login field, or press a button to open a menu, or click a checkbox on a settings page, you're dealing with interactive elements such as buttons and inputs.
Buttons
The HTML element for a button is exactly what you might guess:
<button>Press me</button>
It might feel more complicated than that because you see so many different types of buttons, and they often look radically different from one another. However, the vast majority of those looks are accomplished with CSS, which we will cover later; the underlying HTML is usually no more complicated than what you see above. All of these buttons, for example, are built from that same HTML:
Press Me Press Me Press Me Press Me
The text inside the button element is what will be displayed on the button, but it can also contain image elements instead. For example, a common type of button you see on many websites (this one included) is called a hamburger button, named because the image it uses resembles a hamburger. The HTML might look like this:
<button>
<img src="https://media.gcflearnfree.org/global/coding/hamburger-button.png">
</button>
In the browser, it would be displayed like this:
With some CSS added to hide some of the default button appearance, it can look completely different from the buttons you've seen so far:
Other than links, most of the things you click on a webpage to make something happen are probably button elements, even if they look extremely different from one another.
Inputs
The other most common way you've probably interacted with websites is through inputs. At some point, you've probably been asked to enter a username and password for a website. Maybe there was a checkbox that asked if you had read a Terms of Service page, or something along those lines, and maybe a drop-down menu that asks you to choose an option from many.
Each of these options is a type of HTML input. For example, these are the elements for a text input (like the ones you type a username or password into) and a checkbox input:
<input type="text">
<input type="checkbox">
Notice that they actually use the same HTML element, <input>, with different HTML attribute values. Those values give the browser enough information to display two completely different things when loaded:
A drop-down input, on the other hand, is made using a select element, which contains a number of option elements. Try displaying this in your codepen tool.
<select>
<option>The First Option</option>
<option>Another One</option>
<option>Bunch of Options Here</option>
</select>
This element is structured similarly to the <ol> and <ul> elements you used to make lists. That's because the <select> element itself isn't displayed; instead, it acts as instructions to tell the browser how to display the <option> elements nested inside. Try displaying this in your codepen tool.
Try this!
Try typing each of the previous code samples into the input below. If you click the "Add our CSS" checkbox, you'll find that some of these look completely different from browser defaults on our site, while others are unchanged.
You can enter them all together if you want, but it may be easier to see what's going on if you enter them one at a time:
How do you make them do something?
All of these HTML elements are interactive without adding anything to them—you can click them, type text into them, select them, and so on—but HTML alone can't make any of those interactions actually accomplish anything useful. We won't go into detail on either of these methods yet, but two major tools for doing things with these interactions are HTML forms and JavaScript.
HTML forms: A form is an HTML element that you can use to contain related inputs and send their values somewhere else. Don't worry about the specifics here for now; just keep in mind that a form is one way to send the information a user has entered—whether that's a username or password, which checkbox they checked, or what they chose in a drop-down input—to another file, where some other code can work with it.
JavaScript: The programming language JavaScript can also be used to read the values of inputs and act on them. JavaScript is very flexible and can do all sorts of different things to the structure and presentation of a webpage in real time. For example, the "Add our CSS" checkbox on the "Try this" activities in these lessons uses JavaScript to change the look of the HTML you enter every time you click it.
Do it yourself!
Open the index.html file of your Programming Tutorials project in your text editor, and let's add an interactive element. This one should be fairly straightforward because all you're going to add is a button.
First, find the last paragraph you entered with the link:<p>Find the full cast listing at the <a href="https://edu.yourWebSite.org">Basketball Dog</a> website.</p>
Just below that paragraph, enter your first button:<button>Show Next Review</button>
For now, this button won't do anything, but eventually it's going to let you cycle through multiple movie reviews that you'll set up. Once you've added your button, your full code should look like this:
<html>
<body>
<h1>Cinema Classics Movie Reviews</h1>
<h2>Review: Basketball Dog (2018)</h2>
<img src="https://media.yourWebSite.org/global/coding/basketballdog.png">
<p><i>4 out of 5 stars</i>
<p>From director <b>Vicki Fleming</b> comes the heartwarming tale of a boy named Pete (Trent Dugson) and his dog Rover (voiced by Brinson Lumblebrunt). You may think a boy and his dog learning the true value of friendship sounds familiar, but a big twist sets this flick apart: Rover plays basketball, and he's doggone good at it.</p>
<p>This movie has everything you could ask for:</p>
<ul>
<li>Basketball</li>
<li>A dog</li>
<li>Nail-biting suspense</li>
</ul>
<p>While it may not have been necessary to include all 150 minutes of Rover's championship game in real time, Basketball Dog will keep your interest for the entirety of its 4-hour runtime, and the end will have any dog lover in tears. If you love basketball or sports pets, this is the movie for you.</p>
<p>Find the full cast listing at the <a href="https://edu.yourWebSite.org">Basketball Dog</a> website.</p>
<button>Show Next Review</button>
</body>
</html>
Open the File Explorer or Finder and navigate to your Programming Tutorials project, then double-click your index.html file. Your webpage should open in your default browser, and you should see something like this.
Congratulations, you've got something to click!
Page updated
Report abuse