Atelier2-HTML : exercices corrigés - Accueil

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. Exercice HTML 2
2.
6. 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 :
. Début ligne :
Cellule titre :
contenu cellule
Cellule normale :
contenu cellule
Fin de la ligne :
. Fin du tableau :
. On peut aussi définir une légende associée au tableau : texte légende
. 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) :
une ou plusieurs lignes
...
des lignes de corps du tableau :
une ou plusieurs lignes
...
et des lignes de pied du tableau :
une ou plusieurs lignes
... 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 : |donne : |
| | |
| | |
|Bonjourtout 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 : |donne : |
| | |
| | |
|Bonjourtout 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 | |
|supportant CSS. Les propriétés utilisées | |
|(border-collapse, border, etc...) peuvent |Blabla blabla blabla... |
|être appliquées aux règles TABLE, TR, TH ou| |
|TD. | |
|Blabla blabla blabla bla blabla blabla | |
|blabla bla blabla blabla | |
| | |
|Comme le montre l'exemple ci-dessous, des | |
|blabla. |Blabla blabla blabla... |
| | |
|Et l'exemple ci-dessous montre comment | |
|d'arrière-plan de lignes ou de cellules |