Chapitre 2 : Balises structurantes CSS 3ème STI I. Les balises structurantes : I.1. Les balises de groupement : <DIV> et <SPAN> Les balises de groupement sont de deux types •block: les balises ouvrante et fermante produisent un retour à la ligne, •inline: ces balises se trouvent à l’intérieur de balises block et ne produisent pas de retour à la ligne. Les balises universelles : Il existe deux balises universelles dont l’utilisation devrait être uniquement réservée à la mise en forme associée avec des styles CSS, car elles n’ont pas de portée sémantique: •<div>est de type block et représente un «bloc» de page, •<span>est de type inline et concerne donc une portion de paragraphe. II. Les balises HTML5 Plusieurs balises ont été introduites avec HTML5 pour délimiter les différentes zones qui constituent la page web : <header> : en-tête ; <footer> : pied de page ; <nav> : liens principaux de navigation ; <section> : section de page ; <aside> : informations complémentaires ; <article> : article indépendant. II.1. Exemple de page web avec des balises structurantes : Chapitre 2 : Balises structurantes CSS 3ème STI III. La balise <header> : en-tête La plupart des sites web possèdent en général un en-tête, appelé header en anglais. On y trouve le plus souvent un logo, une bannière, le slogan de votre site… Vous devrez placer ces informations à l'intérieur de la balise <header> : <header> <!-- Placez ici le contenu de l'en-tête de votre page --> </header> IV. La balise <footer> : pied de page À l'inverse de l'en-tête, le pied de page se trouve en général tout en bas du document. On y trouve des informations comme des liens de contact, le nom de l'auteur, les mentions légales, etc. <footer> <!-- Placez ici le contenu du pied de page --> </footer> V. La balise <nav> : La balise <nav> doit regrouper tous les principaux liens de navigation du site. Vous y placerez par exemple le menu principal de votre site. Généralement, le menu est réalisé sous forme de liste à puces à l'intérieur de la balise <nav> : <nav> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="forum.html">Forum</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> VI. <section> : une section de page La balise <section> sert à regrouper des contenus en fonction de leur thématique. Elle englobe généralement une portion du contenu au centre de la page. <section> <h1> Ma section de page </h1> <p> </section> </p> Chapitre 2 : Balises structurantes CSS VII. 3ème STI <aside> : informations complémentaires La balise <aside> est conçue pour contenir des informations complémentaires au document que l'on visualise. Ces informations sont généralement placées sur le côté (bien que ce ne soit pas une obligation). <aside> <!-- Placez ici des informations complémentaires --> </aside> VIII. Exemple concret d’utilisation des balises structurantes <body> <header> <h1>Recettes cuisine</h1> <h2>Cuisine Tunisienne</h2> </header> <nav> <ul> <li><a href="#">Gâteaux</a></li> <li><a href="#" > Pattes</a></li> <li><a href="#"> SaladeS</a> </li> </ul> </nav> <section> <aside> <h1>À propos de l'auteur</h1> <article> <h1>Je suis un grand Chef de cuisine</h1> <p> </p> </article> </section> <footer> <p>Copyright Foulen - Tous droits réservés<br /> <a href="#">Me contacter !</a> </p> </footer> </body> </html> <p>C'est moi, Foulen ! Je suis né un 14 Janvier 1994.</p> </aside> Résultat sans mise en forme (texte de l'article) 19 Chapitre 2 : Balises structurantes CSS IX. X. 3ème STI Mise en forme de l’exemple précédent avec feuille de style css : Style.css Résultat avec mise en forme:
