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.
Create/Edit testHTML.html file.
Create/Edit testCSS.css file.
Create/Edit testJS.js file.
Create/Edit testPY.py file.
Start the Web Server and test the Web Page.
Step 3: What? The Result.
Verify "What we Get" by "Why we are Doing".
- 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:
for help regarding html, js, css; checkout w3schools.
for beautiful web page styles; checkout Bootstrap.
for more Java Script functionalities; checkout jQuery.