Exemples HTML
exemple de balises HTML de base
- un fichier HTML simple
- ce fichier HTML est 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 de 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 à l'aide de l'étiquette pre.
- Balises de "sortie informatique"
- Cet exemple montre l'effet de différents balises de "sortie informatique".
- Adresse
- Cet exemple montre comment écrire une adresse dans un fichier HTML.
- Abréviations et initiales abrégées
- Cet exemple montre comment réaliser des abréviations ou des initiales abrégées.
- 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
- Cet exemple montre comment créer un lien dans un document HTML.
- Utiliser une image comme lien
- Cet exemple montre comment utiliser une image comme lien.
- Ouvrir un lien dans une nouvelle fenêtre du navigateur
- Cet exemple montre comment ouvrir une page dans une nouvelle fenêtre du navigateur, de sorte que les visiteurs n'aient pas besoin de quitter votre site.
- Lien vers une autre partie de la même page
- Cet exemple montre comment utiliser un lien pour sauter à une autre partie du document.
- Sortir du cadre
- Cet exemple montre comment sortir du cadre, si votre page est bloquée à l'intérieur d'un cadre.
- Création de liens de courrier électronique
- Cet 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
- Cet exemple montre des liens de courrier électronique plus complexes.
Exemple de cadre HTML
- Cadre vertical
- Cet exemple montre comment créer un cadre vertical à l'aide de trois documents différents.
- Cadre horizontal
- Cet exemple montre comment créer un cadre horizontal à l'aide de trois documents différents.
- Comment utiliser l'étiquette <noframes>
- Cet exemple montre comment utiliser l'étiquette <noframes>.
- Structure de cadre mélangé
- Cet 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"
- Cet exemple montre la propriété noresize. Dans cet exemple, le cadre n'est pas ajustable en taille. En glissant la souris sur les bordures entre les cadres, vous constaterez que les bordures ne peuvent pas être déplacées.
- Cadre de navigation
- Cet 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 (un cadre dans une page HTML).
- Sauter vers un paragraphe spécifique dans un cadre
- Ce exemple montre deux cadres. L'un des cadres contient un lien pointant vers un paragraphe spécifique dans un autre fichier. Le fichier "link.htm" spécifie un paragraphe à l'aide de <a name="C10">.
- Naviguer vers un paragraphe spécifique à l'aide des cadres
- 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 l'élément spécifié dans le fichier cible.
Exemple de tableau HTML
- Tableau
- Cet 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 couvrant plusieurs lignes ou colonnes
- Ce exemple montre comment définir des cellules de tableau qui couvrent plusieurs lignes ou colonnes.
- Balises dans le tableau
- Ce exemple montre comment afficher des éléments dans 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.
- Espace entre les 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 au tableau
- Ajouter une couleur de fond ou une image de fond au 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 une cellule de tableau
- Ce exemple montre comment utiliser l'attribut "align" pour aligner le contenu des cellules pour créer un tableau joli.
- Attribut cadre (frame)
- Ce exemple montre comment utiliser l'attribut "frame" pour contrôler la bordure autour du tableau.
Exemple de liste HTML
- Liste sans ordre
- Ce exemple montre une liste sans ordre.
- Liste numérique
- Ce exemple montre une liste numérique.
- Différents types de listes sans ordre
- Ce exemple montre une liste sans ordre.
- 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 définie
- Ce exemple montre une liste définie.
Exemple de forme HTML et entrée
- Champ de texte (Text fields)
- Cet exemple 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 montre comment créer un champ de mot de passe en HTML.
- Case à cocher
- Cet exemple montre comment créer des cases à cocher en HTML. Les utilisateurs peuvent cocher ou décocher les cases à cocher.
- Bouton radio
- Cet exemple montre comment créer des boutons radio en HTML.
- Liste déroulante simple
- Cet exemple montre comment créer une liste déroulante simple dans une page HTML. La liste déroulante est une liste optionnelle.
- Autre liste déroulante
- Autre 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 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 que l'utilisateur peut écrire n'est pas limité.
- Créer un bouton
- Cet exemple montre comment créer un bouton. Vous pouvez personnaliser le texte sur le bouton.
- Cadre autour des données
- Cet exemple montre comment dessiner un cadre avec un titre autour des données.
Exemple de formulaire
- Formulaire avec des champs d'entrée et un bouton de confirmation
- Cet exemple montre comment ajouter un formulaire à une page. Ce formulaire contient deux champs d'entrée et un bouton de confirmation.
- Formulaire avec des cases à choisir
- Ce formulaire contient deux cases à choisir 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 d'image HTML
- Insérer une image
- Cet exemple montre comment afficher une image sur une page web.
- Insérer une image depuis un emplacement différent
- Cet exemple montre comment afficher des images provenant de différents emplacements ou serveurs sur une page web.
- Image de fond
- Cet exemple montre comment ajouter une image de fond à une page HTML.
- Aligner l'image
- Cet exemple montre comment aligner une image dans le texte.
- Flottant l'image
- Cet exemple montre comment faire flotter une image à gauche ou à droite du paragraphe.
- Ajuster la taille de l'image
- Cet exemple montre comment ajuster la taille de l'image à différentes dimensions.
- Afficher le texte de remplacement pour l'image
- Cet exemple 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 l'attribut de texte de remplacement à toutes les images sur la page.
- Créer un lien d'image
- Cet exemple montre comment utiliser une image comme un 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.
- Convertir une image en carte d'image
- Cet exemple montre comment définir une image ordinaire comme une carte d'image.
Exemple de fond HTML
- Bon choix de couleur et de fond
- Exemple d'une bonne combinaison de couleur de fond et de texte, rendant les textes sur la page faciles à lire.
- Mauvais choix de couleur et de fond
- 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 (style) HTML
- Style dans HTML
- cet exemple montre comment utiliser les informations de style ajoutées à la section <head> pour formatter HTML.
- Lien sans soulignement
- cet exemple montre comment utiliser la 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 en utilisant la balise <link>.
Exemple d'en-tête (head) HTML
- 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 liens de la page dans une nouvelle fenêtre.
Exemple de métadonnées (meta) HTML
- 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 (Script) HTML
- 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.
