Hello, I was wondering if I could put html and css in a Ethernet web server page? Everything I have found online has an external html page in an SD card. I can not find an example of something like this to get me started. I’m asking the community to help me to find an example like this if there is one? I honestly through a while ago I saw one. I can not find it again , or maybe I’m phrasing it wrong in online search. Thank you for any help.
Joseph
if you install the ethernet library look at File>Examples>Ethernet>WebServer
also online at WebServer.ino
check my page:
it's build on the IDE Example but checks the incoming request and serves the right side.
So it should be easy to add a separate resource which serves another HTML page (or CSS, or JS...).
also read about how to optimize SRAM and PROGMEM
Thank you very mcuh @horace and @noiasca This will help me a lot. I don't know why I could not find this online. I'm not sure if I'm phrasing it wrong or what. I do have one last Question. Is it possible to add a some CSS and javascript to the page in this way to get things lined up on the page the way I like?
Joseph
sure. You can serve a CSS or a JavaScript also. Just set the right content type in the http header field.
Thank you very much. I'm trying on my process now. I'll update the post when I'm done. Again Thank you and to the rest of the community thank you.
Joseph
Hello, I have added html to my project in the webserver. Everything is great. I even did a background color change. However When I try to load some css say for the hr to break line there that works. But I can not add no width or height for the thickness to it. So I decided to leave that out. It would of been nice to add the hr break lin to it. Thank you again.
Joseph
it's not width or height, its done by border property.
but in 2023 .. I'm not sure if hr is of real usage anymore...
for some odd reason I can add css. When I try i get this error saying missing * or ) and I know its not missing.
Let me recreate the problem. and post it.
Edit:
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println("Refresh: 5");
client.println();
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head>");
client.println("<style>
/* Red border */
hr.new1 {
border-top: 1px solid red;
}
/* Dashed red border */
hr.new2 {
border-top: 1px dashed red;
}
/* Dotted red border */
hr.new3 {
border-top: 1px dotted red;
}
/* Thick red border */
hr.new4 {
border: 1px solid red;
}
/* Large rounded green border */
hr.new5 {
border: 10px solid green;
border-radius: 5px;
}
</style>");
client.println("<title>Test</title>");
client.print ("<body style=background-color:#FFFFFF>");
client.println("<font color='#0d98ba'><h1>Monitoring Interface</font></h1>");
client.println("<hr width:300; height:100;>");
client.print("<hr class="new5">");
client.println("Main Power In: ");
client.print(voltage_vin, 4);
client.print("<br>");
client.println("Main Current: ");
client.print(current_vin, 4);
client.print("<br>");
float power2 = voltage_vin * current_vin;
client.println("Main Wattage: ");
client.print(power2, 6);
client.println("</h2>");
client.print("<br>");
client.println("</html>");This is the error saying 'Missing terminating " character'.
</style>"); I put it the css style all in one line.
client.println("hr.new5 {border: 10px solid green;border-radius: 5px;}");
That seems to be okay. what is not okay is this one.
client.print("<hr class="new5">"); I now get an error from this one.
unable to find string literal operator 'operator""new5' with 'const char [12]', 'unsigned int' arguments
client.print("<hr class="new5">");
well, you cant print double quotes in double quotes.
either escape them with a \ or use single apostrophes
client.print("<hr class=\"new5\">");
client.print("<hr class='new5'>");
I will try that as soon as I wake it time for me to crash again thank you.
PS the html structure of your output is not correct.
For example you start the body before you have closed the head.
Further more you define "HTTP/1.1" but you don't provide a content-length - so it is HTTP/1.0 only
fix your HTML, copy paste the generated HTML with an HTML checker.
For example with Ready to check - Nu Html Checker you can just upload ("text input") your generated HTML and will get tons of advices how it improve the HTML.
hello, Yes I forgot to add the in it. I added it. But I was curious about something. In the CSS I can normally in html add css like this.
<style>
hr.new5
{border: 2px solid #00A693;
margin:3px;
width:365px;
border-radius: 0px;}
</style>And it's fine but if I add it to a client.print like this.
client.println("<style>
hr.new5
{border: 2px solid #00A693;
margin:3px;
width:365px;
border-radius: 0px;}
</style>");I get an error stating missing " character. However If I put everything into one line like this.
client.println("<style>hr.new5 {border: 2px solid #00A693;margin:3px;width:365px;border-radius: 0px;}</style>");It's fine with it. Why is that?
just close each line
client.println("<style>"
" hr.new5"
" {border: 2px solid #00A693;"
" margin:3px;"
" width:365px;"
" border-radius: 0px;}"
"</style>");
Oh now that is interesting. I will give it a try. Do I do the same thing with Javascript?
yes.
but the more code you add - read what I have written about SRAM, PROGMEM and Speed. Post #3.
I got it. I have been reading onthe site. A lot I don't understand and some I do. I will try to keep an eye on what I'm adding or taking out. But you are right the more you add the slower it will get.
use the StreamLib Library and put the static HTML/CSS/JS in program memory/F-Makro. But only in combination with the StreamLib Library!(!!!).
Otherwise you will run out of SRAM.