Jeudi 21 Novembre 2024 | Présentation de Marie, Présentation de Marie au temple, par Joachim et Anne. Elle est donnée au Seigneur. / Christ, Roi de l'Univers
Chiffre 2Chiffre 9Chiffre 3Chiffre 5Chiffre 7Chiffre 3
depuis le 13/04/2012

Expressions - Informations - Partage

- HTML -

   
01 02 03 04 05 06 07 08 09 10 11 12

Exemple 1

Exemple de fichier index.html : 

<!DOCTYPE html>
<html>
  <head>
    <title>Page d'accueil du site</title>
  </head>
<body>
  <p>Bonjour le monde</p>
  <p>
   Je suis heureux de vous acueillir sur mon site, où je vous présenterai
 mes photos de vacances.<br>
   Voilà ma première image.<br>
  </p>
<div align="center"><img src="images/maphoto.jpg" alt="Ma photo de vacances"></div>
</body>
</html>

Voir l'index simple

Exemple 2

Exemple de fichier index.html avec une mise en page dans le fichier même : 

<!DOCTYPE html>
<html>
<head>
  <title>Page d'accueil du site</title>

<style type="text/css" rel="stylesheet">
/*--- Tag HTML ---*/
body{ 
   color: #0023ef;
   background-color: #06fe0f;
}

/*--- Tag Personnalisé ---*/
.monstyle{
   font-family: Verdana;
   color: #f6feff;
}
</style>
</head>
<body>
<p>Bonjour le monde</p>
<p class="monstyle">
Je suis heureux de vous acueillir sur mon site, où je vous présenterai
 mes photos de vacances.<br />
Voilà ma première image.<br />
</p>
<div align="center"><img src="images/maphoto.jpg" alt="Ma photo de vacances"></div>
</body>
</html>

Voir l'index avec mise en page interne


Exemple 3

Exemple de fichier index.html avec une mise en page dans un fichier .css : 

<!DOCTYPE html>
<html>
  <head>
    <title>Page d'accueil du site</title>
    <link href="monexemple.css" type="text/css" rel="stylesheet" />
  </head>
<body>
  <p>Bonjour le monde</p>
  <p class="monstyle">
   Je suis heureux de vous acueillir sur mon site, où je vous présenterai
 mes photos de vacances.<br />
   Voilà ma première image.<br />
  </p>
  <div align="center"><img src="images/maphoto.jpg" alt="Ma photo de vacances" /></div>
</body>
</html>

Contenu du fichier monexemple.css : 

/*--- Tag HTML ---*/
body{ 
   color:#0023ef;
   background-color:#06fe0f;
}

/*--- Tag Personnalisé ---*/
.monstyle{
   font-family: Verdana;
   color: #f6feff;
}

Voir l'index avec mise en page externe

Le résultat entre l'exemple 2 et l'exemple 3 est absolument identique, mais la différence est grande. En effet, à l'aide d'un fichier .css, tous les fichiers du site pourront accéder à la même mise en page. Et ce grâce, d'une part, à la ligne incluse dans l'en-tête des pages : 

...
  <link href="monexemple.css" type="text/css" rel="stylesheet" />
...

et d'autre part, à l'utilisation des class définies par le programmeur dans ce fichier .css. 

...
  <p class="monstyle">
...
Ma Zone Web :: Expressions - Informations - Partage, ©2012-2024  | MEZOTICAM® Camille FRONTON