Hopefully, CodePen looks familiar.
HTML in left window, CSS in the middle window and
JavaScript that's currently blank on the right.
There are two divs in the HTML window with width and
font size specified in the CSS window.
The div with ID d1 is specified by CSS to have a background color of light blue and
the div with ID d2 is specified to have a background color of yellow.
This is the simple web page we'll begin to make interactive.
Let's look at how to create an HTML button and
program it to have an effect when it's pressed.
We'll use a new HTML tag, the input tag.
It's similar to the image or img tag you have seen before that displays media
as an image, because this tag doesn't have both a start and an end tag, but
rather one tag with options with in the tag.
The first tag element is the type of input.
In our first examples, we'll only use button as the type of input.
But later, we'll see that you can use color choosers as a type of input, so
that users can choose a color as part of interacting with a web page.
And there are other types of inputs we'll see as well, including sliders,
file uploaders and more.
The text displayed in the button is specified by the value element in
the input tag.
As you can see here, the word change will be displayed in the button.
You'll also need the onclick event attribute
to tell the button what to in the case of a certain event.
In this case, the user clicking the mouse.
Other examples of common HTML events are when a web page is loaded or
user has moused over text or an image or an input field is changed.
For example, when you type in a password.
The keyword onclick is an HTML event attribute that indicates
the JavaScript that follows should react in event of a click.
This calls an event handler,
which specifies what will happen when the button is pressed or clicked.
In this case, the onclick event will cause an alert to be displayed.
Let's see what this looks like in CodePen.