Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

TP3-HTML : exercices corrigés Exercice1 : Hyperliens 1. Crée un nouveau documen

TP3-HTML : exercices corrigés Exercice1 : Hyperliens 1. Crée un nouveau document HTML dont le titre sera Exercice HTML 2. 2. Insère une image, tu la sauvegarde par menu.gif, dans le document. Cette image sera en coordonnées. 3. Délimite la zone Accueil et donne-lui cette adresse: index.html (Lien externe, ---) 4. Délimite la zone Aide et donne-lui cette adresse: aide.html (Lien externe, ---) 5. Délimite la zone Écrivez-nous et donne-lui ton adresse électronique (Lien externe, mailto). 6. Centre l'image menu.gif (avec le code center); 7. Convertis les caractères spéciaux, sauvegarde le tout sur ton dossier personnel. Le nom du fichier sera ex2.html 8. Visualise ton document avec votre navigateur. Clique sur les 3 zones de l'image. Réponse Voici les codes qui donnent le résultat ci-haut : 1. <HEAD> <TITLE>Exercice HTML 2</TITLE> </HEAD> 2. <MAP NAME="fictif"> <AREA SHAPE="RECT" COORDS="3,0,156,15" 3. HREF="index.html"> <AREA SHAPE="RECT" COORDS="166,3,273,13" 4. HREF="aide.html"> <AREA SHAPE="RECT" COORDS="292,3,425,15" 5. HREF="mailto:xx@cyberscol.qc.ca"> </MAP> 6. <CENTER><IMG SRC="menu.gif" BORDER=0 WIDTH=438 HEIGHT=16 USEMAP="#fictif"></CENTER> Exercice2 : Tableaux Utilisés sans bordure (bordure invisible), les tableaux sont aussi souvent utilisés pour : • mettre en page des éléments (texte, images, champs d'un formulaire...) • faire du multicolonne • créer une "image multipart" (mosaïque) avec des zones changeant d'aspect lorsque la souris passe dessus (voir exercice sur "Rollovers") • placer une trame colorée derrière du texte • etc... Remarque : les tableaux HTML sont correctement supportés à partir des versions de navigateurs Netscape 2 à 3 et IExplorer 2 à 3 Balises • Début tableau : <TABLE BGCOLOR="couleur fond" ALIGN="LEFT|RIGHT|CENTER" WIDTH="pixels ou %" CELLSPACING="larg.bords" BORDER="larg.ombrage" CELLPADDING="détach.texte"> • Début ligne : <TR BGCOLOR="couleur" ALIGN="LEFT|RIGHT|CENTER" VALIGN="TOP|MIDDLE|BOTTOM|BASELINE" WIDTH="pixels ou %"> Cellule titre : <TH BGCOLOR="couleur" ALIGN="LEFT|RIGHT|CENTER" VALIGN="TOP|MIDDLE|BOTTOM|BASELINE" WIDTH="pixels ou %" ROWSPAN="nb.lignes" COLSPAN="nb.col."> contenu cellule </TH> Cellule normale : <TD BGCOLOR="couleur" ALIGN="LEFT|RIGHT|CENTER" VALIGN="TOP|MIDDLE|BOTTOM|BASELINE" WIDTH="pixels ou %" ROWSPAN="nb.lignes" COLSPAN="nb.col."> contenu cellule </TD> Fin de la ligne : </TR> • Fin du tableau : </TABLE> • On peut aussi définir une légende associée au tableau : <CAPTION ALIGN="TOP| BOTTOM"> texte légende </CAPTION> • On peut évent. définir (depuis N6 et IE4) des lignes d'en-tête (répétées au haut de chaque page imprimées) : <THEAD ALIGN="LEFT|CENTER|RIGHT|JUSTIFY|CHAR" CHAR="car" CHAROFF="longueur" VALIGN="TOP|MIDDLE|BOTTOM|BASELINE"> une ou plusieurs lignes <TR>...</TR> </THEAD> des lignes de corps du tableau : <TBODY ALIGN="LEFT|CENTER|RIGHT|JUSTIFY|CHAR" CHAR="car" CHAROFF="longueur" VALIGN="TOP|MIDDLE|BOTTOM|BASELINE"> une ou plusieurs lignes <TR>...</TR> </TBODY> et des lignes de pied du tableau : <TFOOT ALIGN="LEFT|CENTER|RIGHT|JUSTIFY|CHAR" CHAR="car" CHAROFF="longueur" VALIGN="TOP|MIDDLE|BOTTOM|BASELINE"> une ou plusieurs lignes <TR>...</TR> </TFOOT> Bordures fines Quel que soit le navigateur utilisé, on peut créer des tableaux avec des bordures fines en utilisant les attributs BORDER="1" (ombrage bordure) et CELLSPACING="0" (largeur bordure). Par exemple le code suivant : <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10" ALIGN="CENTER"> <TR> <TD>Bonjour</TD><TD>tout le monde !</TD> </TR> </TABLE> donne : Bonjour tout le monde ! Couleur des bordures Pour IE ≥ 3.0 et Mozilla ≥ 1.0 (mais hélas pas pour Netscape < 6), l'attribut BGCOLOR=... affecte non seulement la couleur de fond des cellules mais aussi la couleur des bordures. On peut ainsi par exemple définir un tableau ayant une bordure fine (de 1 pixel) rouge par le code suivant : Par exemple le code suivant : <TABLE BORDER="0" CELLPADDING="10" CELLSPACING="1" BGCOLOR="red" ALIGN="CENTER"> <TR BGCOLOR="white"> <TD>Bonjour</TD><TD>tout le monde !</TD> </TR> </TABLE> donne : Bonjour tout le monde ! Cependant pour faire les choses tout-à-fait proprement, ce qui n'est possible qu'avec des navigateurs supportant complètement les feuilles de style, il faudrait plutôt utiliser les propriétés CSS border-color: couleur; border-style: solid; border-collapse: collapse; associées aux règles TABLE, TR, TH ou TD (voir ci-dessous). Usage de propriétés CSS Le tableau ci-dessous s'affichera avec une bordure relief habituelle de 1 pixel dans les navigateurs Web ne supportant pas les feuilles de style CSS, et avec une bordure rouge de 1px dans les navigateurs supportant CSS. Les propriétés utilisées (border-collapse, border, etc...) peuvent être appliquées aux règles TABLE, TR, TH ou TD. Blabla blabla blabla bla blabla blabla blabla bla blabla blabla <TABLE BORDER=1 CELLSPACING=0 CELLPADDING=2 STYLE="border-collapse: collapse; border: 1px solid #ff0000;"> <TR BGCOLOR="white"><TD> Blabla blabla blabla... </TD></TR> </TABLE> Comme le montre l'exemple ci-dessous, des effets d'encadrement, de couleur, etc... peuvent être obtenus dans de simples paragraphes (donc sans recourir aux tableaux) à l'aide de propriétés de feuilles de style CSS. Cela ne fonctionne bien évidemment qu'avec les navigateurs de dernière génération (i.e. supportant complètement CSS). Blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla. <P STYLE=" margin-left: 30px; width: 75%; color: blue; text-align: justify; background-color: #f5f5ff; border-style: solid; border-color: #00aaaa; border-left-color: #000088; border-width: 1px; border-left-width: 10px; padding: 2px; padding-left: 35px; "> Blabla blabla blabla... </P> Et l'exemple ci-dessous montre comment changer dynamiquement la couleur d'arrière-plan de lignes ou de cellules d'un tableau lorsque le curseur les survole. <TABLE ALIGN=center BORDER=1 CELLSPACING=0> <TR onMouseOver="this.bgColor='yellow'" un deux trois quatre Une autre technique, basée sur les feuilles de styles CSS, permettrait de faire la même chose, pour toutes les lignes d'un tableau, simplement avec : <STYLE TYPE="text/css">  </STYLE> onMouseOut="this.bgColor='white'" > <TD>un</TD> <TD>deux</TD> </TR> <TR> <TD onMouseOver="this.bgColor='lime'" onMouseOut="this.bgColor='white' "> trois</TD> <TD onMouseOver="this.bgColor='aqua'" onMouseOut="this.bgColor='white' "> quatre</TD> </TR> </TABLE> Donnée de l'exercice Réaliser le tableau ci-dessous : • celui-ci doit être centré dans la page et occuper le 80% de la largeur de la fenêtre du navigateur • largeur des bordures: 10 pixels (attribut CELLSPACING=); épaisseur de l'ombrage: 3 pixels (attribut BORDER=); détachement du texte par rapport aux bords: 5 pixels (attribut CELLPADDING=) • la première colonne doit faire 80 pixels de large, les 2 autres se partageant le reste de la largeur • dans les 2 premières lignes d'en-tête et dans la première colonne, le texte doit être en gras et souligné ; dans les autres cellules, il doit être en style normal et justifié à gauche • réaliser alignement du texte "Xxxxx" au haut de la cellule, alignement du texte "Yyyyy" au bas de la cellule • définir couleurs de fond • placer une légende au bas du tableau • les balises </TR>, </TH>, </TD> sont facultatives, mais il vaut mieux les mettre Nnnnnn Aaaaaaaaaaaaa Bbbbbbbb Cccccccc Un Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla Xxxxx Deux Yyyyy Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla Tableau 1 : abc def ghi jkl mno pqr stu vwx yz. Corrigé de l'exercice <CENTER><TABLE BGCOLOR="SILVER" WIDTH="80%" CELLSPACING="10" BORDER="3" CELLPADDING="5"> <CAPTION ALIGN="BOTTOM"><B>Tableau 1</B> : abc def ghi jkl mno pqr stu vwx yz.</CAPTION> <TR BGCOLOR="RED" > <TH ROWSPAN="2" WIDTH="80">Nnnnnn</TH> <TH COLSPAN="2">Aaaaaaaaaaaaa</TH> </TR> <TR BGCOLOR="GRAY"> <TH WIDTH="40%">Bbbbbbbb</TH> <TH WIDTH="40%">Cccccccc</TH> </TR> <TR> <TH BGCOLOR="GRAY">Un</TH> <TD>Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla</TD> <TD VALIGN="TOP">Xxxxx</TD> </TR> <TR> <TH BGCOLOR="GRAY">Deux</TH> <TD VALIGN="BOTTOM">Yyyyy</TD> <TD>Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla</TD> </TR> </TABLE></CENTER> Exercice2 : Fichier son o Insère un fichier son, tu le sauvegarde comme canyon.mid; o La répétition sera à l'infini; o Le démarrage sera automatique; o Le panneau de contrôle sera visible, sans bordure et sa grandeur sera standard. Réponse uploads/s3/ tp3-html-exercices-corrigs 1 .pdf