Annex 5. El fitxer HTML base
Els nostres projectes de p5.js es podran veure dins d’una pàgina web. I per això, l’hem de preparar. Crearem una pàgina web que carregui la llibreria de p5.js i el nostre programa.
A la carpeta Programación crearem un fitxer nou, posant-nos, a l’editor de codi, damunt de la carpeta i fent clic amb el botó dret del ratolí. Ens apareixerà un menú en el qual se’ns permet crear un fitxer nou. Quan ens ho demani, li posarem el nom d’index.html.
Font: elaboració pròpia.
En aquest fitxer nou copiem el codi següent:
<!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 vegada copiat el text, l’hem de desar!
En aquest codi HTML hi ha dues línies que ens interessen especialment. A la primera hi ha la instrucció:
<script src="js/p5.min.js"></script>
que serveix per indicar que s’ha de carregar la biblioteca de p5.js que ens hem descarregat. La segona és aquesta:
<script src="js/sketch.js"></script>
que el que fa és carregar un fitxer anomenat sketch.js que estarà desat a la carpeta js, i que és on es desarà el nostre programa.