Lab Session #2 - Web - Master 1 IFI

Master 1 IFI	Lab Session #2	(adapted from a subject by P. Renevier)
Web	A refresher on HTML, CSS, and DOM	Year 2018-2019

All your pages must be valid. You can start from a minimal page complying with the HTML5 DTD:

<!doctype html>
<html lang="fr">
<head>
       <title>pages pour le cours Web...</title>
       <!-- ligne pour l'encodage de la page -->
       <meta charset="utf-8">
</head>
<body>
</body>
</html>

Make sure that the encoding of your file be consistent with the "encoding" and "charset" attributes (this depends on the editor you are using).

1. Construct a Table in HTML

The goal of this exercice is to master the tables in HTML. We will focus on their formatting in the next exercice.

Yous task is to reproduce the following model table.

We will ignore, for the moment, the horizontal brace, the arrow, and the dashed grid. The results will look something like the table below.

As a reminder, the structure of a table in HTML is as follows:

<table>
  <caption> </caption>
    <thead>
       <tr>
         <th></th>
         <!-- etc. -->
       </tr>
       <!-- etc. -->
    </thead>
    <tbody>
       <tr>
         <td></td>
         <!-- etc. -->
       </tr>
       <!-- etc. -->
    </tbody>
</table>

Add the following hyperlinks:

http://www.polytechnice.fr/page11.html for Ingénieur Informatique
http://edstic.i3s.unice.fr/ for Doctorat / ED-STIC
http://miageprojet2.unice.fr/Licence_MIAGE_3 for parcours MIAGE
Change this latter link so that it points directly to Présentation (there is an id having the value "Pr.c3.a9sentations_g.c3.a9n.c3.a9rales" which can be used to aim correctly)

2. Formatting a Table with a CSS Style Sheet

In four "simple" steps, you should obtain this result:

In case you had troubles constructing the table in HTML, you can use this partial solution. Notice that this entire exercice can (and should) be done without adding any class or id attribute to the HTML code.

Step 1: Overall Look, Empty Cells, and Head Cells

To format the table, you have to:

Space the bprders of the cells. Use the border-collapse property.
Place the caption of the table at the bottom, in boldface. Use the caption-side and font-weight properties.
All the cells are framed by a solid thin blue line. Their vertical alignment is in the middle (the text is vertically centered), their height is set to 2.4em (this corresponds to two lines)
The head cells (th) of the table body (tbody) of the first column should be top-aligned.
The data cells (td) have a horizontaly centered text content and are at least 10em wide.
The empty cells do not have borders.
- Exception: the empty data cells have black dashed borders to their left, bottom, and right.
- Exception: the empty data cells of the first row of the table body have also an upper border of the same type, but no left border.
- Exception: the first empty data cell of the first row of the table body has also a left border.
All the non-empty head cells are formatted as follows:
- Borders rounded at 0.5em;
- A background color defined by red = 79, green = 129, blue = 189;
- A white foreground color;
- An outset border 2 pixels thick, of a color defined by red = 59, green = 97, blue = 142;
- A black shadow, offset by one pixel to the right and one pixel downward.

Step 2: Data Cells

Here are the formatting instructions for data cells:

The cell containing Doctorat / ED-STIC should have:
- borders rounded at 0.5em;
- outset borders, 2 pixels thick, and with a color defined by red = 94, green = 73, blue = 121;
- background color defined by red = 128, green = 100, blue = 162;
- black shadow, offset by one pixel to the right et one pixel downward
- a white foreground color. Notice that this is the only non-empty cell of the second row of the table body.
The cells corresponding to the BAC+5 curricula should have:
- borders rounded at 0.5em;
- outset borders, 2 pixels thick, and with a color defined by red = 147, green = 178, blue = 84;
- background color defined by red = 155, green = 187, blue = 89;
- black shadow, offset by one pixel to the right et one pixel downward
- a white foreground color. Notice that these are the non-empty cells of the fifth row of the table body.
The cells corresponding to BAC+3 (or less) curricula should have:
- borders rounded at 0.5em;
- outset borders, 2 pixels thick, and with a color defined by red = 59, green = 97, blue = 142;
- background color defined by red = 59, green = 129, blue = 189;
- black shadow, offset by one pixel to the right et one pixel downward
- a white foreground color. Notice that these are the non-empty cells from the seventh row of the table body on.

Can you factor a part of the declarations for the data cells of the table body, to comply with the Do Not Repeat Yourself principle?

Make the DU IG cell half (0.5) transparent. To this aim, you can slightly modify the HTML code by adding a class.

Step 3: Merging Cells

Warning: what is asked for is only partially feasible (due to an issue with rounded border connection).

Try to have the cells for parcours Miage and Licence informatique touch like in the following figure ("touching" cells and animated star).

To do this, use either a big shadow or HTML elements to be placed in absolute or relative position. However, the result is browser-dependent.

Step 4: Animation Around a Cell

Try to place a star (like this one) turning around the parcours Miage cell. Depending on the browser, your solutions might vary.

Use an absolute placement of the image in a cell with relative placement (does not work in Firefox under Windows). Define the five frames of the animation using @-prefix-keyframes as a positioning of the image at one of the four corners of the cell (the first position being repeated at the end to close the loop). You may as well have other properties vary (e.g., opacity or box-shadow). The actual positioning at the four corners will strongly depend on the browser (suggestio: define all dimensions using the same unit). Then, associate the animation and the image using @-prefix-animation. Have this animation loop forever (does not work in Firefox).

Year 2018-2019

Web - Master 1 IFI - Université côte d'Azur

Andrea G. B. Tettamanzi