Institut Supérieur des Arts de MultiMédia
Concepts et outils pour le web
TP 3
Liens et tableaux sur HTML
1ère année CM
Plan
Les liens
Les images
Les tableaux
2
Les liens (1/2)
• Pour créer un lien HTML, on utilise la balise <a> et </a> pour
encadrer le contenu du lien (qui peut être du texte, une image, …)
• La balise <a> dispose de 3 attributs possibles :
• Href : permet d’indiquer l’adresse du lien
• Name : permet de définir une ancre
• Target : permet de définir la cible du lien (lien vers une nouvelle fenêtre )
• Lien absolu
• Indique l’adresse complète du fichier lié
• Il est généralement utilisé pour afficher une page d’un autre site
• Exemple
• Lien relatif
• Indique l’adresse du fichier par rapport à la page courante
• Exemple
3
Les liens (2/2)
• Lien vers une ancre
• Une ancre permet d’afficher une page web à partir d’un certain point (utile
dans les pages web)
• Pour utiliser une ancre il faut utiliser la balise <a> avec l’attribut name
• Exemple
• Ouvrir un lien dans une autre fenêtre
• L’attribut target permet de définir la cible du lien c’est-à-dire l’endroit
où sera ouvert le fichier.
• Pour ouvrir le lien dans une nouvelle fenêtre, assigner la valeur _blank à
l’attribut target.
• Exemple
4
Les images (1/2)
• Une image est insérée avec la balise img en spécifiant l’attribut src (le
chemin de l’image à inclure et avec l’attribut alt l’éventuel texte de
remplacement de l’image.
• La balise img peut avoir divers attributs facultatifs. Seuls les attributs src
et alt sont obligatoires.
• Align : alignement de l’image, peut prendre les valeurs top, bottom, middle,
left ou right.
• Title : titre de l’image, s’affiche en info bulle dans le navigateur.
• Border : largeur de la bordure de l’image (exprimée en pixels)
• Height : hauteur de l’image
• Width : largeur de l’image
5
Les images (2/2)
• Image contenant un lien
• Une image elle-même peut être à l’intérieur d’une balise <a>…</a>. On
peut alors cliquer sur l’image pour accéder à la ressource désignée.
• Exemple :
6
Les tableaux (1/5)
• La déclaration d’un tableau se fait grâce à la balise
table.
• La balise tr (table row) permet de définir une ligne.
• La balise td (table data) permet de définir une cellule de
données dans une ligne. Elle sera obligatoirement contenue
dans une balise tr.
• La balise th (table header) permet de définir des cellules
comme étant des entêtes de lignes ou de colonnes
• La balise caption permet de donner un titre à un tableau
• Exemple
7
Les tableaux (2/5)
8
Les tableaux (3/5)
• Attributs de la balise table :
• Border : permet de définir s’il existe des bordures de cases en indiquant leur
épaisseur en pixel
• Width : la largeur totale du tableau, en pixel ou pourcentage de la page totale
• Rules : si on aune bordure, on peut choisir les trait intérieurs des cellules. Cet
attribut peut avoir les valeurs suivantes :
• All : tous les traits sont tracés
• Rows : les lignes sons séparées par des traits mais pas les colonnes
• Cols : les colonnes sons séparées par des traits mais pas les lignes
• None : aucun trait intérieur n’est tracé
• Exemple :
9
Les tableaux (4/5)
• Attributs des balises tr, th, td
• Align : alignement horizontal : left, right, center, justify
• Valign : alignement vertical : top, middle bottom
• Fusionner des cellules :
• La fusion de plusieurs cellules d’une même ligne se fait grâce à l’option
colspan
• La fusion de plusieurs cellules d’une même colonne se fait grâce à l’option
rowspan
• Ces 2 attributs prennent la valeur correspondant aux nombre de cellules à
fusionner.
• Exemple : fusionner 3 cellules d’une colonne
10
Les tableaux (5/5)
11
