Structure, style, and interaction
Webpages are made out of three coding languages that add structure, style, and interaction to a webpage. At the moment, we're learning how to add structure with HTML.
For example, here's a webpage you can code now. It contains a header displaying 1, a paragraph, and two buttons.
<html>
<body>
<h1>1</h1>
<p>Tapping the buttons doesn't change anything</p>
<button>-</button>
<button>+</button>
</body>
</html>
]]>Styling with CSS
Later, we'll learn how to style webpages with a coding language called CSS. On the webpage below, we styled the buttons using CSS.
<html>
<head>
<style>
button { background-color: #1E97FF; border: none; border-radius: 10px; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-left: 10px; font-size: 22px;}
</style>
</head>
<body>
<h1>1</h1>
<p>Tapping the styled buttons doesn't change anything</p>
<button>-</button>
<button>+</button>
</body>
</html>]]>Interactions with JavaScript
After learning how to style webpages, we'll learn how to add interactions with a third coding language called JavaScript. The webpage below uses JavaScript to update the number when you tap on the buttons.
<html>
<head>
<style>
button { background-color: #1E97FF; border: none; border-radius: 10px; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-left: 10px; font-size: 22px;}
</style>
</head>
<body>
<h1 id="counter">1</h1>
<p>Tapping the styled buttons changes the number</p>
<button onclick="change(false)">-</button>
<button onclick="change(true)">+</button>
<script>
var counter = 1;
function change(increase) { if (increase === true) { counter += 1; } else { counter -= 1; } document.getElementById("counter").innerHTML = counter; }
</script>
</body>
</html>
]]>