HTML = Content

The words, images, links, lists, buttons, and inputs on the page.

CSS = Style

The colors, spacing, sizes, borders, layout, and visual design.

JavaScript = Functionality

The actions, interactions, checks, messages, and changes after a click.

What Websites Are For

Websites serve content and provide functionality in a meaningful way.

Example

Class News

Today we are learning how web pages are built.

Code

<h2>Class News</h2>
<p>Today we are learning how web pages are built.</p>
<button type="button">Like this lesson</button>

Notes

The heading and paragraph are content.
The button suggests functionality because users can click it.
A meaningful page is clear, organized, and useful.

Anatomy Of A Web Page

The head stores information for the browser. The body stores visible content.

Example

<body> visible part

My First Page

Hello, browser!

Code

<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>My First Page</h1>
    <p>Hello, browser!</p>
  </body>
</html>

Notes

<head> is for page information like the browser tab title.
<body> is where visible page content goes.
Most beginner work happens inside the body.

Doctype

The doctype tells the browser this document uses modern HTML.

Example

The doctype does not appear on the page.

It is an instruction for the browser.

Code

<!DOCTYPE html>
<html>
  <body>
    <p>This is an HTML5 page.</p>
  </body>
</html>

Notes

Put <!DOCTYPE html> at the very top of the file.
It is not an element and does not need a closing tag.
It helps browsers read the page correctly.

Tags And Nesting

Tags mark where an element starts and ends. Elements can sit inside other elements.

Example

A paragraph nested inside a box

This is a paragraph.

Code

<div>
  <p>This is a paragraph.</p>
</div>

Notes

<p> is an opening tag.
</p> is a closing tag.
Nesting means one element is placed inside another.

Headings

Headings give a page structure, like titles and subtitles.

Example

Big Heading

Smaller Heading

Smallest Heading

Code

<h1>Big Heading</h1>
<h2>Smaller Heading</h2>
<h3>Smallest Heading</h3>

Notes

<h1> is usually the main page heading.
<h2> and <h3> are used for smaller sections.
Headings are not just for size. They help organize meaning.

Paragraphs

Paragraphs are used for normal blocks of text.

Example

This is my first paragraph.

This is another paragraph with a little more information.

Code

<p>This is my first paragraph.</p>
<p>This is another paragraph with a little more information.</p>

Notes

Browsers automatically add space around paragraphs.
Use paragraphs for sentences, explanations, and descriptions.
Most text on a website is inside paragraph elements.

Lists

Ordered lists count items. Unordered lists use bullet points.

Example

Ordered list:

Open the file
Write HTML
Refresh the browser

Unordered list:

Durian
Bananas
Apples

Code

<ol>
  <li>Open the file</li>
  <li>Write HTML</li>
  <li>Refresh the browser</li>
</ol>

<ul>
  <li>Durian</li>
  <li>Bananas</li>
  <li>Apples</li>
</ul>

Notes

<ol> means ordered list.
<ul> means unordered list.
Each item goes inside an <li> element.

Links

Links are called anchors in HTML and use the <a> tag.

Example

YouTube

Code

<a href="https://www.youtube.com">YouTube</a>

Notes

The text between the tags is what users click.
The href attribute stores the address.
Links can go to other websites, other pages, or sections on the same page.

Attributes

Attributes add extra information to an element.

Example

Hover over this paragraph.

Code

<p title="This text appears as a tooltip.">
  Hover over this paragraph.
</p>

<input type="text" placeholder="This is placeholder text">

Notes

Attributes usually go in the opening tag.
They often look like name="value".
In the picnic idea, attributes are labels on containers.

Images

The image tag displays an image when you provide its source.

Example

Sample Image

Code

<img src="my-image.jpg" alt="Description of image">

<img src="my-image.jpg" width="300" height="300" alt="Description">

Notes

src means source. It tells the browser where the image is.
width and height set the image size in pixels.
alt describes the image for accessibility and broken images.

A Picture That Is Also A Link

Place an image inside an anchor element.

Example

Click Me

Code

<a href="https://example.com">
  <img src="my-image.jpg" alt="Clickable picture">
</a>

Notes

The outside <a> makes the inside image clickable.
This is nesting: one element inside another element.
Always include useful alt text for the image.

Line Breaks

Some elements appear inline. A break can force the next item onto a new line.

Example

First line
Second line after a break

Code

<span>First line</span><br>
<span>Second line after a break</span>

Notes

<br> means line break.
It does not wrap content, so it does not need a closing tag.
Use paragraphs for normal text blocks. Use breaks only when a line break matters.

Buttons, Inputs, And Labels

Form elements prepare a page for user interaction.

Example

Name:

Password:

Code

<label>Name:</label>
<input type="text" placeholder="Your name">

<input type="password" value="5ecretp@ss">

<button type="button">Click me!</button>

Notes

<button> creates something clickable.
<input> lets the user type or choose information.
type="password" hides typed characters.
A <label> tells the user what an input is for.

Mini Challenge: Passcode Protected Image Safe

This connects the whole lesson: HTML creates the content, CSS styles it, and JavaScript adds the click behavior.

Example

Enter the passcode html to reveal the secret image message.

Passcode:

Unlocked: Great work! You used HTML, CSS, and JavaScript.

Code

<label for="passcode">Passcode:</label>
<input id="passcode" type="password">
<button type="button" id="unlock">Unlock Safe</button>
<div id="secret">Secret image goes here</div>

<script>
  const input = document.querySelector("#passcode");
  const secret = document.querySelector("#secret");

  document.querySelector("#unlock").addEventListener("click", function () {
    if (input.value === "html") {
      secret.style.display = "block";
    }
  });
</script>

HTML creates the label, input, button, and secret area.
CSS can hide the secret area at first.
JavaScript checks the typed passcode after the button is clicked.