Arduino ethernet drawings

Good evening everyone, and I’ve just been using the ethernet shild and I must say I really like it. I just have a small problem, how do you make the colored squares around the writing?
What command should I write to make a red rectangle around the writing “Turn On Light”?

Maybe it’s a trivial question, but I don’t really know how to do it…
I thank everyone who wants to help me and have a good evening :slight_smile:

/*
  Web Server
A simple web server
Circuit:
* Ethernet shield attached to pins 10, 11, 12, 13
*/
//-------------------------------------------------------------------------------------------------------
#include <SPI.h>
#include <Ethernet.h>

// Enter a MAC address and IP address for your controller below.
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };

// The IP address will be dependent on your local network:
// assign an IP address for the controller:

IPAddress ip(192,168,1,155);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255, 255, 255, 0);

// Initialize the Ethernet server library with the port you want to use.
EthernetServer server(80);
String readString;
//-------------------------------------------------------------------------------------------------------
//-------------------------------------------------
// Any extra codes for Declaration :

// Declare Pin 8 as an LED because thats what we will be connecting the LED to.You could use any other pin and would then have to change the pin number.
int led = 8;

//-------------------------------------------------
//-------------------------------------------------------------------------------------------------------
void setup()
{
//-------------------------------------------------

// Extra Set up code:
pinMode(led, OUTPUT); //pin selected to control

//-------------------------------------------------
//-------------------------------------------------------------------------------------------------------
//enable serial data print
  Serial.begin(9600);

  //start Ethernet
  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();
  Serial.print("Server is at ");
  Serial.println(Ethernet.localIP());
  Serial.println("LED Controller Test 1.0");
}
//-------------------------------------------------------------------------------------------------------
//-------------------------------------------------------------------------------------------------------

void loop()
{
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client)

  {
    Serial.println("new 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);


          Serial.write(c);
          // if you've gotten to the end of the line (received a newline
          // character) and the line is blank, the http request has ended,
          // so you can send a reply
          //if HTTP request has ended
          if (c == '\n') {
            Serial.println(readString); //print to serial monitor for debuging
//--------------------------------------------------------------------------------------------------------
// Needed to Display Site:
client.println("HTTP/1.1 200 OK"); //send new page
            client.println("Content-Type: text/html");
            client.println();
            client.println("<HTML>");
            client.println("<HEAD>");

//--------------------------------------------------------------------------------------------------------
//-------------------------------------------------

// what is being Displayed :     
            client.println("<TITLE>Home Automation</TITLE>");
            client.println("<center>");
            client.println("</HEAD>");
            client.println("<BODY>");
            client.println("<H1>Cascina Mozzini</H1>");
            client.println("<img src=\"https://static.vecteezy.com/system/resources/previews/000/140/802/non_2x/mountain-chalet-house-vector.jpg\") style=\"width: 30%; margin-left: auto; margin-right: auto; display: block;\" />");

            client.println("<hr />");
            client.println("<center>");
            
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");

            client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");

            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");

            client.println(".button2 {background-color: #555555;}</style></head>");
            
            client.println("<a href=\"/?lighton\"\">Turn On Light</a>");
            client.println("
");
            client.println("
");
            client.println("<a href=\"/?lightoff\"\">Turn Off Light</a>
");     

            client.println("</BODY>");
            client.println("</HTML>");

            delay(1);
            //stopping client
            client.stop();

            //-------------------------------------------------
            // Code which needs to be Implemented:
            if(readString.indexOf("?lighton") >0)//checks for on
            {
              digitalWrite(8, HIGH);    // set pin 8 high
              Serial.println("Led On");
            }
            else{
              if(readString.indexOf("?lightoff") >0)//checks for off
              {
                digitalWrite(8, LOW);    // set pin 8 low
                Serial.println("Led Off");
              }
            }
            //clearing string for next read
            readString="";

            // give the web browser time to receive the data
            delay(1);
            // close the connection:
            client.stop();
            Serial.println("client disonnected");

          }
        }
      }
    }
  }
}

it has nothing to do with the Ethernet shield or Arduino.

https://www.w3schools.com/

Thank you so much for your answer, how can I use that information to draw?
What format should I write it in? Can you give me an example? Should I add libraries? :slight_smile:

currently you print your “action item” as hyperlink:

client.println("<a href="/?lighton"">Turn On Light");

you could style hyperlinks within your stylesheet like following:

client.println("a{background-color:#C0C0C0;color:dimgray;text-decoration:none;border-style:solid;border-style:outset;border-color:dimgray}");

on the other hand, you have already classes for .button why don’t you use it???

client.println("<a href=\"/?lighton\"\" class='button'>Turn On Light</a>");
  1. in general, use the HTML tag button or input type submit when you need buttons, put it in a form and transmit the data.

  2. On Juraj’s link follow: learn CSS and learn HTML

Thank you very much. That’s what I did and it works:

client.println("<a href=\"/?Lightoff\"\"><button style='font-size:170%;background-color:darkgray; color:green; border-radius:50px; position:absolute; top:430px; right:450px;'>Turn off Light</button></a>");