listes

ul

ul est l'abréviation de unordered list (liste non ordonnée). Cette balise délimite des listes non numérotées : chaque item est repéré par défaut par une puce.

<!DOCTYPE html>
<html lang="fr">
	
	
<head>
	<meta charset="utf-8">
	<title> liste ul </title>
</head>


<body>
	  
	<ul>
		<li> Informatique </li>
		<li> Mathématiques </li>
		<li> Sciences-physiques </li>
	</ul>
	
</body>


</html>

On peut ajouter un style css pour modifier la puce utilisée.

Les valeurs possibles sont :

list-style-type:disc
list-style-type:circle
list-style-type:square
list-style-type:none

Dans le code ci-dessous, modifiez none par les autres valeurs possibles pour visualiser la forme de la puce obtenue :

<!DOCTYPE html>
<html lang="fr">

<head>
	<meta charset="utf-8">
	<title> liste ul </title>
	<style>
		ul{list-style-type: none;}
	</style> 
</head>

<body>
	<ul>
		<li> Informatique </li>
		<li> Mathématiques </li>
		<li> Sciences-physiques </li>
	</ul>
</body>
    
</html>

Il est possible également de placer une image à la place de la puce en indiquant l'adresse url de l'image.

Par exemple, pour placer l'image suivante en puce : une puce

<!DOCTYPE html>
<html lang="fr">

<head>
	<meta charset="utf-8">
	<title> liste ul </title>
	<style>
		ul{list-style : url("ul_images/puce.png");}
	</style> 
</head>

<body>
	  
	  <ul>
		<li> Informatique </li>
		<li> Mathématiques </li>
		<li> Sciences-physiques </li>
	  </ul>
</body>

</html>

ol

ol est l'abréviation de ordered list. Cette balise délimite des listes numérotées.

<!DOCTYPE html>
<html lang="fr">
	
	
<head>
	<meta charset="utf-8">
	<title> liste ol </title>
</head>
  
<body> 
	<ol>
		<li> La stratégie Ender </li>
		<li> Les fables de l'humpur </li>
		<li> A la poursuite des Slans </li>
	</ol>
</body>
    
</html>

Il est possible de modifier le type de numérotation.

type="1" 	 
type="A" 	 
type="a" 	 
type="I" 	 
type="i"

Testez ces valeurs dans le code ci-dessous :

<!DOCTYPE html>
<html lang="fr">
	
	
<head>
	<meta charset="utf-8">
	<title> liste ol </title>
</head>
 
 
<body>
	<ol type="A">
		<li> La stratégie Ender </li>
		<li> Les fables de l'humpur </li>
		<li> A la poursuite des Slans </li>
	</ol>
</body>
    
</html>

dl

dl est l'abréviation de description list.

Ce type de liste présente deux types de balises d'item : la balise dt dans laquelle on place le terme à décrire, et la balise dd dans laquelle on place le descriptif (la définition).

<!DOCTYPE html>
<html lang="fr">
	
	
<head>
	<meta charset="utf-8">
	<title> liste dl </title>
	<style>
		dt{ color : red; font-weight: bold;}
	</style>
 </head>
  
<body>
	  <dl>
		<dt> html </dt> 
			<dd>HyperText Markup Language </dd>
		<dt> css </dt> 
			<dd>Cascading Style Sheet </dd>
		<dt> javascript</dt>
			<dd> langage de programmation </dd>
	  </dl>
</body>
    
</html>