Arduino HTML

Using Arduino Networking, Protocols, and Devices
#1

Good morning everyone, given the difficult period I dedicated myself to a new project with Arduino Uno and the Ethernet module. I created a very simple HTML page taking inspiration from different projects, now I would like to customize it and make it more “beautiful”. Searching on the internet I couldn’t find a manual on the syntax to use to translate HTML commands into C language.

Could someone show me a link where I can find this information?

I think there is something out there because otherwise I don’t know where they took the commands to make the web pages I saw. Hoping for help from the people of Arduino I wish everyone a good day :slight_smile: :slight_smile:

#2

Which commands do you want to translate? When you serve web pages from your Arduino, you use normal HTML for the web page. It's only the code that serves the web page that is in C (actually mostly in C++).

#3

Thank you so much for your answer, I’ll give you an example so maybe I can explain it better:
This is Arduino’s code for the web page:

client.println("HTTP/1.1 200 OK"); //send new page
           client.println("Content-Type: text/html");
           client.println();     
           client.println("<HTML>");
           client.println("<HEAD>");
            client.println("<TITLE>Cascina Mozzini</TITLE>");
            client.println("<center>");
            client.println("</HEAD>");
            client.println("<H1>Cascina Mozzini</H1>");
            client.println("<hr />");
            client.println("<BODY>");
            client.println("<img src=\"https://static.vecteezy.com/system/resources/previews/000/140/802/non_2x/mountain-chalet-house-vector.jpg\") style=\"width: 40%;height: 30%; position:fixed; top:15%; left:10%;\" />");

And this is for the HTML page with a simple notepad:

<!DOCTYPE html>
<html>
<head>
<style>
html { 
  background: url(file:///C:/Users/lucam/Pictures/foto-baita-luca.jpg) no-repeat center fixed;
  background-size: cover;
}
div.ON {
  position: fixed;
  top: 70%;
  left: 20%;
}
div.OFF {
  position: fixed;
  top: 70%;
  right:20%;
}

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: Black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 200%;
}
.button1 {padding: 20% 24%;}
.button2 {padding: 15% 5%;}
</style>
</head>
<body>

<center>
<h1 style="font-size:300%;background-color:DodgerBlue;">Cascina Mozzini</h1>
</center>
<div class="ON">
<button class="button button1">ON</button>
</div>

<div class="OFF">
<button class="button button2">OFF</button>
</div>


</body>
</html>

(Codes don’t do the same thing).

You can’t directly copy and paste from your notebook to a
Arduino I would like to know where I can find a guide where he explains how to create the web page with Arduino with explanations. Is there a manual or PDF that explains it?

#4

I don't understand what is the actual problem. You have an example, why don't just try like that?
Line by line, client.println and so on...

Cheers,
Kari

#5

mozzini97:
You can't directly copy and paste from your notebook to a
Arduino I would like to know where I can find a guide where he explains how to create the web page with Arduino with explanations. Is there a manual or PDF that explains it?

Why can't you copy? Have you tried google yet?

Are you saying that you want to have a running arduino "somewhere" as a webserver, and you want to send new pages over the net?

Cheers,
Kari

#6

I managed to make the page but I don't understand how to do the.println() client in this part:

div.ON {
  position: fixed;
  top: 70%;
  left: 20%;
}

or

html {
  background: url(file:///C:/Users/lucam/Pictures/foto-baita-luca.jpg) no-repeat center fixed;
  background-size: cover;
}

I tried to put it just in brackets but it doesn't work, can you give me an example with these two parts so I can try for the others?

Thank you very much and cordial greetings Luca

#7

Hi there,
I think, i have the same problem, i want to make a html site whit my Arduino.
For some things (like color) i need to print like this:

hello

And the problem is to print " out.

#8

"And the problem is to print " out."

You can escape the " like " or in the html, just use the single quote ' instead of the double quote ".

#9

Oh for my i think my problem is solved.
Thanks!

#10