Creating the HTML Structure

HTML (HyperText Markup Language) defines the structure and content of web pages.

Starting with Plain Text

Create a file named index.html in your project folder. Add some plain text:

Hello, HTML!

Open this file in your browser (just double-click it or drag it into Firefox/Chrome). You will see the text rendered on the page. An HTML file is essentially a text file that the browser reads and renders.

Adding Markup

Now update the content:

<h1>WakeUp Times</h1>
<p>If you go to bed now, when should you wake up?</p>

Refresh the browser. Notice how the text inside <h1></h1> looks different from the text inside <p></p>.

This is what “markup language” means: we use tags to mark up content, telling the browser what each piece represents. The <h1> tag means “this is a heading,” and <p> means “this is a paragraph.” The browser then displays them accordingly.

The Document Structure

A properly formatted HTML document has a specific structure:

<!DOCTYPE html>
<html>
  <head>
    <!-- metadata about the page -->
  </head>
  <body>
    <!-- visible content -->
  </body>
</html>

<!DOCTYPE html> tells the browser this is an HTML5 document
<html> is the root element containing everything
<head> contains metadata: information about the page (title, links to stylesheets, etc.)
<body> contains the visible content users see

Notice that elements are nested inside each other. The <head> and <body> are inside <html>.

Building Our Page

Let’s build up our actual page. Update index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WakeUp Times</title>
  </head>
  <body>
    <h1>WakeUp Times</h1>
    <p>
      A sleep cycle lasts about 90 minutes, and a good night's sleep consists of
      5-6 sleep cycles.
    </p>
    <p>If you go to bed now, when should you wake up?</p>
    <button>Calculate</button>
  </body>
</html>

The <meta> tags in the head set character encoding and viewport settings. The <title> appears in the browser tab. In the body, we have our heading, paragraphs, and a button.

Refresh the browser. You should see the content with a clickable button. But clicking the button does nothing. Let’s fix that.

Adding Interactivity with onclick

There are several ways to add JavaScript to an HTML page. The simplest is the onclick attribute. Update the button:

<button onclick="window.alert('Boo!')">Calculate</button>

Refresh and click the button. An alert window appears with “Boo!”. The window.alert() is JavaScript code that runs when you click the button.

Notice the syntax: onclick="..." is an HTML attribute. An attribute provides extra information about an element. It is written as a name="value" pair inside the opening tag. We have already seen other attributes like lang="en" and charset="UTF-8".

Let’s try multiple statements:

<button onclick="console.log('Bam!'); window.alert('Boo!')">Calculate</button>

Open the browser’s developer tools (right-click → Inspect → Console tab). Click the button. “Bam!” appears in the console, then the alert shows.

This works, but it is getting messy. Imagine putting 10 lines of JavaScript in that attribute.

Moving JavaScript to a Script Tag

A better approach is to put JavaScript in a <script> tag and define a function. Update index.html:

<button onclick="handleClick()">Calculate</button>

<script>
  function handleClick() {
    console.log("Bam!");
    window.alert("Boo!");
  }
</script>

Add the <script> tag right before the closing </body> tag. Now our JavaScript is separate from the HTML, and we can add as many statements as we want to the function.

Using getElementById

Instead of onclick in the HTML, we can attach the event handler entirely in JavaScript. First, we need a way to reference the button. Add an id attribute:

<button id="calc-btn">Calculate</button>

<script>
  const calcBtn = document.getElementById("calc-btn");
  calcBtn.onclick = handleClick;

  function handleClick() {
    console.log("Bam!");
    window.alert("Boo!");
  }
</script>

The id attribute gives an element a unique identifier. The document object represents the entire HTML page. This is the DOM (Document Object Model). We use getElementById to find our button, then assign our function to its onclick property.

Try it: click the button. Same behavior, but now the button element contains no JavaScript and all the logic is in the script.

Checkpoint: Commit your progress.

git add .
git commit -m "wakeup-01: Add HTML structure with button"
git push