user84746: I am carrying out this project in which the arduino acts as web server and hosts a website in which I show the constantly updated temperature of a laboratory.
The problem is running all this code in the arduino, memory runs out easily.
void loop() {
  int value= analogRead(PIN_LM35);
  float temperature= value/ 2.046;
  myFile = SD.open("temperature.txt");
  if (myFile) {
    Serial.println(temperature);
    }
    myFile.close();


   EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {   
      if (client.available()) {
        char c = client.read();
     
        //read char by char HTTP request
        if (readString.length() < 100) {
          //store characters to string
          readString += c;
          //Serial.print(c);
         }

         //if HTTP request has ended
         if (c == '\n') {          
           Serial.println(readString); //print to serial monitor for debuging
     
           client.println(F("HTTP/1.1 200 OK")); //send new page
           client.println(F("Content-Type: text/html"));
           client.println();  
           refreshcounter=refreshcounter+1;   
           client.println(F("<HTML>"));
           client.println(F("<HEAD>"));
           client.print(F("<meta http-equiv=\"refresh\" content=\"2\">"));
           client.println(F("<meta name='apple-mobile-web-app-capable' content='yes' />"));
           client.println(F("<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />"));
           client.println(F("<TITLE>TEMPERATURE SENSOR LAB01</TITLE>"));
           client.println(F("</HEAD>"));
           client.println(F("<BODY>"));
           client.println(F("<H1>TEMPERATURE SENSOR LAB01</H1>"));
           client.println(F("<hr />"));
           client.println(F("<br />"));  
           client.println(F("<H2>Arduino with Ethernet Shield</H2>"));
           client.println(F("<br />")); 
           if(temperatura<24){
              client.println("<p style=\"font-size:50px; color:#8eff59; font-weight:bold; font-style:italic;\">");
              client.println(temperature);
              client.println("</p>");
           }
           else if(temperature>=24 && temperature<=26){
             client.println("<p style=\"font-size:50px; color:#ffbc03; font-weight:bold; font-style:italic;\">");
             client.println(temperature);
             client.println("</p>");
           }
           else{
             client.println("<p style=\"font-size:50px; color:#ff0303; font-weight:bold; font-style:italic;\">");
             client.println(temperature);
             client.println(F("<H2>It is recommended to activate the air conditioner.</H2>"));
             client.println("</p>");
           }
           client.println(F("<p style=\"font-size:30px; color:#000000; font-weight:bold; ;\">Date/Time: <span id=\"datetime\"></span></p>"));
           client.println(F("<script>"));          
           client.println(F("var dt = new Date();"));
           client.println(F("document.getElementById(\"datetime\").innerHTML = ((\"0\"+dt.getDate()).slice(-2)) +\".\"+ ((\"0\"+(dt.getMonth()+1)).slice(-2)) +\".\"+ (dt.getFullYear()) +\" \"+ ((\"0\"+dt.getHours()).slice(-2)) +\":\"+ ((\"0\"+dt.getMinutes()).slice(-2));"));         
           client.println(F("</script>"));

           client.println("<svg width=\"1000\" height=\"250\">"); 
           client.println("<rect width=\"150\" height=\"5\" fill=\"gray\">"); 
           client.println("<animate attributeName=\"x\" from = \"0\" to =\"10000\" dur=\"10s\" fill=\"freeze\" />");
           client.println("</rect"); 
           client.println("</svg>");  
           
           client.println("<br />");     
           client.println("</BODY>");
           client.println("</HTML>");
     
           delay(1);
           //stopping client
           client.stop();
            //clearing string for next read
            readString="";  
           
         }
       }
    }
}
}

I thought to save memory to put all the code of the web page in an external sd.
However, I don’t really know how to use it from SD card.
The problem that stops me is the fact that the site does not have to be static but constantly updated with new temperature data.
How can I do that?

user7508: You wrote:

the site does not have to be static but constantly updated with new
temperature data.

A good option is to use Ajax.
The basic idea is to split the site in two parts:

a static part, potentially large, which contains all the user
interface, the styling, the bells and whistles...
a tiny, dynamic part that contains the data that is constantly updated
and nothing more.

The static part would be served from the SD card when the client sends a
GET / request. The dynamic part would be served from another endpoint,
for example as a reply to GET /temperature. Serving the dynamic part
should be very simple, something like:
client.println(temperature);

Yes, just send the number as ASCII, no HTML formatting. If you ever need
to send more than one number (e.g. multiple temperatures, or temperature
and humidity), format them in JSON. No need to use a library for
that, plain print() should be cheaper and good enough:
client.print(F("{\"temperature\":"));
client.print(temperature);
client.print(F(",\"humidity\":"));
client.print(humidity);
client.print('}');

On the client side, JSON.parse() gets the data back as an easy-to-use
data structure.
Here is a minimal example of what the static part could look like.
Notice the JavaScript code sent to the client. This code is responsible
for querying the temperature every 1000 milliseconds, and updating the
Web page with the new data;
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ajax test</title>
</head>
<body>

<h1>Ajax test</h1>

<p>Temperature: <span id="temperature">---</span> °C</p>

<script>
var data_field = document.getElementById("temperature");
setInterval(function() {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState != 4) return;
        data_field.innerText = JSON.parse(request.responseText);
    };
    request.open("GET", "/temperature");
    request.send();
}, 1000);
</script>
</body>
</html>

A few notes:

This example is purposefully minimal. You may want to add some error
checking, some decorations, some CSS and the such. Handling a
temperature-dependent color also belongs to the client code.

The example uses good old XMLHttpRequest. You may want to try the
more modern fetch API instead:
setInterval(function() {
    fetch("/temperature")
        .then(response => response.json())
        .then(data => { data_field.innerText = data; });
}, 1000);


If you are sending updates frequently enough to significantly load
your Arduino, you may want to look at Server-sent events. This
is a technique that allows you to significantly reduce the overhead of
sending data updates. It is not as popular as Web-sockets, but has the
advantage of being simpler to implement server-side.

If you can put a reverse-proxy between your Arduino and the Internet,
the proxy can handle the static content. Your Arduino then only
handles the dynamic data and wouldn't need an SD card. If you
reverse-proxy Server-sent events, make sure the proxy doesn't buffer
the server response. See for example these tips on configuring
Nginx for this purpose.

The static data could also be served from a completely different Web
site. For this to work, you have to fulfill two conditions:

The Arduino server has to add the header
Access-Control-Allow-Origin: * to its responses.

On the client code, you have to provide the full URL of the Arduino
as an argument of request.open(), fetch() or
new EventSource().



The previous trick also allows you to open the Web page directly from
your local file system, which can be very handy for developing.

Once you get the basic scheme working, Web technologies allow you to
get as fancy as you want. You could create an analogue gauge (with SVG
transform rotate). You could even add a graph, updated in
real time, that shows the time evolution of the temperature, and is
entirely handled by the client.



84746: <p>I am carrying out this project in which the arduino acts as web server and hosts a website in which I show the constantly updated temperature of a laboratory.</p>
<p>The problem is running all this code in the arduino, memory runs out easily.</p>
<pre><code>void loop() {
  int value= analogRead(PIN_LM35);
  float temperature= value/ 2.046;
  myFile = SD.open(&quot;temperature.txt&quot;);
  if (myFile) {
    Serial.println(temperature);
    }
    myFile.close();


   EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {   
      if (client.available()) {
        char c = client.read();
     
        //read char by char HTTP request
        if (readString.length() &lt; 100) {
          //store characters to string
          readString += c;
          //Serial.print(c);
         }

         //if HTTP request has ended
         if (c == '\n') {          
           Serial.println(readString); //print to serial monitor for debuging
     
           client.println(F(&quot;HTTP/1.1 200 OK&quot;)); //send new page
           client.println(F(&quot;Content-Type: text/html&quot;));
           client.println();  
           refreshcounter=refreshcounter+1;   
           client.println(F(&quot;&lt;HTML&gt;&quot;));
           client.println(F(&quot;&lt;HEAD&gt;&quot;));
           client.print(F(&quot;&lt;meta http-equiv=\&quot;refresh\&quot; content=\&quot;2\&quot;&gt;&quot;));
           client.println(F(&quot;&lt;meta name='apple-mobile-web-app-capable' content='yes' /&gt;&quot;));
           client.println(F(&quot;&lt;meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' /&gt;&quot;));
           client.println(F(&quot;&lt;TITLE&gt;TEMPERATURE SENSOR LAB01&lt;/TITLE&gt;&quot;));
           client.println(F(&quot;&lt;/HEAD&gt;&quot;));
           client.println(F(&quot;&lt;BODY&gt;&quot;));
           client.println(F(&quot;&lt;H1&gt;TEMPERATURE SENSOR LAB01&lt;/H1&gt;&quot;));
           client.println(F(&quot;&lt;hr /&gt;&quot;));
           client.println(F(&quot;&lt;br /&gt;&quot;));  
           client.println(F(&quot;&lt;H2&gt;Arduino with Ethernet Shield&lt;/H2&gt;&quot;));
           client.println(F(&quot;&lt;br /&gt;&quot;)); 
           if(temperatura&lt;24){
              client.println(&quot;&lt;p style=\&quot;font-size:50px; color:#8eff59; font-weight:bold; font-style:italic;\&quot;&gt;&quot;);
              client.println(temperature);
              client.println(&quot;&lt;/p&gt;&quot;);
           }
           else if(temperature&gt;=24 &amp;&amp; temperature&lt;=26){
             client.println(&quot;&lt;p style=\&quot;font-size:50px; color:#ffbc03; font-weight:bold; font-style:italic;\&quot;&gt;&quot;);
             client.println(temperature);
             client.println(&quot;&lt;/p&gt;&quot;);
           }
           else{
             client.println(&quot;&lt;p style=\&quot;font-size:50px; color:#ff0303; font-weight:bold; font-style:italic;\&quot;&gt;&quot;);
             client.println(temperature);
             client.println(F(&quot;&lt;H2&gt;It is recommended to activate the air conditioner.&lt;/H2&gt;&quot;));
             client.println(&quot;&lt;/p&gt;&quot;);
           }
           client.println(F(&quot;&lt;p style=\&quot;font-size:30px; color:#000000; font-weight:bold; ;\&quot;&gt;Date/Time: &lt;span id=\&quot;datetime\&quot;&gt;&lt;/span&gt;&lt;/p&gt;&quot;));
           client.println(F(&quot;&lt;script&gt;&quot;));          
           client.println(F(&quot;var dt = new Date();&quot;));
           client.println(F(&quot;document.getElementById(\&quot;datetime\&quot;).innerHTML = ((\&quot;0\&quot;+dt.getDate()).slice(-2)) +\&quot;.\&quot;+ ((\&quot;0\&quot;+(dt.getMonth()+1)).slice(-2)) +\&quot;.\&quot;+ (dt.getFullYear()) +\&quot; \&quot;+ ((\&quot;0\&quot;+dt.getHours()).slice(-2)) +\&quot;:\&quot;+ ((\&quot;0\&quot;+dt.getMinutes()).slice(-2));&quot;));         
           client.println(F(&quot;&lt;/script&gt;&quot;));

           client.println(&quot;&lt;svg width=\&quot;1000\&quot; height=\&quot;250\&quot;&gt;&quot;); 
           client.println(&quot;&lt;rect width=\&quot;150\&quot; height=\&quot;5\&quot; fill=\&quot;gray\&quot;&gt;&quot;); 
           client.println(&quot;&lt;animate attributeName=\&quot;x\&quot; from = \&quot;0\&quot; to =\&quot;10000\&quot; dur=\&quot;10s\&quot; fill=\&quot;freeze\&quot; /&gt;&quot;);
           client.println(&quot;&lt;/rect&quot;); 
           client.println(&quot;&lt;/svg&gt;&quot;);  
           
           client.println(&quot;&lt;br /&gt;&quot;);     
           client.println(&quot;&lt;/BODY&gt;&quot;);
           client.println(&quot;&lt;/HTML&gt;&quot;);
     
           delay(1);
           //stopping client
           client.stop();
            //clearing string for next read
            readString=&quot;&quot;;  
           
         }
       }
    }
}
}
</code></pre>
<p>I thought to save memory to put all the code of the web page in an external sd.
However, I don’t really know how to use it from SD card.</p>
<p>The problem that stops me is the fact that the site does not have to be static but constantly updated with new temperature data.</p>
<p>How can I do that?</p>
 7508: <p>You wrote:</p>
<blockquote>
<p>the site does not have to be static but constantly updated with new
temperature data.</p>
</blockquote>
<p>A good option is to use Ajax.
The basic idea is to split the site in two parts:</p>
<ul>
<li>a static part, potentially large, which contains all the user
interface, the styling, the bells and whistles...</li>
<li>a tiny, dynamic part that contains the data that is constantly updated
<em>and nothing more</em>.</li>
</ul>
<p>The static part would be served from the SD card when the client sends a
<code>GET /</code> request. The dynamic part would be served from another endpoint,
for example as a reply to <code>GET /temperature</code>. Serving the dynamic part
should be very simple, something like:</p>
<pre class="lang-cpp prettyprint-override"><code>client.println(temperature);
</code></pre>
<p>Yes, just send the number as ASCII, no HTML formatting. If you ever need
to send more than one number (e.g. multiple temperatures, or temperature
and humidity), format them in <a href="https://www.json.org/" rel="nofollow noreferrer">JSON</a>. No need to use a library for
that, plain <code>print()</code> should be cheaper and good enough:</p>
<pre class="lang-cpp prettyprint-override"><code>client.print(F(&quot;{\&quot;temperature\&quot;:&quot;));
client.print(temperature);
client.print(F(&quot;,\&quot;humidity\&quot;:&quot;));
client.print(humidity);
client.print('}');
</code></pre>
<p>On the client side, <code>JSON.parse()</code> gets the data back as an easy-to-use
data structure.</p>
<p>Here is a minimal example of what the static part could look like.
Notice the JavaScript code sent to the client. This code is responsible
for querying the temperature every 1000 milliseconds, and updating the
Web page with the new data;</p>
<pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;Ajax test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;Ajax test&lt;/h1&gt;

&lt;p&gt;Temperature: &lt;span id=&quot;temperature&quot;&gt;---&lt;/span&gt; °C&lt;/p&gt;

&lt;script&gt;
var data_field = document.getElementById(&quot;temperature&quot;);
setInterval(function() {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState != 4) return;
        data_field.innerText = JSON.parse(request.responseText);
    };
    request.open(&quot;GET&quot;, &quot;/temperature&quot;);
    request.send();
}, 1000);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>A few notes:</p>
<ul>
<li><p>This example is purposefully minimal. You may want to add some error
checking, some decorations, some CSS and the such. Handling a
temperature-dependent color also belongs to the client code.</p>
</li>
<li><p>The example uses good old <code>XMLHttpRequest</code>. You may want to try the
more modern <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch" rel="nofollow noreferrer">fetch API</a> instead:</p>
<pre class="lang-js prettyprint-override"><code>setInterval(function() {
    fetch(&quot;/temperature&quot;)
        .then(response =&gt; response.json())
        .then(data =&gt; { data_field.innerText = data; });
}, 1000);
</code></pre>
</li>
<li><p>If you are sending updates frequently enough to significantly load
your Arduino, you may want to look at <a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events" rel="nofollow noreferrer">Server-sent events</a>. This
is a technique that allows you to significantly reduce the overhead of
sending data updates. It is not as popular as Web-sockets, but has the
advantage of being simpler to implement server-side.</p>
</li>
<li><p>If you can put a reverse-proxy between your Arduino and the Internet,
the proxy can handle the static content. Your Arduino then only
handles the dynamic data and wouldn't need an SD card. If you
reverse-proxy Server-sent events, make sure the proxy doesn't buffer
the server response. See for example these <a href="https://stackoverflow.com/questions/13672743/eventsource-server-sent-events-through-nginx">tips on configuring
Nginx</a> for this purpose.</p>
</li>
<li><p>The static data could also be served from a completely different Web
site. For this to work, you have to fulfill two conditions:</p>
<ol>
<li><p>The Arduino server has to add the header
<code>Access-Control-Allow-Origin: *</code> to its responses.</p>
</li>
<li><p>On the client code, you have to provide the full URL of the Arduino
as an argument of <code>request.open()</code>, <code>fetch()</code> or
<code>new EventSource()</code>.</p>
</li>
</ol>
</li>
<li><p>The previous trick also allows you to open the Web page directly from
your local file system, which can be very handy for developing.</p>
</li>
<li><p>Once you get the basic scheme working, Web technologies allow you to
get as fancy as you want. You could create an analogue gauge (with SVG
transform rotate). You could even <a href="https://plotly.com/javascript/" rel="nofollow noreferrer">add a graph</a>, updated in
real time, that shows the time evolution of the temperature, and is
entirely handled by the client.</p>
</li>
</ul>
