_Blank – Etape 17 – Dupli/Création des différentes pages HTML

(avant les manipulations sivantes, penser à ajuster les balises métas)

PrécédentSuivant

1Manipulation

  1. Dans Notepad++ > ouvrir index-ALL.html
  2. Enregistrer le document sous le nom index.html
  3. Enregistrer le document sous le nom page01.html
  4. Enregistrer le document sous le nom page02.html
  5. Enregistrer le document sous le nom page03.html

Explications

la page index_all.html contient tous les élements de l’ensemble des pages créées dans l’opération précédente.
Il faut désormais ne conserver sur les pages index.html, page01.html, page02.html et page03.html que ce qui est nécessaire à chaque page.

Pour rappel, nous avions précédemment commenté les différentes parties.
Pour rappel une page HTML contient un entête – <head> – et un corps – <body>.

Le contenu de chaque page se trouve dans

<!-- PAGE -->
<div class="container">
    …
<!-- /PAGE -->
</div>

2index.html

contient

<!-- ENTETE -->
	<div class="row">
		<header class="twelve columns vert">
		<div id="logo"></div>
		<div class="topnav" id="myTopnav">
		  <a href="index.html">Accueil</a>
		  <a href="page01.html">Page 01</a>
		  <a href="page02.html">Page 02</a>
		  <a href="page03.html">Page 03</a>
		  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
		    <i class="fa fa-bars"></i>
		  </a>
		</div>
		</header>
	<!-- /ENTETE -->
	</div>
	
	<!-- ACCUEIL ligne 1 -->
	<div class="row">
		<div class="twelve columns violet">
		<div class="imgBandeau"></div>
		</div>
	<!-- /ACCUEIL ligne 1 -->
	</div>
	<!-- ACCUEIL ligne 2 -->
	<div class="row appels">
		<article class="four columns magenta">
		<p><i class="fa fa-arrow-circle-up fa-4x" aria-hidden="true"></i></p>
		<p>Ici un service/un produit mis en avant.</p>
		</article>
		<article class="four columns magenta">
		<p><i class="fa fa-arrow-circle-up fa-4x" aria-hidden="true"></i></p>
		<p>Ici un service/un produit mis en avant.</p>
		</article>
		<article class="four columns magenta">
		<p><i class="fa fa-arrow-circle-up fa-4x" aria-hidden="true"></i></p>
		<p>Ici un service/un produit mis en avant.</p>
		</article>
	<!-- /ACCUEIL ligne 2 -->
    </div>
		
	<!-- PIED -->
	<div class="row">
		<footer class="four columns vert">
		<p><b>Identité</b><br>Adresse n° rue - communes</p>
		<p>Tél 00 00 00 00 00</p>
		</footer>
		<footer class="eight columns vert">
		<ul>
		    <li>Contact</li>
		    <li>Mentions légales</li>
		    <li>Politique de confidentialité</li>
		    <li>Cookies</li>
		    <li>Conditions Générales d'Utilisation</li>
		    <li>Conditions Générales de Vente</li>
		</ul>
		</footer>
	<!-- /PIED -->
	</div>

3page01.html

contient

<!-- ENTETE -->
	<div class="row">
		<header class="twelve columns vert">
		<div id="logo"></div>
		<div class="topnav" id="myTopnav">
		  <a href="index.html">Accueil</a>
		  <a href="page01.html">Page 01</a>
		  <a href="page02.html">Page 02</a>
		  <a href="page03.html">Page 03</a>
		  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
		    <i class="fa fa-bars"></i>
		  </a>
		</div>
		</header>
	<!-- /ENTETE -->
	</div>
	
	<!-- 2 COLONNES 2/3+1/3 -->
	<div class="row">
		<main class="eight columns bleu">
		<!-- PROPOS PRINCIPAL -->
		<h1>Consectetuer adipiscingelit</h1>
		<p><img src="images/imgDemo05.jpg" class="imgGauche" />Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa<strong>strong</strong>. Cum sociis natoque penatibuset magnis dis parturient montes, nascetur ridiculusmus. Donec quam felis, ultricies nec, pellentesqueeu, pretium quis, sem. Nulla consequat massa quisenim. Donec pede justo, fringilla vel, aliquet nec,vulputate eget, arcu. In enim justo, rhoncus ut,imperdiet a, venenatis vitae, justo. Nullam dictumfelis eu pede <a href="#">Ici un lien</a>mollis pretium. Integer tincidunt. Cras dapibus.Vivamus elementum semper nisi. Aenean vulputateeleifend tellus. Aenean leo ligula, porttitor eu,consequat vitae, eleifend ac, enim. Aliquam lorem ante,dapibus in, viverra quis, feugiat a, tellus. Phasellusviverra nulla ut metus varius laoreet. Quisque rutrum.Aenean imperdiet. Etiam ultricies nisi vel augue.Curabitur ullamcorper ultricies nisi.</p>
		<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor.</blockquote>
		<h2>Aenean commodo ligula eget massa</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. <b>Aenean commodo ligula</b> eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<h3>Cum sociis natoque penatibus et magnis</h3>
		<p><img src="images/imgDemo05.jpg" class="imgDroit" />Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li>Lorem ipsum dolor sit amet consectetuer.</li>
		  <li>Aenean commodo ligula eget dolor.</li>
		  <li>Aenean massa cum sociis natoque penatibus.</li>
		</ul>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		</main>
		<aside class="four columns orange">
		<!-- PROPOS SECONDAIRE -->
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li><a href="#">Lien possible vers une autre page</a></li>
		  <li><a href="#">Autre lien possible</a></li>
		  <li><a href="#">Relatif aux propos de la page</a></li>
		  <li><a href="#">Eventuellement vers un autre site</a></li>
		</ul>
		</aside>
	<!-- /2 COLONNES 2/3+1/3 -->
	</div>
		
	<!-- PIED -->
	<div class="row">
		<footer class="four columns vert">
		<p><b>Identité</b><br>Adresse n° rue - communes</p>
		<p>Tél 00 00 00 00 00</p>
		</footer>
		<footer class="eight columns vert">
		<ul>
		    <li>Contact</li>
		    <li>Mentions légales</li>
		    <li>Politique de confidentialité</li>
		    <li>Cookies</li>
		    <li>Conditions Générales d'Utilisation</li>
		    <li>Conditions Générales de Vente</li>
		</ul>
		</footer>
	<!-- /PIED -->
	</div>

4page02.html

contient

<!-- ENTETE -->
	<div class="row">
		<header class="twelve columns vert">
		<div id="logo"></div>
		<div class="topnav" id="myTopnav">
		  <a href="index.html">Accueil</a>
		  <a href="page01.html">Page 01</a>
		  <a href="page02.html">Page 02</a>
		  <a href="page03.html">Page 03</a>
		  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
		    <i class="fa fa-bars"></i>
		  </a>
		</div>
		</header>
	<!-- /ENTETE -->
	</div>
	
	<!-- 2 COLONNES 1/3+2/3 ATTENTION L'ORDRE DES COLONNES EST GERE DANS LA FEUILLE DE STYLE-->
	<div class="row inversion">	
		<main class="eight columns bleu bureauDroit">
		<!-- PROPOS PRINCIPAL -->
		<h1>Consectetuer adipiscingelit</h1>
		<p class="imgCentre"><img src="images/imgDemo02.jpg" /></p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa<strong>strong</strong>. Cum sociis natoque penatibuset magnis dis parturient montes, nascetur ridiculusmus. Donec quam felis, ultricies nec, pellentesqueeu, pretium quis, sem. Nulla consequat massa quisenim. Donec pede justo, fringilla vel, aliquet nec,vulputate eget, arcu. In enim justo, rhoncus ut,imperdiet a, venenatis vitae, justo. Nullam dictumfelis eu pede <a href="#">Ici un lien</a>mollis pretium. Integer tincidunt. Cras dapibus.Vivamus elementum semper nisi. Aenean vulputateeleifend tellus. Aenean leo ligula, porttitor eu,consequat vitae, eleifend ac, enim. Aliquam lorem ante,dapibus in, viverra quis, feugiat a, tellus. Phasellusviverra nulla ut metus varius laoreet. Quisque rutrum.Aenean imperdiet. Etiam ultricies nisi vel augue.Curabitur ullamcorper ultricies nisi.</p>
		<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor.</blockquote>
		<h2>Aenean commodo ligula eget massa</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. <b>Aenean commodo ligula</b> eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<h3>Cum sociis natoque penatibus et magnis</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li>Lorem ipsum dolor sit amet consectetuer.</li>
		  <li>Aenean commodo ligula eget dolor.</li>
		  <li>Aenean massa cum sociis natoque penatibus.</li>
		</ul>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		</main>
		<aside class="four columns orange bureauGauche">
		<!-- PROPOS SECONDAIRE -->
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li><a href="#">Lien possible vers une autre page</a></li>
		  <li><a href="#">Autre lien possible</a></li>
		  <li><a href="#">Relatif aux propos de la page</a></li>
		  <li><a href="#">Eventuellement vers un autre site</a></li>
		</ul>
		</aside>
	<!-- /2 COLONNES 1/3+2/3 -->
	</div>
	
	<!-- PIED -->
	<div class="row">
		<footer class="four columns vert">
		<p><b>Identité</b><br>Adresse n° rue - communes</p>
		<p>Tél 00 00 00 00 00</p>
		</footer>
		<footer class="eight columns vert">
		<ul>
		    <li>Contact</li>
		    <li>Mentions légales</li>
		    <li>Politique de confidentialité</li>
		    <li>Cookies</li>
		    <li>Conditions Générales d'Utilisation</li>
		    <li>Conditions Générales de Vente</li>
		</ul>
		</footer>
	<!-- /PIED -->
	</div>

5page03.html

contient

<!-- ENTETE -->
	<div class="row">
		<header class="twelve columns vert">
		<div id="logo"></div>
		<div class="topnav" id="myTopnav">
		  <a href="index.html">Accueil</a>
		  <a href="page01.html">Page 01</a>
		  <a href="page02.html">Page 02</a>
		  <a href="page03.html">Page 03</a>
		  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
		    <i class="fa fa-bars"></i>
		  </a>
		</div>
		</header>
	<!-- /ENTETE -->
	</div>
	
	<!-- PLEINE LARGEUR -->
	<div class="row">
		<main class="twelve columns bleu">
		<!-- PROPOS PRINCIPAL -->
		<h1>Consectetuer adipiscingelit</h1>
		<p><figure class="imgDroit"><img src="images/imgDemo03.jpg" /><figcaption><h1>Le titre de l'image</h1><p>La légende de l'image</p></figcaption></figure>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa<strong>strong</strong>. Cum sociis natoque penatibuset magnis dis parturient montes, nascetur ridiculusmus. Donec quam felis, ultricies nec, pellentesqueeu, pretium quis, sem. Nulla consequat massa quisenim. Donec pede justo, fringilla vel, aliquet nec,vulputate eget, arcu. In enim justo, rhoncus ut,imperdiet a, venenatis vitae, justo. Nullam dictumfelis eu pede <a href="#">Ici un lien</a>mollis pretium. Integer tincidunt. Cras dapibus.Vivamus elementum semper nisi. Aenean vulputateeleifend tellus. Aenean leo ligula, porttitor eu,consequat vitae, eleifend ac, enim. Aliquam lorem ante,dapibus in, viverra quis, feugiat a, tellus. Phasellusviverra nulla ut metus varius laoreet. Quisque rutrum.Aenean imperdiet. Etiam ultricies nisi vel augue.Curabitur ullamcorper ultricies nisi.</p>
		<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor.</blockquote>
		<h2>Aenean commodo ligula eget massa</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. <b>Aenean commodo ligula</b> eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<h3>Cum sociis natoque penatibus et magnis</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li>Lorem ipsum dolor sit amet consectetuer.</li>
		  <li>Aenean commodo ligula eget dolor.</li>
		  <li>Aenean massa cum sociis natoque penatibus.</li>
		</ul>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		</main>
	<!-- /PLEINE LARGEUR -->
	</div>
	
	<!-- PIED -->
	<div class="row">
		<footer class="four columns vert">
		<p><b>Identité</b><br>Adresse n° rue - communes</p>
		<p>Tél 00 00 00 00 00</p>
		</footer>
		<footer class="eight columns vert">
		<ul>
		    <li>Contact</li>
		    <li>Mentions légales</li>
		    <li>Politique de confidentialité</li>
		    <li>Cookies</li>
		    <li>Conditions Générales d'Utilisation</li>
		    <li>Conditions Générales de Vente</li>
		</ul>
		</footer>
	<!-- /PIED -->
	</div>

6Observation

Dans Firefox > Ouvrir/Lire index.html > Cliquer sur les liens de la navigation > …

PrécédentSuivant
Article précédent_Blank – Etape 16 – Ajustement CSS + HTML