Exemples HTML
Exemple de balises de base HTML
- Un fichier HTML simple
- Cet exemple est un fichier HTML très simple, utilisant le moins de balises HTML possible. Il vous montre comment le contenu de l'élément body est affiché par le navigateur.
- Paragraphe simple
- Cet exemple montre : comment le texte dans un élément de paragraphe est affiché par le navigateur.
- Plus de paragraphes
- Cet exemple montre certains comportements par défaut des éléments de paragraphe.
- Problème de poésie
- Cet exemple montre certains problèmes de formatage HTML.
- Saut de ligne
- Cet exemple montre l'utilisation du saut de ligne dans un document HTML.
- Titre
- Cet exemple montre les balises pour afficher des titres dans un document HTML.
- Titre centré
- Cet exemple montre un titre centré.
- Ligne horizontale
- Cet exemple montre comment insérer une ligne horizontale.
- Commentaires cachés
- Cet exemple montre comment insérer des commentaires cachés dans le code source HTML.
- Couleur de fond
- Cet exemple montre comment ajouter une couleur de fond à une page HTML.
Exemple de formatage de texte HTML
- Formatage du texte
- Cet exemple montre comment formater du texte dans un fichier HTML.
- Texte préformaté
- Cet exemple montre comment contrôler les lignes vides et les espaces avec le tag pre.
- Tags de "sortie informatique"
- Cet exemple montre l'effet de différents tags de "sortie informatique".
- Adresse
- Cet exemple montre comment écrire des adresses dans un fichier HTML.
- Abréviations et acronymes
- Cet exemple montre comment réaliser des abréviations ou des acronymes.
- Direction du texte
- Cet exemple montre comment changer la direction du texte.
- Citation en bloc
- Cet exemple montre comment réaliser des citations de différentes longueurs.
- Effet de suppression de texte et d'insertion de texte
- Cet exemple montre comment marquer du texte supprimé et du texte inséré.
Exemple de lien HTML
- Créer un hyperlien
- Comment créer des liens dans un document HTML.
- Utiliser une image comme lien
- Ce exemple montre comment utiliser une image comme lien.
- Ouvrir un lien dans une nouvelle fenêtre du navigateur
- Ouvrir une page dans une nouvelle fenêtre du navigateur, de sorte que les visiteurs n'aient pas besoin de quitter votre site.
- Liens vers différentes parties de la même page
- Ce exemple montre comment utiliser un lien pour sauter à une autre partie du document.
- Sortir du cadre
- Ce exemple montre comment sortir d'un cadre, si votre page est bloquée à l'intérieur des cadres.
- Création de liens de courrier électronique
- Ce exemple montre comment lier à un courrier électronique. (Cet exemple ne fonctionne qu'après l'installation d'un programme client de messagerie.)
- Création de liens de courrier électronique 2
- Ce exemple montre des liens de courrier électronique plus complexes.
Exemple de cadre HTML
- Cadre vertical
- Ce exemple montre comment créer un cadre vertical en utilisant trois documents différents.
- Cadre horizontal
- Ce exemple montre comment créer un cadre horizontal en utilisant trois documents différents.
- Comment utiliser le tag <noframes>
- Ce exemple montre comment utiliser le tag <noframes>.
- Structure de cadre mélangé
- Ce exemple montre comment créer une structure de cadre contenant trois documents, tout en les mélangeant en lignes et en colonnes.
- Structure de cadre avec l'attribut noresize="noresize"
- Ce exemple montre la propriété noresize. Dans cet exemple, le cadre ne peut pas être redimensionné. En glissant la souris sur les bords des cadres, vous remarquerez que les bords ne peuvent pas être déplacés.
- Cadre de navigation
- Ce exemple montre comment créer un cadre de navigation. Le cadre de navigation contient une liste de liens visant un second cadre. Le fichier nommé "contents.htm" contient trois liens.
- Cadre en ligne
- Ce exemple montre comment créer un cadre en ligne (cadre dans une page HTML).
- Naviguer vers une section spécifiée dans un cadre
- Ce exemple montre deux cadres. L'un des cadres contient un lien vers une section spécifiée dans un autre fichier. Le fichier "link.htm" contient une section spécifiée en utilisant <a name="C10">.</a>
- Naviguer vers une section spécifiée dans un cadre
- Ce exemple montre deux cadres. Le cadre de navigation de gauche contient une liste de liens, ces liens visent le second cadre. Le second cadre affiche le document lié. Les liens du cadre de navigation pointent vers les sections spécifiées dans le fichier cible.
Exemple de tableau HTML
- Tableau
- Ce exemple montre comment créer un tableau dans un document HTML.
- Bordures du tableau
- Ce exemple montre différents types de bordures de tableau.
- Tableau sans bordure
- Ce exemple montre un tableau sans bordure.
- En-tête du tableau (Heading)
- Ce exemple montre comment afficher l'en-tête du tableau.
- Cellules vides
- Ce exemple montre comment traiter les cellules vides avec " ".
- Tableau avec un titre
- Ce exemple montre un tableau avec un titre (caption).
- Cellules de tableau traversant des lignes ou des colonnes
- Ce exemple montre comment définir des cellules de tableau traversant des lignes ou des colonnes.
- Balises dans le tableau
- Ce exemple montre comment afficher des éléments à l'intérieur de différents éléments.
- Marge des cellules (Cell padding)
- Ce exemple montre comment utiliser le marge des cellules pour créer un espace entre le contenu des cellules et leur bordure.
- Espacement des cellules (Cell spacing)
- Ce exemple montre comment utiliser l'espacement des cellules pour augmenter l'espace entre les cellules.
- Ajouter une couleur de fond ou une image de fond à un tableau
- Ajouter un fond à un tableau
- Ajouter une couleur de fond ou une image de fond à une cellule de tableau
- Ce exemple montre comment ajouter un fond à une ou plusieurs cellules de tableau.
- Aligner le contenu dans les cellules du tableau
- Ce exemple montre comment utiliser l'attribut "align" pour aligner le contenu des cellules, afin de créer un tableau joli.
- Attribut "frame"
- Ce exemple montre comment utiliser l'attribut "frame" pour contrôler les bordures autour du tableau.
Exemple de liste HTML
- Liste non ordonnée
- Ce exemple montre une liste non ordonnée.
- Liste ordonnée
- Ce exemple montre une liste ordonnée.
- Différents types de listes non ordonnées
- Ce exemple montre une liste non ordonnée.
- Différents types de listes numériques
- Ce exemple montre différents types de listes numériques.
- Liste imbriquée
- Ce exemple montre comment imbriquer des listes.
- Liste imbriquée 2
- Ce exemple montre une liste imbriquée plus complexe.
- Liste de définition
- Ce exemple montre une liste de définition.
HTML formulaires et exemples d'entrée
- Champ de texte (Text fields)
- Cet exemple démontre comment créer un champ de texte en HTML. Les utilisateurs peuvent écrire du texte dans le champ de texte.
- Champ de mot de passe
- Cet exemple démontre comment créer un champ de mot de passe en HTML.
- Case à cocher
- Cet exemple démontre comment créer des cases à cocher en HTML. Les utilisateurs peuvent cocher ou décocher les cases à cocher.
- Bouton radio
- Cet exemple démontre comment créer des boutons radio en HTML.
- Liste déroulante simple
- Cet exemple démontre comment créer une liste déroulante simple dans une page HTML. La liste déroulante est une liste optionnelle.
- Une autre liste déroulante
- Un autre exemple de liste déroulante avec une valeur préselectionnée (note du traducteur : une valeur préselectionnée est une préférence préalablement définie).
- Champ de texte (Textarea)
- Cet exemple démontre comment créer un champ de texte (contrôle d'entrée de texte en plusieurs lignes). Les utilisateurs peuvent écrire du texte dans le champ de texte. Dans le champ de texte, le nombre de caractères insérés n'est pas limité.
- Créer un bouton
- Cet exemple démontre comment créer un bouton. Vous pouvez personnaliser le texte sur le bouton.
- Cadre autour des données
- Cet exemple démontre comment dessiner un cadre avec un titre autour des données.
Exemple de formulaire
- Formulaire avec des champs de saisie et un bouton de confirmation
- Cet exemple démontre comment ajouter un formulaire à une page. Ce formulaire contient deux champs de saisie et un bouton de confirmation.
- Formulaire avec des cases à cocher
- Ce formulaire contient deux cases à cocher et un bouton de confirmation.
- Formulaire avec des cases à cocher
- Ce formulaire contient deux cases à cocher et un bouton de confirmation.
- Envoyer un e-mail à partir d'un formulaire
- Cet exemple montre comment envoyer un e-mail à partir d'un formulaire.
Exemple HTML d'image
- Insérer une image
- Cet exemple démontre comment afficher une image sur une page web.
- Insérer une image depuis différents endroits
- Cet exemple démontre comment afficher des images situées dans d'autres dossiers ou serveurs sur une page web.
- Image de fond
- Cet exemple démontre comment ajouter une image de fond à une page HTML.
- Aligner l'image
- Cet exemple démontre comment aligner une image dans le texte.
- Flottante image
- Cet exemple démontre comment faire flotter une image à gauche ou à droite du paragraphe.
- Ajuster la taille de l'image
- Cet exemple démontre comment ajuster la taille de l'image à différentes dimensions.
- Afficher un texte de remplacement pour l'image
- Cet exemple démontre comment afficher un texte de remplacement pour une image. Lorsque l'image ne peut pas être chargée par le navigateur, l'attribut de texte de remplacement informe les lecteurs de l'information perdue. Il est une bonne habitude d'ajouter un attribut de texte de remplacement à toutes les images sur une page.
- Créer un lien d'image
- Cet exemple démontre comment utiliser une image comme lien.
- Créer une carte d'image
- Cet exemple montre comment créer une carte d'image avec des zones cliquables. Chaque zone est un lien hypertexte.
- Transformer une image en carte d'image
- Cet exemple montre comment transformer une image ordinaire en une carte d'image.
Exemple HTML de fond
- Bon mélange de fond et de couleurs
- Exemple d'un bon mélange de couleur de fond et de texte, rendant le texte de la page facile à lire.
- Mauvais mélange de fond et de couleurs
- Exemple où une mauvaise combinaison de couleur de fond et de texte rend le texte de la page difficile à lire.
- Image de fond utilisable
- Exemple où l'image de fond et la couleur du texte rendent le texte de la page facile à lire.
- Image de fond utilisable 2
- Un autre exemple où l'image de fond et la couleur du texte rendent le texte de la page facile à lire.
- Image de fond inutilisable
- Exemple où l'image de fond et la couleur du texte rendent le texte de la page difficile à lire.
Exemple de style HTML (style)
- Style dans l'HTML
- cet exemple montre comment utiliser des informations de style ajoutées à la section <head> pour formater l'HTML.
- Lien sans soulignement
- cet exemple montre comment utiliser une propriété de style pour créer un lien sans soulignement.
- Lien vers une feuille de style externe
- cet exemple montre comment lier un fichier de feuille de style externe avec la balise <link>.
Exemple d'en-tête HTML (head)
- Titre du document
- Les informations de titre à l'intérieur de l'élément en-tête ne s'affichent pas dans la fenêtre du navigateur.
- Un target, tous les liens
- cet exemple montre comment utiliser la balise base pour ouvrir tous les éléments de la page dans une nouvelle fenêtre.
Exemple de métadonnées HTML (meta)
- Description du document
- Les informations dans les éléments Meta peuvent décrire le document HTML.
- Mots-clés du document
- Les informations dans les éléments Meta peuvent décrire les mots-clés du document.
- Redirection
- cet exemple montre comment rediriger l'utilisateur vers une autre adresse après que l'URL a été modifiée.
Exemple de script HTML (Script)
- Insérer un segment de script
- cet exemple montre comment insérer un script dans un document HTML.
- Exécution sur les navigateurs qui ne supportent pas les scripts
- cet exemple montre comment faire face aux navigateurs qui ne supportent pas les scripts.
