Comment faire des puces en HTML

L'utilisation de puces aide à décomposer de gros morceaux de texte et à indiquer des listes d'informations utiles. Les puces sont faciles à créer dans un logiciel de traitement de texte, mais lorsque vous tapez un document HTML, vous devez connaître le code pour les créer. Peu de code est nécessaire pour créer une liste à puces. Enveloppez chaque liste dans

balises

puis encapsulez la liste entière dans des balises

ou "liste non ordonnée". Vous pouvez ensuite faire tout ce que vous voulez avec la liste à puces en utilisant le code de feuille de style en cascade.

Étape 1

Écrivez le texte de vos puces. Commencez chaque point sur sa propre ligne. Enveloppez chaque ligne dans

et

des balises comme ceci :

Ceci est un point à puces

C'est une autre puce

Étape 2

Créez une ligne vide au-dessus de la liste à puces, puis tapez une ouverture

balise

sur cette ligne. Trouvez la fin de votre liste à puces, puis créez-y une autre ligne vide. Tapez une fermeture

tag sur cette ligne. Si vous souhaitez styliser la liste avec CSS ultérieurement, ajoutez un attribut de classe ou d'ID à la balise d'ouverture

. Voici un exemple de liste à puces courte avec un attribut ID :

• Puce 1
• Puce deux

Étape 3

Utilisez "style" pour créer votre liste à puces en utilisant le code CSS. Ajoutez du code CSS entre les

balises entre les et balises, ou vous pouvez écrire le code CSS dans un fichier .CSS externe et intégrer le fichier à l'aide d'une balise comme celle-ci :. Remplacez "path/to/stylesheet.css" par le chemin d'accès au fichier .CSS que vous créez. Utilisez l'attribut ID ou class pour sélectionner vos listes à puces, comme ceci :

#mylist li { font-style:italic; }

Le code ci-dessus sélectionne tout

balises dans une balise avec un ID de "mylist". Remplacez le signe dièse par un point lors de la sélection par l'attribut de classe.

Étape 4

Utilisez la propriété "list-style" dans CSS pour changer le type de puce. Les types de puces disponibles incluent des cercles ouverts, des disques remplis et des carrés pour les listes non numérotées et non alphabétiques. Voici un exemple de puces carrées :

#mylist li {list-style :carré ; }

Astuce

Utilisez le

Balise

au lieu de
pour créer des listes ordonnées. Vous pouvez ensuite définir le type "style de liste" sur différents types de chiffres ou de lettres.

Créez des puces d'image en spécifiant "none" pour l'attribut "list-style" puis donnez chaque

• marque une image d'arrière-plan non répétitive et alignée à gauche. Ajouter un rembourrage sur le côté gauche de chaque
balise
• pour déplacer le texte, sinon il chevauchera l'image.