Obligement - L'Amiga au maximum

Lundi 11 décembre 2017 - 18:02  

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


Contact

David Brunet

Courriel

 


En pratique : HTML - mise en forme du texte (espaces, tabulations, entités caractères)
(Article écrit par Jean-François Richard - octobre 2008)


Retour sur l'article précédent. Pour les plus observateurs d'entre vous (dont le rédacteur en chef d'Amiga Power, n'est-ce pas Murakami), vous aurez remarqué que le source de Hello World a une erreur, la balise de fermeture de l'élément HTML est absente. Mais est-ce si important que cela ? En fait, non, car le HTML, enfin surtout les navigateurs HTML, sont très permissifs (tolérants) aux erreurs. Mais pour moi, je pense que les erreurs n'ont pas lieu d'être. Un code propre est une garantie d'un site stable et évolutif, car comme vous le verrez plus tard avec le cours sur le XHTML, des erreurs de ce type plante l'interprétation de la page par le navigateur.

Maintenant, reprenons le déroulement de notre cours, où en étions-nous ? Ah oui, la mise en forme de texte avec HTML. Voyons la page avec du texte espacé.

Interprétation des espaces et tabulations dans un navigateur

Code source de la page "texte_espacé" :

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

<head>
       <title>Texte espacé</title>
</head>

<body>

Ce 
texte 
subit
un 
retour 
chariot
après
chaque
mot
de
cette
ligne
,
cela
ne
se 
voit 
pas 
dans 
l'
affichage
de
la 
page
dans 
le 
navigateur
.
Voici maintenant une ligne tapée de façon tout à fait naturelle.
Enfin  entre chaque mot    de     cette  ligne  existe des    tabulations.
Le résultat est évident!

</body>

</html>

Cette page a été tapée de la façon dont elle est décrite dans le texte, mais cela n'apparaît pas à l'écran.

On peut expliquer cela simplement, car le HTML ne prend pas en compte les espaces, les retours chariots (saut de ligne) et les tabulations dans son traitement du fichier source.

HTML
Visualisation d'un code source HTML avec des espaces et tabulations

En résumé : le HTML n'interprète pas les retours chariots, indentations et autres tabulations apparaissant dans l'éditeur du code source. Par contre, cela souligne l'importance des balises remplissant ce rôle de structuration du texte étudié plus avant dans ce cours. Pour faire qu'un espace soit pris en compte par le navigateur, il faut utiliser une entité caractère &nbsp; (cf. le tableau caractères spéciaux et le paragraphe suivant).

Exercice : tapez un texte n'importe comment, sans queue, ni tête. Vérifiez les conclusions précédentes.

Les entités caractères

De plus, vous avez pu remarquer une chose étonnante dans le code source précédent, dans l'affichage du fichier source dans le navigateur, le texte apparaît écrit de façon normale.

Mais si l'on ouvre le fichier source dans un éditeur de texte au format ASCII, on remarque que certains caractères sont illisibles. Ce sont les entités caractères (ou caractères accentués) spécifiques de la langue choisie par votre système d'exploitation. Ici, ce sont les caractères spécifiques de la langue française, tels les caractères é, è, â, ù, etc.

Cela regroupe tous les caractères ne se trouvant pas dans le jeu normal de caractères alphanumériques. Ces caractères spéciaux sont spécifiés dans le langage HTML à l'aide des entités de caractères.

On définit les entités de caractères : soit un nom (&name;), soit une valeur numérique (&#nnn;). La façon la plus commode est l'utilisation des noms. Ainsi, lorsque le navigateur reconnaît une chaîne de caractères commençant par & et finissant par ;, il reconnaît un caractère spécial. L'entité caractère est définie entre ces deux caractères & et ;.

Les caractères les plus communs de la langue française sont :

&agrave; = à
&acirc; = â
&eacute; = é
&egrave; = è
&ecirc; = ê
&icirc; = î
&iuml; = ï

Exercice : écrire "la biologie moléculaire et les pathologies dans les hôpitaux". Entraînez-vous avec quelques caractères accentués.

Astuce : quand vous modifiez une page en cours de conception et que vous voulez voir les modifications effectives, déjà il faut avoir sauvegardé votre fichier modifié et il faut actualiser la page sous le navigateur. Alors le navigateur entre en jeu et transforme le code entité de caractère en caractère spécial correspondant (voir plus bas la partie sur les caractères accentués et spéciaux).

Attention, nous venons de commencer à comprendre un peu mieux la structure et la conception de page Web, mais on voit que certains caractères sont utilisés au sein des définitions de caractères spéciaux, ainsi pour les faire apparaître dans l'affichage d'une page Web, ils vont nécessiter un codage sous forme d'entité caractère (par exemple : <,, >, & et ").

Voici leur codification sous forme d'entité caractère :

Caractères spéciaux
Codage en entité caractère HTML
<
&lt;
>
&gt;
&
&amp;
"
&quot;
Tableau 1 : les caractères spéciaux

Remarque : pourquoi le ; n'est-il pas pris comme un caractère spécial ? C'est simple, le premier caractère ; suivant le & est considéré comme la fin de l'entité caractère. Tous les points virgules sont considérés comme des caractères normaux.

Exercice : faire une phrase avec des caractères accentués avec des mots de votre choix.

En résumé : il existe trois types de contenus : les balises, les commentaires (<!-- ... -->) et le texte (le texte ASCII est le seul format universel du Web et sur les différents types de machines ayant des systèmes d'exploitation, cela assure une pleine portabilité des sources HTML quel que soit le type de machine pourvu d'un navigateur Web).

Attention : les images et les fichiers multimédias au format binaire apparaissent sous forme de texte dans le code de la page HTML.

L'apparence du texte

Les utilisateurs peuvent modifier à volonté les caractéristiques d'affichage de leurs navigateurs Web. Cela tend à annuler les dispositions et formats de la page HTML. L'affichage d'une page dans un navigateur en mode plein écran (par exemple 1024x768) sera donc différent de l'affichage dans une fenêtre (de 500 pixels de large par exemple).

HTML HTML
Comparaison de l'affichage entre deux navigateurs de tailles de fenêtres différentes

Il existe des balises spéciales pour créer des effets au niveau de la présentation du texte dans une page HTML.

Remarque : dans cet exemple, nous voyons que l'importance de la résolution et de la taille de la fenêtre influencent énormément la visualisation d'une page HTML. Ainsi, selon les configurations des navigateurs et les caractéristiques de l'OS, les pages peuvent être très différentes. D'où l'importance de la présentation du texte et des séparateurs dans les pages HTML.


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