HTML

There are many other tags in HTML.

hr

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>
<hr>
<p>To prove it wasn't chicken.</p>

It looks like this:

But wait, there's more!

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

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…

bc.

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.

HTML

Indenting

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>

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:

bc.