From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/html/element/samp/index.html | 167 ++++++++++++++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 files/fr/web/html/element/samp/index.html (limited to 'files/fr/web/html/element/samp') diff --git a/files/fr/web/html/element/samp/index.html b/files/fr/web/html/element/samp/index.html new file mode 100644 index 0000000000..fb4733074b --- /dev/null +++ b/files/fr/web/html/element/samp/index.html @@ -0,0 +1,167 @@ +--- +title: ' : l''élément d''échantillon produit' +slug: Web/HTML/Element/samp +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/samp +--- +
{{HTMLRef}}
+ +

L'élément HTML <samp> est un élément qui permet de représenter un résultat produit par un programme informatique. Il est généralement affiché avec la police à chasse fixe du navigateur (par exemple en Courier ou en Lucida Console).

+ +
{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}
+ + + +

Attributs

+ +

Cet élément inclut uniquement les attributs universels.

+ +

Notes d'utilisation

+ +

Il est possible d'utiliser une règle CSS afin de surcharger la police par défaut utilisée par le navigateur pour les éléments <samp>. On rappelle ici que les préférences de l'utilisateur peuvent également prendre le pas sur les feuilles de styles des documents.

+ +

Voici un exemple de règle permettant de surcharger la police par défaut pour ces éléments :

+ +
samp {
+  font-family: "Courier";
+}
+ +
+

Note : S'il vous faut un élément qui serve de conteneur pour une valeur produite par le site ou l'application, vous devriez utiliser {{HTMLElement("output")}} plutôt que <samp>.

+
+ +

Exemples

+ +

Exemple simple

+ +

HTML

+ +
<p>
+  Texte normal.
+  <samp>Extrait de texte produit par un programme.</samp>
+  Texte normal.
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Sortie incluant une entrée utilisateur

+ +

Il est possible d'imbriquer un élément {{HTMLElement("kbd")}} dans un bloc <samp> afin de représenter un fragment de texte saisi par l'utilisateur. Par exemple, si on souhaite retranscrire une session d'un terminal (sous Linux ou macOS), on pourra utiliser le code suivant.

+ +

HTML

+ +
<pre>
+<samp><span class="prompt">jean@internets:~$</span><kbd>md5 -s "Coucou monde"</kbd>
+MD5 ("Coucou monde") = b961d9fb0ef48ff051fb67625abd0022
+
+<span class="prompt">jean@internets:~$</span> <span class="cursor">█</span></samp></pre>
+ +

On notera l'utilisation de {{HTMLElement("span")}} qui permet de personnaliser l'apparence de certaines portions du texte (comme l'invite ou le curseur). On notera également l'utilisation de <kbd> afin de représenter la commande saisie par l'utilisateur dans l'invite.

+ +

CSS

+ +

Voici la feuille de style que nous utilisons :

+ +
.prompt {
+  color: #b00;
+}
+
+samp > kbd {
+  font-weight: bold;
+}
+
+.cursor {
+  color: #00b;
+}
+ +

Cela permet simplement de colorer légèrement l'invite et le curseur. On utilise du gras pour le texte saisi au clavier.

+ +

Résultat

+ +

{{EmbedLiveSample("Sortie_incluant_une_entrée_utilisateur", 650, 120)}}

+ +

Résumé technique

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, contenu phrasé, contenu tangible.
Contenu autoriséContenu phrasé.
Omission de balises{{no_tag_omission}}
Parents autorisésTout élément acceptant du contenu phrasé.
Rôles ARIA autorisésTous les rôles sont autorisés.
Interface DOM{{domxref("HTMLElement")}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'semantics.html#the-samp-element', '<samp>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-samp-element', '<samp>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<samp>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.samp")}}

+ +

Notes

+ +

On peut appliquer une règle CSS sur le sélecteur samp afin de remplacer la police de caractère par défaut du navigateur.

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf