Les listes à puces

Les listes à puces vous permettent de diviser le grand texte en blocs séparés. Ainsi, il attire l'attention du lecteur sur le texte et augmente sa lisibilité. Compte tenu du fait que la perception du texte de l'écran pire que la version imprimée, est une technique très utile.

Pour définir les balles utilisées balises <UL> et <LI> (exemple 1).

Exemple 1. Créer une liste à puces

valide HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Titre> Liste </ title>
</ Head>
<Body>
<P> Ce qui devrait être pris en compte lors d'essai: </ p>
<Ul>
<Li> tous les liens </ li>
<Li> support pour les différents navigateurs </ li>
<Li> lisibilité </ li>
</ Ul>
</ Body>
</ Html>

Le tableau suivant présente les résultats de cet exemple (Fig. 1).

Fig. 1

Fig. 1. Tapez une liste à puces dans Opera

Les marqueurs peuvent prendre l'une des trois formes: un cercle (par défaut), un cercle et un carré. Pour sélectionner le type de marqueur utilisé type de paramètre = "..." balise <UL>. Au lieu de points est remplacé par l'un des trois valeurs indiquées dans le tableau. 1.

Tableau. 1. Types de marqueurs
Le code HTML exemple
<Type Ul = "disc"> Ce qui devrait être pris en considération lors de l'essai le site:
  • tous les liens
  • support pour les différents navigateurs
  • lisibilité
<Type Ul = "cercle"> Ce qui devrait être pris en considération lors de l'essai le site:
  • tous les liens
  • support pour les différents navigateurs
  • lisibilité
<Type Ul = "square"> Ce qui devrait être pris en considération lors de l'essai le site:
  • tous les liens
  • support pour les différents navigateurs
  • lisibilité

L'exemple 3 montre comment créer une liste à puces, les marqueurs qui prennent la forme d'un cercle.

Exemple 3: Modification du type de marqueur

valide HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Titre> Listes </ title>
</ Head>
<Body>

<P> Cocktails sur la base de la tequila </ p>
<Type ul = "cercle">
<Li> L'ancienne mexicaine </ li>
<Li> Blue Moon </ li>
<Li> Brave Bull </ li>
<Li> Serra Margarita </ ​​li>
</ Ul>

</ Body>
</ Html>

Exemples de résultats ci-dessous (Fig. 2).

Fig. 2

Fig. 2. Marqueurs liste comme un cercle

Avec CSS, vous pouvez étendre cette liste et caractères au lieu construit pour l'utiliser comme un dessin de marqueur. A cet effet, l'attribut style est list-style-image, la valeur de laquelle se trouve le chemin vers l'image. Il convient d'ajouter dans une URL mot - clé, comme indiqué dans l' exemple 4.

Exemple 4. Utilisation de styles pour ajouter des graphiques aux marqueurs

valide HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Titre> Listes </ title>
<Style type = "text / css">
UL {
list-style-image: url (images / square.gif); / * Le chemin d' accès à un fichier image avec un marqueur * /
}
</ Style>
</ Head>
<Body>
<Ul>
<Li> Le titre devrait être plus courte que trois lignes; </ li>
<Li> Si le nom de la section est déjà bien établi conditions d'utilisation tels que les livres d'or, chat, lien, la page d'accueil et autres; </ li>
<Li> Avant d'utiliser des termes ou des mots spéciaux, décider si ce sera clair pour le lecteur. </ Li>
</ Ul>
</ Body>
</ Html>

Le résultat de cet exemple est représenté sur la Fig. 3.

Fig. 3

Fig. 3. La liste des marqueurs sous forme de dessins

© Copyright Politique www.htmlbook.ru