L3 MIAGE TP 1 (2 séances) I. Mirbel & M. Winter (d'après P. Renevier)
L3 Web Persistance Révisions HTML & CSS Année 2017-2018

Toutes vos pages devront être valides. Il faut respecter une DTD, par exemple :

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>pages pour le cours Web...</title>
    <!-- ligne pour l'encodage de la page -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
</body>
</html>

Assurerez-vous que l'encodage du fichier soit cohérent avec l'attribut "encoding" et "charset" (cela dépend de votre éditeur de texte).

Vous pouvez opter pour une DTD HTML5,

<!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>

1. Vos pages à l'Université

S'il n'existe pas encore, créez un dossier www à la racine de votre compte. Tout ce que vous déposerez dans ce dossier sera en ligne avec comme adresse de base : http://www-mips.unice.fr/~votrelogin .

Dans votre dossier ~/www, créez un dossier web. Vous y réaliserez tous vos tps. A l'intérieur de ce dossier web, créez un autre dossier tp1. Il est accessible par l'adresse : http://www-mips.unice.fr/~votrelogin/web/tp1 .

Si vous testez maintenant, vous devriez avec une erreur 403 (FORBIDDEN) car il n'y a pas encore de fichier index.html dans ce répertoire.

2. Refaire un tableau en HTML

L'objectif de l'exercice sera de maitriser les éléments de type <table> en html. La mise en forme viendra dans l'exercice suivant.

Voici le tableau qui va nous inspirer.

Nous laisserons de côté l'accolade, les flèches et le quadrillage. Le résultat ressemblera à l'image ci-dessous (avant de mettre les liens).

Pour voir les bords, utilisez l'attribut border="1" de l'élément <table>. Il faudrait enlever cet attribut si nous utilisions une feuille CSS pour la mise en forme. Calculez-bien les tailles des cellules et utiliser les attributs colspan et rowspan. Notez, par exemple, que bac+8 occupe 3 lignes de haut, bac+5 occupe 2 lignes de haut et bac+3 en occupe 3. Il y a une ligne vide entre les titres et la ligne BAC+8, pour laisser la place à l'accolade. Ceci n'est pas nécessaire car nous ne la placerons pas.

Pour rappel, la structure d'un tableau en html est la suivante :

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

Placez les liens suivants :

3. Refaire un tableau avec une feuille de style en CSS

En quatre étapes, vous atteindrez ce résultat.

Si vous avez eu des problèmes pour faire le tableau en html, vous pouvez utiliser cette correction partielle. L'ensemble de l'exercice est possible sans utiliser de classe CSS ni d'id, c'est-à-dire sans modifier le code html. Essayer de ne pas les utiliser.

Etape 1 : Aspect général, cellules vides et cellules titres

Pour mettre en forme le tableau, vous devez :

Etape 2 : Les cellules de données

Pour les cellules de données, voici les indications pour compléter leur mise en forme :

Pouvez-vous mettre en commun une partie des propriétés pour les cellules de données du corps du tableau ?

Rendez la case DU IG transparente à 50% (0.5). Pour cela, créez une classe CSS et modifier légèrement le code html de la page pour utiliser cette classe.

Etape 3 : Fusion de deux cellules

Avertissement : ce qui est demandé n'est pas tout à fait faisable (problème de raccord).

Essayez de faire en sorte que les cellules pour parcours Miage et pour Licence informatique se rejoignent comme dans la figure suivante (cellules "jointes" et étoile animée).

Pour ce faire, utilisez soit une grande ombre soit des éléments html que vous devez placez en position absolute ou relative. Mais le résultat dépend du navigateur.

Etape 4 : Animation autour d'une cellule

Essayer de placer une étoile (par exemple cette étoile ) qui tourne autour de la case parcours Miage. Selon le navigateur, vos solutions pourraient varier.

Utiliser un placement absolu de l'image dans une cellule au placement relatif (ne fonctionne pas avec firefox sous windows). Définissez avec @-préfixe-keyframes les cinq étapes de l'animation comme un positionnement de l'image à l'un des quatre coins de la cellule (le premier point est répété à la fin pour finir la boucle). Vous pouvez aussi faire varier d'autres propriétés (comme opacity ou box-shadow par exemple). Le positionnement aux 4 coins dépendra fortement du navigateur (une solution : définir toutes les dimensions / marges / espacement / etc. dans la même unité comme px, em, ...). Ensuite, avec -préfixe-animation associez l'animation et l'image. Faites boucler cette animation à l'infini (ne fonctionne pas avec firefox).

Année 2017-2018 TP Web Persistance L3 MIAGE UNS I. Mirbel & M. Winter