HTML formatting issue.

Projects Programming
1

Hey been stuck all afternoon I am using this project as a starting point Temp sensor

Is a temp and humidity sensor running on esp8266 with its own web server. Trying to format the code for the web server but it does not want to play nice. Here is the html code

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <style>
    html {
     font-family: Arial;
     display: inline-block;
     margin: 0px auto;
     text-align: center;
    }
    h2 { font-size: 3.0rem; }
    p { font-size: 3.0rem; }
    .units { font-size: 1.2rem; }
    .dht-labels{
      font-size: 1.5rem;
      vertical-align:middle;
      padding-bottom: 10px;
    }
 </style>
</head>
<body>
  <h2>Shadehouse Climate Vandas</h1>
    <p>
    <i class="fas fa-thermometer-half" style="color:#059e8a;"></i> 
    <span class="dht-labels">Temperature</span> 
    <span id="temperature">%TEMPERATURE%</span>
    <sup class="units">&deg;C</sup>
  <p>
  <p>
    <i class="fas fa-tint" style="color:#00add6;"></i> 
    <span class="dht-labels">Humidity</span>
    <span id="humidity">%HUMIDITY%</span>
    <sup class="units">%</sup>
  <p>
  <p>
    <i class="fas fa-thermometer-full"></i> 
    <span class="dht-labels">Heat Index</span>
    <span id="Heat Index">%hi%</span>
    <sup class="units">&deg;C</sup>
  </p>
</body>

on the html reader here Html editor the code looks like this

but when I upload to arduino the webpage looks like this

no idea how to fix help appreciated

2

Hi There,

struggled the same thing - and finally found the issue:

Luftfeuchte %HUMIDITY% %

It's not a good ides to put a % there - since this indicates a new variable and screws up anything after.

3

I had the same issue. I replaced the % with the equivlent escaped value '°' as in the sample code below.


Air Temp. :
%AirTemperature%
°C

4

Html escaped entity for %

&#37;
5

You also just open the paragraphs

<p>
  <p>

most browsers will get confused about that.

6

Deva_Rishi:
You also just open the paragraphs

<p>




most browsers will get confused about that.

You don't have to close paragraphs in most circumstances:
https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element

A p element's end tag can be omitted if the p element is immediately followed by an address, article, aside, blockquote, details, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, menu, nav, ol, p, pre, section, table, or ul element, or if there is no more content in the parent element and the parent element is an HTML element that is not an a, audio, del, ins, map, noscript, or video element, or an autonomous custom element.

That being said, the empty paragraphs certainly look wrong, but I don't think OP cares after 8 months.

Pieter