How to send a variable to the HTML-site

I want to enter a variable on the Seriall Monitor and desplay it on the HTML-Site
my code:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "index.h"

const char* ssid = "WiFI-SSID";
const char* password = "WiFi-Password";
char i;

ESP8266WebServer server(80);

void setup() {
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);


  server.on("/",  handlePortal);
  server.begin();
}

void loop() {
  server.handleClient();
  if (Serial.available())
  {
    i = Serial.read();
   
 Serial.println(i);
    Serial.write(i);
  }
  
}



void handlePortal() {
  String s = MAIN_page;
  server.send(200,   "text/html",  s );
}

and the HTML Site

const char MAIN_page[] PROGMEM = R"=====(
<!doctype html>
<html lang='en'>
  <head>
    <title>Wifi Setup</title>
  </head> 
  <body>
  <h1>The ver should appears here </h1>
  <br/> 

  </body>
</html>
)=====";

How can I do that?

most of the time it's the browser that initiates the request for a display update. You can't "push" the information to a web site (the connexion is usually dropped after the request).

➜ you need an HTML code that handles this (AJAX and the likes or just a regular refresh and you reload the full page)

One could make a page that parses the variable and calls another page that displays the variable.

ESP32 Arduino HTTP Server: Template processing with multiple placeholders - techtutorialsx