.. _step_01: Step 1: Basic document structure ================================ .. comments TODO: Explain basic folder structure. TODO: Maybe explain more about CSS? TODO: HTML Colors In this step, we will create the basic HTML document which will hold our map. .. contents:: Contents :depth: 2 :local: Basic structure of the HTML document ------------------------------------ Every HTML document consists HTML tags, the most basic ones is ````. Within the HTML document, the sections ```` and ```` are found. Every tag has a closing matching closing tag (````). .. seealso:: For a basic introduction to HTML, refer to the `W3Schools HTML Introduction`_. The following is a very basic structure of a HTML document. Create a directory where you want to work in and create a new document called ``index.html`` and add the following content. Open the file in a webbrowser and you should see your HTML document. The title of the document was set and "Content" is visible. .. code-block:: html :caption: index.html - very basic HTML structure :linenos: Land use statistics map Content Container for the map --------------------- The map will be placed in a container so we need to create this container first. The ``
`` tag defindes a division or a section in an HTML document, so we create one with a unique ID to later have easy access to it. While we are at it, we also create a heading using the ``

`` tag. .. code-block:: html :caption: index.html - with a map container :linenos: :lineno-start: 6 :emphasize-lines: 3-4

Land use statistics map

The ``
`` element for the map is empty, as the map will be generated dynamically using JavaScript. If we refresh the browser, we see the heading but no map division, as there is no content in it. Some very basic styling ----------------------- Even though there is no content in the ``
`` element for the map, we can style it to appear in the browser. For the styling we use CSS. Within the ```` section, we could define a ``