Listes et tableaux
4
Les listes
Exemple :
Les listes ordonnées:
Les listes ordonnées sont délimitées par les
balises <ol>…</ol>
Un item (élément) d’une liste ordonnée est
introduit par la balise <li>
<ol type="1"> ... </ol> : chiffres 1, 2, 3…
<ol type="A"> ... </ol> : lettres majuscules A, B..
<ol type="a"> ... </ol> : lettres minuscules a, b, c…
<ol type="I"> ... </ol> : chiffres romains majuscules I, II,
III…
<ol type="i"> ... </ol> : chiffres romains minuscules i, ii,
iii…
Les listes
Exemple :
Les listes non ordonnées:
Les listes non ordonnées (à puces) sont
délimitées par les balises <ul>…</ul>
Un item d’une liste à puce est introduit par
la balise <li>.
<ul type="disc"> <!-- point plein -->
<ul type="circle"> <!-- cercle vide -->
<ul type="square"> <!-- carré -->
Les tableaux
Les tableaux sont utilisés pour une meilleur présentation et organisation d’informations.
Création des tableaux:
o <table> </table> permet d’insérer un tableau.
o <caption> </caption> insère une légende. Elle accepte un attribut align (=top ou bottom)
o <tr> </tr> définit une ligne.
o <th> </th> définit l'en-tête de chaque colonne.
o <td> </td> définit une cellule.
Exemple :
Les tableaux
Alignement:
L'alignement des données s'obtient, en utilisant les attributs align pour l'alignement Horizontal
et valign pour l'alignement Vertical.
o Align = left (par défaut): les données sont alignées à gauche de la cellule (pour TD) ou de
toutes les cellules (pour TR).
o Align = right: les données sont alignées à droite de la cellule (pour TD) ou de toutes les
cellules (pour TR).
o Align = center: les données sont centrées à l'intérieur de la cellule (pour TD) ou de toutes les
cellules (pour TR).
o Valign = middle (par défaut): Les données sont centrées verticalement à l'intérieur de la
cellule (pour TD) ou de toutes les cellules (pour TR).
o Valign = top: Les données sont en haut de la cellule (pour TD) ou de toutes les cellules (pour
TR).
o Valign = bottom: Les données sont en bas de la cellule (pour TD) ou de toutes les cellules
(pour TR).
Les tableaux
Exemple :
N.B: l’utilisation de tous ces attributs n’est plus
supportée par HTML5. Il vaut mieux les remplacer par les
propriétés de CSS.
Les tableaux
Fusionnement des lignes et des colonnes:
Les lignes et les colonnes peuvent êtres fusionnées avec les attributs rowspan et colspan. rowspan définit le
nombre de lignes couvertes par une cellule. colspan définit le nombre de colonnes couvertes par une cellule.
o Pour fusionner 2 cellules adjacentes sur une ligne: colspan=2 (TH ou TD).
o Pour fusionner 2 cellules adjacentes sur une colonne: rowspan=2 (TH ou TD).
Exemple :
Les tableaux
Exemple :
Les tableaux
Mise en Forme:
Voici les Attributs de mise en page et d'espacement (valables pour <table> <td> et <th>)
o width : Spécifie la largeur du tableau ou d'une cellule, en pixels ou en pourcentage de la
fenêtre du navigateur.
o height : Spécifie la hauteur du tableau ou d'une cellule, en pixels ou en pourcentage.
o border : Spécifie la taille en pixels (par défaut 0; invisible) de la bordure du tableau.
o cellpadding : Spécifie l'espace en pixels entre la bordure et le contenu de la cellule.
o cellspacing : Spécifie l'espace en pixels entre les cellules du tableau.
o cellpadding et cellspacing s’appliquent à la balise <table>
o bgcolor: Spécifie la couleur d'une cellule.
o bordercolor : Spécifie la couleur de la bordure du tableau.
o background : Spécifie l'image à afficher comme image d'arrière plan du tableau
Les tableaux
Exemple :
Les hyperliens et images
5
les hyperliens
• Un hyperlien ou un lien hypertexte ou hypermedia est une référence (lien)
permettant de passer d’une page à une autre.
• Peut ouvrir un site, un fichier, une image, un email, une section, etc.
• Utilise la balise <a>
Syntaxe générale : <a href="URL"> Texte du lien </a>
Les attributs de <a> :
La balise admet quelques attributs:
o href : Permet d'indiquer la référence (chemin) de la ressource cible.
o target : Permet de définir l’endroit où l’on va ouvrir la page.
o title : Permet de spécifier une description du lien. Le lien affiche une infobulle au
survol
<a href = "[Link] title = " Google" target = "_blank"> Google </a>
les hyperliens
Liens Absolus vs Liens Relatifs
Liens Relatifs (Relative URLs)
Liens Absolus (Absolute URLs)
• Adresse partielle d’une page.
• Adresse complète d’une page web.
• Dépend de la localisation de la page actuelle.
• Contient : protocole + nom de domaine +
• Utilisé pour les liens internes (dans le même
chemin.
site).
• Utilisé surtout pour les liens externes
Exemples :
(vers d’autres sites).
• Même dossier : [Link]
Exemple :
• Sous-dossier : docs/[Link]
[Link]
• Remonter d’un dossier : ../[Link]
Caractéristiques :
• Ne dépend pas du fichier actuel. Caractéristiques :
• Fonctionne depuis n’importe quel • Plus courts et plus flexibles.
emplacement. • Idéals pour organiser un site web.
les hyperliens
Liens Internes et Liens Externes
Liens Internes Liens Externes
Définition : Définition :
• Lien qui pointe vers une autre page du • Lien qui pointe vers un site différent, un
même site web. autre domaine.
• Utilise généralement une URL relative. • Utilise une URL absolue.
Utilisation : Utilisation :
• Naviguer entre les pages du site. • Accéder à un site externe.
• Accéder à une section de la même page • Références, ressources externes,
(ancre). redirections.
Exemples : Exemples :
• [Link] • [Link]
• chapitre/[Link] • [Link]
• #section1
les hyperliens
Exemple :
• Liens HTML – Utiliser une image comme lien
<a href="[Link]"><img src="[Link]" alt="HTML tutorial"></a>
• Lien vers une adresse e-mail
<a href="[Link] Envoyer un email </a>
• Bouton comme lien
<button onclick="[Link]='[Link]'"> Tutoriel HTML </button>
• Titres de liens
<a href="[Link] title="Aller à la section HTML de W3Schools">Visitez notre tutoriel
HTML</a>
• Utiliser une URL complète pour créer un lien vers une page web:
<a href="[Link] HTML</a>
• Lien vers une page située dans le dossier html du site actuel:
<a href="/html/[Link]">Tutoriel HTML</a>
les Images
o Pour insérer une image dans votre page web il faut utiliser la balise <img >
o Cette balise doit être accompagnée de quelques attributs :
src: permet d'indiquer la source (chemin) de l’image à insérer;
alt: le texte alternatif qui décrit l’image. Le texte s’affiche à la place de l’image lorsque
celle-ci ne peut pas être affichée;
title: pour afficher une infobulle au survol de la souris;
width: spécifie la largeur en pixels ou en %
height: spécifie la hauteur en pixels ou en %
Exemple :
<img src= "images/[Link]" alt= "Ma Photo" title= "ma photo personnelle" />
les Formulaires
5
Balises de formulaires
La balise <form> vient en début de votre formulaire. Elle possède plusieurs attributs,
entre autres:
• Action: spécifie la destination du formulaire (le fichier qui se chargera de traiter les
données du formulaire)
• Method: spécifie la méthode HTTP pour envoyer le formulaire. Plusieurs valeurs
sont possibles dont GET (par défaut) et POST.
• autocomplete: il admet deux valeurs, on ou off. Cet attribut indique si le formulaire
doit être complété automatiquement (on) ou non (off) en utilisant les données déjà
saisies par l’utilisateur dans des champs similaires.
Syntaxe :
<form action="test_form.php" method="get" >
.
Les éléments de formulaire
.
</form>
Les éléments de formulaires
La balise <input> permet de créer des champs de formulaire pour que l’utilisateur saisisse ou
sélectionne des données.
• C’est une balise autonome (elle ne se ferme pas).
• Le comportement du champ dépend de l’attribut type :
• On utilise souvent un id pour le relier à un <label>.
• Peut contenir d’autres attributs : placeholder, value, required, name
La balise <label> sert à décrire un élément de formulaire (input, checkbox, radio…).
• Elle améliore l’accessibilité : les lecteurs d’écran lisent le label quand l’utilisateur se place
sur le champ.
• Elle facilite le clic : cliquer sur le texte du label active aussi l’élément associé (utile pour les
petites cases).
• Pour lier un label à un input, on utilise :
for="idDuInput" → doit être identique à l’attribut id du <input>.
Les éléments de formulaires
Exemple :
Les éléments de formulaires
Exemples :