Quelques exemples de galeries

Pour vous aider avec le TP en libre service, voici quelques exemples de galeries d'images simples. Pour voir comment elles sont faites, Menu « View », « Page Source » (Control-U) sous Firefox.

Pour des galeries plus évoluées, vous pouvez regarder n'importe quelle galerie d'image sur Internet !

• html_simple/ : une page HTML, pour voir à quoi ça ressemble.

• galerie_triviale/ : sans doute le code HTML le plus simple possible : on utilise juste la balise <img>, et son attribut src="..." pour désigner le fichier à afficher. A noter que cette version est un peut trop simple pour être vraie : il manque quelques détails pour obtenir du HTML correct (mais il s'affiche tout de même correctement dans le navigateur).

• galerie_legende/ : on ajoute un texte sous la photo. L'image et le texte sont groupés dans un cadre, avec la balise <div>. On a aussi ajouté l'attribut alt="..." de la balise <img>, pas très utile pour nous, mais utilisée par exemple par les aveugles qui ne peuvent pas voir l'image. La première ligne (<DOCTYPE ...>) dit à notre navigateur que la page est en HTML (version 4).

  Cette fois-ci, on peut vérifier avec le validateur en ligne que la page de contient pas d'erreur HTML

• galerie_style/ : on ajoute un peu de décoration à l'ensemble. Les balises <img>, <div> et <span> ont maintenant un attribut class="...", qui fait référence à une déclaration de style en début de fichier. Si vous voulez plus de détails, voir par exemple le tutorial de W3Schools

  Cette fois-ci, on a corrigé toutes les erreurs et warnings (sauf un qui dit que le validateur HTML5 est expérimental, ce n'est pas notre faute), et on se fait féliciter par le W3C ;-).