docL3I parcours MIAGE – WEB – TP01 : html et CSS
download 
Plainte Transcription
L3I parcours MIAGE – WEB – TP01 : html et CSS
L3I parcours MIAGE – WEB – TP01 : html et CSS 0. PREAMBULE ET CONSIGNES Des pages valides ! 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 ihm...</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). 1. VOS PAGES A L’UNIVERSITE 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 d'index dans ce répertoire. 2. REFAIRE UN TABLEAU EN HTML L’objectif de l’exercice sera de maitriser les « table » en html. La mise en forme viendra dans l’exercice suivant. Voici ci-contre 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 cidessous. (avant de mettre les liens) Pour voir les bords, utilisez l’attribut border="1" de table. Cet attribut, il faudrait l’enlever si nous utilisions le css Figure 1. Image à reproduire pour la mise en forme. Calculez-bien les tailles des cellules (pour l’utilisation de colspan et de rowspan). Comme différence significative, note que « bac+8 » occupe 3 lignes de haut, « bac+5 » 2 et « bac+3 » 3. Figure 2. Aperçu du tableau en html Placez les liens suivants : http://www.polytechnice.fr/page11.html pour « Ingénieur Informatique » http://edstic.i3s.unice.fr/ pour « Doctorat / ED-STIC » http://miageprojet2.unice.fr/Licence_MIAGE_3 pour « parcours MIAGE » Modifiez ce dernier lien pour qu’il pointe directement vers « Présentation » (il y a un id qui vaut "Pr.c3.a9sentations_g.c3.a9n.c3.a9rales" qui est utilisable pour bien cibler ) 3. REFAIRE UN TABLEAU AVEC 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. Figure 3. Aperçu du tableau mis en forme 1ERE ETAPE : ASPECT GENERAL, CELLULES VIDES ET CELLULES TITRES Pour mettre en forme le tableau, vous devez : Choisir d’espacer les bords (cadres) des cellules du tableau (<table>) indication : il s’agit de la propriété border-collapse Placez le titre (la légende) du tableau en bas, mettez-le en gras indication : il s’agit de les propriétés caption-side et font-weight Toutes les cellules (cases) sont encadrées par un trait bleu fin et continu. Leur alignement vertical est au milieu (le texte est centrée en hauteur), leur hauteur est fixée à 2.4em (cela correspond à deux lignes) Les cellules de titre (th) du corps du tableau (tbody) de la 1ère colonne doivent avoir un alignement vertical « en haut » (le texte est en haut de la cellule). Les cellules de données (td) ont un texte centré horizontalement et une largeur minimale de 10em. Toutes les cellules vides ne sont pas encadrées. o Exception : les cellules de données vides sont encadrées uniquement à droite, en bas et à gauche par des tirets fin et noirs. o Exception : les cellules de données vides de la 1ère ligne du corps du tableau ont aussi le même type de trait pour les encadrer en haut, mais pas de traits sur leur gauche. o Exception : la 1ère cellule de données vide de la 1ère ligne du corps du tableau est aussi encadrée sur sa gauche. Toutes les cellules de titres non vide ont la mise en forme suivante : o Des bords arrondis à 0.5em o Une couleur de fond définie par les valeurs : rouge = 79, vert = 129, bleu = 189 o Une couleur d’écriture blanche o o Un encadrement qui ressort (outset), de 2 pixels d’épaisseur et de couleur définie par les valeurs : rouge = 59, vert = 97, bleu = 142 Une ombre noir, décalée d’un pixel vers la droite et d’un pixel vers le bas 2IEME ETAPE : LES CELLULES DE DONNEES Pour les cellules de données, voici les indications pour compléter leur mise en forme : Pour la cellule contenant « Doctorat / ED-STIC » il faut : o des bords arrondis à 0.5em o Un encadrement qui ressort (outset), de 2 pixels d’épaisseur et de couleur définie par les valeurs : rouge = 94, vert = 73, bleu = 121 o Une couleur de fond définie par les valeurs : rouge = 128, vert = 100, bleu = 162 o Une ombre noir, décalée d’un pixel vers la droite et d’un pixel vers le bas o Une couleur d’écriture blanche indication : il s’agit de la seule cellule non vide de la 2ième ligne du corps du tableau Pour les cellules correspondant aux formations à BAC+5, il faut : o des bords arrondis à 0.5em o Un encadrement qui ressort (outset), de 2 pixels d’épaisseur et de couleur définie par les valeurs : rouge = 147, vert = 178, bleu = 84 o Une couleur de fond définie par les valeurs : rouge = 155, vert = 187, bleu = 89 o Une ombre noir, décalée d’un pixel vers la droite et d’un pixel vers le bas o Une couleur d’écriture blanche indication : il s’agit des cellules non vides de la 5ième ligne du corps du tableau Pour les cellules correspondant aux formations à BAC+3 ou moins, il faut : o des bords arrondis à 0.5em o Un encadrement qui ressort (outset), de 2 pixels d’épaisseur et de couleur définie par les valeurs : rouge = 59, vert = 97, bleu = 142 o Une couleur de fond définie par les valeurs : rouge = 59, vert = 129, bleu = 189 o Une ombre noir, décalée d’un pixel vers la droite et d’un pixel vers le bas o Une couleur d’écriture blanche indication : il s’agit des cellules non vides à partir de la 7ième ligne du corps du tableau Pouvez-vous « factoriser » une partie des propriétés pour les cellules de données du corps du tableau ? 3IEME ETAPE : FUSION DE DEUX CELLULES Avertissement : ce qui est demandé n’est pas « complétement » faisable (problème de raccord). Essayez de faire en sorte que les cellules pour « parcours Miage » et pour « Licence informatique » se rejoignent (c.f. Figure 4. Cellules "jointes" et étoile animée). Pour ce faire, utilisez soit une grande ombre… soit des éléments html que vous devez placez en posittion: absolute ou relative. (Mais le résultat dépend du navigateur). 4IEME ETAPE : ANIMATION AUTOUR D’UNE CELLULE Avertissement : ce qui est demandé n’est pas « complétement » faisable (problème de navigateur). 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’autre propriété (comme opacity ou box-shadow par exemple). Figure 4. Cellules "jointes" et étoile animée 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).
