HTML/CSS

(Support de cours)

Souheyl Mallat

Année universitaire 2020-2021

1
Chapitre1: Introduction aux logiciels libre

1. Définition

2. Caractéristiques d’un logiciel libre

3. Logiciels libres, et gratuiciel

4.L’utilité des logiciels libres

5.Les inconvénients à l’utilisation des logiciels libres

6.Catégories de logiciels libres

7.Savoir si un logiciel libre particulier convient à mon entreprise?

2
❑ Objectif de ce cours:
-Découvrir la notion du logiciel libre.
-Etudier quelques exemples de logiciels libres

❑ Objectif du TP:
De mener à bien la mise en place de solutions informatiques
basées sur l’intégration de produits et technologies issus du
monde du logiciel libre.

3
1. Définition:
Qu’est-ce qu’un logiciel libre?

▪ Logiciel dont le code source est accessible au public (populaires) et que les
internautes peuvent utiliser tel quel ou modifier,

▪ Aucun droit de licence n’est exigé pour ce type de logiciel.

▪ Il en existe pour différents usages: la bureautique, la conception Web, la gestion

de contenu, les systèmes d’exploitation et les communications.

▪ La licence est le principal élément qui différencie les logiciels libres des
logiciels privés.

▪ Exemple: Mozilla Firefox, système d’exploitation Linux, serveur Web Apache

4
2. Caractéristiques d’un logiciel libre
Principaux critères:

▪ Accéder, modifier le code source;

▪ Redistribuer le logiciel sans restriction;
▪ Distribuer la version modifiée du logiciel.
▪ Free Software: Libertés fondamentales
- Liberté 0: La liberté d’exécution, pour tous les usages.
- Liberté 1: La liberté d'étudier le fonctionnement du programme, et de l'adapter
(Accès au code source).
- Liberté 2: La liberté de redistribuer des copies.
- Liberté 3: La liberté de modifier et de rendre publiques ces modifications.

5
L’importance de la liberté
pour les utilisateurs :
▪ Un logiciel sans source est comme une voiture dont on ne peut pas ouvrir le capot.
▪ Pas de dépendance d’un seul fournisseur
▪ Possibilité d’adapter un logiciel pour des besoins spécifique.
▪ Potentiellement plus de sécurité par revue publique du code.
▪ Disponibilité pour l’enseignement : formation des étudiants sur une certaine
technologie.

6
3.Le logiciel est-il gratuit?

▪ La plupart des logiciels libres soient gratuits, certains sont vendus sans perdre
leur désignation de « logiciel libre »:
▪ coûts indirects liés à la gestion des logiciels libres:
- L’accès aux mises à jour du logiciel, les services de soutien;
- Des coûts de formation et des coûts de transition d’une plateforme à une autre.

7
4. Open Source vs Free software

Free ≠ Open
- Open Source = « code ouvert »
- Toucher?
- Modifier?
- Redistribuer?

8
 5. Les acteurs dans le monde du logiciel libre

Tous les acteurs du logiciel libre, qu'ils soient entreprises, développeurs, ou

simples utilisateurs sont tous égaux et jouissent des mêmes droits.

9
5. Les acteurs dans le monde du logiciel libre
▪ Projet de développement de logiciels groupe de programmeurs qui
créent et maintiennent des logiciels.
Les logiciels produits sont publiés indépendamment un de l’autre.
▪ Éditeur de distribution crée une distribution de logiciels : choix de
logiciels, mécanisme d’installation et de mise à jour, contrôle et maintenance de
qualité.
▪ Les utilisateurs peuvent jouent un rôle actif : rapporter des problèmes, contribuer
des modifications de code,
éventuellement participer à un projet …
mais aussi des contributions non techniques : aide aux utilisateurs, traductions, …

10
6. Etude comparative : Freeware, shareware, propriétaire

Freeware (graticiel ou gratuiciel)

▪ Gratuit
▪ Code source non disponible
▪ Redistribuable mais sans modification
▪ Exemple : Avast!, AVG (sans le parefeu)…

Shareware (partagiciel)
▪ Code source non fourni( La rediffusion ou la modification
d’un tel programme n’est pas autorisé )
▪ Qui peut être utilisé gratuitement généralement pendant une
durée et avec des fonctionnalités limitées (indiquées par
l’auteur)

11
6. Etude comparative : Freeware, shareware, propriétaire
Propriétaire
▪ Diffusés uniquement sous forme d’applications exécutables
▪ Avec des licences extrêmement contraignantes quant à leur usage, et avec
interdiction (légale et technique) de procéder à quelque analyse, adaptation ou
amélioration que ce soit
▪ On peut donc simplement dire que ces entreprises ont tous les pouvoirs sur ses
utilisateurs qui eux, sont impuissants.

12
6. Etude comparative : Freeware, shareware, propriétaire

Tableau comparatif

13
7.Historique
▪ 70: L’idée du logiciel libre commence à naitre
▪ 82: Création de Free Sofware Foundation(FSF) par Richard
Stallman(programmeur au laboratoire d’intelligence artificielle du MIT
(Boston, USA).)
▪ 84: FSF lance le projet GNU qui consiste au développement d’un
système d’exploitation libre de type Unix
▪ 91: Système d’exploitation GNU était prêt
▪ 94: Naissance du système GNU/linux
▪ Une nouvelle dynamique des logiciels libres
▪ 96 : CRÉATION DE L'APRIL EN FRANCE
▪ 04 : UBUNTU LINUX
▪ 04 : MOZILLA FIREFOX 1.0
▪ 05 : OPENOFFICE.ORG 2.0
▪ 06 : LE LOGICIEL LIBRE POUR TOUS
14
8. l’utilité des logiciels libres
Source: Tony Wasserman, administrateur siégeant au conseil de l’Open Source Initiative
et professeur en pratique de gestion logicielle

« Quand je discute avec des organisations qui utilisent

principalement des logiciels privés, je constate qu’il est souvent
plus facile de les convaincre d’essayer un ou deux logiciels libres
pour des activités non essentielles. Elles découvrent alors la
grande qualité et les avantages économiques de ces produits. De
plus, des entreprises en démarrage et de petites entreprises
élaborent leur infrastructure de TI à l’aide de logiciels libres»

Voici certains avantages des logiciels libres

15
 9. Avantages des logiciels libres
Compétitivité: les logiciels sont réalisés par des passionnés du domaine, et
généralement, les logiciels libres contiennent des fonctionnalités les plus avancés du
domaine.
Faibles coûts: on ne paie pas de droit de licence pour les logiciels libres et leur
faible coût constitue l’un des facteurs clés qui motivent les entreprises à opter pour
ce type de logiciel

Flexibilité: l’adapter un progiciel standard à vos besoins opérationnels. En général,

vous pouvez engager un programmeur afin d’ajouter une fonction particulière au
logiciel libre

Fiabilité et qualité/ sécurité:

▪ Grâce à l’ouverture du code, l’utilisateur peut corriger les erreurs éventuelles. Les
logiciels libres offrent des garanties de sécurité supérieures à celles des logiciels
propriétaires et ce grâce à :
- un examen préalable du code source du logiciel par des experts,
- en disposant des sources, il est souvent plus rapide de maintenir le niveau de
sécurité (implémentation de nouvelles mesures, détection et correction de failles
éventuelles, ...).
▪ Exemple: Linux, Apache
16
.
 9. Avantages des logiciels libres

Rapidité de changement: les mises à jour des logiciels libres qui en augmentent la
sécurité; sont plus fréquemment disponibles parce qu’un plus grand nombre
d’utilisateurs inspectent les codes et résolvent les vulnérabilités

Disponibilité du soutien technique externe:

▪ Certains fournisseurs offrent des contrats de soutien; installation, configuration et
de l’entretien du système
▪ En outre, de nombreux logiciels libres bénéficient d’un groupe d’internautes actifs
qui offrent également un soutien et qui peuvent répondre à vos questions par
l’intermédiaire de blogues
Favorables à l’interopérabilité
Economique

17
10. Les inconvénients des logiciels libres

Y a-t-il des inconvénients à l’utilisation des logiciels libres?

Absence de soutien personnalisé:

▪ Vous ne pouvez pas compter sur un soutien téléphonique officiel ou sur un soutien
personnalisé par courriel
▪ Certains fournisseurs de services commerciaux offrent le soutien.

Compatibilité continue: dans le monde des logiciels libres, les logiciels sont
modifiés continuellement, ce qui peut représenter un problème quand il s’agit de
s’assurer que le logiciel est compatible avec d’autres applications.

Aucune garantie: les logiciels libres ne sont pas assortis d’une garantie,
puisqu’aucune entreprise ne soutient le produit.
Multitude de versions : trop de choix. Nous trouvons plusieurs logiciels réalisant la
même chose, mais qu'aucun ne soit complet !
Ergonomie souvent perfectible
Manque de documentation

18
11. Catégories de logiciels libres

Bureautique (logiciel de traitement de texte, tableur et logiciel de

présentation)
OpenOffice:
▪ Convient aux personnes et aux entreprises
▪ Comprend une application de traitement de texte, un tableur , un système de
présentation

Conception Web
Nvu:
▪ Prévu pour les utilisateurs sans expertise technique ou en matière de
programmation.
▪ Permet la création de pages Web et la gestion de sites Web.

GIMPShop:
Éditeur d’images, semblable à Adobe Photoshop.
Bluefish:
▪ Éditeur qui cible les programmeurs et les concepteurs Web.
▪ Prend en charge de nombreux langages de programmation et de balisage.
▪ Axé sur la révision de sites Web dynamiques.

19
 11. Catégories de logiciels libres
Navigation Web
Mozilla Firefox:
▪ Rendu des graphiques et chargement des pages plus rapides.
▪ Le navigateur peut être personnalisé pour répondre à des besoins précis.
▪ Fonctions de sécurité très évoluées pour naviguer en toute sûreté.
Logiciel de serveur Web
Apache:
Serveurs Web qui aident à fournir du contenu Web accessible par Internet.

Communications
Pidgin:
▪ Logiciel de messagerie instantanée gratuite.
▪ Permet l’utilisation de tous les comptes de messagerie instantanée en même temps.

Commerce électronique
OsCommerce:
▪ Application de commerce électronique et de gestion de magasin en ligne.
▪ Offre un large éventail de fonctions qui permettent la gestion de magasins en ligne.
▪ Compatible avec n’importe quel serveur Web qui utilise le langage de
programmation Web PHP et la base de données MySQL.
20
 11. Catégories de logiciels libres

VirtueMart:
▪ Solution de commerce électronique à utiliser avec le système de gestion du contenu
Joomla ou Mambo.
▪ Écrit en langage PHP.
▪ Conçu pour s’utiliser facilement dans un environnement PHP/MySQL.
Bases de données
MySQL:
▪ Un des systèmes libres de gestion de bases de données relationnelles les plus utilisés
au monde.
▪ Les utilisateurs peuvent créer et gérer des bases de données MySQL, élaborer des
structures de bases de données, faire des copies de sauvegarde.

Systèmes d’exploitation (distributions Linux exclusivement)

Ubuntu:
Le plus important système d’exploitation Linux maintenu par la communauté –
permet aux utilisateurs de faire appel à un large réseau pour obtenir du soutien.

Fedora:
Représente un système d’exploitation Linux, mis au point dans le cadre du projet
collectif
Fedora est commandité par Red Hat 21
12. Le succès du logiciel libre
FOSDEM 2006
Free and Open Source Software Developers European Meeting 5.000 développeurs
du logiciel libre venus du monde entier

22
12. Le succès du logiciel libre
Serveurs web (février 2012)
Apache (free software) domine le marché des serveurs web (65 % du marché)

23
12. Le succès du logiciel libre
Bureautique
▪ La ville de Munich décide en 2003 de migrer tous leurs PC vers Linux
▪ Taux des ordinateurs équipés avec LibreOffice/OpenOffice en Allemagne 2010
: 21%
...

24
12. Le succès du logiciel libre

Le marché pour le Logiciel Libre

Source : Pierre Audoin Consultants, 2012

25
 12. Le succès du logiciel libre
Utilisation de navigateurs web (janvier 2014)

26
13. Comment savoir si un logiciel libre particulier
convient à mon entreprise?

▪ Depuis combien de temps ce logiciel existe-t-il?

▪ Offre-t-on régulièrement des mises à jour, et de nouvelles fonctions?

▪ Votre entreprise dispose-t-elle des compétences nécessaires à l’installation et à

la maintenance du logiciel?

▪ Les coûts liés au service et au soutien dont vous aurez peut-être besoin sont-ils
raisonnables?

▪ Existe-t-il parmi les utilisateurs de logiciels libres des internautes susceptibles

de fournir un soutien actif, efficace et gratuit (p. ex. dans les forums en ligne)?

▪ Quelles sont les conditions d’utilisation du logiciel?

▪ Existe-t-il de la documentation sur le logiciel? Est-elle complète et cohérente?

27
Développement à Base de
Logiciels Libres
HTML/CSS/PHP

Souheyl Mallat

Année universitaire 2018-2019

28
1 - Les principes
⚫Langages informatiques
⚫Le Web
⚫Le HTML
ὸ Les balises
ὸ Le texte
ὸ Les couleurs
ὸ Les listes

29
 Généralités sur les langages informatiques

Définition:
qu’appelle-t-on langage informatique?

Avantages du langage informatique

Un langage informatique a donc plusieurs avantages :
• il est plus facilement compréhensible que le langage machine,
• il permet une plus grande portabilité, c’est-à-dire une plus grande facilité
d’adaptation sur des machines de types différents.

Catégories du langage informatique:

▪ les langages compilés
- La traduction étant faite une fois pour toute
-Il est plus rapide à l’exécution
- Garantir la sécurité du code source
- Il est moins souple que le programme écrit avec un langage interprété

30
 ▪ les langages interprétés:
• Plus souple
• Problème de sécurité:
- Lisibilité du code
- Non-respect des droits d’auteur
- Non confidentialité du code

Des langages particuliers : les langages du web

31
 Le web (1)
⚫ Tim Berners-Lee est celui qui a créé le World Wide Web
Consortium (W3C).
⚫ Il définit les nouvelles versions des langages liés au Web.
⚫ Il a créé la World Wide Web Foundation qui analyse et suit
l'évolution du Web.

• Il faut savoir que le Web fait partie d'Internet.

Internet est l’ensemble qui comprend: le Web, les e-
Internet
mails, la messagerie et le etc...
instantanée,
Web.

32
Le WEB (2)
⚫ Le Web est défini comme l’ensemble hyperdocumentaire, qui est
formé par la totalité des documents disponibles sur Internet à
travers le protocole : HTTP(serveur HTTP, client HTTP) .

⚫ Par opposition, Internet est l’hyperréseau de transport constitué

par l ’interconnexion des réseaux publics et privés.

Internet et le
Web.

33
Le WEB (3)
⚫ Le Web est assemblage de divers technologies.
⚫ Chaque technologie s’occupe d’un aspect ou problème
particulier de la chaîne:

Normes de contenu
Automatisation de contenu
Transformateurs : XSL
Processeurs : Python,Perl, Php
Templating

34
Le WEB (4)
▪ Relation client serveur
- Avant: HTML

2 étapes

- Maintenant: PHP

Qu’est-ce que peut changer avec PHP

3 étapes

35
Le WEB (5)
il existe des langages spécifiques à la programmation web. On les classes en deux
catégories :

Côté Serveur
L’application côté serveur utilise deux technologies possibles

▪ cgi :le programme est un script (python, bash) ou un binaire (compilé par g++) qui est
chargé dans un processus externe au serveur http. La sortie standard de ce processus est
redirigé dans la réponse envoyée par le serveur au client.
L’inconvénient principal des cgi est la perte de temps nécessitée par la création d’un
processus pour chaque nouvelle requête ;
▪ Module certains serveurs dont Apache ont intégré des modules interprétant des langages de
programmation tels que Perl, PHP. Ainsi, l’interprétation des scripts est beaucoup plus rapide.

Côté Client
L’application côté client peut utiliser plusieurs technologies possibles :
▪ javascript langage de script interprété par le navigateur et permettant de manipuler
l’arborescence du document;
▪ applet Java mini application Java permettant d’utiliser toute la puissance du langage Java
(API, structures de données, ...)
▪ ActionScript langage de script compatible avec JavaScript et permettant de réaliser des
animations Flash ...
36
Le WEB (6)
Avantages et inconvénients

37
 Le WEB (7)

Les langages HTML et CSS sont

à la base du fonctionnement
de tous site web.

L'ordinateur se base sur ce

qu'on lui a programmé en
HTML et CSS pour savoir quoi
afficher, comme le montre la
figure suivante.

38
Le Web (8)
⚫ Pour créer un site web, on donne des instructions à
l'ordinateur.
⚫ Il ne suffit pas de taper le texte qui devra figurer dans
le site ,il faut indiquer où placer ce texte, faire des liens
entre les pages, insérer des images, etc.

⚫ Pour expliquer à l'ordinateur ce qu’on fait, il va falloir utiliser

un langage qu'il comprend.

Il va falloir
apprendre deux
langages
39
Le Web (9)
⚫ HTML (HyperText Markup Language) :
Son rôle est de gérer le contenu. c'est
donc en HTML qu’on écrit ce qui doit
être affiché sur la page : du texte, des
images, des liens…

HTML sans CSS

⚫ CSS (Cascading Style Sheets, aussi
appelées Feuilles de style) : son rôle
est de gérer l'apparence
(positionnement, décoration, couleurs,
taille du texte…) de la page web.

HTML avec CSS

40
 2 - Le HTML (1)
⚫ Le HTML est le langage de description de contenu.

⚫ Il est le seul interprété par un navigateur Web standard pour

produire de l’affichage.

⚫ Il existe d’autres standards plus riches mais qui sont marginaux

(XUL par exemple).

⚫ Le HTML décrit donc le document et ses constituants.

⚫ En plus du texte, il faut écrire des balises, qui donnent des

instructions à l'ordinateur comme « mettre en gras», « afficher
une image », etc.

41
- Le HTML (2)
Principes du langage : Les balises et Les attributs
Les balises :
ὸ Elles sont invisibles à l'écran pour les internautes, mais elles
permettent à l'ordinateur de comprendre ce qu'il doit afficher.

ὸ Les balises se repèrent facilement. Elles sont entourées de «

chevrons », des symboles < et>, comme ceci : <balise>
⚫ Balises à dimension 1 (paires): <a></a>, <p></p>
• Balises à dimension 0 (orpholines): <br>, <img>

⚫ Les éléments formés peuvent se contenir les uns les autres :

ὸ <html><head></head><body></body></html>
⚫ + ou - obligatoires pour préciser des propriétés des éléments
:
ὸ <a href="http://...">un lien</a>

42
Principes du langage : Les balises et Les attributs
Les attributs:
ὸ les attributs sont les options des balises. L'attribut se place après le nom
de la balise ouvrante et a souvent une valeur, comme ceci : <balise
attribut="valeur">

ὸ Exemple : Prenons la balise <img /> .

ὸ Seule, elle ne sert à rien. On pourrait rajouter un attribut qui indique le
nom de l'image à afficher :

<IMG SRC=" photo.jpg. " "> avec SRC = adresse d'une image
⚫ L'ordinateur affiche l'image contenue dans le fichier photo.jpg.

ὸ Dans le cas d'une balise par paire, on ne met les attributs que dans la
balise ouvrante et pas de dans la balise fermante

43
Le HTML (3)
⚫ La constitution du document
o Le document peut donc débuter par :<!DocType html>: précise le type
de document

◦ Un document HTML est un document HTML : <html>...</html>

◦ Un document est de l’information + de la méta-information :

<html><head>...meta...</head><body>…information...</
body></html>

● Le HEAD : (tête) sert à enregistrer des informations

complémentaires (feuilles de styles applicables, mots-clefs, des
scripts à utiliser, des chargements annexes, etc…)

● Le BODY : (corps) Contient la structure de la partie « visible » du

document.

44
Le HTML (4)
Les deux écritures
◦ La forme sérialisée :
<html><head>...meta...</head><body>...information.
..</body></html>

◦ La forme « structurée » :
<html>
<head>
...meta…
</head>
<body>
...information…
</body>
</html>

45
 LES BALISES
ὸ On note que les balises s'ouvrent et se ferment dans un ordre
précis.
ὸ Par exemple, la balise <html>est la première ouverte et c'est
aussi la dernière à fermer (tout à la fin du code, avec</html>).

ὸ Les balises doivent être fermées dans le sens inverse de leur

ouverture. Un exemple :

ὸ <html><body></body></html> : correct. Une balise qui

est ouverte à l'intérieur d'une autre doit aussi être fermée
à l'intérieur.

ὸ <html><body></html></body> : incorrect, les

balises s'entremêlent.

46
L'en-tête <head> et le corps <body>

⚫ Une page web est constituée de deux parties :

ὸ L'en-tête <head> : donne quelques informations

générales sur la page web comme son titre, l'encodage
(pour la gestion des caractères spéciaux), etc.
Les informations de l'en-tête ne sont pas affichées sur la
page.

ὸ Le corps <body> : est la partie principale de la page.

ὸ Tout ce qui est écrit ici sera affiché à l'écran. C'est à
l'intérieur du corps qu’on écrit la majeure partie du code.

47
Les balises d’entête
⚫ Le titre de la page est l'élément le plus important !

⚫ Il est conseillé de garder le titre assez court (en général

moins de 100 caractères).

⚫ Le titre ne s'affiche pas dans la page mais en haut

souvent dans l'onglet du navigateur.

Balise Description
<link /> Liaison avec une feuille de style
<meta /> Métadonnées de la page web ( mots-clés, etc.)
<script> Code JavaScript
<style> Code CSS
<title> Titre de la page
48
 Balises de structuration du texte (du corps)

⚫ On écrit le contenu du site web entre les

balises <body></body>. Il suffit donc de mettre le
paragraphe entre ces deux balises

⚫ La plupart du temps, lorsqu'on écrit du texte dans une page

web, on le fait à l'intérieur de paragraphes.
⚫ Le langage HTML propose la balise <p> pour délimiter les
paragraphes.

⚫ <p> Bonjour et bienvenue sur mon site!!! </p>

⚫<p> signifie « Début du paragraphe » ;
⚫</p> signifie « Fin du paragraphe ».
49
Balises de structuration du texte (du corps)

Balise Description

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<img>
<audio>
<video>
<a>
<br >
<p>
<hr >
<progress> 50
HTML commentaire
Insérer un commentaire: le commentaire est une
balise avec une forme bien spéciale:
<!-- Ceci est un commentaire -->

Insertion d'une ligne:

Il est possible d'insérer une ligne horizontale afin de
séparer deux paragraphes à l'aide de la balise <hr>.
<hr> ne possède pas de contre balise.
Les attributs les plus utilisés de <hr> sont :
SIZE : donne l'épaisseur de la ligne en nombre de pixels.
WIDTH : donne la largeur de la ligne. La largeur peut
être spécifiée en pourcentage par rapport à la largeur
de la page ou en pixels.
ALIGN : cet attribut définit l'alignement. (left, right, center).
Color : attribut pour la couleur
51
 HTML Colors
<html>
<body bgcolor="#E6E6FA">
<center ><h1>Hello
world!</h1></center>
<p>
<font color="#ff0000">
je suis le premier paragraphe, je suis
rouge
</font>
<hr size="2" color="#ff0000">
⚫ </p>
</body>
</html>

52
Textes html
HTML Bold
<p>This text is normal.</p>
<p><b>This text is bold</b>.</p>
HTML Italic
<p>This text is normal.</p>
<p><i>This text is italic</i>.</p>
HTML souligné
<p> texte normal.</p>
<u> texte souligné</u>
HTML Police
<font face="arial" size="7"> je suis un paragraphe, en taille7
avec la police Arial … </font>
HTML Deleted Format
HTML <del> élémentdefinie un texte supprimé (deleted ).
Exemple :<p>My favorite color is <del>blue</del> red.</p>
53
Le HTML (5)
⚫ La constitution d’un document linéaire
◦ Un document textuel se construit selon le principe documentaire
historique (des titres, des sous-titres et des paragraphes) :
...
<body>
<h1>Titre 1 : Première partie</h1>
<h2>Titre 2</h2>
<p> contenu </p>
<h2>Titre 2</h2>
<p> contenu </p>
<h1>Titre 1 : Deuxième partie</h1>
...

54
LISTES NUMÉROTÉES OU ORDONNÉES

Les options suivantes sont possibles :

<ol type=A> par exemple)
TYPE=1 : pour une liste numérotée
<HTML> 1,2,3...
<HEAD>
<TITLE>Liste ordonnée</TITLE> TYPE=A : pour un repérage type
</HEAD> A,B,C...
<BODY> TYPE=a : pour un repérage type a,b,c...
Matières 1ère année Ing TYPE=I : pour une liste numérotée
<ol> I,II,III,IV...
<li>JAVA</li>
<li>Genie logiciel</li> TYPE=i : pour une liste numérotée
<li>Programmation web</li> i,ii,iii,iv...
</ol>
<BODY>
<HTML>

55
 Les listes non ordonnées (ou à puces)
• Une liste non ordonnée ou à puce est une liste dont les articles
sont précédés chacun par une puce.

• Elle est insérée dans une page HTML à l'aide des balises <UL>
… … </UL>.

• L'ajout d'un article à la liste (Liste Item) se fait en plaçant le texte

qui le représente entre les balises <LI> … … </LI>.

56
Les listes de définition
• Une liste de définition (Definition List) est souvent utilisée pour
répertorier des définitions.
• Ainsi les articles de cette liste sont composés d'un terme à définir
(Definition Term), suivi de la (ou des) définitions de ce terme (Definition
Data).
• Une liste de définition est insérée à l'aide des balises <DL> … </DL>.
• L'ajout d'un terme à définir se fait à l'aide des de balises <DT> …</DT>.
• L'ajout des définitions se fait à l'aide des balises <DD> … … </DD>.

57
Attributs spécifiques aux listes

58
59
60
Les listes

61