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 5
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-2024  | MEZOTICAM® Camille FRONTON