ESP32 MicroWebSrv HTML, CSS, JS

Step 1: Why? The Purpose.

Link .html, .css, & .js files for a beautiful and functional web page.

Step 2: How? The Process.

  1. Create/Edit testHTML.html file.

  2. Create/Edit testCSS.css file.

  3. Create/Edit testJS.js file.

  4. Create/Edit testPY.py file.

  5. Start the Web Server and test the Web Page.

Step 3: What? The Result.

Verify "What we Get" by "Why we are Doing".

  1. Create/Edit testHTML.html file.

HTML: HyperText Markup Language

for documents designed to be displayed in a Web Browser.

Inside www run the command: edit testHTML.html, write the html code, save and exit.

Case 1: file already present. System will simply open the existing file with notepad.

Case 2: file is not present. System will create the file and open the blank file for edit.

HTML Structure: Tags Start and then Close.

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

</html>

Different Tag Use:

<meta> defines the content type and encoding.

<script> load the java script file.

<link> load the cascade style sheet file.

<h1> heading 1.

<div> create a division in web page.

<h2> heading 2.

<button> on click fires the changeText() js method.

2. Create/Edit testCSS.css file.

CSS: Cascading Style Sheet

for describing the presentation of a document written in a markup language such as HTML.

edit css file, write the css code, save and exit.

Case 1: file already present. System will simply open the existing file with notepad.

Case 2: file is not present. System will create the file and open the blank file for edit.

3. Create/Edit testJS.js file.

JS: Java Script

for adding functionality to a web page.

edit js file, write the js code, save and exit.

Case 1: file already present. System will simply open the existing file with notepad.

Case 2: file is not present. System will create the file and open the blank file for edit.

4. Create/Edit testPY.py file.

PY: PYthon

for starting and running the web server.

edit py file, write the py code, save and exit.

File Structure Note:

/pyboard

testPY.py

/pyboard/www

testHTML.html

testCSS.css

testJS.js

5. Start the Web Server and Test the web pages.

Start web server by importing testPY.py file in repl.

HTML Output: Show the content in a Web Page.

CSS Output: Change the Background color and Heading 1 text color.

JS Output: On clicking the button, change the text in black color without reloading the page.

Knowledge Base:

  1. for help regarding html, js, css; checkout w3schools.

  2. for beautiful web page styles; checkout Bootstrap.

  3. for more Java Script functionalities; checkout jQuery.