background preloader

Les balises sémantiques en HTML5 - HTML

Les balises sémantiques en HTML5 - HTML
Dans cet épisode nous allons parler de balises sémantiques, de structure de page, de structure de contenu dans le but d’organiser au mieux votre code pour concevoir de pages web optimisées, le tout en respectant les dernières normes HTML 5 en vigueur. Qu’est-ce qu’une balises sémantiques ? Une balise sémantique est une balise qui donne une indication sur le contenu qu’elle entoure. Comprenez que les balises <div> ou <span> ne peuvent donner aucune indication sur les éléments qu’elles contiennent du fait que la documentation HTML ne donne pratiquement aucune limite au type de contenu possible entre ces balises, ce ne sont donc pas des balises sémantiques. Certaines balises plus récente comme les balises <header>, <footer> ou encore <article> ont alors été ajouté à HTML pour permettre un découpage plus précis de votre page web en délimitant des zones spécifiques. La sémantique a donné un rôle précis à certaines nouvelles balises. Les balises de structure de page Le pied de page avec <footer>

https://ronan-hello.fr/series/html/balises-semantiques-html

Related:  Developpeur webfab33141

CSS3 module: W3C Selectors Résumé Les CSS (Cascading Style Sheets) sont un langage permettant de décrire la restitution de documents HTML et XML à l'écran, sur papier, vocalement, etc. Pour attacher des propriétés stylistiques aux éléments du document, elles utilisent les sélecteurs, qui sont des conditions de sélection de ces éléments. Flexbox Froggy - Un jeu pour apprendre les flexbox CSS Niveau 1 de 24 ▾ Réinitialiser Bienvenue à Flexbox Froggy, un jeu où vous aidez Froggy la grenouille et ses amis en écrivant du code CSS! Guidez cette grenouille au nénuphar à la droite de l'étang en utilisant la propriété justify-content, qui aligne les éléments horizontalement et accepte les valeurs suivantes : flex-start : Les éléments s'alignent au côté gauche du conteneur.flex-end : Les éléments s'alignent au côté droit du conteneur.center : Les éléments s'alignent au centre du conteneur.space-between : Les éléments s'affichent avec un espace égal entre eux.space-around : Les éléments s'affichent avec un espacement égal à l'entour d'eux.

Organisez votre texte - Apprenez à créer votre site web avec HTML5 et CSS3 Bon, la page blanche c'est bien joli, mais votre site web risque d'avoir un succès mitigé si vous le laissez comme cela. Nous allons découvrir de nombreuses balises HTML dans ce chapitre. Certaines existent depuis la toute première version de HTML, d'autres ont été introduites plus récemment dans HTML5. Nous allons voir successivement dans ce chapitre : comment rédiger des paragraphes ;comment structurer sa page avec les titres ;comment donner de l'importance à certains mots de son texte ;comment organiser les informations sous forme de listes.

Apprendre HTML et CSS // Les polices de caractères Nous allons mainteannt voir comment utiliser une autre typo que les polices systèmes. Pour cela, deux choix s'offrent à nous : Google font La première solution consiste à utiliser une police isue de la bibliothèque de Google : Google Font. Manipuler l'historique — Formation Comprendre Git Manipuler l'historique peut parfois s'avérer utile pour corriger un commit mal effectué mais aussi pour préparer une branche avant la fusion. amend L'argument --amend permet de rajouter les fichier en staging dans le commit précédent. Ceci permet de corriger un oubli et d'éviter de faire 10 commits pour la même chose. git commit --amend CSS3 Flexbox Vous connaissez certainement le modèle de boîte classique en CSS et ses dispositions de type “block” ou “inline”, sachez que Flexbox CSS3 a été conçu pour étendre ce périmètre en introduisant un nouveau modèle de boîte distinct, que l’on appellera “le Modèle de boîte flexible”. En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects. Au sein de ce schéma, on ne raisonne plus en “block” ou “inline”, ni même en float ou autres types de boîtes “classiques” CSS, mais en “Modèle de boîte flexible”, dont les quatre possibilités principales sont : Note : ce tutoriel a été initialement rédigé en octobre 2010. Il a subi une refonte intégrale en décembre 2014 pour se mettre à jour.

Nous approchons de plus en plus du but. Si nos pages web ne ressemblent pas encore tout à fait aux sites web que nous connaissons, c'est qu'il nous manque les connaissances nécessaires pour faire la mise en page. En général, une page web est constituée d'un en-tête (tout en haut), de menus de navigation (en haut ou sur les côtés), de différentes sections au centre… et d'un pied de page (tout en bas). Dans ce chapitre, nous allons nous intéresser aux nouvelles balises HTML dédiées à la structuration du site. Couleur de Lien CSS CSS couleur de lien en utilisant une balise HTML En ce qui concerne la couleur de CSS est concerné, les liens ou balises <a> se comportent de la même manière que le texte régulier. Cela signifie pour changer la couleur d'un lien tout ce que vous devez faire est d'utiliser la propriété de couleur CSS dans la balise d'ancrage avec la couleur que vous voulez Hex, dans l'exemple ci-dessous, nous utilisons rouge. Pour les exemples de ce tutoriel, nous allons utiliser un code de couleur Hex, mais rappelez-vous, il ya beaucoup d'autres valeurs possibles de couleurs CSS; consultez notre autre guide CSS pour un aperçu de toutes les différentes façons d'utiliser la couleur dans vos feuilles de style.

Related: