Anexo 5. El archivo HTML base
Nuestros proyectos de P5.js se van a ver dentro de una página web. Y para ello, debemos prepararla. Vamos a crear una página web que cargue la librería de P5.js y nuestro programa.
En la carpeta Programación crearemos un nuevo archivo, poniéndonos, en el editor de código, encima de la carpeta y haciendo clic con el botón derecho del ratón. Nos aparecerá un menú en el que se nos permite crear un nuevo fichero. Cuando nos lo pidan, le daremos el nombre de index.html.
Fuente: elaboración propia.
En ese nuevo archivo copiamos el siguiente código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
<style> body {padding: 0; margin: 0;} </style>
<script src="js/p5.min.js"></script>
<script src="js/sketch.js"></script>
</head>
<body>
</body>
</html>
¡Una vez copiado el texto debemos guardarlo!
En este código HTML hay dos líneas que nos interesan especialmente. En la primera está la instrucción:
<script src="js/p5.min.js"></script>
que sirve para indicar que debe cargarse la biblioteca de p5.js que nos hemos descargado. La segunda es esta:
<script src="js/sketch.js"></script>
que lo que hace es cargar un archivo llamado sketch.js que estará guardado en la carpeta js, y que es donde se guardará nuestro programa.