Avant propos
Bienvenue dans cette introduction au HTML et au CSS pour les concepteurs UI Dans ce module, vous allez explorer les fondamentaux du HTML et du CSS. En tant que concepteurs d’interfaces utilisateur, il s’agit pour vous d’acquérir une compréhension des bases de ces langages tout en découvrant des outils essentiels comme CodePen et Visual Studio […]
Lexique
HTML HTML (HyperText Markup Language) est un langage de balisage utilisé pour structurer et présenter le contenu sur le web. Contrairement à un langage de programmation, il ne contient pas de logique ou d’algorithmes, mais organise les éléments d’une page à l’aide de balises. Ces balises définissent des structures comme des paragraphes, des titres, des […]
Intégration Web
Intégrer une page web consiste à prendre une maquette (généralement réalisée par un designer avec Figma) et à la transformer en code HTML, CSS, et parfois JavaScript et/ou PHP, pour qu’elle puisse être affichée et utilisée sur un navigateur web. La maquette : c’est une image ou un modèle de ce à quoi la page […]
Recours à l’IA
Consignes pour le cours HTML et CSS : introduction à l’usage de l’intelligence artificielle Dans ce cours, vous apprendrez à écrire et à comprendre le code HTML et CSS à la main (hand writing from scratch). Il est essentiel de prendre le temps de découvrir les bases par vous-même, car taper le code vous permet […]
Chapitre 1 | Présentation de CodePen
Présentation de CodePen Qu’est-ce que CodePen ? CodePen est une plateforme en ligne où vous pouvez écrire et tester vos codes HTML, CSS et JavaScript directement dans votre navigateur. Cela vous permet d’expérimenter rapidement sans avoir besoin d’installer des logiciels sur votre ordinateur. Bienvenue dans ce cours d’initiation au HTML et CSS. Dans cette section, […]
Chapitre 5 | Afficher du texte avec HTML [ p / h ]
Afficher du texte avec HTML Avec HTML, vous allez apprendre à structurer et afficher du contenu textuel sur une page web. Qu’est-ce que HTML ? HTML (HyperText Markup Language) est un langage de balisage qui sert à créer la structure et le contenu d’une page web. Chaque élément HTML est défini par des balises. Les […]
Chapitre 10 | Comprendre la cascade en CSS
Comprendre la cascade en CSS Qu’est-ce que la cascade ? En CSS, la cascade détermine l’ordre de priorité des règles appliquées à un élément lorsque plusieurs styles sont définis. Cet ordre est influencé par : Exemple 1 : Ordre d’apparition HTML : CSS : Résultat : Le texte sera rouge, car la deuxième règle écrase […]
Chapitre 15 | Propriétés CSS pour le style des textes
Exemple de Propriétés CSS pour le style des textes Alignement du texte : text-align La propriété text-align permet de définir l’alignement du texte à l’intérieur de son conteneur.Les options disponibles sont : Exemple : HTML : CSS : Exercice : Transformation de texte : text-transform La propriété text-transform contrôle la casse d’un texte, c’est-à-dire son affichage […]
Chapitre 17 | Sites de références
Parmi les milliers de ressources disponibles, ces deux sites vous serviront de de ressource quand vous avez oublié les valeur ou propriétés ou balise etc… Veuillez les noter sur votre Toolbox. https://developer.mozilla.org/ https://www.w3schools.com Voici des exemples d’articles : https://developer.mozilla.org/en-US/docs/Web/CSS/color https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing https://www.w3schools.com/css/css_font_size.asp https://www.w3schools.com/css/css3_shadows_box.asp
Chapitre 18 | Listes ordonnées et non ordonnées
Les listes permettent d’organiser des informations de manière structurée. En HTML, elles sont très simples à utiliser et peuvent être stylisées avec du CSS pour les rendre plus attrayantes. Voici un exemple minimaliste à tester directement sur CodePen pour bien comprendre leur fonctionnement. Ce que vous verrez
Chapitre 20 | A propos des commentaires
A propos des commentaires Avant de commencer, comme vous l’avez surement remarqué, nous vous invitons à ajouter des commentaires dans votre code : Exemple de commentaires en HTML Exemple de commentaires en CSS
Chapitre 25 | Classes combinées et des déclarations communes
Utilisation des classes combinées et des déclarations communes il est possible de définir des propriétés communes pour plusieurs éléments en créant une classe dédiée (par exemple, titre-commun ou paragraphe-commun). Ensuite, on peut ajouter des classes spécifiques pour apporter des variations à chaque titre ou paragraphe. L’intérêt de cette méthode est d’éviter de répéter les mêmes […]
Chapitre 30 | VS Code & Structure minimale de page HTML5
Utilisation de VS Code et structure minimale d’une page HTML5 Objectifs du chapitre Configuration de VS Code Installer et ouvrir VS CodeSi ce n’est pas déjà fait, téléchargez et installez Visual Studio Code (VS Code) à partir du site officiel. Créer un nouveau fichier HTML Cliquez sur File > New File ou utilisez le raccourci […]
Chapitre 35 | Organiser les fichiers HTML et CSS dans un répertoire
Objectifs du chapitre Organiser les fichiers Créer un répertoire pour le projet Structure obtenue : Lier un fichier CSS à un fichier HTML Ouvrir le fichier index.html dans VS Code Explication : Ouvrir le fichier style.css dans VS Code Tester dans VScode Depuis le fichier HTML affiché sur VScode, clic droit >Show preview. Tester dans […]
Chapitre 40 | Insérer une image dans une page HTML
Insérer une image dans une page HTML Objectifs Dans ce chapitre, l’objectif est d’apprendre à insérer une image dans une page HTML et à travailler sur sa mise en forme avec des styles CSS. Seules des propriétés simples et adaptées au niveau débutant seront utilisées pour se concentrer sur les bases. Structure Étape 1 : […]
Chapitre 50 | Placehold.co pour des images temporaires
Utilisation de Placehold.co pour des images temporaires Objectif Apprendre à utiliser le service Placehold.co pour générer rapidement des images de remplacement dans vos projets HTML et styliser ces images à l’aide de CSS. À propos de Placehold.co Placehold.co est un outil en ligne gratuit qui permet de générer des images temporaires avec des dimensions personnalisées. […]
chapitre 55 | L’indentation en HTML et CSS
L’indentation en HTML et CSS Objectifs : Qu’est-ce que l’indentation ? L’indentation désigne le fait d’ajouter des espaces ou des tabulations au début des lignes de code pour représenter leur hiérarchie logique. Elle permet de : Pourquoi l’indentation est-elle importante ? Éviter les erreurs : Une bonne structure réduit les risques d’oublier de fermer des […]
Chapitre 60 | Gagner en productivité sous VScode
Astuces pour gagner en productivité sous VScode Dans ce chapitre, vous apprendrez à utiliser des techniques simples pour générer rapidement des structures HTML directement dans VSCode. Ces astuces vous permettront de créer efficacement des balises, des classes ou des blocs de texte, tout en minimisant les efforts et les erreurs. Adoptez ces bonnes pratiques pour […]
Chapitre 65 | La fonction « openfolder » et l’affichage multi onglet avec VScode
La fonction « openfolder » et l’affichage multi onglet avec VScode. Dans ce chapitre, nous allons voir comment configurer un projet simple avec HTML et CSS dans Visual Studio Code (VSCode) pour optimiser votre workflow. Vous apprendrez à ouvrir un dossier, diviser l’éditeur en plusieurs panneaux (split editor) et activer la prévisualisation pour travailler efficacement avec trois […]
Chapitre 70 | Balises ouvrantes, fermantes et orphelines
Balises ouvrantes, fermantes et orphelines Aviez-vous remarqué ? Dans le code HTML, certaines balises sont ouvrantes et fermantes, tandis que d’autres ne nécessitent qu’une seule balise : Balises paires (ouvrantes et fermantes) :Elles encadrent un contenu, nécessitant une balise d’ouverture et une balise de fermeture.Exemple avec un paragraphe : Balises orphelines (auto-fermantes) :Elles ne contiennent pas de […]
Chapitre 75 | Vocabulaire essentiel
Vocabulaire essentiel Voici un rappel des termes importants pour bien comprendre le code HTML et CSS utilisé jusqu’ici : Balises HTML Attributs HTML Propriétés CSS Déclarations CSS Classes CSS : avec ou sans point ? L’aviez-vous remarqué ? Lorsqu’on cible une balise comme <p>, il n’y a pas de point devant le sélecteur. Cependant, lorsqu’on souhaite […]
Chapitre 80 | Sélecteurs imbriqués en CSS
Sélecteurs imbriqués en CSS En CSS, les sélecteurs imbriqués permettent de cibler des éléments spécifiques en fonction de leur position ou de leur relation hiérarchique dans le DOM (Document Object Model). Voici une explication simple suivie d’un exercice. Exemple 1 : .parent .enfant .petitenfant Analyse : Exemple HTML : Attention : Si la structure n’est […]
Chapitre 85 | La balise SPAN
La balise <span> Avant de commencer : a propose de la balise HTML : <span>. Exemple simple : HTML : CSS : Dans cet exemple, seule la partie du texte entre <span> et </span> devient rouge.
Chapitre 90 | Comprendre les unités de mesure en CSS
Comprendre les unités de mesure en CSS En CSS, les unités de mesure permettent de définir les tailles d’éléments, notamment pour le texte. Certaines unités sont fixes (absolues), d’autres sont relatives, ce qui les rend adaptatives en fonction du contexte. Note importante avant de commencer Pour effectuer vos tests, vous devez inclure un en-tête HTML […]
Chapitre 80 | Sélecteurs multiples en CSS
Sélecteurs multiples en CSS En CSS, il est possible d’appliquer les mêmes styles à plusieurs éléments en listant leurs sélecteurs, séparés par des virgules. Voici un exemple : Analyse : Attention : Exercice : Appliquer des styles à plusieurs classes Objectif : Créer une page HTML où plusieurs classes partagent le même style, défini dans […]
Chapitre 90 | Intégration d’une vidéo YouTube
Intégration d’une vidéo YouTube dans une page web Objectifs Introduction : à quoi sert un iframe ? Un iframe est un élément HTML qui permet d’intégrer un contenu externe à une page web. Par exemple, vous pouvez afficher une vidéo, un document ou une autre page web à l’intérieur de votre site. Dans ce chapitre, […]
Chapitre 95 | Intégration d’une Google Map
Intégration d’une Google Map Étapes pour obtenir le code depuis Google Maps Veuillez utiliser le code suivant : Résultat attendu Une carte Google Maps montrant Île-aux-Moines en Bretagne. Style Problème des dimensions fixes dans l’iframe Lorsque Google Maps génère un code d’intégration, il inclut des dimensions fixes dans l’iframe avec les attributs width et height. […]
Chapitre 100 | Différencier une Page Web du DOM
Différencier une Page Web du DOM Nous venons d’intégrer une vidéo YouTube. C’est le moment parfait pour comprendre la différence entre le code source de la page et le DOM, le modèle généré par le navigateur. Code source de la page : En affichant le code source (clic droit > « Afficher le code source de […]
Chapitre 105 | Padding et Margin
Padding et Margin Dans une structure HTML, un conteneur parent peut contenir un ou plusieurs éléments enfants. Ces éléments sont disposés à l’intérieur du parent en fonction de deux notions fondamentales en CSS : la marge interne (padding) et la marge externe (margin). Ainsi, le padding agit à l’intérieur du conteneur pour espacer le contenu, […]
Chapitre 110 | Propriétés CSS padding et margin
Explication des propriétés CSS padding et margin En CSS, les propriétés padding et margin permettent de définir des espaces respectivement à l’intérieur (padding) ou à l’extérieur (margin) d’un élément. Leur syntaxe est identique. 1. Syntaxe individuelle : padding-top, padding-right, padding-bottom, padding-left Ces propriétés permettent de définir séparément le padding pour chaque côté d’un élément : […]
Chapitre 115 | Rôle du DIV
Rôle du <div> : diviser pour mieux organiser Organisation spatiale : Un <div> est utilisé pour délimiter des zones distinctes dans une page web. Il crée une séparation claire entre différentes parties du contenu. Exemple : Ici, chaque <div> « divise » visuellement et logiquement le contenu. Un corollaire : regrouper ce qui est divisé : Paradoxalement, […]
Chapitre 120 | Le flux du texte
L’expression « elle n’interrompt pas le flux du texte », utilisée pour la balise <span>, signifie que cette balise ne change pas la disposition naturelle ou la structure du texte autour d’elle. Contrairement à certaines balises dites « bloc » (<div>, <p>, <h1>, etc.), une balise <span> reste « invisible » en termes de mise en forme de base et ne […]
Chapitre 125 | Retour à la ligne [code vs affichage]
Le retour à la ligne dans le code HTML En HTML, lorsque vous écrivez du texte avec des retours à la ligne dans le code (en appuyant sur « Entrée »), cela n’affecte pas directement l’affichage. Le navigateur ignore les espaces inutiles, y compris les sauts de ligne, et affiche tout sur une seule ligne. Exemple Voici […]
Chapitre 130 | Z-index
Z-index Le z-index est une propriété CSS qui permet de gérer l’ordre d’empilement des éléments. Un élément avec une valeur de z-index plus élevée apparaîtra « au-dessus » d’un élément avec une valeur plus basse. Veuillez utiliser CodePen. Cliquez sur EDIT ON COPEPEN. Continuer la lecture pour accéder aux explications et à l’exercice. Explications Dans cet exemple, […]
Chapitre 135 | Position Fixed
La position Fixed Pour ce chapitre veuillez utiliser CodePen. Cliquez sur EDIT ON CODEPEN. Visionnez le résultat et continuez la lecture. Points à retenir sur fixed Exercice:Passez la position à fixed-header à « unset » (comportement par défaut ou hérité) et observez le résultat. La Barre d’entête n’est plus fixe, elle n’est plus épinglée en haut. Sur […]
Chapitre 140 | Position Absolute
Position Absolute Veuillez utiliser CodePen. Cliquez sur EDIT ON COPEPEN. Continuer la lecture pour accéder aux explications et à l’exercice. Étape 2 : Ajout de la position absolute Ajoutons cette règle CSS à la fin du CSS [la cascade impose « celui qui parle en dernier outrepasse les règles précédentes »]. Résultat après modification Explication : pourquoi […]
Chapitre 145 | Fixed vs Absolute
Fixed vs Absolute Veuillez utiliser CodePen. Cliquez sur EDIT ON COPEPEN. Continuer la lecture pour accéder aux explications et à l’exercice. Cas 1 : absolute Ajoutez cette règle CSS à la fin du CSS Résultat : Cas 2 : fixed Modifiez la règle CSS en : Résultat : Cas 3 : relation de absolute au parent […]
Chapitre 150 | Image en Background
Image en Background Veuillez utiliser CodePen. Cliquez sur EDIT ON COPEPEN. Continuer la lecture pour accéder aux explications. Explications détaillées 1. Structure HTML 2. Styles CSS Ce que vous devez retenir Variations d’affichage Veuillez utiliser CodePen. Cliquez sur EDIT ON COPEPEN. Continuer la lecture pour accéder aux explications. Picsum.photos est un service gratuit qui fournit […]
Chapitre 155 | Les Borders
Les Borders Les border en CSS permettent de créer des contours autour d’un élément HTML. Ces contours peuvent être placés sur les 4 côtés (haut, bas, gauche, droite) et être personnalisés avec des épaisseurs, des couleurs, et des styles (solide, pointillé, etc.). Veuillez utiliser CodePen pour vos essais. HTML Étape 1 : Une bordure simple […]
Chapitre 160 | Police de caractère Online
Appel de Police de caractère Online Méthode 100% CSS [@import] Veuillez analyser le code suivant : Comment utiliser Google Fonts pour intégrer une police ? Voici une méthode simple pour expliquer aux débutants comment récupérer le code d’intégration depuis Google Fonts. Exemple simple pour récupérer le code d’intégration Accéder à Google Fonts : Rendez-vous sur […]
Chapitre 165 | Les boutons
CodePen n’accepte pas les liens vers l’extérieur. Veuillez récupérer le code du PEN suivant et faites vos tests avec VSCode.Veuillez changer le texte du bouton « Aller sur Google » et changer la destination. Cliquez sur RERUN (en bas à droite) si vous cliquez sur le lien « Google » du PEN ci-dessous ou bien rafraichissez la page (F5).
Chapitre 170 | Responsive : media queries
Responsive : media queries Voici un exemple simple de code HTML et CSS avec des media queries pour afficher une page avec des couleurs de fond différentes pour desktop, tablette et mobile. Les trois breakpoints définis sont : Exemple interactif Qu’est-ce qu’une media query ? Une media query est une règle CSS qui permet de […]
Chapitre 175 | Pseudo-éléments ::before et ::after
Utilisation des pseudo-éléments ::before et ::after Les pseudo-éléments ::before et ::after permettent d’ajouter du contenu avant ou après un élément HTML, sans modifier directement le HTML, uniquement grâce au CSS. Explications : Application pratique : Ce type de technique est souvent utilisé pour : Exercice Veuillez accéder à ce PEN et effectuer les modifications demandées […]
Chapitre 180 | Les liens Hypertexte
Objectifs pédagogiques Dans cette activité, les apprenants découvriront : Structure du projet link-hypertexte/├── index.html (page principale)├── page1.html (première page secondaire)├── page2.html (seconde page secondaire)├── css/ └── style.css (fichier CSS pour styliser les pages) 1. Fichier CSS : css/style.css Le fichier CSS est conçu pour gérer les différents états des liens, styliser les titres et rendre […]
Chapitre 185 | Les transitions animées
Transition en CSS La propriété transition en CSS permet de rendre les changements de style (comme la couleur, la taille, ou la bordure) progressifs plutôt qu’immédiats. Cela rend les interactions plus fluides et esthétiques. Syntaxe générale de transition transition: propriété durée fonction_de_transition délai; Où placer transition ? Vous placez la propriété transition dans le style […]
Chapitre 190 | Navigation avec des ancres
Navigation avec des ancres Objectifs pédagogiques Dans ce chapitre, il s’agit de : Différence entre ID et classes les ID identifient des éléments uniques, tandis que les classes permettent de styliser plusieurs éléments similaires. Les identifiants (id) : Exemple correct : <section id= »introduction »>…</section> <section id= »conclusion »>…</section> Exemple incorrect (à éviter) : <section id= »introduction »>…</section> <div id= »introduction »>…</div> <!– […]
Chapitre 300 | Flexbox et Grid
La différence entre Flexbox et CSS Grid Flexbox : des boîtes qu’on range librement au sol CSS Grid : des boîtes organisées sur un carrelage La différence clé : Flexbox : vérification technique CSS Grid : vérification technique Information : Elementor utilise Flexbox ou CSS Grid Dans des outils comme Elementor (constructeur de pages pour […]
Chapitre 500 | Base Flex
Base Flex Base Flex (display: flex) HTML <div class= »flex-container »> <div class= »box »>Titre</div> <div class= »box »> <img src= »https://placehold.co/100×100″ alt= »Placeholder Image »> </div> <div class= »box »>Paragraphe<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div> CSS .flex-container { display: flex; /* Conteneur Flexbox standard */ background-color: red; /* Fond pour bien visualiser */ padding: 20px; /* Espace autour des enfants */ gap: 10px; […]
Chapitre 505 | Direction des enfants (flex-direction)
Direction des enfants (flex-direction) Nous allons explorer la propriété flex-direction, qui détermine la direction dans laquelle les enfants d’un conteneur Flexbox sont alignés. Valeurs que nous allons voir : Exemple 1 : flex-direction: row; (par défaut) HTML <div class= »flex-container »> <div class= »box red »>Élément 1</div> <div class= »box green »>Élément 2</div> <div class= »box yellow »>Élément 3</div></div> CSS .red { background-color: […]
Chapitre 510 | Alignement horizontal (justify-content)
Alignement horizontal (justify-content) Propriétés Flexbox : Alignement horizontal (justify-content) La propriété justify-content détermine l’alignement des enfants le long de l’axe principal (horizontal par défaut, sauf si flex-direction est réglé sur column). Valeurs que nous allons voir : Exemple 1 : justify-content: flex-start; (par défaut) HTML <div class= »flex-container »> <div class= »box »>Élément 1</div> <div class= »box »>Élément 2</div> <div class= »box »>Élément […]
Chapitre 510 | Alignement vertical (align-items)
Alignement vertical (align-items) La propriété align-items contrôle l’alignement des enfants sur l’axe secondaire (vertical par défaut si l’axe principal est horizontal). Voici les différentes valeurs que nous allons explorer : Valeurs que nous allons voir : ToolBox : Expérimentez à votre guise…
Chapitre 515 | Gestion des retours à la ligne (flex-wrap)
Gestion des retours à la ligne (flex-wrap) La propriété flex-wrap permet de contrôler si les enfants d’un conteneur Flexbox doivent rester sur une seule ligne ou s’étaler sur plusieurs lignes lorsque l’espace disponible est insuffisant. Valeurs que nous allons explorer : Explication de chaque exemple : Expérimentez… Pour commencer faites varier la taille de width: […]
Chapitre 520 | Alignement des lignes (align-content)
Alignement des lignes (align-content) La propriété align-content contrôle l’alignement des lignes lorsque le conteneur Flexbox contient plusieurs lignes d’enfants (générées avec flex-wrap: wrap ou flex-wrap: wrap-reverse). Elle n’a aucun effet si les enfants sont alignés sur une seule ligne. Valeurs que nous allons explorer : Attention ! Ne pas croire que l’effet est le même […]
Chapitre 525 | Flex : Autres propriétés
Flex : Autres propriétés Pour effectuer l’exercice du chapitre suivant, nous avons vu assez de propriétés Flexbox. Nous n’allons pas aller plus loin dans le détail. Mais pour information voici d’autre pistes à explorer si vous le souhaitez. Gestion de la taille et de l’espace des enfants Alignement individuel d’un enfant
Chapitre 550 | Bâtir une Card avec Flexbox
Bâtir une Card avec Flexbox Voici la procédure complète, du plus petit élément au plus global, afin d’obtenir la structure finale de la carte. L’idée est de partir des contenus internes et d’enrichir progressivement la mise en page à l’aide de Flexbox en indiquant clairement les étapes et l’organisation. N’hésitez pas à mettre des couleurs […]
Chapitre 560 | Les dégradés / Gradients
Explications des exemples 1. Gradient 1 : linear-gradient(45deg, #111618 0%, #232d35 100%) 2. Gradient 2 : linear-gradient(red 10%, 30%, blue 90%) 3. Gradient 3 : Combinaison de 3 dégradés linéaires 4. Gradient 4 : linear-gradient(to right, red, yellow) Découverte Exemples de codehttps://developer.mozilla.org/en-US/docs/Web/CSS/gradient Exemples de générateur de gradient :https://www.w3schools.com/colors/colors_gradient.asp https://cssgradient.io/
Chapitre 570 | Les intégrations SVG
1. En tant qu’image (<img>) La méthode la plus simple consiste à utiliser une balise <img> pour insérer le fichier SVG. HTML : <img src= »image.svg » alt= »Description de l’image SVG »> 2. En tant que fond avec CSS Le SVG peut être utilisé comme une image de fond dans une règle CSS. HTML : <div class= »svg-background »></div> CSS […]
Chapitre 580 | Les Variables couleurs CSS
Les variables de couleurs en CSS Objectifs pédagogiques : Explications simples : Exemple de code à copier dans CodePen HTML (à gauche dans CodePen) : <div class= »section primary »> Bienvenue dans les variables CSS</div><div class= »section secondary »> Faciles à utiliser</div><div class= »section tertiary »> Modifiez une couleur ici pour tout changer</div> CSS (à droite dans CodePen) : /* Définir […]
Chapitre 581 | Autres exemple de variables
Autres exemple de variables Définir flex-direction en tant que variable CSS Si vous souhaitez rendre la propriété flex-direction flexible et configurable à l’aide d’une variable CSS, voici les étapes à suivre : Étape 1 : Définir la variable CSS Vous pouvez définir une variable pour flex-direction, par exemple –flex-direction, et l’utiliser dans la propriété flex-direction. […]
Chapitre 585 | La fonction calc() en CSS
La fonction calc() en CSS 1. Introduction à calc() La fonction calc() permet d’effectuer des calculs directement dans les styles CSS. Elle est particulièrement utile pour créer des mises en page dynamiques en combinant différentes unités de mesure (par exemple, px, %, vh, etc.). 2. Syntaxe de base propriété: calc(valeur1 opération valeur2); 3. Exemples simples […]
Chapitre 590 | Formulaire
Création d’un formulaire simple en HTML et CSS Titre : Formulaire de base en HTML et CSS Objectifs : Code du formulaire HTML <div class= »form-container »> <h2>Formulaire</h2> <form> <label for= »name »>Nom :</label> <input type= »text » id= »name » name= »name » placeholder= »Votre nom »> <label for= »email »>Email :</label> <input type= »email » id= »email » name= »email » placeholder= »Votre email »> <label for= »password »>Mot de passe :</label> <input type= »password » id= »password » name= »password » placeholder= »Votre […]