HTML Exemples
HTML de base
Attributs HTML
L'attribut title L'attribut href Les attributs width et height L'attribut alt Attribut sans guillemets L'attribut sans guillemets ne fonctionne pas
En-têtes HTML
Paragraphes HTML
Paragraphes HTML Plus de paragraphes HTML L'utilisation des sauts de ligne en HTML Problèmes de poème (certains problèmes de formatage HTML) Comment contrôler les sauts de ligne et les espaces avec la balise <pre>
Styles HTML
Styles HTML Couleur de fond HTML Couleur du texte HTML Police de texte HTML Taille du texte HTML Alignement du texte HTML
Formatage de texte HTML
Formatage en gras avec l'élément <b> Formatage fort avec l'élément <strong> Formatage en italique avec l'élément <i> Formatage accentué avec l'élément <em> Formatage petit avec l'élément <small> Formatage marqué avec l'élément <mark> Formatage marqué supprimé avec l'élément <del> Formatage marqué inséré avec l'élément <ins> Formatage marqué supprimé et inséré avec <del> et <ins> Formatage en indice avec l'élément <sub> Formatage en exposant avec l'élément <sup>
Citations et références HTML
Formatage de courtes citations avec l'élément <q>. Formatage de sections citées avec l'élément <blockquote>. Formatage des informations sur l'auteur/propriétaire du document avec l'élément <address> Formatage des abréviations et acronymes avec l'élément <abbr> Formatage du titre d'une œuvre avec l'élément <cite> Formatage de la direction du texte avec l'élément <bdo>
Commentaires HTML
HTML CSS
HTML avec CSS en ligne HTML avec CSS interne HTML avec CSS externe HTML avec des polices CSS HTML avec CSS utilisant l'attribut id HTML avec CSS utilisant l'attribut class HTML et bordures CSS HTML et padding CSS HTML et marge CSS Démo complète HTML et CSS
Liens HTML
Lien, en utilisant une URL absolue Lien, en utilisant une URL relative Changer la couleur des liens Supprimer le soulignement des liens Changer la cible d'un lien Une image comme lien Créer un lien de signet Un lien qui sort d'un cadre Un lien mailto Un lien mailto avec sujet
Images HTML
Une image Une image avec hauteur et largeur utilisant des attributs Une image avec hauteur et largeur utilisant CSS Une image avec hauteur et largeur utilisant les deux Une image dans un autre dossier Une image avec un lien cassé Une image sur un autre serveur Utiliser une image comme lien Une image animée Une carte d'image avec des régions cliquables Une image flottante
Tables HTML
Tables HTML de base Une table avec des bordures Une table avec des bordures collapsées Une table avec un remplissage de cellule Une table avec des en-têtes Une table avec des en-têtes alignés à gauche En-têtes de table horizontaux/verticaux Une table avec une légende Cellules de table qui s'étendent sur plusieurs colonnes Cellules de table qui s'étendent sur plusieurs lignes Une table avec un espacement de cellule Une table avec des balises HTML à l'intérieur Tables avec un style différent utilisant id I Tables avec un style différent utilisant id II Tables avec un style différent utilisant class I Tables avec un style différent utilisant class II
Listes HTML
Une liste non ordonnée (par défaut) Une liste non ordonnée avec des puces en disque Une liste non ordonnée avec des puces en cercle Une liste non ordonnée avec des puces carrées Une liste non ordonnée sans puces Une liste ordonnée (par défaut) Une liste ordonnée avec des numéros Une liste ordonnée avec des lettres Une liste ordonnée avec des lettres minuscules Une liste ordonnée avec des chiffres romains Une liste ordonnée avec des chiffres romains minuscules Une liste de description Une liste imbriquée I Une liste imbriquée II Une liste horizontale Un menu de liste horizontale
Éléments de bloc et en ligne HTML
Élément Div HTML
Les éléments <div> sont accompagnés de sauts de ligne <div> comme conteneur Alignement central d'un élément <div> Plusieurs éléments <div> Éléments <div> flottants Positionner les éléments <div> avec display:inline-block Positionner les éléments <div> avec display:flex Positionner les éléments <div> avec display:grid
Classes HTML
Styliser tous les éléments avec un nom de classe spécifié Accéder aux éléments avec un nom de classe spécifié, avec JavaScript Classes multiples Même classe, balise différente
HTML Id
Styliser un élément avec un id spécifique Différence entre classe et id Accéder à un élément avec un id spécifique, avec JavaScript
Mise en page HTML
Mise en page utilisant float Mise en page utilisant flexbox Mise en page utilisant flexbox 2 Mise en page utilisant flexbox 3
HTML IFrame
Éléments de tête HTML
Un document HTML valide sans <html> <body> et <head> Un document HTML valide sans élément <head> L'élément <title> définit le titre du document L'élément <style> contient des informations de style L'élément <link> définit une relation avec une ressource externe L'élément <meta> définit des informations méta spéciales L'élément <script> définit des JavaScripts côté client L'élément <base> définit l'URL de base pour toutes les URL
Scripts HTML
Éléments de code informatique HTML
Formatage de l'entrée au clavier avec l'élément <kbd> Formatage de la sortie informatique avec l'élément <samp> Formatage du code de programmation avec l'élément <code> Formatage du code de programmation préservant les espaces et les sauts de ligne Formatage de variable avec l'élément <var>
Formulaires HTML
Formulaire avec saisie de texte Formulaire avec saisie de bouton radio Formulaire avec des champs de texte et un bouton de soumission Formulaire avec des champs de texte sans attribut name Regroupement des données de formulaire
Éléments de formulaire HTML
Une simple liste déroulante Une liste déroulante avec une valeur pré-sélectionnée Une zone de texte (un champ de saisie de texte multi-lignes) Un bouton d'entrée Utilisation de l'élément <datalist> Utilisation de l'élément <output>
Types d'entrée HTML
Type d'entrée texte Type d'entrée mot de passe Type d'entrée bouton radio Type d'entrée case à cocher Type d'entrée bouton Type d'entrée nombre - avec restrictions Type d'entrée nombre - avec étapes Type d'entrée date - avec sélecteur de date Type d'entrée date - avec restrictions Type d'entrée couleur - avec sélecteur de couleur Type d'entrée plage Type d'entrée mois Type d'entrée semaine Type d'entrée heure Type d'entrée datetime-local Type d'entrée email Type d'entrée recherche Type d'entrée tel Type d'entrée url
Attributs d'entrée HTML
L'attribut autocomplete L'attribut novalidate L'attribut autofocus L'attribut form L'attribut formaction L'attribut formenctype L'attribut formmethod L'attribut formnovalidate L'attribut formtarget Les attributs height et width L'attribut list Les attributs min et max L'attribut multiple L'attribut pattern L'attribut placeholder L'attribut required L'attribut step
Graphiques HTML Canvas
Dessiner sur le canevas avec JavaScript Dessiner une ligne avec lineTo() Dessiner un cercle avec arc() Dessiner un texte avec fillText() Dessiner un texte avec strokeText() Dessiner un dégradé linéaire Dessiner un dégradé circulaire Dessiner une image avec drawImage()
Graphiques HTML SVG
Médias HTML
Jouer Bunny Jouer vidéo d'ours avec contrôles Jouer vidéo d'ours avec lecture automatique Jouer son de cheval avec contrôles
Géolocalisation HTML
Obtenir les coordonnées de géolocalisation Gérer les erreurs de géolocalisation Obtenir la géolocalisation et surveiller la position
Stockage local HTML
Stocker un nom de manière permanente Stocker un compteur de manière permanente Stocker un compteur pour une session