Skip to content

General file structure

Jump to bottom
Giorgio Bonvicini edited this page Oct 4, 2021 · 1 revision

All pages of the website have the same basic undelrying structureor skeleton (with some minor differences that will be presented later). you will find this code in the /00_page_template.html, so you can copy and paste that file directly if you need to create a new page.
Note that for the personal page there is a different template in /team/00_personal_page_template.html which contains some additional code specific to the personal pages.

This code has various purposes:

  • Defining varioud "meta" properites (properties that interest the whole page, not just a particular section of the code) such as:
    • page title
    • website favicon
    • external resources like fonts, scripts and style sheets
  • Providing a structure inside which the main content can be placed.
  • Defining some elements that are common to all pages (e.g. the navigation bar, the footer...)

Title

The title of the page is displayed in the browser tab and must be specified in the <title>This is the title</title> tag inside the <head>...</head> tag.

Links to local resources.

Links to local resources (i.e. any file that is part of the IML website suche as other HTML pages, images, scripts, CSS files etc) must be referred to by their absolute path. The absolute path begins with / and assumes that the root folder is the base folder of the website content, specifying the full path from there to the resource.
Fo example some of the absolute path of the home page is /index.html and the absolute path of the default profile image is /img/team/default.png.

If, instead of the absolute path, the relative one is used (e.g. index.html, /img/team/default.png) there might not be any immediate problem, bu if the code is copied to a different directory or to a subdirectory the link will break (since the path was defined relative to the original position).

Favicon

The favicon is displayed in the browser tab, near the link in Google search results and in varoius other places, expecially on smartphones. The favicon should be the same for all pages so there should be no need to change it, however, if in the future it0s decided to change the design of the icon then this is a short guide on how to do that.

  1. Design the base icon. Your image should have an aspect ratio of exactly 1:1, not more than 500x500 in resolution and be quite simple (the favicon is displayed in an extremely small size, so complex designs are not good). Some pixels of margin around the border should be present.
  2. Upload it to this website
  3. Follow the instructions to define the favicon for all devices. When asked about the path provide /favicons (or any other path you prefer to place the files at).
  4. Generate the code and download the favicon package.
  5. Place the files extracted from the package in the /favicons folder.
  6. Place the code in the <head> tag, replacing the old favicon. Do this in every page.

Modifying an element of the basic structure

If you want to change any part of this template you will have to manually replicate the change on all the pages of the website.

Clone this wiki locally