Digital Solutions

hello DOM

helloDOM.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello DOM!</title>
        <link rel="stylesheet" type="text/css" href="helloDOM.css">
    </head>
    <body>
        <p>
            Click me:<br>
            <input type="button" value="hey" onclick="hello();">
        </p>
        <script src="helloDOM.js"></script>
    </body>
</html>

helloDOM.css

body{
    background-color: salmon;
}

helloDOM.js

function hello(){
    alert("Hello DOM!");
}

Make the web page say "Hello M8!", and change the title to "Mates".
Change the background of the page to your favourite colour.
the !DOCTYPE definition forces the page to render in standards mode, however, without the !DOCTYPE definition, the browser may render the page in Quirks Mode, or not support new HTML5 tags (such as article or section). What is "Quirks Mode", and what are some of the older browsers that operate in Quirks Mode?
the head tag is a container for metadata. What is metadata?
I have put the link to the JavaScript at the bottom of the page, before the closing body tag. This allows the HTML to be parsed before the JS is loaded, which gives the effect of faster page load times. Why is this a good idea?