Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Les balises de structure Le contenu de votre page web ne fait pas tout. Il est

Les balises de structure Le contenu de votre page web ne fait pas tout. Il est souvant égrémenté d'un menu, d'une sidebarre et d'un pied de page. Il peut contenir des lanceurs vers d'autres pages ou bien des articles. Tous ces ensembles peuvent (et doivent) être comprises dans des balises qui vont structurer notre page. LES HEADER ET FOOTER Une page est généralement composée d'un header et d'un footer. Le header peut comprendre (liste non exhaustive) : ■ un menu, ■ un logo, ■ des liens vers des réseaux sociaux, ■ … La balise utilisée est <header> , de type bloc. Attention à le pas la confondre ave la balise <head> ! <header>  </header> LES BASES DU HTML LES BASES DU CSS MISE EN FORME DE TEXTE MODÈLE DE BOITE Sémantique, balises et attributs Indentation et commentaires Structure d'une page Balises inline et block Paragraphes et titres Strong, em Listes Images Liens internes, externes et ancres Div et span Les balises de structure Les sélecteurs et les propriétés L 'héritage des propriétés Bien cibler un élément .class et #id La propriété font- La propriété text- Les polices de caractères Les couleurs Les listes Autres propriétés Dimensions et dimensions maximales Le footer reprend en général des liens vers les crédits et les mentions légales, et aussi vers certaines pages qui ne sont pas listées dans le menu : <footer>  </footer> LA NAVIGATION La navigation consiste en une liste d'éléments permettant de naviger entre plusieurs pages de notre site, ou bien vers plusieurs sections d'une même page. On utilise pour cela la balise <nav> contenant une balise <ul> ou <ol> : <nav> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="prortfolio.html">Portfolio</ <li><a href="a_propos.html">À propos</a>< <li><a href="contact.html">Contact</a></l </ul> </nav> LE CONTENU ET LES SECTIONS Le contenu principal de la page internet est compris dans la balise <main> . Il est possible de segmenter le contenu en plusieurs sections via la balise <section> . LES BASES DU HTML LES BASES DU CSS MISE EN FORME DE TEXTE MODÈLE DE BOITE Sémantique, balises et attributs Indentation et commentaires Structure d'une page Balises inline et block Paragraphes et titres Strong, em Listes Images Liens internes, externes et ancres Div et span Les balises de structure Les sélecteurs et les propriétés L 'héritage des propriétés Bien cibler un élément .class et #id La propriété font- La propriété text- Les polices de caractères Les couleurs Les listes Autres propriétés Dimensions et dimensions maximales <main> <p> Texte d'introduction de mon contenu. </p> <section> <h2> Titre de ma section </h2> <p> Texte de ma section. </p> </section> <section> <h2> Titre de ma section </h2> <p> Texte de ma section. </p> </section> </main> LES ARTICLES La balise <article> permet d'incorporer à notre page du contenu annexe, comme par exemple : ■ des articles de blog, ■ des produits, ■ des commentaires, ■ … <main> <p> Texte de mon contenu. Voilà des articles </p> <div> <article> <h2> LES BASES DU HTML LES BASES DU CSS MISE EN FORME DE TEXTE MODÈLE DE BOITE Sémantique, balises et attributs Indentation et commentaires Structure d'une page Balises inline et block Paragraphes et titres Strong, em Listes Images Liens internes, externes et ancres Div et span Les balises de structure Les sélecteurs et les propriétés L 'héritage des propriétés Bien cibler un élément .class et #id La propriété font- La propriété text- Les polices de caractères Les couleurs Les listes Autres propriétés Dimensions et dimensions maximales Titre de mon article </h2> <p> Texte de mon article. </p> </article> <article> <h2> Titre de mon article </h2> <p> Texte de mon article. </p> </article> </div> </main> LA SIDEBARRE La balise </aside> permet d'afficher du contenu qui n'a pas de rapport direct avec le contenu principal, souvant représenté comme une sidebarre : <main> <p> Texte de mon contenu. </p> <aside> <p> Texte sans rapport direct. </p> </aside> </main> LES BASES DU HTML LES BASES DU CSS MISE EN FORME DE TEXTE MODÈLE DE BOITE Sémantique, balises et attributs Indentation et commentaires Structure d'une page Balises inline et block Paragraphes et titres Strong, em Listes Images Liens internes, externes et ancres Div et span Les balises de structure Les sélecteurs et les propriétés L 'héritage des propriétés Bien cibler un élément .class et #id La propriété font- La propriété text- Les polices de caractères Les couleurs Les listes Autres propriétés Dimensions et dimensions maximales EXEMPLE DE PAGE TYPE Maintenant que vous connaissez (presque) toutes les balises HTML, nous allons faire un gros récapitulatif. Voilà la page type que nous allons coder : Et voilà son code : <!DOCTYPE html> <html>  <header>  <nav> <ul> <li><a href="index.html">Accu <li><a href="prortfolio.html" <li><a href="a_propos.html">À <li><a href="contact.html">Co </ul> </nav> </header>  <main> <h1> Titre de ma page </h1> <div> <section> <h2> Titre de ma section </h2> <p> Texte de ma section. </p> </section> <section> <h2> Titre de ma section </h2> <p> Texte de ma section. Avec </p> <div> <article> <h2> Titre de mon arti </h2> <p> Texte de mon arti </p> </article> LES BASES DU HTML LES BASES DU CSS MISE EN FORME DE TEXTE MODÈLE DE BOITE Sémantique, balises et attributs Indentation et commentaires Structure d'une page Balises inline et block Paragraphes et titres Strong, em Listes Images Liens internes, externes et ancres Div et span Les balises de structure Les sélecteurs et les propriétés L 'héritage des propriétés Bien cibler un élément .class et #id La propriété font- La propriété text- Les polices de caractères Les couleurs Les listes Autres propriétés Dimensions et dimensions maximales <article> <h2> Titre de mon arti </h2> <p> Texte de mon arti </p> </article> </div> </section> </div> <aside> <p> Texte sans rapport direct. </p> </aside> </main>  <footer> <p> <small> Copyrights 2018 - PUShAUNE - </small> </p> </footer> </body> </html> Vous avez détecté une faute ou bien un élément incorrect ? Vous pouvez m'en faire part à l'adresse suivante : nicolas.aune@pushaune.com LES BASES DU HTML LES BASES DU CSS MISE EN FORME DE TEXTE MODÈLE DE BOITE Sémantique, balises et attributs Indentation et commentaires Structure d'une page Balises inline et block Paragraphes et titres Strong, em Listes Images Liens internes, externes et ancres Div et span Les balises de structure Les sélecteurs et les propriétés L 'héritage des propriétés Bien cibler un élément .class et #id La propriété font- La propriété text- Les polices de caractères Les couleurs Les listes Autres propriétés Dimensions et dimensions maximales Cours précédent Div et span Cours suivant Les sélecteurs et les propriétés uploads/Ingenierie_Lourd/ apprendre-html-et-css-les-balises-de-structure-pdf.pdf