Exercise - Creating a button for the first time
As you heard about on Monday, there are TONS of kinds of structure you can do with HTML – and unfortunately, we don’t have anything like enough time to cover them all! Here’s a useful one, though: creating a button to click on a page.
Check out this HTML:
<!DOCTYPE html>
<head>
<title>Example of HTML button</title>
</head>
<body>
<h1>Hello world!</h1>
<br>
<button id="btn-one">Click on me</button>
</body>
</html>
To see what the result looks like, go back to this link to see the online tool – delete everything in the left box, and copy and paste in THIS HTML, just like you did before. Click this link to go see the step by step instructions of how to do that in Exercise 1.
OR, if you’d rather do this in your own files, like you saw before, and will do more of later – you can open up a new file in the Sublime Text program, and copy this HTML in, and save it as a file name like new_html_button.html – make sure the name ends with .html! THEN,
Open up your Chrome web browser, go to File -> Open, and select the file called new_html_button.html from your file system. (Then you should be able to see the results in your browser!)
When you see the results…
Wow – a button. Don’t worry that clicking on the button doesn’t do anything – that’s EXACTLY what is supposed to happen.
-
NOW, Change the HTML code to make the button display something else – besides “Click on me”. What do you have to change to make that happen?
-
You’ll notice that there’s a special id attribute in the button tag. Why might you want to identify parts of a page structure with an id – do you remember what we talked about on Monday? (Go on to the next exercise for more on this.)
Also note…
The button is pretty cool. But you can’t do anything with it! (Yet.)
Learning how to use special JavaScript tricks (and, if you keep programming, a lot more tricks in JavaScript, HTML, and other languages of all kinds) can help you – for example – write code that makes something happen when you click a button (instead of just when the page loads!).
We’re going to be looking at an example or two like that a little bit later today, too.