<!DOCTYPE html>
<html lang="fr"><!-- Ouverture de la balise langage html. -->
<head><!--La balise head permet l'insertion d'une balise titre et de lier une feuille de style
ou les références javascript utilisées au document.
-->
<!-- Spécifie l'encodage des caractéres(par exemple chinois,russe etc...) -->
<meta charset="utf-8" />
<!-- Permet d'attacher la feuille de style css à la page html. -->
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Titre de la page du site obligatoire. -->
<title>Ma Gallerie</title>
</head>
<body><!-- Ici le body contiendra à la fois la balise header,l'article,l'élément aside et le pied de page. -->
<!-- Header contient une div class identifié par l'id bandeau contenant la balise titre h1(ma gallerie) et le navigateur
et ses trois composants insérés dans une balise ul li de classe tiret.-->
<header>
<div class id="bandeau">
<div class id="texteg"><a href="Page1.html"><h1>MA GALERIE</h1></a></div>
<nav>
<ul>
<li class="tiret"><a href="Page3.html">ME CONTACTER</a></li>
<li class="tiret"><a href="Page4.html">LIENS</a></li>
<li><a href="Page2.html">MON PROFIL</a></li>
</ul>
</nav>
</div>
</header>
<!-- La balise article regroupe le corps de la page du site,qui est constitué d'une class div d'id titre contenant
la balise titre h2 contenant MES DERNIÈRES ŒUVRES ainsi q'un paragraphe qui permet de commenter la galerie d'image qui suit,le tout faisant parti intégrante de l'article,cette gallerie d'images est implémentée dans une balise ul li de classe "zoomarticle" contenant une div class="article_big_img" ainsi que les miniatures des images(<img src=) et en cliquant sur ses derniéres l'accés à la version hd de ses images en étant redirigé vers le site de la gallerie(<a href>).-->
<article>
<!-- Ouverture de la balise article -->
<header id="intro">
<h2>MES DERNIÈRES ŒUVRES</h2>
<p>Voici les derniéres oeuvres que j'ai réalisées,je vous invite à les consulter. Chacune d'elle demande plusieurs jours de travail, sans compter les recherches préalables. N'hésitez pas à me contacter si vous souhaitez faire l'acquisition de l'une d'entre elles ou tout simplement pour obtenir des renseignements sur les dimensions ou tout autre détail.</p>
</header>
<!--Galerie intégrée dans une balise ul de classe "images",contenant une balise li et une div respectivement de classe "zoomarticle"
et"article_img" -->
<ul class="images">
<li class="zoomarticle" data-price="120" data-description="TEMPETE EN PLEIN CIEL">
<div class="article_img"></div>
<a href="http://lorempixel.com/800/800/abstract/1/"><img src="http://lorempixel.com/200/200/abstract/1/" alt="Tempete en plein ciel"/></a>
<li data-price="63" data-description="TRIANGLE DE COULEURS">
<div>
<a href="http://lorempixel.com/800/800/abstract/2/"><img src="http://lorempixel.com/200/200/abstract/2/" alt="Triangle de couleurs"></a>
</div>
</li>
<li data-price="230" data-description="TABLEAU ABSTRAIT">
<div>
<a href="http://lorempixel.com/800/800/abstract/3/"><img src="http://lorempixel.com/200/200/abstract/3/" alt="Tableau abstrait"></a>
</div>
</li>
<li data-price="94" data-description="LUMIERES DE NUIT">
<div>
<a href="http://lorempixel.com/800/800/abstract/4/"><img src="http://lorempixel.com/200/200/abstract/4/" alt="Lumieres de nuit"></a>
</div>
</li>
<li data-price="108" data-description="ARBRES D'AUTOMNE">
<div>
<a href="http://lorempixel.com/800/800/abstract/5/"><img src="http://lorempixel.com/200/200/abstract/5/" alt="Arbres d'automne"></a>
</div>
</li>
<li data-price="146" data-description="LA VIE EN ROSE">
<div>
<a href="http://lorempixel.com/800/800/abstract/6/"><img src="http://lorempixel.com/200/200/abstract/6/" alt="La vie en rose"></a>
</div>
</li>
<li data-price="856" data-description="LUMIERES SUR LE LAC">
<div>
<a href="http://lorempixel.com/800/800/abstract/7/"><img src="http://lorempixel.com/200/200/abstract/7/" alt="Lumieres sur le lac"></a>
</div>
</li>
<li data-price="485" data-description=" FEUILLES DE TEMPETE">
<div>
<a href="http://lorempixel.com/800/800/abstract/8/"><img src="http://lorempixel.com/200/200/abstract/8/" alt="Feuilles de tempete"></a>
</div>
</li>
<li data-price="756" data-description="SCINTILLEMENT LUMIERES">
<div>
<a href="http://lorempixel.com/800/800/abstract/9/"><img src="http://lorempixel.com/200/200/abstract/9/" alt="Scintillement lumiere"></a>
</div>
</li>
</ul>
</article>
<!-- fermeture de la balise article -->
<!-- L'élément aside qui est ici un complément d'information peut se trouver aprés la balise article
dans l'ordre hiérarchique, il contient plusieurs balises h2 h3 et h4,ainsi que des éléments div apportant des informations en complément pour joindre par mail ou par courrier le propriétaire des oeuvres, ainsi q'un lien(<a href=) permettant d'envoyer un message par mail.-->
<!-- div class "infos","oh","price" et "description" nécessaire au fonctionnement de l'animation jquery
et demandé dans la consigne pour deux d'entre elles-->
<aside>
<h2>CONTACT</h2>
<h3>Par mail</h3>
<h4><a href="mailto:jl.godasse@gmail.com">jl.godasse@gmail.com</a></h4>
<h3>Par courrier</h3>
<div>Jean-Luc Godasse</div>
<address>12 rue du cherche-midi</address>
<div>13008 Marseille</div>
</aside>
<div class="infos">
<div class="oh"></div>
<div class="price"></div>
<div class="oh"></div>
<div class="description"></div>
</div>
<!--Le footer ou pied de page contient le copyright du propriétaire.-->
<footer><p>© 2015 Jean-Luc Godasse</p></footer>
</body><!-- fermeture de la balise contenant body -->
</html><!-- fermeture de la balise language html -->
.
.Je regarde ça 