Obligement - L'Amiga au maximum

Dimanche 25 juin 2017 - 15:58  

Translate

En De Nl Nl
Es Pt It Nl


Rubriques

 · Accueil
 · A Propos
 · Articles
 · Galeries
 · Glossaire
 · Hit Parade
 · Liens
 · Liste jeux Amiga
 · Quizz
 · Téléchargements
 · Trucs et astuces


Articles

 · Actualité (récente)
 · Actualité (archive)
 · Comparatifs
 · Dossiers
 · Entrevues
 · Matériel (tests)
 · Matériel (bidouilles)
 · Points de vue
 · En pratique
 · Programmation
 · Reportages
 · Tests de jeux
 · Tests de logiciels
 · Tests de compilations
 · Articles divers

 · Articles in english
 · Articles in other languages


Twitter

Suivez-nous sur Twitter




Liens

 · Sites de téléchargements
 · Associations
 · Pages Personnelles
 · Moteurs de recherche
 · Pages de liens
 · Constructeurs matériels
 · Matériel
 · Autres sites de matériel
 · Réparateurs
 · Revendeurs
 · Presse et médias
 · Programmation
 · Développeurs logiciels
 · Logiciels
 · Développeurs de jeux
 · Jeux
 · Autres sites de jeux
 · Scène démo
 · Divers
 · Informatique générale


Jeux Amiga

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Trucs et astuces

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Glossaire

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Partenaires

Annuaire Amiga

Amedia Computer

Relec

Hit Parade


Soutien

N'hésitez pas à soutenir le projet Obligement



Contact

David Brunet

Courriel

 


En pratique : HTML - les styles d'écriture
(Article écrit par Jean-François Richard - novembre 2008)


Dans le précédent article, nous avions commencé à nous intéresser à la mise en forme du contenu avec le HTML. Voici maintenant un chapitre sur les styles d'écriture, avec les éléments de style physique et les éléments de style logique qui sont la mise en forme recommandée par le W3C. Et pourquoi, me demanderez-vous, à juste raison ? La réponse à cette question dans le paragraphe "Les éléments de style logique".

Les styles d'écriture

Les éléments de style physique

Les principaux styles physiques d'écriture sont la mise en gras, l'italique et le soulignage du texte encadré par ces balises. Les éléments de style physique sont utilisés pour mettre en évidence le texte dans sa forme et non dans son contenu. Au contraire des styles logiques, mettant en avant le contenu et non la forme. Pour avoir une comparaison simple, les styles physiques sont un peu l'équivalent de traitement de texte dans l'affichage du texte, mais possèdent un désavantage sur les styles logiques, eux pouvant servir d'indications de contexte pour le contenu. Ce texte pourrait être ainsi écouté ou ressenti dans le cas des non voyants par exemple.

Code source de la page "Mise en gras et en italique par des éléments physiques" :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">

<head>
       <title>Mise en gras et en italique par des éléments physiques</title>
</head>

<body>
Mise en gras et en italique par des éléments physiques
Le texte qui suit est en italique
<i>Ce texte est en italique</i>
Le texte suivant est mis en gras
<b>Ce texte apparaît en caractères gras</b>
<u>Enfin, ce texte apparaît souligné</u>
<tt>Ce texte est é avec une police à échappement fixe</tt>
</body>

</html>

Remarque : il existe la balise <font> et ses attributs pour modifier l'apparence et la couleur du texte. Faites attention aux mauvaises imbrications des balises. Il existe aussi des éléments de style logique permettant les mêmes fonctions pour certaines de ses balises.

HTML
Les styles d'écriture physique dans le navigateur

En résumé : les éléments de style physique permettent la mise en place d'effet sur le texte affiché, mais il est déconseillé par le W3C, car trop statique et non évolutif. Il faut lui préférer les styles logiques ou encore mieux l'utilisation de feuilles de style. Les éléments de style physique sont à utiliser quand la forme est plus importante que la fonction.

Élément Description Commentaire
b Le texte est mis en gras
big Le texte est plus grand
blink Le texte clignote Seulement NN (Netscape Navigator)
i Le texte est en italique
s Le texte est biffé Déconseillé
small Le texte est plus petit Contraire de big
strike Le texte est biffé Déconseillé
sub Le texte est mis en indice
sup Le texte est mis en exposant
tt Le texte est un code source
u Le texte est souligné Déconseillé
Les éléments de style physique

Les caractères accentués

Caractères en code ISO 8859-1 (ISO-Latin1) :

À &#192; &Agrave; à &#224; &agrave;
Á &#193; &Aacute; á &#225; &aacute;
 &#194; &Acirc; â &#226; &acirc;
à &#195; &Atilde; ã &#227; &atilde;
Ä &#196; &Auml; ä &#228; &auml;
Å &#197; &Aring; å &#229; &aring;
Æ &#198; &Aelig; æ &#230; &aelig;
Ç &#199; &Ccedil; ç &#231; &ccedil;
È &#200; &Egrave; è &#232; &egrave;
É &#201; &Eacute; é &#233; &eacute;
Ê &#202; &Ecirc; ê &#234; &ecirc;
Ë &#203; &Euml; ë &#235; &euml;
Ì &#204; &Igrave; ì &#236; &igrave;
Í &#205; &Iacute; í &#237; &iacute;
Î &#206; &Icirc; î &#238; &icirc;
Ï &#207; &Iuml; ï &#239; &iuml;
Ð &#208; &ETH; ð &#240; &eth;
Ñ &#209; &Ntilde; ñ &#241; &ntilde;
Ò &#210; &Ograve; ò &#242; &ograve;
Ó &#211; &Oacute; ó &#243; &oacute;
Ô &#212; &Ocirc; ô &#244; &ocirc;
Õ &#213; &Otilde; õ &#245; &otilde;
Ö &#214; &Ouml; ö &#246; &ouml;
× &#215; &times; ÷ &#247; &divide;
Ø &#216; &Oslash; ø &#248; &oslash;
Ù &#217; &Ugrave; ù &#249; &ugrave;
Ú &#218; &Uacute; ú &#250; &uacute;
Û &#219; &Ucirc; û &#251; &ucirc;
Ü &#220; &Uuml; ü &#252; &uuml;
Ý &#221; &Yacute; ý &#253; &yacute;
Þ &#222; &THORN; þ &#254; &thorn;
ß &#223; &szlig; ÿ &#255; &yuml;

Les caractères spéciaux

Ce sont les symboles et autres.

Caractères en code ISO 8859-1 (ISO-Latin1) :

  &#129;   ¡ &#161; &iexcl;
‚ &#130;   ¢ &#162;  
&#131;   £ &#163; &pound;
„ &#132;   ¤ &#164; &curren;
… &#133;   ¥ &#165; &yen;
† &#134;   ¦ &#166; &brvbar;
‡ &#135;   § &#167; &sect;
&#136;   ¨ &#168; &uml;
‰ &#137;   © &#169; &copy;
Š &#138;   ª &#170; &ordf;
&#139;   « &#171; &laquo;
Œ &#140;   ¬ &#172; &not;
 &#141;   ­ &#173; &shy;
Ž &#142;   ® &#174; &reg;
 &#143;   ¯ &#175; &masr;
 &#144;   ° &#176; &deg;
‘ &#145;   ± &#177; &plusmn;
’ &#146;   ² &#178; &sup2;
“ &#147;   ³ &#179; &sup3;
” &#148;   ´ &#180; &acute;
• &#149;   µ &#181; &micro;
– &#150;   &#182; &para;
— &#151;   · &#183; &middot;
˜ &#152;   ¸ &#184; &cedil;
™ &#153;   ¹ &#185; &supl;
š &#154;   º &#186; &ordm;
› &#155;   » &#187; &raquo;
œ &#156;   ¼ &#188; &frac14;
 &#157;   ½ &#189; &frac12;
ž &#158;   ¾ &#190; &frac34;
Ÿ &#159;   ¿ &#191; &iquest;
Espace &#160; &nbsp; € &#8364; &euro;

Les éléments de style logique

Les éléments de style logique sont à utiliser quand vous avez l'intention de faire apparaître un texte en fonction de son contenu. Par exemple, vous voulez montrer aux internautes visitant votre site, la fonction vous permettant de faire des recherches sur Google. Alors vous mettrez votre texte dans un style logique montrant le code tapé dans le moteur de recherche via le clavier (balise <kbd> pour l'élément "keyboard"). Les styles pouvant varier selon les types de navigateurs et leur configuration, l'utilisation des styles basés sur le contenu vous garantit un plus large lectorat dans les mêmes conditions de mise en forme du texte. Pour le texte en italique on utilise l'élément "EM", pour la mise en gras on utilisera l'élément "STRONG".

Code source de la page "texte_gras_italique(style_logique)" :

<<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<tml lang="fr" dir="ltr">

<head>
       <title>Mise en gras et en italique par des éléments logiques
</head>

<body>

Le texte qui suit est en italique
<em>Ce texte est en italique</em>
Le texte suivant est mis en gras
<strong>Ce texte apparaît en caractères gras</strong>

</body>

</html>

HTML
Image 1 : Les éléments de style logique dans le navigateur

En résumé : les éléments de style logique rattachent des styles au texte en fonction du contenu. Ainsi, si le texte n'apparaît pas dans le style logique lui étant attaché, ce style reste dans le code et peut être exploité dans le cadre de moteur de recherche et autres méta-moteurs.

Élément
Description
Exemple
ABBR Le texte contenu est dans sa forme abrégée
ACRONYM Le texte est un acronyme, il est formé de la première lettre de chaque mot XML, pour eXtened Markup Language
CITE Le texte est une citation Met le texte en italique
CODE Le texte est un code source Met le texte dans une police à largeur fixe
DFN Le texte est une définition
EM Le texte est mis en exergue Met le texte en italique
KBD Le texte est tapé au clavier Met le texte dans une police à largeur fixe
SAMP Le texte est en petit Met le texte en caractère de même taille
STRONG Le texte est mis en avant Met le texte en gras
VAR Le texte est un code source Met le texte dans une police à largeur fixe
Tableau 1 : les éléments de style logique

Les sous-titres

Ce sont des éléments de texte, ils permettent de créer des titres de différentes tailles en un tour de main. Ainsi, il existe 6 tailles de titres, de 1 à 6 (du plus grand au plus petit respectivement). L'élément "titre" est composé de la balise hn où "n" est le chiffre définissant la taille du titre.

Nous allons définir une page avec les 6 tailles de titres. Code source de la page "titres" :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">

<head>
       <title>Titres de H1 à H6</title>
</head>

<body>
<h1 align="left">Un exemple de titre h1</h1>
<h2 align="center">Un exemple de titre h2</h2>
<h3 align="right">Un exemple de titre h3</h3>
<h4>Un exemple de titre h4</h4>
<h5>Un exemple de titre h5</h5>
<h6>Un exemple de titre h6</h6>

<!-- les différentes tailles des titres par ordre décroissant et les attributs d'alignement -->

</body>

</html>

HTML
Image 2 : Les titres en HTML

C'est la première fois où l'on rencontre un attribut dans une balise. Les attributs se définissent à l'intérieur de la balise d'ouverture, par un nom d'attribut couplé à une valeur de la forme : <balise attribut="valeur"> avec un nombre d'attributs variables selon le type de balise.

Par exemple, dans le cas des titres, il existe un unique attribut déterminant l'alignement de l'élément "titre" par rapport à la page. Les valeurs possibles de l'attribut "align" sont : left (alignement à gauche, défini par défaut), center (alignement au centre de la page) et right (alignement à droite).

En résumé : les titres permettent de mettre en évidence les différentes parties de la page Web et ces derniers peuvent être alignés selon un schéma précis défini par le biais de l'attribut "align" de l'élément "titre".


[Retour en haut] / [Retour aux articles] [Article précédent] / [Article suivant]