4/13

2.2. General information in web languages

Client based web languages: HTML, CSS, JS

Web programming on a client (i.e. program executed locally on a web browser) generally involves the use of several languages. In our case, we will encounter 3 different languages, although almost everything will be done in JavaScript.

HTML

HTML - Hyper Text Markup Language - is the main language to describe a webpage. HTML is directly interpreted by the web browser and rendered on the screen.
HTML is not a real programming language (no loops, conditionals, etc), but rather a textual way to describe the organization and content of a document using tags.

HTML is intrinsically related to the world wide web as the principal way to describe webpages. HTML has evolved a lot since its creation in 1993. The current HTML version called HTML 5 is currently maintained by the organization WHATWG and W3C.

In our case, HTML will be used only to create an empty HTML webpage canvas and call the external JavaScript file.

CSS

CSS - Cascading Style Sheet - is used to setup the visual appearance of the HTML tags (colors, text fonts, etc). CSS has been introduced to separate the visual appearance attribute from the HTML description focusing on the content.
Similarily to HTML, CSS is not designed to be a programing language.

In our case, CSS will only be used in a minimal way as the visual result will be fully rendered in JavaScript.

JavaScript

JavaScript is a complete programming language that can be executed natively on web browser (by their JavaScript engine). JavaScript code consists of scripts able to interact with the HTML document model (DOM) - typically in adding/removing content of the HTML. JavaScript allows the use of variables, data structures, loops, conditionals, functions, etc., and can run dynamically in response to user action on the screen.

In our case, most of our code will be defined in the JavaScript file that will define the 3D scene, and all computation associated to it.

Editing JavaScript code

JavaScript code can be edited by any text editor. In addition to your basic text editor provided by your OS, you may want to try

Web Browser

Your code should work on any modern browser. Note that your browser should ideally be compatible with the recent version of JavaScript as well as being able to handle WebGL (try the examples provided on the webpage of [Three.js]).

  • Text-based web browser such as lynx, will obviously not be able to execute and render Three.js based code.

  • Note that your scene will be generated in JavaScript, therefore, JavaScript should be activated on your browser (cannot use js blockers such as no-scripts, etc).

You may use, and check your webpage on the following browsers