Have you ever wanted to create a web page for an esp32, and I don’t mean just have you esp32 host a web page, I mean have you ever wanted to write your own web page from scratch.
The fact that your here, probably means you do, and just like you need a saw to cut wood, there are tools you need to have to write a web page. Today we are going to look at those tools.
What are Web Pages Made of
I am glad you asked. It turns out that web pages are made of three languages: HTML, JavaScript, and CSS.
HTML
HTML is like the king of the three. While it is totally possible to create a web page without JavaScript or CSS, HTML is just required. The good news is that HTML is pretty simple.
JavaScript
JavaScript is what you would normally have to worry about. It’s a full on coding language with lots and lost of powerful features, but you likely already have a huge head start. JavaScript is very similar to C++ (the Arduino IDE language) which means that if you can program an Arduino board, learning JavaScript should also be pretty simple.
CSS
CSS controls how your web page looks. It can put borders around images, change the background color of your website, set the font used, etc. Learning the basics is straight forward, though I will be honest and say that mastering it is a different story.
The Required Tools
To write in the above coding languages you need two things: A browser and a text editor.
The factor that you can see this web page means you probably have a browser and most computers have at least one text editor by default, so you already have every thing you need.
Some text editors for example Microsoft Word add extra information to the text so your can’t use them to write HTML,JavaScript, or CSS.
Notepad or Gedit are two good options to start with. You can also find editors specially designed for HTML, JavaScript, and CSS. I use notepad++, but at the end of the day chose what ever is most convenient for you.
Hidden Extensions
If you look around on you computer for a minute do any of the file names you see end with .png, .jpeg, .txt, etc. If you can not find any files that end with .something you probably have hidden extensions turned on.
If extensions are hidden, it will be really hard to create your code files correctly so you will probably want to turn off hidden extensions. Just search the internet for “disabling hidden extensions” and you will find a few good pages on how its done.
A Quick Example
You have all the tools you need, so lets create a simple web page.
Create a file on your computer and name it “mypage.html“.
Then open that file with your text editor and write the following “Hello World” and after that save the file and close the editor.
Then right click on that file, select the open with option and then select your browser(in my case chrome).
A new browser tab should open with the text “Hello World” on the page.
If you want a little more of a webpage, you might like this page: Creating a ESP32 Web Server with Text Input
Some Extras
While these are the basic tools need to create a web page, there are a few more you might be interested in.
WYSIWYG
While I highly suggest learning HTML, it can be a pain to write a ton of HTML code, even if you now how. If you are creating a bigger page, it’s often a good idea to find a WYSIWYG program. These types of programs allow you to create a web page by a drag and drop interface or something similar, and then it generates the HTML code for you.
You will still have to create the JavaScript code and you will probably need to go in and edit the HTML a bit, but they can speed up the process of creating a web page a lot.
HTML Compressors
HTML compressors remove any unneeded space in your code so it is as small as possible. Which really helps when you have to work with microcontrollers that don’t have a lot of memory available.
You should now have a pretty good setup to write your own web page code.