Add Media & Forms

After this lesson, you can complete pages with an informative image and a labeled demo form without promising submission.

BEGIN WITH A QUESTION

Understanding begins with a question.

The site is taking shape. Before adding features, ask: what does this image help explain, and what will people expect from this form?

Complete pages with an informative image and a labeled demo form without promising submission.

UNDERSTAND THE CONCEPT

An image needs a reason

Choose an illustration that supports the content. Write alt explaining relevant information and appropriate dimensions. Figcaption can add context. If you use the observatory diagram for a fictional community, explain that it is a sample illustration.

Demo forms should be honest

Provide a label for every control, an appropriate email type, and understandable field rules. Visibly state that data is not sent. A type button button does not submit a form; do not display submission success without a real submission process.

Keep the focus on HTML

This project does not require CSS, JavaScript, or a server. Measure progress through content and structural clarity. Add table data only when your website’s theme needs it.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<figure>
  <img src="assets/observatory.svg" alt="A telescope points toward the Moon" width="640" height="360">
  <figcaption>An illustration for a fictional community project.</figcaption>
</figure>
<form>
  <label for="email">Email (required)</label><input id="email" name="email" type="email" required>
  <label for="pesan">Message (at least 10 characters)</label><textarea id="pesan" name="pesan" required minlength="10"></textarea>
  <p>Demo: data is not sent.</p>
  <button type="button">Example button</button>
</form>

BROWSER RESULT

The image has an alternative, the form has labels and field constraints, and the demo status is stated directly on the page.

COMMON MISTAKES

<button type="button">Send now — guaranteed delivery!</button>

This ordinary button does not submit anything. Replace the wording with a demonstration explanation, without promising an unavailable action.

TRY TOGETHER

Practice clarifies understanding.

01 What should a form without a backend say?

Message sent successfullyDemonstration form; data is not sentAn account will be created automatically

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Add context and a space for feedback

Inside main, add a figure with the sample image and a caption. Add a form containing required email, a required pesan textarea with at least 10 characters, full labels, a type button button, and an explanation that data is not sent.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The Sky Club’s Story</title>
</head>
<body>
<main>
  <h1>About the Sky Club</h1>
  <p>A fictional community for learning HTML.</p>
</main>
</body>
</html>

index.htmlHTMLLn 1, Col 114 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Media supports content, rather than merely filling space.
Labels and rules help people complete forms.
A demo without a server does not promise submission.

Images & mediaFormAccessibility

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

Alternative text °Form label °HTML validation °

Library: Clear images, lighter pages ↗

Next lesson →