Dimanche 14 Septembre 2025 | Croix Glorieuse, La vénération de la Sainte Croix se rattache aux solennités de la dédicace de la basilique de la Résurrection, érigée sur le tombeau du Christ, en 335.
Chiffre 3Chiffre 2Chiffre 8Chiffre 4Chiffre 2Chiffre 4
depuis le 13/04/2012

Expressions - Informations - Partage

CRÉATION DE SITE

Fichiers du site (suite)

   
01 02 03 04 05 06 07 08

Exemple 1

Exemple de fichier index.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 : 

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

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

/*--- Tag de classe Personnalisée ---*/
.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 : 

<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 de classe Personnalisée ---*/
.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-2025  | MEZOTICAM® Camille FRONTON