SURF-CLOUD Learn Robotics · AI · Programming
Free for students

EXP.WEB.01 Explore · Web and apps

HTML: your first web page

You should be able to: create a saved .html file that opens in a browser and shows a heading, a paragraph, and a list.

After GES: B7 web lessons are about using browsers and judging websites. Explore is about making a page.

1. Learn

HTML (HyperText Markup Language) is not a programming language like Python. It is a set of tags that tell the browser: this is a title, this is a paragraph, this is a list.

A minimal page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My club</title>
</head>
<body>
  <h1>SURF-CLOUD Robotics Club</h1>
  <p>We meet on Fridays.</p>
  <ul>
    <li>Scratch / Python</li>
    <li>Robot kits</li>
  </ul>
</body>
</html>
  • <h1> — main heading (one per page is enough).
  • <p> — paragraph.
  • <ul> + <li> — bullet list.
  • <head> is for the tab title and settings; visitors read <body>.

Save as club.html. Double-click it. It opens in Chrome, Edge, or Firefox. You do not need UltraHost yet.

On a phone, you can type the same in JSFiddle (HTML pane) if installing a file editor is hard.

2. See

Right-click any website → View page source. You will see many tags. Yours will be short. Same idea.

3. Practice

  1. Where does the text in the browser tab come from?

    Show answer

    The <title> inside <head>, not the <h1>.

  2. Change the list to three activities your real or imagined club will do.

    Show a sample

    Three <li> lines, e.g. line-follower, Python hour, poster on e-waste.

  3. What is the difference between HTML and Python in one sentence?

    Show answer

    HTML structures a page for a browser. Python is a programming language that can calculate, decide, and repeat.

  4. True or false: This lesson uploads your page to surfcloudtechnology.com automatically.

    Show answer

    False. You are only learning the file. Publishing comes later (EXP.WEB.06 or cPanel File Manager when you are ready).

4. Project

A one-page “About my school computing club” with heading, two paragraphs, and a list of 4 items. Open it on a phone if you can (send the file to yourself). Screenshot or print.

5. Check

  • Emerging — tags are mixed up; page will not open
  • Developing — heading shows; list broken
  • Approaching proficient — valid page with list
  • Proficient — club page + can explain head vs body
  • Highly proficient — helps a classmate save and open the file

SURF-CLOUD Explore track · beyond GES Computing. Next: EXP.WEB.02.

EXP.WEB.02 →