Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et commentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

LES LISTES EN HTML

Définition d’une liste

Les listes HTML vont nous permettre d’ordonner du contenu en l’affichant sous forme… de liste.

Visuellement, une liste ressemble à ceci :

  • Premier élément de ma liste,
  • Deuxième élément de ma liste,
  • Troisième élément de ma liste.

Les listes vont être très utiles pour apporter de la clarté et de l’ordre à nos documents, ainsi que pour créer des menus de navigation (nous verrons plus tard comment dans ce cours).

Il existe deux grands types de listes en HTML : les listes ordonnées et les listes non-ordonnées. Il existe également un troisième type de liste un peu particulier et moins utilisé : les listes de définitions.

Nous allons voir dans ce chapitre comment créer chaque type de liste et quand utiliser un type de liste plutôt qu’un autre.

Les listes non-ordonnées

Les listes non-ordonnées vont être utiles pour lister des éléments sans hiérarchie ni ordre logique.

Par exemple, si je souhaite lister les mots « pomme », « vélo » et « guitare », sans plus de contexte, j’utiliserai une liste non-ordonnée.

En effet, on ne peut pas dégager de notion d’ordre, de hiérarchie ou de subordination entre ces trois termes.

Pour créer une liste non-ordonnée, nous allons avoir besoin d’un élément ul (pour « unordered list », ou « liste non-ordonnée » en français) qui va représenter la liste en soi ainsi que d’éléments li ("list items" = "éléments de liste") représentant chaque élément de la liste.

On crée une liste non ordonnée en HTML avec les éléments ul et li

On utilise les listes non ordonnées en HTML pour lister des éléments sans notion d'ordre

Essayer ce code

Comme vous pouvez le remarquer, les éléments li se trouvent à l’intérieur de l’élément ul (à partir de ce moment, bien indenter son code commence à être important). Visuellement, des puces (les points noirs) apparaissent automatiquement devant chaque élément d’une liste non-ordonnée.

Les listes ordonnées

Au contraire des listes non-ordonnées, nous allons utiliser les listes ordonnées lorsqu’il y aura une notion d’ordre ou de progression logique entre les éléments de notre liste.

Par exemple, si l’on souhaite lister les étapes naturelles de la vie, ou lorsque l’on crée un sommaire, on utilisera généralement des listes ordonnées.

Pour créer une liste ordonnée, nous allons cette fois-ci utiliser l’élément ol (pour « ordered list » ou « liste ordonnée ») pour définir la liste en soi et à nouveau des éléments li pour les différents éléments de la liste.

On crée une liste ordonnée en HTML avec les éléments ol et li

On utilise les listes ordonnées en HTML pour lister des éléments avec notion d'ordre

Essayer ce code

Comme vous le voyez, ce sont cette fois-ci des numéros qui sont affichés devant chaque élément de la liste par défaut.

Vous pouvez changer ce comportement et afficher plutôt des chiffres romains ou des lettres grâce à l’attribut type des listes ordonnées.

Cet attribut peut prendre cinq valeurs différentes :

  • « 1 » : valeur par défaut. Des chiffres apparaitront devant chaque élément de la liste ;
  • « I » : Des chiffres romains majuscules apparaitront devant chaque élément de la liste ;
  • « i » : Des chiffres romains minuscules apparaitront devant chaque élément de la liste ;
  • « A » : Des lettres majuscules apparaitront devant chaque élément de la liste ;
  • « a » : Des lettres minuscules apparaitront devant chaque élément de la liste ;

L'attribut type nous permet de choisir le type de valeur apparaissant devant chaque élément d'un liste ordonnée

L'attribut type en HTML peut prendre cinq valeurs différentes

Essayer ce code

Les listes de définitions

Les listes de définitions, encore appelées « listes de descriptions » vont nous permettre de lister des termes et d’ajouter des définitions ou descriptions pour chacun de ces termes.

Pour créer une liste de définitions, nous allons cette fois-ci utiliser l’élément dl signifiant « description list » ou « liste de description / définition » en français pour définir la liste en soi, puis des éléments dt (description term) pour chaque élément à décrire et enfin l’élément dd pour la définition / description en soi.

Pensez bien lorsque vous créez une liste de définitions à toujours placer le terme à définir avant sa définition, c’est-à-dire l’élément dt avant l’élément dd. Cela est normalement assez intuitif.

On crée une liste de description ou de définition avec les éléments HTML dl, dt et dd

Les listes de définition se créent différemment des listes ordonnées et non ordonnées

Essayer ce code

Les listes imbriquées

Finalement, sachez qu’il est tout-à-fait possible d’imbriquer une liste dans une autre en suivant quelques règles simples.

Pour imbriquer une liste dans une autre, il suffit de définir une nouvelle liste à l’intérieur de l’un des éléments d’une autre liste, juste avant la balise fermante de cet élément.

Pour imbriquer une liste dans une autre en HTML, on déclare la nouvelle liste à l'intérieur de l'un des éléments li de la première

Nous avons imbriqué une liste non ordonnée dans une liste ordonnée

Essayer ce code

Comme vous pouvez le voir, il devient ici très important de bien indenter son code afin de ne pas se perdre au milieu de nos listes !

Notez que l’on peut imbriquer autant de listes que l’on souhaite les unes dans les autres.

Chapitre précédent

Chapitre suivant