Créer des puces en HTML en utilisant
- Mots clés.
L'utilisation de puces permet de diviser de gros morceaux de texte et de signaler 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
- ou des balises « 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
Vidéo du jour
É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 vierge. Tapez une fermeture
- étiqueter. Voici un exemple de liste à puces courte avec un attribut ID:
- Puce un
- 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 balises et, ou vous pouvez écrire le code CSS dans un fichier .CSS externe et intégrer le fichier à l'aide d'un tag comme ceci: . Remplacez "path/to/stylesheet.css" par le chemin du 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 tous
É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étisées. Voici un exemple de puces carrées :
#mylist li {list-style: square;}
Conseil
Utilisez le
- balise au lieu de
- pour créer des listes ordonnées. Vous pouvez ensuite définir le type "liste de style" sur différents types de chiffres ou de lettres.
- tag une image d'arrière-plan non répétitive et alignée à gauche. Ajouter un rembourrage sur le côté gauche de chaque
- tag pour déplacer le texte, sinon il chevauchera l'image.
Créez des puces d'image en spécifiant "aucun" pour l'attribut "list-style", puis donnez à chaque
