diff options
Diffstat (limited to 'files/fr/web/html/element/samp/index.md')
| -rw-r--r-- | files/fr/web/html/element/samp/index.md | 216 |
1 files changed, 113 insertions, 103 deletions
diff --git a/files/fr/web/html/element/samp/index.md b/files/fr/web/html/element/samp/index.md index f6b73cc9e6..613be3c1b4 100644 --- a/files/fr/web/html/element/samp/index.md +++ b/files/fr/web/html/element/samp/index.md @@ -8,156 +8,166 @@ tags: - Web translation_of: Web/HTML/Element/samp --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>L'élément HTML <strong><code><samp></code></strong> 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).</p> +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). -<div>{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}</div> +{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels). -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> +## Notes d'utilisation -<p>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 <code><samp></code>. On rappelle ici que les préférences de l'utilisateur peuvent également prendre le pas sur les feuilles de styles des documents.</p> +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. -<p>Voici un exemple de règle permettant de surcharger la police par défaut pour ces éléments :</p> +Voici un exemple de règle permettant de surcharger la police par défaut pour ces éléments : -<pre class="brush: css">samp { +```css +samp { font-family: "Courier"; -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> 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 <code><samp></code>.</p> -</div> +> **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>`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Exemple_simple">Exemple simple</h3> +### Exemple simple -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><p> +```html +<p> Texte normal. - <samp>Extrait de texte produit par un programme.</samp> + <samp>Extrait de texte produit par un programme.</samp> Texte normal. -</p> -</pre> +</p> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("Exemples")}}</p> +{{EmbedLiveSample("Exemples")}} -<h3 id="Sortie_incluant_une_entrée_utilisateur">Sortie incluant une entrée utilisateur</h3> +### Sortie incluant une entrée utilisateur -<p>Il est possible d'imbriquer un élément {{HTMLElement("kbd")}} dans un bloc <code><samp></code> 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.</p> +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. -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><pre> -<samp><span class="prompt">jean@internets:~$</span><kbd>md5 -s "Coucou monde"</kbd> +```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></pre> +<span class="prompt">jean@internets:~$</span> <span class="cursor">█</span></samp></pre> +``` -<p>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 <code><kbd></code> afin de représenter la commande saisie par l'utilisateur dans l'invite.</p> +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. -<h4 id="CSS">CSS</h4> +#### CSS -<p>Voici la feuille de style que nous utilisons :</p> +Voici la feuille de style que nous utilisons : -<pre class="brush: css">.prompt { +```css +.prompt { color: #b00; } -samp > kbd { +samp > kbd { font-weight: bold; } .cursor { color: #00b; -}</pre> +} +``` -<p>Cela permet simplement de colorer légèrement l'invite et le curseur. On utilise du gras pour le texte saisi au clavier.</p> +Cela permet simplement de colorer légèrement l'invite et le curseur. On utilise du gras pour le texte saisi au clavier. -<h4 id="Résultat_2">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("Sortie_incluant_une_entrée_utilisateur", 650, 120)}}</p> +{{EmbedLiveSample("Sortie_incluant_une_entrée_utilisateur", 650, 120)}} -<h2 id="Résumé_technique">Résumé technique</h2> +## Résumé technique <table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row"> + <dfn + ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu" + >Catégories de contenu</a + ></dfn + > + </th> + <td> + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" + >Contenu de flux</a + >, + <a + href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" + >contenu phrasé</a + >, + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible" + >contenu tangible</a + >. + </td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td> + <a + href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" + >Contenu phrasé</a + >. + </td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td> + Tout élément acceptant du + <a + href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" + >contenu phrasé</a + >. + </td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> </table> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-samp-element', '<samp>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-samp-element', '<samp>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<samp>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{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')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.samp")}}</p> +{{Compat("html.elements.samp")}} -<h2 id="Notes">Notes</h2> +## Notes -<p>On peut appliquer une règle CSS sur le sélecteur <code>samp</code> afin de remplacer la police de caractère par défaut du navigateur.</p> +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. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{HTMLElement("code")}}</li> - <li>{{HTMLElement("kbd")}}</li> - <li>{{HTMLElement("pre")}}</li> - <li>{{HTMLElement("output")}}</li> -</ul> +- {{HTMLElement("code")}} +- {{HTMLElement("kbd")}} +- {{HTMLElement("pre")}} +- {{HTMLElement("output")}} |