« Le langage HTML/Internationalisation » : différence entre les versions

aucun résumé des modifications
Aucun résumé des modifications
 
== Comment indique-t-on la langue utilisée ? ==
 
La langue utilisée dans la majeure partie du document est un paramètre de la balise <codesyntaxhighlight lang="html" inline>&lt;<html&gt;></codesyntaxhighlight> d'ouverture :
&lt;html<syntaxhighlight lang="html"&gt;>
<html lang="…">
</syntaxhighlight>
 
Si on change de langue au cours du document, il faut l'indiquer dans la balise qui encadre le texte concerné. Par exemple
<syntaxhighlight lang="html">
{{rouge|&lt;html}} lang="fr" {{rouge|&gt;}}
<html lang="fr" >
{{vert|&lt;head&gt;}}
{{vert|&lt;/head&gt;}}
{{vert|&lt;body&gt;}}
{{bleu|&lt;p&gt;}}
Le texte est en français par défaut.
Mais comme on dit en italien&amp;nbsp;:
{{rouge|&lt;q}} lang="it"{{rouge|&gt;}}Tradutore, traditore{{rouge|&lt;/q&gt;}}.
{{bleu|&lt;/p&gt;}}
{{vert|&lt;/body&gt;}}
{{rouge|&lt;/html&gt;}}
 
<head>
En XHTML, il faut indiquer en outre la langue selon la norme XML, avec l'attribut : <code>xml:lang="…"</code>. L'exemple ci-dessus devient donc :
</head>
{{rouge|&lt;html}} lang="fr" xml:lang="fr" {{rouge|&gt;}}
 
<body>
{{vert|&lt;head&gt;}}
 
<p>
{{vert|&lt;/head&gt;}}
Le texte est en français par défaut.
Mais comme on dit en italien&nbsp;:
{{vert|&lt;body&gt;}}
<q lang="it">Tradutore, traditore</q>.
</p>
{{bleu|&lt;p&gt;}}
 
Le texte est en français par défaut.
</body>
Mais comme on dit en italien&amp;nbsp;:
 
{{rouge|&lt;q}} lang="it" xml:lang="it"{{rouge|&gt;}}Tradutore, traditore{{rouge|&lt;/q&gt;}}.
</html>
{{bleu|&lt;/p&gt;}}
</syntaxhighlight>
 
{{vert|&lt;/body&gt;}}
En XHTML, il faut indiquer en outre la langue selon la norme XML, avec l'attribut : <syntaxhighlight lang="html" inline>xml:lang="…"</syntaxhighlight>. L'exemple ci-dessus devient donc :
<syntaxhighlight lang="html">
{{rouge|&lt;/html&gt;}}
<html lang="fr" xml:lang="fr" >
 
<head>
</head>
 
<body>
 
<p>
Le texte est en français par défaut.
Mais comme on dit en italien&nbsp;:
<q lang="it" xml:lang="it">Tradutore, traditore</q>.
</p>
 
</body>
 
</html>
</syntaxhighlight>
 
Si le texte en langue étrangère n'est pas inclus dans une balise particulière, on peut simplement utiliser la balise <codesyntaxhighlight lang="html" inline>&lt;<span&gt;>&lt;</span&gt;></codesyntaxhighlight> (voir le chapitre ''[[Programmation HTML/Zones de mise en forme|Zones de mise en forme]]'').
 
----
; Note
: L'en-tête peut contenir une indication de la « langue de l'audience » avec la balise <codesyntaxhighlight lang="html" inline>&lt;<meta http-equiv="content-language" content="''langue''"&gt;></codesyntaxhighlight>, en utilisant le même codage que ci-dessus (par exemple <codesyntaxhighlight lang="html" inline>&lt;<meta http-equiv="content-language" content="fr"&gt;></codesyntaxhighlight> pour le français). Cette balise sert pour le référencement par des moteurs de recherche, mais est indépendant de l'indication de la langue d'un élément de texte.
----
 
 
On peut préciser si l'écriture se fait de gauche à droite (''left-to-right'', LTR) ou de droite à gauche (''right-to-left'', RTL), avec le paramètre <code>dir</code>, par exemple
<syntaxhighlight lang="html">
&lt;p lang="he" dir="rtl"&gt;עברית&lt;/p&gt;
<p lang="he" dir="rtl">עברית</p>
</syntaxhighlight>
La valeur par défaut est <code>ltr</code> ; si une langue s'écrit de gauche à droite, il est inutile de le préciser.
 
; Exemple
 
<syntaxhighlight lang="html">
{{vert|&lt;!DOCTYPE}} html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<nowiki>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</nowiki>" {{vert|&gt;}}
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
 
{{bleu|&lt;html}} lang="fr" xml:lang="fr"{{bleu|&gt;}}
<html lang="fr" xml:lang="fr">
 
{{rouge|&lt;head&gt;}}
<head>
 
{{vert|&lt;title&gt;}}
<title>
Variation de mise en forme selon la langue
Variation de mise en forme selon la langue
{{vert|&lt;/title&gt;}}
</title>
 
{{vert|&lt;meta}}
<meta
http-equiv="Content-Type"
http-equiv="Content-Type"
content="text/html; charset=ISO-8859-15" {{vert|/&gt;}}
content="text/html; charset=ISO-8859-15" />
 
{{vert|&lt;style}} type="text/css"{{vert|&gt;}}
<style type="text/css">
{{rouge|/*}} ********** Français ********** {{rouge|*/}}
/* ********** Français ********** */
[lang|="fr"] &gt; * { quotes: "«\00a0" "\00a0\00bb"; } {{rouge|/*}} guillemets de citation {{rouge|*/}}
[lang|="fr"] > * { quotes: "«\00a0" "\00a0\00bb"; } /* guillemets de citation */
p:lang(fr) {
p:lang(fr) {
text-align: justify; {{rouge|/*}} texte justifié {{rouge|*/}}
text-indentalign: 1emjustify; {{rouge|/*}} alinéatexte rentrantjustifié {{rouge|*/}}
margintext-topindent: 01em; {{rouge|/*}} pasalinéa d'interlignerentrant {{rouge|*/}}
margin-bottomtop: 0; /* pas d'interligne */
} margin-bottom: 0;
}
{{rouge|/*}} ********** Anglais ********** {{rouge|*/}}
/* ********** Anglais ********** */
[lang|="en"] &gt; * { quotes: "‘" "’" "“" "”"; } {{rouge|/*}} guillemets de citation, 2 niveaux de citation {{rouge|*/}}
[lang|="en-US"] &gt;> * { quotes: "" "" "" ""; } {{rouge| /*}} différentsguillemets ende GBcitation, et2 auxniveaux USde citation {{rouge|*/}}
[lang|="en-US"] > * { quotes: "“" "”" "‘" "’"; } /* différents en GB et aux US */
p:lang(en) {
p:lang(en) {
text-align:left; {{rouge|/*}} texte aligné à gauche {{rouge|*/}}
text-indentalign: 0left; {{rouge|/*}} pas detexte retraitaligné deà paragraphegauche {{rouge|*/}}
text-indent: 0; /* pas de retrait de paragraphe */
margin-top: 1em;
margin-bottomtop: 1em; {{rouge|/*}} alinéa "pavé" (interligne) {{rouge|*/}}
margin-bottom: 1em; /* alinéa "pavé" (interligne) */
}
}
{{vert|&lt;/style&gt;}}
</style>
 
{{rouge|&lt;/head&gt;}}
</head>
 
{{rouge|&lt;body&gt;}}
<body>
 
{{vert|&lt;p&gt;}}
<p>
Ceci est un paragraphe en français
Ceci est un paragraphe en français
{{bleu|&lt;q&gt;}}avec une citation et
<q>avec une citation et
{{rouge|&lt;q&gt;}}une citation dans la citation{{rouge|&lt;/q&gt;}}{{bleu|&lt;/q&gt;}}…
<q>une citation dans la citation</q></q>…
{{vert|&lt;/p&gt;}}
</p>
 
{{vert|&lt;p&gt;}}
<p>
Notez l'alinéa rentrant
Notez l'alinéa rentrant
et l'absence de saut de ligne entre les paragraphes…
et l'absence de saut de ligne entre les paragraphes…
{{vert|&lt;/p&gt;}}
</p>
 
{{vert|&lt;p}} lang="en" xml:lang="en"{{vert|&gt;}}
<p lang="en" xml:lang="en">
This is a paragraph in english
This is a paragraph in english
{{bleu|&lt;q&gt;}}with a quotation and
<q>with a quotation and
{{rouge|&lt;q&gt;}}a quotation in the quotation{{rouge|&lt;/q&gt;}}{{bleu|&lt;/q&gt;}}…
<q>a quotation in the quotation</q></q>…
{{vert|&lt;/p&gt;}}
</p>
 
{{vert|&lt;p}} lang="en-US" xml:lang="en-US"{{vert|&gt;}}
<p lang="en-US" xml:lang="en-US">
This is a paragraph in american english
This is a paragraph in american english
{{bleu|&lt;q&gt;}}with a quotation and
<q>with a quotation and
{{rouge|&lt;q&gt;}}a quotation in the quotation{{rouge|&lt;/q&gt;}}{{bleu|&lt;/q&gt;}}…
<q>a quotation in the quotation</q></q>…
{{vert|&lt;/p&gt;}}
</p>
 
{{rouge|&lt;/body&gt;}}
</body>
 
{{bleu|&lt;/html&gt;}}
</html>
</syntaxhighlight>
Lorsque vous affichez le résultat de ce code, diminuez la largeur de la fenêtre de votre navigateur afin que chaque paragraphe s'affiche au moins sur deux lignes, pour pouvoir apprécier les différences de mise en page (justifié/aligné à gauche, indentation/saut de ligne).