This is a template that shows how to use HTLM elements to format a web page.

Element ids and buttons

For interactivity, JavaScript code can be included using the script tag. For example, a paragraph's content can be changed as shown below.

Here is the original paragraph.

CSS - cascading styling sheets

The CSS formatting is a relatively new feature in the design of webpages. Language and frameworks evolve over time as efficient and effective features replace older ways of writing code. We can see parallels with one of the themes of our course, the computational thinking, by looking at the evolution of handling styling elements. The styling of html elements had to be done individually with lots of code having to be written for each element and missing an easy way to ensure consistency. A need for generalization was addressed in the philosophy of Cascading Styling Sheets. They incorporate other ideas from computer science like developing a general base case and moving from general to particular when needed (as in the design of classes as blueprints for objects).

Here is a reference link from W3C in dynamically changing styling of a page. The browser provides an interface to interact with style sheets that can be accessed document.styleSheets. If your style elements have id attributes, you can reference them quickly with document.getElementById(element_id). To remove a style sheet you can use the DOM function parent.removeChild(element).

The canvas element

The canvas element creates a fixed-size drawing surface that comes with a rendering context, a JavaScript object, which creates graphics that are added on the canvas. Most of the coding in this module will be about creating graphics using helper functions from the p5.js library. The code for the graphics will be saved in the file script.js.

Before we can start drawing, we need to talk about the canvas grid or coordinate space. The origin of this grid is positioned in the top left corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y).

A bit of HTML history

1989: Tim Berners-Lee invents the Web with HTML as its publishing language. HTML stands for Hyper Text Markup Language. It went through multiple versions. Currently the HTML 5 version, published in 2012, is in use. Originally, HTML was developed with the intent of defining the structure of documents to facilitate the sharing of scientific information between researchers. Now, HTML is being widely used for online shopping and advertisements, weather and financial forcasts, and searching for all types of information.

We will revisit the history of HTML in the Big Data module in a section about the creation of the web to share data from CERN.

You can read more in this article written in 1998. Based on a markup language, SGML (Standard Generalized Mark-up Language) that was internationally accepted method for formatting paragraphs, headings and list items, the new HTML language brought in hypertext links. The hyperlinks allowed the users to easily access documents available acrros the internet. The HREF attribute was Tim Berners-Lee's invention, as well as the `www.name.name' format for addressing machines on the Web that we have seen in the Impact module in section IMP 4.2: DNS & IP Addresses.

Finally, a reference page for JavaScript.