ESP8266 Tutorial Part III – Customise Your Web Server with Arduino

Hello everyone! In previous tutorial, we have learnt how to use Arduino IDE to create and upload firmware to ESP8266 WiFi module and make it a hello world server. But what if we want it to be more than just a hello world server?

Note**: Please go through Tutorial Part I and II first to get an understanding of ESP8266 WiFi Module and how it works with Arduino IDE.

Hello everyone! In previous tutorial, we have learnt how to use Arduino IDE to create and upload firmware to ESP8266 WiFi module and make a hello world server. But what if we want it to be more than just a hello world server? 

May be you want something like this

HTML layout template

Or this?

ESP8266 GPIO Control

This tutorial will show you how to customize your web server using Arduino IDE. Basic understanding on how HTML works and how web server and client communicate with each other would help in this tutorial. Below are some useful links for these topics.

How HTML works:

How web server and client communicate:

In short, when a web client send a HTTP request to a web server, the web server will send the information back to the client based on the requests made from web client. It can be HTML web page, or the server can redirect the client to another website, etc.

Let’s try some modifications!

In this tutorial, we are going to use the same example sketch mDNS_Web_Server again but this time we will do some modification to see different outcome. First let’s take a look on the sketch.

How the server get the HTTP request from client?

This part of code demonstrates how the server retrieve first line of HTTP request content and filter it furthermore to get the path. This path will be the key on how the server handle the requests from the client. For example, if the user sends or in web browser, the first line of HTTP request sent will be GET / HTTP/1.1. If the user types something else like, the first line will be GET /aaa HTTP/1.1. In general, will give GET /(path) HTTP/1.1. In example sketch, string req will be filtered until it becomes /(path). Thus in this case, if users browse for the server homepage, the final result for req will be / only.

Handling HTTP requests

This is the part where the server handles the HTTP requests and respond to them accordingly. If the req = “/”, meaning if the user browse for server home page, the outgoing HTML code will be HTTP status code OK, followed by the type of content, then finally the content to be displayed on the web page which is “Hello from ESP8266 at”. Otherwise the server will send HTTP error status code. client.print(s) is the function where the server send the HTML code to the client.

HTML coding

OK now we know String s is the key to change the display of the webpage, therefore, if we want a different webpage displayed, we should play with this s. You can change the value of String s to different HTML codes and use client.print(s) function to display the webpages. There are many online HTML editors such as Online HTML Editor which provide platforms for you to customise your webpage using drag and drop interface while the HTML code is auto-generated for you!! Let’s try out this example.

Step 1:

Open Online HTML Editor, choose full screen and click on Source Code button.

Step 2:

Copy the whole content.

Step 3:

Create a new notepad file, paste the content and save it as example.htm on Desktop. Remember to choose Save type as: All Files.

Step 4:

You can check the content by right click the example.htm file on Desktop and open with one of your web browsers. The content should be shown as below.

Step 5:

HTML code is ready, but we still need to convert the code into string form to be put into Arduino sketch. You can download this software convertHtml.exe to do the trick. **Make sure you install latest Oracle JRE to run this application. Download page is here.

Step 6:

Open convertHtml.exe. Search for example.htm file on Desktop and click Generate. A header file with example.h will appear on Desktop. This file contains html code in string form.

Step 7:

Drag the example.h file into Arduino IDE. Now the HTML code is stored as String file1 (You can modify the name as you like later, but now we are using file1 as the name)

Step 8:

Modify part of the sketch as below. At the end of the sketch, client.print(s) is modified into a longer version just in case the size of HTML code from example.h file is too large. The maximum size of s in client.print function is 2048 bytes, therefore if the size of the HTML code is larger than that, it has to be separated into different parts before being sent.

Step 9:

Upload the sketch. Enter the IP address in one of your web browsers and see the content of the webpage shown. The output should be as the picture below.

Feel free to try out other HTML codes. Some html examples can ve found here.  You may also try some HTML templates from Online HTML editor.

You can also try this example sketch ioControl. Simply download this sketch, upload it and try it out!! This sketch includes different actions taken by the server according to different HTTP requests from the client.


That’s all for this tutorial. Hope you enjoy experimenting and learning. Next tutorial we are going to configure ESP8266 as standalone access point. Stay tuned and have fun! 😀

If you have any inquiry, please post in our technical forum as we seldom check the comments section in tutorial site.


11 thoughts on “ESP8266 Tutorial Part III – Customise Your Web Server with Arduino”

  1. Hi, thank you for the guide.
    What i have to do if i want recal e variabile from example.h declared in mDNS_Web_Server?
    Thank You

  2. Seems like cannot access the web server from outside network(different from ESP8266 connected to). correct?

  3. Hey.. its an awsome tutorial.. I would like to know is there any possibility to load images on web browser using similar method? I have wrote html code and it is working fine.. so is there any possibiity to also load images?

  4. Hi,
    I tried following your tutorial (very well written by the way) but I can’t get the htmlconvert app to work, any specific versions of Java required for this ?


  5. Hi firepower,

    Thanks for informing. We have added the links for Tutorial part 1 and 2 for this tutorial.

Leave a Comment

Your email address will not be published.

Share this Tutorial

Share on facebook
Share on whatsapp
Share on email
Share on print
Share on twitter
Share on pinterest
Share on facebook
Share on whatsapp
Share on email
Share on print
Share on twitter
Share on pinterest

Latest Tutorial

BLTouch Installation for Ender 3 with 32-bit V4.2.2 Board
Pick and Send Random Meal’s Option and Locations through Telegram Bot Using Grove WiFi 8266 on micro:bit
DIY Automated Vacuum Cleaner Using REKA:BIT With Micro:bit
Rainbow Spark in Mini House using Maker Uno.
TinyML on Arduino using Edge Impulse
Tutorials of Cytron Technologies Scroll to Top