Electronics Simplified

HTML for Gadgets: Cheat Sheet

Everything you need to build the web page your ESP32 or ESP8266 sends to your phone, on one page. Print it and keep it next to your breadboard. The lessons are in the HTML for Gadgets course.

The skeleton (every page)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Smart Room</title>
  <style> /* CSS goes here */ </style>
</head>
<body>
  <!-- everything you see goes here -->
</body>
</html>

The tags

You want to…WriteLesson
A big title<h1>My Room</h1> (h2, h3 are smaller)2
A line of text<p>Hello</p>2
Bold words<b>light</b>2
Fit a phone screen<meta name="viewport" content="width=device-width, initial-scale=1">3
Name the browser tab<title>My Room</title>3
An ON/OFF switch<a href="/led/on">ON</a>4
A real-looking button<a href="/4/on"><button>ON</button></a>4
A table of readings<table>, <tr> row, <th> heading cell, <td> cell5
A live number%TEMPERATURE% (the ESP32 fills it in)5
A refresh link<a href="/">Refresh</a>5
A spot to change later<span id="level">0</span>7
A slider<input type="range" min="0" max="255" value="128">7

CSS for big, friendly buttons

body    { text-align: center; }
.button { display: inline-block; padding: 14px 28px; margin: 6px;
          font-size: 20px; color: white; background: #2ecc71;
          border-radius: 12px; text-decoration: none; }
.off    { background: #e74c3c; }

Use it with <a class="button" href="/led/on">ON</a> and <a class="button off" href="/led/off">OFF</a>.

Send a slider value without reloading

<input type="range" min="0" max="255" oninput="fetch('/slider?value=' + this.value)">

On the ESP32 side (Arduino)

const char index_html[] PROGMEM = R"rawliteral(
  ... your whole page ...
)rawliteral";
 
server.on("/", []() {
  String page = index_html;
  page.replace("%LEDSTATE%", ledOn ? "ON" : "OFF");
  server.send(200, "text/html", page);
});
server.on("/led/on", []() { digitalWrite(4, HIGH); ledOn = true; /* send the page again */ });
int value = server.arg("value").toInt();   // reads ?value=128

When it doesn't work

  1. Tiny page on the phone? Add the viewport line.
  2. Button does nothing? The href must match the server.on("…") path exactly, including capitals.
  3. %TEMPERATURE% shows up as text? The ESP32 isn't replacing it: check the spelling on both sides.
  4. "Site can't be reached"? The phone must be on the same Wi-Fi as the ESP32. Check the address in the Serial Monitor.
  5. Quotes break the Arduino code? Keep the page inside R"rawliteral( … )rawliteral".