THETAThe Waves of Ondyria
ITEN
Wave of Creation

HTML lab · Practical guide

From the book to your first HTML file.

To write code, you need a text editor on your computer. There is no online editor here: you will learn the real process by creating an index.html file, opening it in your browser, and updating it as you complete the book's missions.

Download the starter fileDownload the complete project

Getting started

Six steps, then you can experiment.

Ask an adult to help you the first time. Once you have created the file, you can repeat the same cycle.

  1. 01

    Create your mission folder

    Create a new folder on your desktop and name it html-mission. Your entire project will stay there, on your computer.

  2. 02

    Install or open a text editor

    You need a text editor to write HTML. Visual Studio Code is free and is the editor recommended for this guide: ask an adult to help you download and install it.

    Download Visual Studio Code
  3. 03

    Save the file as index.html

    Save it in your html-mission folder with the exact name index.html. Check that it has not become index.html.txt.

  4. 04

    Add your first structure

    Copy the code below into your file. The head and body elements are siblings: they both belong inside html.

  5. 05

    Open the page in your browser

    Find index.html in your folder and double-click it. It will open as a real page in your browser, even without publishing it online.

  6. 06

    Edit, save, and refresh

    Go back to your editor, change some text or a tag, and save with Ctrl + S on Windows or ⌘ + S on Mac. Then refresh the page in your browser to see the result.

index.htmlFIRST STRUCTURE
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Ondyria Guide</title>
  </head>
  <body>
    <h1>My Ondyria Guide</h1>
    <p>The mission begins!</p>
  </body>
</html>

BRIX SCAN

If something does not work.

Seeing code instead of the page?

Check the file name: it must end with .html, not .txt. Then open it with Chrome, Edge, Safari, or Firefox.

Your change is not showing up?

Save the file again and refresh your browser. The browser cannot show a change that has not been saved yet.

The page looks incomplete?

Check that tags that need a closing tag have one, and that the < and > symbols are there. Compare the structure with the book.

The image is not showing up?

The complete project uses an image from Theta's portal. Your HTML file stays on your computer, but you need an internet connection to display that image.

You do not need the console for this mission.

The browser console is a more advanced tool. To learn HTML structure, it is clearer to work directly in your index.html file.

Beyond the mission

Keep exploring, one step at a time.

The book introduces selected HTML fundamentals through a story and practical exercises. It is a starting point, not a complete reference. The lab contains what you need for the book; these optional resources help you go further.

A reference, not extra homework.

MDN Web Docs is an external technical resource in English. Start with a topic you know, ask an adult or teacher for help when needed, and keep your original files before experimenting. Each link opens a new tab.

Ready for the book

Now every Challenge can become a real page.

Start with the starter file, follow the missions, and use the complete project only to compare your final solution.

Download index.html