silico.biotoul.fr
 

L2 AADB TP BD Resistance

From silico.biotoul.fr

Jump to: navigation, search

Afin de créer la base de données qui s'appellera resistance, connectez vous sur le site http://localhost/phpmyadmin/

Il s'agit d'un serveur Web local (installé sur votre ordinateur). Le programme faisant office de serveur Web s'appelle Apache. Des pages Web dynamiques fournissent une interface Web de gestion de bases de données (phpMyAdmin) pour un serveur de bases de données MySQL.

Ces programmes sont open sources et/ou gratuits et peuvent être installés sur Windows, Linux ou MacOS. Il existe des projets les rassemblant et qui permettent donc une installation rapide pour les néophytes : http://www.wampserver.com pour Windows par exemple.


Image:BD_Resistance_Spreadsheet_Selected_Columns.png

Contents

Création de la base de données

Pour commencer, il faut créer une nouvelle base de données. Pour cela, cliquez sur l'onglet Bases de données. Vous avez alors la possibilité de nommer cette nouvelle base et de cliquez sur le bouton Créer. Cette nouvelle base devrait ensuite s'afficher sur la gauche de la page avec les autres bases existantes (information_schema, mysql et test normalement).

Vous pouvez alors cliquer sur cette nouvelle base pour la sélectionner. Il devrait s'afficher une page vous proposant de créer une nouvelle table.

Si vous désirez supprimer une base, vous pouvez après l'avoir sélectionnée, aller dans l'onglet Opérations, et cliquez sur Supprimer la base de données.

Création de tables

Pour cela, il faut sélectionner une base de données. Puis, dans l'onglet Structure, indiquez le nom de la table ainsi que le nombre de colonnes. D'où l'importance de déterminer à l'avance le schéma de la base de données. Néanmoins, la plupart des systèmes de gestion de bases de données (SGBD) actuels autorisent la modification de la structure de la base (ajout, suppression, renommage de colonnes et autres).

Il va vous falloir créer les tables que vous avez déterminer pour l'étude de la résistance des plantes au microorganisme. Exemple avec la table recueillant les informations sur les lignées des plantes : organisme_pl, cette table a 7 colonnes qui sont les suivantes :

  • id_pl
  • lignee
  • population
  • pays
  • categorie
  • provenance_graines
  • statut

Cette table a été obtenue à partir du projet http://www.medicagohapmap.org/. Sur ce site, les données contenues dans la table sont sur la page http://www.medicagohapmap.org/hapmap/germplasm

Pour créer cette table, après avoir renseigner son nom et qu'elle comporte 7 colonnes, une fenêtre apparaît dans laquelle il faut donner le nom de chaque colonne ainsi que son type.

Il y a différents types disponibles. Les principaux sont les suivant :

  • nombre entier : INT
  • nombre réel : FLOAT
  • texte (sur une seule ligne = chaine de caractères de longueur variable) : VARCHAR(n) avec n la longueur maximale autorisée.
  • texte (sur plusieurs lignes) : TEXT
  • date (attention au format AAAA/MM/JJ) : DATE
  • date et heure : DATETIME
  • etc.

Déterminez le type des attributs et créez la table organisme_pl.

Une fois la table créée, il est encore possible de modifier sa structure. Pour cela, si besoin, il faut cliquer sur la table, puis sur l'onglet structure. Sut cette page, vous pouvez modifier le type d'un attribut, ainsi qu'ajouter ou supprimer des colonnes.

Edition manuelle des données

Une fois que vous aurez créé au moins une table, cliquez sur la page correspondante et créez une nouvelle ligne à partir de l'onglet Insérer.

Après l'insertion, en sélectionnant de nouveau cette table, une partie des lignes qu'elle contient est affichée. Vous devriez donc voir apparaître la ligne que vous venez de créer. Ceci correspond en fait au résultat de la requête de consultation qui s'affiche en début de page (SELECT * FROM ...) ; nous y reviendrons un peu plus tard.

Remarquez qu'il est également possible de modifier les lignes (appelés tuples dans le jargon des bases de données) à partir des liens Modifier, Editer en place, Effacer.

Sauvegarde et restauration d'une base de données

La sauvegarde (appelée souvent dump) se fait dans l'onglet Exporter. Selon que vous êtes sur la page de la base ou sur la page d'une table, l'export se fera soit de la base complète soit de la table sélectionnée.

L'export permet de sauvegarder une image de la structure et des données de la base, ce qui permet de la restaurer sur un autre serveur de base de données (ou le même).

Essayez donc en cliquant sur l'onglet Exporter avec les options par défaut. Enregistrez puis/ou visualisez le fichier avec un éditeur de texte. Il s'agit du langage SQL et des commandes permettant la création de(s) table(s) puis l'insertion des données qu'elles contiennent. Les principales commandes sont donc :

  • CREATE TABLE nom_de_la_table (nom_colonne type_colonne, ...
  • INSERT INTO nom_de_la_table (noms des colonnes concernées) VALUES (valeurs pour ces colonnes)

Maintenant que vous disposez d'une sauvegarde, vous pouvez supprimer votre base de données. Pour la suite du TP, vous allez travailler sur un dump contenant à la fois la structure (création des tables) et un sous-ensemble des données correspondant aux manips 12, 13 et 14.

Vous allez donc restaurer cette image en cliquant sur l'onglet Importer et en fournissant le fichier correspondant à la sauvegarde.

Après avoir restaurer cette image, allez sur la page de la base resistance. Combien y a-t-il de lignes dans chacune des table ?

Explorez les données et déterminez quel accession est le moins sensible (sur la moyenne du brunissement des plantes et des répétitions biologiques).

Requêtes de consultation

La sélection de certaines colonnes d'une table : SELECT ... FROM ...

Nous allons maintenant appréhender le langage SQL permettant d'interroger efficacement le contenu d'une ou plusieurs table. A peu près n'importe quelle requête de consultation se fait à partir d'une seule commande : SELECT

Une des requêtes les plus simples consiste à afficher certaines colonnes d'une table :

SELECT noms des colonnes à afficher
FROM noms des tables concernées

Exemple : pour afficher la totalité du contenu de la table organisme_pl

SELECT *
FROM organisme_pl

ou bien seulement les colonnes accession et lignee :

SELECT id_pl, lignee
FROM organisme_pl

Essayez cette commande à partir de l'onglet SQL.

Le filtrage des lignes affichées : WHERE

Ainsi, pour n'afficher que les accessions venant d'un pays, il suffit de rajouter ce filtre/cette contrainte :

SELECT *
FROM organisme_pl
WHERE pays='Greece'

Combien d'accessions proviennent de Chypre ? de France et du Maroc ?

La partie WHERE permet de spécifier un filtre ou une contrainte pour qu'une ligne soit affichée. Cela correspond en fait a une formule logique qui doit s'interpréter à vrai ou faux ; vrai implique que la ligne sera affichée.

Affichez les fichier, id_boite, num_plant et R1 des plantes dont le brunissement est à 100%. Combien y en a-t-il ?

Afin d'y voir un peu plus clair, on peut trier par identifiant de boite puis par n° de plante pour voir si on a beaucoup de plantes d'une même boite. Pour cela, on rajoute à la requête précédente : ORDER BY id_boite, num_plant

Accès aux données réparties sur plusieurs tables : la jointure

La conception du schéma de la base nous a amenés à morceler les données et à les répartir sur plusieurs tables. Il est donc essentiel de pouvoir faire le lien entre ces informations. Pour cela, vous allez exploiter les clés étrangères.


Dans un premier temps, ajoutez un nouvel organisme pathogène à la table organisme_mo avec les valeurs suivantes :

  • id : PP_INRA-310_V1
  • genre : Phytophthora
  • espèce : parasitica
  • nom : P. parasitica

Ensuite, effectuez la requête suivante :

SELECT *
FROM manip, organisme_mo

Vous constaterez que chaque ligne de la première table est associée à chaque ligne de la 2ème. Il s'agit du produit de 2 tables.

La jointure à l'aide d'un WHERE

Pour n'obtenir que les lignes pour lesquelles le pathogène de la manip correspond au pathogène de la table organisme_mo, il faut ajouter la contrainte que ces attributs aient même valeur :

SELECT *
FROM manip, organisme_mo
WHERE manip.id_mo=organisme_mo.id_mo

La jointure à l'aide d'un JOIN

Cela s'appelle faire une jointure entre ces 2 tables. Une écriture plus lisible de la même requête est la suivante :

SELECT *
FROM manip JOIN organisme_mo ON (manip.id_mo=organisme_mo.id_mo)

Essayez d'écrire les requêtes permettant d'obtenir les informations suivantes :

  • Images et mesures associées à un accession, HM020 par exemple. (id_pl, repetition, num_boite, incoculee, et toutes mes mesures).
  • Distribution du poids des plantes résistantes inoculées.
  • Générer le fichier de départ.


Image:BD_Resistance_Spreadsheet_Selected_Columns.png

Les vues

Il s'agit d'une requête assez lourde du fait des nombreuses jointures entre les différentes tables. Néanmoins, sur une petite base de données comme celle-ci, cela peut simplifier l'écriture de requêtes, notamment celles qui suivent.

Comme le résultat d'une requête est... une table, il est possible de sauvegarder ce résultat dans une table virtuelle que l'on appelle vue (view en anglais), puis par la suite, d'effectuer des requêtes sur cette vue.

Vous trouverez la réponse à la question précédente à la fin du dump que vous avez récupéré :

CREATE VIEW plantes AS SELECT ...

Il est ainsi possible de faire des requêtes sur la vue (table virtuelle) plantes. Exemple, pour afficher les plantes contaminées :

SELECT *
FROM plantes
WHERE contaminee=1


Remarque : l'utilisation d'une telle vue n'est pas indiquée dans le cas où les tables contiennent chacune des milliers de lignes.


  • Afficher les plantes mortes (accession, n° répétition, n° boite, n° plante, inoculée, contaminée) qui ont leurs cotylédons complètement jaunis (sans la vue plantes).
  • Afficher les plantes mortes qui ont leurs cotylédons complètement jaunis (avec la vue plantes).

Le tri : ORDER BY

Il est possible de trier les résultats sur une ou plusieurs colonnes avec l'instruction ORDER BY suivie des n° ou noms de colonnes du résultat, et ceci par ordre croissant (comportement par défaut) ou décroissant en indiquant après chaque colonne ASC (pour le tri par ordre croissant) ou DESC (pour l'ordre décroissant). Exemple :

SELECT *
FROM organisme_pl
WHERE statut != 'In Progress'
ORDER BY pays, provenance_graines DESC, statut

Refaites la requête précédente en affichant d'abord les boites contaminées et en triant par accession et répétition croissantes.

Les fonctions qui "agrègent" des lignes : COUNT, MIN, MAX, ...

  • Afficher le nombre de mesures effectuées. Pour cela, vous aurez besoin de la fonction count : SELECT COUNT(*) FROM ...
  • Afficher le nombre de mesures effectuées à 21 jours.
  • Afficher le nombre maximum de répétitions (fonction MAX).
  • Afficher la moyenne (fonction AVG pour average) du brunissement à 15 jours pour les boites inoculées.

Le regroupement : GROUP BY

  • Il est possible d'agréger des lignes ayant même valeur. Par exemple, on peut regrouper les lignes par accession afin de compter les lignes pour chacun d'entre eux. Ceci se fait avec l'instruction GROUP BY suivie des noms de colonnes pour lesquelles les lignes ayant même valeur vont être agrégées. Exemple, pour obtenir le nombre d'accession par pays :
SELECT pays, COUNT(*)
FROM organisme_pl
GROUP BY pays

Remarque : la recette qui marche presque toujours pour ce type de requêtes est de faire le SELECT sur les colonnes qui nous intéressent (ici pays) en y ajoutant la fonction qui nous intéresse (ici COUNT) et de faire le regroupement sur les colonnes sélectionnées (ici pays). Les autres fonctions disponibles qui "agrègent" des lignes sont la somme (SUM), la moyenne (AVG), le minimum (MIN), le maximum (MAX), ...

  • Effectuer la même requête que dans l'exemple en triant par ordre décroissant le nombre d'accession et en triant les noms des pays par ordre alphabétique.
  • Afficher le nombre de boites par accession.
  • Afficher la moyenne du pourcentage de brunissement par boite.

Le filtrage après regroupement : GROUP BY + HAVING

Quelques fois, on souhaite filtrer les résultats après regroupement plutôt qu'avant, par exemple sur le résultat du AVG+GROUP BY plutôt que sur les données contenues dans la table de départ. Dans ce cas, il n'est pas possible de filtrer avec un WHERE habituel ; il faut utiliser l'instruction HAVING qui applique le filtre après le regroupement du GROUP BY. Par exemple, pour afficher les pays pour lesquels on dispose d'au moins 20 accessions :

SELECT pays, COUNT(*)
FROM organisme_pl
GROUP BY pays
HAVING COUNT(*)>=20
  • Afficher la moyenne du pourcentage de brunissement par boite des plantes résistantes uniquement.
  • Afficher les informations sur la boite, et le brunissement moyen à 15 et 21 jours en triant sur le pourcentage de brunissement, en n'affichant que les boites inoculées non contaminées.
  • Le nombre de racines secondaires par accession résistant (dont le pourcentage de brunissement est inférieur à 100%).

Synthèse des éléments d'une requête

SELECT   -- choix des colonnes.                           ex: id_pl, num_boite AS plante, count(*)
FROM     -- choix des tables.                             ex: organisme_pl p JOIN boite b ON (p.id_pl=b.id_pl)
WHERE    -- filtre éventuel sur les lignes à afficher.    ex: b.inoculee=1 AND b.contaminee=0
GROUP BY -- regroupement éventuel de lignes.              ex: id_pl, num_boite
HAVING   -- filtre sur les valeurs des lignes regroupées  ex: AVG(poids_matiere_fraiche)>1
ORDER BY -- tri des résultats                             ex: 3 DESC

Génération de rapports

Structure et éléments d'un document HTML

Un document HTML est un document texte interprété (le plus souvent) par le navigateur. Une page Web est constituée d'une entête (head) suivie d'un corps (body). Dans l'entête, il est possible de spécifier le titre de la page, et de faire appel à d'autres fichiers, notamment des feuilles de styles (css) qui définissent comment doivent s'afficher (couleur, taille, ...) les différents éléments du document (niveau de titre, paragraphe, lien hypertexte, ...).

Exemple :

<html>
   <head>
      <title>Titre de la page, ex: liste des manips effectuées</title>
   </head>
   <body>
      <h1>Titre 1 : Manips</h1> 
        <h2>Manip 12</h2>
          Date de mise en culture du microorganisme : <b>12/06/2011</b><br/>
          Date de stérilisation : <b>12/06/2011</b><br/>
          Date de production de zoospores: <b>20/06/2011</b><br/>
          ...
 
     <h2>Manip 13</h2>
          Etc.
   </body>
</html>

Principaux éléments structuraux :

  • paragraphe : <p>...</p>
  • balises de titre : h1, h2, h3, ...
  • retour à la ligne : <br/>
  • lien vers une autre page : <a href="http://silico.biotoul.fr">texte du lien, en l'occurrence ici c'est le serveur silico</a>
  • ligne horizontale : <hr/>
  • liste à puces :
    • pour commencer la liste soit <ul> (unordered list, c'est à dire des tirets) soit <ol> (ordered list, c'est à dire que les tirets sont remplacés par des numéros).
    • Ensuite, chaque élément (item) de la liste est délimité par les balises <li>texte</li> (li pour list item)
    • puis fin de la liste avec la balise fermante </ul> ou </ol>
  • insertion d'une image : <img src="adresse de l'image"/>

Mise en forme du texte :

  • texte en gras : <b>texte en caractères gras</b>
  • italique : i
  • souligné : u (pour underlined)
  • en exposant et indice : x² s'écrit x<sup>2</sup> (balise sub pour l'indice)
  • couleur et taille du texte : <font color="red" size="+2">ce texte apparaitra en rouge avec une taille légèrement plus importante</font>

Pour en savoir plus sur le format HTML, les balises disponibles (tag) ainsi que leurs paramètres, vous pouvez consulter

Page Web générées dynamiquement

Il existe de multiples solutions qui consistent en des programmes écrits en différents langages de. Ici, nous utiliserons PHP ; un langage moderne largement répandu pour la réalisation de sites Web dynamique. Le site officiel est http://php.net sur lequel vous trouverez la documentation officielle en français.

Le principe est d'écrire une page Web en HTML et d'y insérer du code PHP entre les balises <?php ... ?>

Ce code est exécuté par le serveur Web, et le résultat est renvoyé au client (navigateur).

Un premier exemple, affichage de l'heure :

<html>
  <head><title>Heure locale</title></head>
  <body>
    <?php ini_set('error_reporting', E_ALL); // permet d'afficher les messages d'erreur s'il y en a dans le code PHP ?> 
 
    Il est actuellement <?php print date('H:i:d'); ?>
 
  </body>
</html>

les branchement conditionnels : if

Les branchements conditionnels servent à réaliser une action seulement lorsqu'une condition est remplie.

Par exemple, pour déterminer si nous sommes une année bissextile l'annoncer avec l'heure locale :

<html>
  <head><title>Heure locale</title></head>
  <body>
    Nous somme le <?php print date('j/m/Y'); ?>.<br/>
    <br/>
    L'année <?php 
      print date('Y'); 
      if (date('L')==1) {
        print " est une année bissextile.";
      }
      else {
        print " n'est pas bissextile.";
      }
    ?> <br/>
    <br/>
    Il est actuellement <?php print date('H:i:d'); ?>
 
  </body>
</html>


les itérations : while et for

Le deuxième élément essentiel, après les branchements conditionnels, correspond aux itérations, c'est-à-dire à répéter un certain nombre de fois une ou plusieurs actions, ou bien de manière plus générale, à répéter une action tant qu'un condition est satisfaite. La plupart des langages de programmation propose au moins les deux solutions suivantes.

  • while : tant que

Nous allons continuer l'exemple précédent et afficher la prochaine année bissextile.

<?php
   $annee = date('Y') + 1;
   // mktime (h, min, sec, mois, jour, année) créé une date en secondes
   // date('L', date en seconde) renvoie 1 si l'année est bissextile
   while ( date('L', mktime(0, 0, 0, 1, 1, $annee)) != 1) {
      $annee = $annee + 1;
   }
?>
Le prochain 29 février sera en <?php print $annee; ?>
  • for : pour une série de valeurs

Et maintenant, les années bissextiles pour les 20 prochaines années :

   <?php
   $annee = date('Y');
   // une boucle for a 3 paramètres :
   // l'initialisation effectuée avant la première itération : ici $i=1 pour l'année prochaine
   // la condition pour effectuer une itération : ici $i<=20 pour s'arrêter après la 20ième année
   // une action a effectuer après chaque itération : ici $i++ qui incrémente i (passage à l'année suivante)
   for ($i=1 ; $i<=20 ; $i++) {
      if (date('L' , mktime(0,0,0,1,1, $annee+$i )) == 1) {
         print $annee+$i;
         print ' ';
      }
   }
   ?>

Connexion à un serveur de base de données

Il est possible de se connecter à un serveur de bases de données avec PHP et d'effectuer des requêtes. C'est d'ailleurs essentiellement ce que propose phpMyAdmin que vous avez utilisé pour créer la base de données.

  • connexion au serveur et sélection de la base de données à utiliser
<?php
$lien = mysql_connect('localhost','nom_utilisateur','mot_de_passe');
if ( !$lien ) {
  die("Impossible de se connecter : " . mysql_error());
}
$bd = mysql_select_db('resistance');
if ( !$bd ) {
  die ('Impossible de sélectionner la base de données : ' . mysql_error());
}
?>

Une fois la connexion établie, on peut effectuer des requêtes et afficher le résultat, par exemple pour lister les accessions : sélection de la base de données

// Récupération du lien vers le résultats de la requête
$ressource = mysql_query("SELECT id_pl AS accession, pays FROM organisme_pl");
 
// traitement ligne par ligne
while ($ligne = mysql_fetch_assoc($ressource)) {
   print "Hapmap: <b>".$ligne['accession']."</b> en provenance de ".$ligne['pays']."<br/>";
}

Créer une page accession.php qui détaille les informations disponibles pour un accession (par défaut HM001) :

  • la provenance (pays), la lignée, la population, ... (tout ce qu'il y a dans la table organisme_pl)
  • la liste des boites avec pour chacune d'elle :
    • n° manip, répétition, n° boite, inoculée, contaminée, poids, nombre de plantes,
    • à 15 et 21 jours la moyenne de : pourcentage de brunissement, les R1, les R2, le jaunisement des cotylédons,
    • à 15 et 21 jours, le nombre de plantes mortes
  • les résultats des mesures toutes répétitions et manips confondues (moyenne des pourcentages de brunissement à 15j et 21j, du jaunissement des cotylédons à 15 et 21 jours, le nombre de morts et le poids des plantes, pour les boites inoculées non contaminées).

Un exemple de résultat est disponible ici. Après avoir atteint cette page, il est possible d'afficher les informations d'un autre accession en modifiant manuellement l'adresse de la page, exemple pour l'accession HM009 : http://silico.biotoul.fr/enseignement/L2-Biologie/resistance/accession.php?id=HM009

Nous allons voir qu'il possible de récupérer ce paramètre à l'intérieur du script accession.php à travers des variables spéciales, $_GET ou $_POST, qui contiennent les paramètres entrés dans un formulaire Web.

A partir de lien précédent, notez que l'on spécifie après le '?' id=HM009, ceci est récupéré dans le script accession.php dans la variable $_GET['id'] qui vaudra alors 'HM009'.

Fort de ces informations, vous pouvez maintenant écrire un script qui génère la liste des accessions (avec différentes informations) et qui propose un lien vers les détails d'un accession. Ceci devrait ressembler à la page suivante : http://silico.biotoul.fr/enseignement/L2-Biologie/resistance

Les formulaires

Les formulaires sont composés de balises HTML dédiées permettant de définir différents types de champs à remplir par l'utilisateur :

  • champs texte (une seule ligne ou plusieurs, ou bien encore pour un mot de passe dont les caractères seront masqués)
  • case à cocher
  • bouton radio (sélection exclusivement d'un seul élément parmi un choix)
  • liste de sélection
  • fichier à envoyer
  • bouton

Un exemple de ces éléments vous est donné sur cette page.

Un formulaire possède en général au moins un bouton pour le soumettre (submit). Un click sur le bouton submit envoie les données du formulaire mais auparavant il faut spécifier à quelle adresse (quelle page) les données vont être envoyées et avec quel protocole (get ou post). A votre niveau, la différence entre ces 2 protocoles est la quantité de données que l'on peut envoyer : un requête get à une taille limitée et une requête post permet d'envoyer davantage de données (pour l'envoie de fichiers notamment). Exemple d'un formulaire complet pour spécifier l'identifiant hapmap :

<form method="get" action="accession.php">
Entrez le n° d'accession hapmap <input type="text" name="hapmap_id"/>
<input type="submit" value="Afficher"/>
</form>

Dans ce cas, l'utilisateur peut entrer HM009 par exemple et cliquer sur Afficher, les données du formulaire seront envoyées au script accession.php (valeur de l'attribut action) que vous avez normalement écrit dans l'exercice précédent. Dans ce script, on pourra récupérer l'accession fourni par l'utilisateur à travers la variable $_GET['hapmap_id']. Remarque : si on spécifie post dans l'attribut méthode, on récupérera la valeur entrée dans la variable $_POST['hapmap_id'].

A présent, vous avez toutes les compétences pour proposer un formulaire de recherche avancée qui permette par exemple de filtrer les accessions ou les boites par :

  • pourcentage de brunissement à 15 et/ou 21 jours,
  • jaunissement des cotylédons,
  • n°manip, de répétition, ...,
  • si la boite a été inoculée, contaminée,
  • ...

et qui propose le lien vers la description détaillée de l'accession/la boite.

Un peu de style

La mise en forme et le positionnement des éléments sur une page Web peut se faire de différentes manières. Par exemple, avec les balises HTML : vous avez vu la définition de la couleur et de la taille de la police. Il est également possible de redéfinir le style de chaque élément. Ceci ce fait avec des feuilles de style, soit en début de fichier HTML (dans l'entête <head>...</head>) soit dans un fichier séparé.

Directement dans l'entête :

<html>
 <head>
  <style type="text/css">
    body {
      font-family: arial, sans-serif;
      font-size: 110%;
      color: blue;
    }
 
    a:link    {color:green;}
    a:visited {color:green;}
    a:hover   {color:red;}
    a:active  {color:yellow;} 
 
    h1, h2, h3 {
      border-bottom: 1px solid black;
    }
 
  </style>
  ...
 </head>

Dans cet exemple, le texte inclus entre les balises body sera affiché de préférence avec la police arial (si disponible) et sinon avec une police de la famille sans-serif.

Les déclarations suivantes permettent de redéfinir l'aspect d'un lien : de couleur verte (si déjà visité ou non) et rouge lorsque la souris est positionnée dessus, et jaune lorsque l'on clique dessus.

Enfin, les titres 1, 2 et 3 seront soulignés d'un trait noir.

Les possibilités offertes par CSS sont assez nombreuses et variées concernant le formatage et la disposition des éléments d'une page. Vous pouvez rechercher des tutoriels i vous désirez en apprendre davantage.

Remarque: Pour appliquer un style ponctuellement à un élément, on peut rajouter l'attribut style à n'importe quel élément sur la page :

 <h1 style="margin-left: 30px; color: red; font-size: 200%;">Titre 1 reformaté</h1>

Annexes