Class Presentations
index.html
tags
| html | body |
|---|---|
| head | p (paragraph) |
| h1, h2, h3 | img |
| input | button |
| a (anchor tag) | table |
There are two popular ways of working with HTML within P5:
Creating HTML within index.html
The benefit of this method is that a web designer that is used to working with HTML & CSS can design the web page without using any code. For instance, an html page can be created in FIGMA and exported and imported into a P5 sketch.
The negative of this method is that extra steps will need to be taken within your P5 sketch to find the HTML elements that the sketch needs to access. For instance if some of the elements are output tags that need to display a value from your P5 sketch, code will need to be written in P5 to find those output tags and update them with the value. Likewise if there are input tags, code will need to be written to call a function whenever the input within the html is changed by user interaction with the page.
Creating HTML within your P5 sketch with javascript and P5 code