Display Data from sensors to a Webpage

Using Arduino Project Guidance
1

So I am using an Arduino Ethernet that collects data from a temperature sensor, carbon monoxide sensor, and anemometer. I would like to display this information to a personal webpage. As of right now I am able to access the Arduino with port forwarding and display this information.

However I wanted to clean it up a little and make it look better. I've created a simple dashboard and was wondering if the arduino was capable of diplaying this

the html code, of course instead of 00 I would place my sensor readings

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>PSSD</title>
  </head>

  <body>
    <div id="container">

      <div class="box">
        <h1>Temperature
        </h1>
        <p>
          00
        </p>
      </div>

      <div class="box">
        <h1>Humidity</h1>
		<p> 
          00
        </p> 
      </div>

      <div class="box">
        <h1>Wind Speed</h1>
        <p>
          00
        </p>
      </div>

      <div class="box">
        <h1>Carbon Monoxide</h1>
        
        <p>
          00
        </p>
      </div>
 
    </div>
    <style>

      body {
        background-color: #ffffff;
        margin: 0px;
      }

      .box {
        width: 188px;
        margin: 0px 5px;
        border: 2px solid #000;
        background-color: #f2f2f2;
        float: left;
       
      }
		
      .box p {
        text-align: center;
        font-size: 78px;
        padding: px;
      }

      .box h1 {
        font-size: 22px;
        text-align:center;
        padding: 8px;
        color: #ff6600;
        background-color: #666666;
      } 
    </style>
  </body>
</html>

I'm not sure how to add this to my arduino code to make it display this or if its even possible really. Thanks in advance for any help

2

Easily done. Your arduino server code needs to send that CSS styling information along with the rest of the web page per your new layout.

In other words, your Arduino code, where it generates HTML, needs to generate this new HTML including the style info, with your data values interspersed as required.

I see a bunch of client.println() in your future.

-br

3