Other useful tags

There are many other tags in HTML.


The <hr> tag makes a horizontal line. Use it after a <p> tag, or before an <hx> tag, to break up sections of your document. Like this:

<p>Question: why did the turkey cross the road?</p>
<p>To prove it wasn't chicken.</p>

It looks like this:

hr tag

But wait, there's more!

The Mozilla Development Network has good references for HTML, and other stuff.


Pigs' houses (string arguments)

The story so far

In the last lesson, we looked at function parameters. Parameters let you reuse a function for different purposes. Check this out:

<button onclick="BetterPiggyBank.addCoin(0.01)" ...
<button onclick="BetterPiggyBank.addCoin(0.05)" ...
<button onclick="BetterPiggyBank.addCoin(0.10)" ...
<button onclick="BetterPiggyBank.addCoin(0.25)" ...

They all call the same function:

BetterPiggyBank.addCoin = function(amount) {
  //Do something with amount.

Arguments can be strings

amount is a number. So…


Coding standards

Most projects have coding standards. They make code look the same in every file, making it predictable, and easy to read.

We'll use some basic coding standards for HTML, CSS, and JS.



A standard we'll follow is indentation by four spaces. When a tag is inside another tag, use indenting to make containership clear. For example:

<div id="output-container" class="hide-on-load">
    <p>I have a bracelet. It says:</p>
    <p>What would <span id="character">Scooby Doo</span>?</p>


Write an app to keep track of your Freddos.

(If you were logged in as a student, you could submit an exercise solution, and get some feedback.)


The story do far

Responding to hover

All the CSS we've done is static. Nothing the user does changes the way it looks, apart from resizing the browser.

CSS can respond to some user actions. We'll only talk about one of them: hover. When the user puts the mouse cursor on an HTML element, you can change the way it looks.

Here's some code we've seen before, with one addition: