HTML (HyperText Markup Language) : Langage de balisage utilisé pour structurer le contenu d'une page web en utilisant des éléments appelés balises. Il définit la structure initiale d'une page en intégrant texte, images, liens, etc.
Balise : Marqueur délimitant un élément HTML, généralement composée d'une balise ouvrante <tag> et d'une balise fermante </tag>. Elle sert à indiquer le début et la fin d’un contenu ou d’une structure.
Élément HTML : Ensemble constitué d'une balise ouvrante, d’un contenu et d’une balise fermante, formant une unité sémantique ou structurelle dans la page.
Balises sémantiques : Balises qui décrivent le rôle ou la signification du contenu qu’elles contiennent, comme <header>, <nav>, <article>, améliorant l’accessibilité et le référencement.
Attribut : Information supplémentaire ajoutée à une balise pour en préciser le comportement ou l’aspect, par exemple href dans <a> ou src dans <img>.
<!DOCTYPE html>), la balise <html>, le <head> (métadonnées, titre) et le <body> (contenu visible).<div>, <p>) ou inline (occupent seulement la largeur du contenu, comme <span>, <a>).Le HTML structure le contenu d'une page web à travers des balises, dont la sémantique est essentielle pour une meilleure accessibilité et un référencement optimisé. La maîtrise de la hiérarchie et des attributs permet de créer des pages claires et efficaces.
CSS (Cascading Style Sheets) : Feuilles de style en cascade permettant de définir la présentation visuelle d’un document HTML. Elles séparent la structure du contenu (HTML) de son apparence (style).
Sélecteur CSS : Expression permettant de cibler un ou plusieurs éléments HTML pour leur appliquer des styles. Exemples : #id, .class, element.
Propriété CSS : Attribut qui définit une caractéristique visuelle d’un ou plusieurs éléments ciblés par un sélecteur. Exemple : color, font-size, margin.
Cascade : Mécanisme par lequel plusieurs règles CSS peuvent s’appliquer à un même élément, avec une hiérarchie de priorité pour déterminer le style final.
Box Model : Modèle conceptuel représentant la boîte englobante de chaque élément HTML, composée de quatre parties : contenu, padding, border, margin.
Séparation du contenu et de la présentation : CSS permet de modifier l’apparence sans toucher au HTML, facilitant la maintenance et la cohérence du design.
Héritage et spécificité : Certaines propriétés CSS sont héritées par les éléments enfants, mais la priorité d’application dépend de la spécificité des sélecteurs et de l’ordre des règles.
Unités de mesure : CSS utilise différentes unités comme px, em, %, vh, vw pour définir les dimensions, marges, paddings, etc.
Cascading et priorité : Lorsqu’il y a conflit entre plusieurs règles, la priorité est donnée par la spécificité du sélecteur, puis par l’ordre d’apparition dans le code.
Responsive Design : Utilisation de techniques comme les media queries pour adapter la présentation aux différents appareils (ordinateurs, mobiles, tablettes).
Le CSS est un outil puissant pour styliser un site web, en séparant la structure du contenu de son apparence, ce qui facilite la création de designs cohérents et adaptatifs. La maîtrise des sélecteurs, du box model et des principes de cascade est essentielle pour un style efficace et maintenable.
Événement (Event) : Action ou occurrence (clic, survol, soumission, etc.) déclenchant l'exécution d'une fonction JavaScript.
Exemple : clic sur un bouton.
Gestionnaire d'événements (Event Listener) : Fonction attachée à un élément HTML pour répondre à un événement spécifique.
Exemple : element.addEventListener('click', fonction);
Manipulation du DOM (Document Object Model) : Processus de modification dynamique de la structure, du contenu ou du style d'une page web via JavaScript.
Exemple : changer le texte d’un paragraphe.
Fonction (Function) : Bloc de code réutilisable permettant d’effectuer une tâche spécifique, souvent utilisée pour gérer des interactions.
Exemple : fonction appelée lors d’un clic.
Propriétés et Méthodes DOM : Attributs (propriétés) et actions (méthodes) permettant de manipuler les éléments HTML.
Exemple : element.style.color ou element.setAttribute().
Manipulation d’éléments (Element Selection) : Techniques pour sélectionner des éléments HTML à l’aide de méthodes comme getElementById, querySelector, etc., afin de les modifier ou d’y attacher des événements.
L’interaction en JavaScript repose sur la détection d’événements utilisateur et la manipulation dynamique du DOM, permettant de créer des interfaces web réactives et intuitives.
Flexbox (Flexible Box Layout)
Mise en page CSS permettant d'organiser, d'aligner et de distribuer l'espace entre les éléments d'un conteneur, même lorsque leur taille est inconnue ou dynamique.
Point essentiel : Facilite la création de layouts flexibles et adaptatifs en ligne ou en colonne.
Grid (CSS Grid Layout)
Système de grille bidimensionnelle CSS permettant de définir des lignes et colonnes pour positionner précisément les éléments.
Point essentiel : Idéal pour des mises en page complexes avec contrôle précis de la disposition.
Propriété display
Propriété CSS qui définit le mode de rendu d'un élément, par exemple display: flex; ou display: grid;.
Point essentiel : Active le mode Flexbox ou Grid sur un conteneur.
Alignement (align-items, justify-content)
Propriétés CSS permettant d'aligner et de distribuer les éléments à l'intérieur d'un conteneur.
Point essentiel : Contrôlent la position des éléments en ligne ou en colonne dans Flexbox et Grid.
Fr (fraction)
Unité CSS spécifique à Grid pour répartir l'espace disponible en fractions.
Point essentiel : Facilite la création de grilles fluides et proportionnelles.
display doit être appliquée sur le conteneur pour activer Flexbox ou Grid.justify-content et align-items contrôlent l'alignement horizontal et vertical dans Flexbox.grid-template-columns et grid-template-rows définissent la structure de la grille.fr dans Grid permettent de créer des proportions dynamiques.Flexbox et Grid sont deux systèmes puissants pour créer des mises en page modernes, flexibles et adaptatives. Flexbox est idéal pour une disposition en ligne ou en colonne, tandis que Grid offre un contrôle précis sur une grille bidimensionnelle.
<header>, <nav>, <main>, <footer>), facilitant la compréhension pour les technologies d'assistance.alt) : Description textuelle d'une image permettant aux utilisateurs de lecteurs d'écran de comprendre le contenu visuel.L'accessibilité web est une démarche essentielle pour rendre les contenus numériques universellement utilisables, en respectant des standards qui facilitent la navigation et la compréhension pour tous, notamment les personnes en situation de handicap.
L’optimisation de la performance web repose sur la réduction des ressources transférées, la gestion efficace du cache et le chargement différé, garantissant un site rapide et réactif pour l’utilisateur.
SASS (Syntactically Awesome Stylesheets) : Un préprocesseur CSS qui étend les fonctionnalités de CSS en permettant l'utilisation de variables, de mixins, de fonctions et de nesting pour rendre le code plus modulaire et maintenable.
Variables : Éléments permettant de stocker des valeurs réutilisables (couleurs, tailles, polices), facilitant la gestion des styles et la cohérence du design.
Nestings (Imbrications) : Fonctionnalité qui permet d'écrire des sélecteurs CSS imbriqués, rendant la code plus lisible et hiérarchique, en reflétant la structure HTML.
Mixins : Blocs de code réutilisables contenant des déclarations CSS, pouvant accepter des paramètres pour générer des styles dynamiques et éviter la répétition.
Partials (Fichiers partiels) : Fichiers SASS incomplets, généralement nommés avec un underscore (_), qui sont inclus dans d’autres fichiers pour organiser le code en modules.
Compilation : Processus de transformation du code SASS en CSS standard, effectué via des outils en ligne de commande ou des extensions dans les éditeurs de code.
SASS facilite la gestion de projets CSS complexes grâce à ses fonctionnalités avancées, permettant une meilleure organisation et une maintenance simplifiée du code.
La syntaxe de SASS peut être soit indentée (sans accolades ni points-virgules) ou SCSS (similaire à CSS avec accolades et points-virgules), SCSS étant la syntaxe la plus couramment utilisée.
La compilation de SASS en CSS peut se faire via des outils comme Node-sass, Dart Sass ou des extensions intégrées dans les IDE, permettant de générer un fichier CSS prêt à l’emploi.
L’utilisation de variables, mixins et nesting permet de réduire la duplication, d’assurer la cohérence et d’accélérer le développement des feuilles de style.
La modularité via les partials facilite la gestion de grands projets en séparant les styles en plusieurs fichiers, puis en les combinant lors de la compilation.
Le préprocesseur SASS transforme un CSS plus dynamique, modulaire et maintenable, en utilisant des fonctionnalités avancées comme variables, mixins et nesting, avant de compiler en CSS standard exploitable par les navigateurs.
BEM (Block, Element, Modifier) : Méthodologie de nommage pour organiser le CSS en composants réutilisables et maintenables. Elle divise l'interface en blocs, éléments et modificateurs pour clarifier la structure et la hiérarchie du style.
Block (Bloc) : Composant autonome et réutilisable, représenté par un nom unique. Exemple : .menu, .card.
Element (Élément) : Partie intégrante d’un bloc, dépendante du bloc, séparée par deux underscores (__). Exemple : .menu__item, .card__title.
Modifier (Modificateur) : Variante ou état d’un bloc ou d’un élément, séparée par deux tirets (--). Exemple : .button--primary, .card--featured.
Nomenclature : Convention de nommage claire et cohérente permettant d’identifier rapidement la relation entre blocs, éléments et modificateurs, facilitant la lecture et la maintenance du code.
Avantages de BEM : Améliore la modularité, la réutilisabilité, la compréhension du code CSS, et facilite la gestion des styles dans de grands projets.
block__element--modifier.La méthodologie BEM structure le CSS en composants modulaires grâce à un système de nommage précis, ce qui facilite la maintenance, la réutilisation et la compréhension du code dans des projets front-end complexes.
Animation CSS : Technique permettant de modifier progressivement les propriétés d’un élément HTML sur une durée donnée, créant un effet de mouvement ou de transition. Elle se réalise via la propriété animation ou ses sous-propriétés (@keyframes, animation-name, animation-duration, etc.).
@keyframes : Règle CSS utilisée pour définir une séquence d’étapes d’une animation. Elle décrit comment les propriétés d’un élément évoluent au fil du temps, en précisant des états initiaux, intermédiaires et finaux.
Propriétés d’animation : Ensemble de propriétés CSS qui contrôlent le comportement de l’animation, telles que :
animation-name : nom de la séquence @keyframes.animation-duration : durée totale de l’animation.animation-delay : délai avant le début de l’animation.animation-iteration-count : nombre de fois que l’animation se répète.animation-timing-function : courbe de vitesse de l’animation (ex : ease, linear, ease-in-out).Transitions CSS : Effets de changement progressif d’une propriété CSS lorsqu’elle passe d’un état à un autre, généralement déclenchés par un événement (survol, clic). Elles utilisent la propriété transition et sont plus simples que les animations.
Effet de hover : Utilisation de la pseudo-classe :hover pour déclencher une animation ou une transition lors du passage de la souris sur un élément, permettant d’ajouter des effets interactifs.
@keyframes définit la séquence d’états d’une animation, en utilisant des pourcentages ou les mots-clés from et to.animation ou ses sous-propriétés permettent de spécifier la séquence, la durée, le délai, le nombre de répétitions et la courbe d’accélération.Les animations CSS, via @keyframes et la propriété animation, offrent une manière efficace et performante d’enrichir l’expérience utilisateur en apportant fluidité et interactivité, sans recourir à des scripts JavaScript.
DOM (Document Object Model) : Modèle de représentation d’un document HTML ou XML sous forme d’arbre hiérarchique où chaque élément est un nœud. Il permet de manipuler dynamiquement le contenu, la structure et le style d’une page web via JavaScript.
Nœud (Node) : Élément individuel dans l’arbre DOM, représentant une balise, un texte ou un attribut. Exemple : un paragraphe <p> ou un texte à l’intérieur.
Manipulation DOM : Ensemble des opérations permettant de créer, supprimer, modifier ou déplacer des éléments du DOM en utilisant JavaScript. Elle inclut des méthodes comme createElement(), appendChild(), removeChild(), setAttribute(), etc.
Événements (Events) : Actions ou occurrences (clic, survol, chargement, etc.) auxquelles le DOM peut réagir. La gestion des événements se fait via des écouteurs (addEventListener) pour déclencher des fonctions en réponse.
Méthodes de sélection : Fonctions permettant de cibler des éléments du DOM, telles que getElementById(), getElementsByClassName(), querySelector(), querySelectorAll(). Elles facilitent la manipulation ciblée.
createElement) permet d’ajouter du contenu sans recharger la page.Le DOM est la clé pour rendre une page web interactive et dynamique ; maîtriser sa manipulation via JavaScript permet de créer des interfaces utilisateur réactives et évolutives.
| Aspect | HTML | CSS | JavaScript | Flexbox & Grid |
|---|---|---|---|---|
| Objectif | Structurer le contenu d’une page | Styliser et mettre en forme le contenu | Rendre la page interactive et dynamique | Organiser la mise en page en layout flexible et précis |
| Balise / Sélecteur | <tag> (ex : <div>, <p>) | Sélecteur (#id, .class, element) | getElementById, querySelector | display: flex;, display: grid; |
| Propriété clé | Attributs (href, src, alt) | color, margin, padding, grid-template-columns | innerHTML, addEventListener, style | justify-content, align-items, grid-template-rows |
| Structure | Déclaration DOCTYPE, <html>, <head>, <body> | Modèle en cascade, héritage, box model | Manipulation du DOM, gestion des événements | Conteneurs avec display: flex/grid, propriétés d’alignement |
| Utilité principale | Créer la structure sémantique | Appliquer la présentation visuelle | Ajouter de l’interactivité | Créer des layouts adaptatifs et complexes |
inline et block : certains éléments peuvent changer de comportement selon leur contexte.onclick en HTML au lieu de addEventListener.display sur le conteneur ou mal configurer grid-template.em, px, %, vh, fr : choisir la mauvaise unité pour le contexte.Teste seu conhecimento sobre Introduction aux fondamentaux du développement web com 9 perguntas de múltipla escolha com correções detalhadas.
1. Qu'est-ce que HTML ?
2. Quelle balise HTML est utilisée pour structurer le contenu principal et est considérée comme sémantique ?
Memorize os conceitos chave de Introduction aux fondamentaux du développement web com 10 flashcards interativos.
HTML — rôle ?
Structure le contenu d'une page web
HTML — définition?
Langage de balisage pour structurer le contenu.
Balise — définition ?
Marqueur délimitant un élément HTML
Intelligence Artificielle
Bases de données
Importe seu curso e a IA gera fichas, quizzes e flashcards em 30 segundos.
Gerador de fichas