Lundi 11 Décembre 2017, Saint Daniel 

MEZOTICAM::Développement et Évolution informatique



CRÉATION DE SITE

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>



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>



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;
}

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">
...
    


 Mise à jour le 18 Août 2015 


depuis le 15/05/2009