HTML

This is a very very short introduction to HTML explaining what happens in the p5js' index.html file. If you want to try the code in this tutorial, simply create a file with an .html extension somewhere and open it in your browser.

Did you know, you can see the HTML code of every website? Simply right-click on a site open in your browser and select "view page source" (slightly different depending on browser).

HTML?

HTML stands for Hyper Text Markup Language. Sometimes HTML files also only have an .htm file extension. HTML is not a programming language, but a markup language. It is used to describe static documents.

Tags

The syntaxt of HTML is not very complex. An HTML document consists of so called tags.

<h1>Hello World</h1>

In many tutorials you will find the words "Hello World", this has become kind of a "lorem ipsum" in the coding world.

A tag usually consists of two parts, the opening <h1> and the closing </h1> element. The closing is indicated by the forward slash. Each tag has a certain meaning. h1 for example is a headline tag, used to highlight the main headline of the page. A good website is build in a semantic manner. You use specific tags for specific types of content. This makes for example sure search engines understand your website.

There are lots of different tags. Good websites to search for tags and learn more about HTML are:

Here are the most important tags:

html the all surrounding element
head this includes information for the browser that is not shown on the website
title used in head to tell the browser what to show in the title of the browser window
body here goes everything you want people to see
h1,h2,h3,h4 headlines
p a paragraph of text
strong make something bold
i make something italic
img an image
div generic container element
a an anchor element to create a link to another page

Tags without closing element

Tags usually consist of two elements, so we can place content inside the tag. But for some elements that makes no sense. Then developers will sometimes not add a closing element, but instead add a slash to the end of the opening tag:

<img src="test.png" width="100" height="100" />

"src" describes the path to the image you want to show, with "width" / "height" you can define how big the image should be.

Nested Tags

To create more complex structures you can nest tags inside one another.

<!DOCTYPE html>
<html>
  <head>
    <title>My first title</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Above is the most basic setup of an HTML page. You might notice, that the first tag looks a bit weird and has no closing tag. This is a special tag, which tells the browser that this file is an HTML file.

Attributes

Every tag-type can receive certain attributes. For example we can let the browser know in which (natural) language the document is, by adding a lang attribute to the html tag.

<html lang="en">...</html>

Paths

Sometimes you will run into the problem, that you want to include an image, but the browser tells you, that it cannot find the image. In coding in general there are absolute and relative paths.

https://www.fh-potsdam.de/some-folder/some-other-folder/hello.png

The above is an absolute path, it describes the full path to an image.

In constrast some-other-folder/hello.png is a relative path, it will only work if the HTML file is inside the https://www.fh-potsdam.de/some-folder folder.

Relative paths can also go up the folder structure. Imagine you have this HTML file:

https://www.fh-potsdam.de/some-folder/another-folder/index.html

and your want to reference:

https://www.fh-potsdam.de/some-folder/some-other-folder/hello.png

Than you can write ../some-other-folder/hello.png. The ../ goes up one folder. You can go up as many folders as you want.

By the way: you don't need to call all your HTML files index.html. If you call a file index.html and open the enclosing folder with a browser, the browser will automatically look for an index.html file to display. Besides this nice trick, the name does not matter.

Comments

If you want to add a comment anywhere in your HTML file use the following syntax:

<!-- Here goes the comment. -->

Styles

If you only create an HTML file and load it in your browser things might not look like you want them to look like. Every browser has a default setting for how things should look like (things look slightly different on every browser, thank you internet). If you want to style the elements (font-size, font-family, color, etc.) you can include a so called stylesheet or in full a Cascading Style Sheet (CSS). To do so, simply add this to your head:

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

Inside your style.css file you can define how your HTML should look like. Here are some links to get you started:

JavaScript

Similar to the stylesheet we can tell the browser to load a javascript file into our website. But instead of the head we load our JavaScript at the end of the body tag. This makes sure that all the content of our HTML site is loaded before we start executing our JavaScript. If you are loading multiple JavaScript files, make sure you load them in the right order, so that if one depends on another, that one is loaded first. In our p5js case, we first load the p5js library, then any plugins and then our own code.

<body>
  <script src="../libraries/p5.min.js"></script>
  <!-- libraries go here -->
  <script src="sketch.js"></script>
</body>

Next steps

This was a really short introduction to HTML, there is obviously a lot more to learn, but its some basic principles so you know what happens inside that p5js index.html file.

Extras

Math