Introduction

Vous allez pouvoir observer trois pages qui illustrent cette distinction structure/contenu et présentation rendue possible par le langage HTML.

Vous devez juste suivre quelques liens, observer et faire le lien avec le cours.

• Rendez-vous sur la page très simple disponible avec ce lien. Vous y verrez le rendu par votre navigateur de l'interprétation de la description d'une page très simple, écrite en HTML. Pour voir la description de cette page en HTML, c'est-à-dire le code source HTML, vous pouvez utiliser les touches CTRL-U ou le menu bouton droit/code source de la page.
• Vous pouvez changer la taille de la fenêtre du navigateur pour mesurer la facilité avec laquelle le navigateur reinterprète et adapte l'affichage de la page. Remarquez les sauts de ligne et le respect des changements de paragraphe.
• Si vous utilisez Firefox, vous pouvez activer le mode lecture. Vous allez voir une adaptation de l'affichage avec un nouveau style. Un petit bouton sur la gauche permet de changer les couleurs et la taille du texte. Néanmoins, ce style est à nouveau prédéfini dans le navigateur.
• Rendez-vous ensuite sur cette page. Vous constaterez que le contenu et sa structure sont rigoureusement identiques, mais cette fois le concepteur du site a fait un choix de présentation qu'il a exprimé dans une feuille de style dont on peut lire les règles ici.
• Rendez-vous enfin sur cette page. La page est un peu plus complète, nous y avons ajouté une image et un menu de navigation, mais le reste du document n'a pas changé. Soyez curieux et essayez de comprendre le code source HTML!

Quelques explications

Le balisage du contenu (le texte) est réalisé par des balises ouvrantes qui marquent le début d'une partie et fermantes qui marquent la fin d'une partie. Une balise ouvrante s'écrit sous la forme <nomDeBalise> et une balise fermante </nomDeBalise>.

Chaque nomDeBalise a un sens particulier. Par exemple <section> signifie début d'une nouvelle partie et </section> signifie fin d'une partie .

De même on trouvera : <H1> qui signifie début de titre de premier niveau et </H1> qui signifie fin de titre de premier niveau.

Vous pouvez tenter de comprendre la suite par vous même, c'est tout à fait possible. Vous pouvez aussi vous inscrire aux options transversales d'informatique pour approfondir vos connaissances dans ce domaine.