This section explains the main technologies that make up the web: HTML, CSS, and JavaScript, and finally, it explains the relationship and roles of these technologies with p5.js.

Three Technologies that Make Up Web Pages

To create a web page, you mainly use three technologies: HTML, CSS, and JavaScript. Let's first explain the role of each.

HTML (Hyper Text Markup Language)

HTML is a markup language that defines the basic structure of a web page. It describes the content to be displayed on the page, such as headings, paragraphs, links, and images. HTML specifies "what to display" on the web page.

CSS (Cascading Style Sheets)

CSS is a style sheet language that defines the appearance of a web page. It applies styles such as colors, fonts, and layouts to the content described in HTML. Using CSS, you can freely change the design and layout of the page.

JavaScript

JavaScript is a programming language that adds dynamic behavior to web pages. It is used to implement interactive features such as click events, animations, and dynamic data updates.

In summary, the three technologies can be visualized as follows.

_Web page structure using HTML, CSS, and JavaScript_

What is p5.js?

So, what is p5.js? p5.js is a JavaScript library designed to make visual programming easy. A "library" is a collection of programs that make specific functions easy to use. Think of it as a toolbox that makes writing programs convenient.

The Role of p5.js

Using p5.js, you can draw shapes and create animations on a web page. This allows you to achieve various visual expressions easily by using the provided functions without writing complex code.

p5.js is widely used in art, design, and education, making programming learning fun. For example, to draw a circle in JavaScript, you usually need to write complex code, but with p5.js, you can draw it easily as follows.

function setup() {
    createCanvas(400, 400); // Create a canvas
    circle(200, 200, 50); // Draw a circle
}

In this chapter, we learned about the main technologies of the web: HTML, CSS, and JavaScript, and how p5.js complements them. HTML defines the structure of a web page, CSS styles its appearance, and JavaScript adds dynamic behavior. With p5.js, we can easily create graphics and animations.

In the next chapter, we will look at the file structure of a p5.js project.