Créer sa page perso : Caractères accentués et traits de séparation

(2 ème partie) encore !

Formatage du texte

Si vous laissez votre texte en l'état, malgré j'en suis certain la magnifique mise en page que vous venez de réaliser , une grosse déception vous attend lors du contrôle effectué sur le navigateur. Ce dernier en l'absence d'instructions c'est-à-dire de tags, traite le texte "au kilomètre" et la largeur de sa fenêtre lui dicte seulement les retours à la ligne.
Pour conserver en priorité votre présentation de base, placez les tags suivants :

lorsque vous souhaitez un retour normal à la ligne. Pas de fermeture en .

si vous désirez passer au paragraphe suivant, ce qui provoque à la fois un retour à la ligne et un interligne. Par contre le tag de fermeture  est facultatif mais recommandé.

Page type

Pour faciliter votre travail et économiser du temps il est recommandé de créer une page type comprenant les tags obligatoires qui correspondent à un affichage correct sur le navigateur. Reprenez le modèle donné dans un cadre en fin de chapitre 6 et utilisez-le comme modèle que vous dupliquerez à la demande ( bien sûr vous pouvez y inclure d'autres composants susceptibles de faire partie de vos pages de référence) . Cette "recette" est particulièrement bienvenue lorsque vous montez de nombreuses pages et permet de se consacrer davantage au contenu qu'au contenant.

Vous pouvez mettre les tags et attributs indistinctement en lettres majuscules ou minuscules.

Par contre conservez toujours la symétrie, lorsque vous en utilisez plusieurs qui nécessitent chacun des tags de fermeture, je m'explique :

 <H3> ...... Texte ........ </H3>  .............. c'est bien

 <H3> .......... Texte ..........  </H3>................ c'est mauvais.

Premier exemple

<HTML>
<HEAD>
<TITLE> Hygiène des chiens </TITLE>
</HEAD>
<BODY> " L'hygiène des chiens doit faire l'objet ....... 
C'est souvent par négligence ..........
 Notez bien tous les mois 
maintenant réalisez votre première vérification, en glissant votre fichier sur le navigateur ouvert en local. " </BODY>
</HTML>

Vérification sur le navigateur = des signes bizarres

L'hygi*ne des chiens doit faire l'objet .......
C'est souvent par n*gligence ..........

Notez bien tous les mois

maintenant r*alisez votre premi*re v*rification, en glissant votre fichier sur le navigateur ouvert en local. "

Caractères spéciaux et accentués

Votre composition est bonne quant aux interlignes et corps du texte, mais des caractères non prévus * apparaissent en 5 endroits, et après un rapide rapprochement avec le texte d'origine vous découvrez qu'il s'agit chaque fois d'une voyelle accentuée.
L'Internet est d'origine américaine et utilise naturellement la langue anglaise qui se résume à l'alphabet en majuscules et en minuscules, aux dix chiffres et à quelques caractères de ponctuation et signes, c'est-à-dire le code ASCII composé de 128 caractères (de 0 à 127).
Pour supporter certains caractères supplémentaires spécifiques à la langue française ou allemande par exemple, dont les voyelles accentuées en particulier, il est utilisé une mesure de compatibilité technique que nous ne développerons pas ici, mais qui a donné le nouveau code ISO 5589-1 (appelé aussi ISO-Latin 1) comprenant 258 caractères, soit le double.
La difficulté vient cependant du fait que si le code ASCII est exécutable directement à partir des touches du clavier, il est indispensable de convertir chacun des 128 caractères supplémentaires du code ISO-Latin 1 rencontrés.

Soyez rassurés, pour l'instant vous allez procéder à ces conversions de façon manuelle , ou encore utiliser option "Recherche/ Remplacer" si votre traitement de texte la possède ou encore par "supprimer/coller", mais plus tard vous aurez tout loisir de laisser votre logiciel convertisseur HTML effectuer ces opérations il est vrai peu exaltantes.
Voici donc la syntaxe correspondante des quelques caractères utiles pour le moment :

é ......... é
è ......... è
à ........ à
ç .......... ç
ê ........... ê

Deuxième exemple

Vous avez remplacé les voyelles accentuées par les codes correspondants mis en rouge pour mieux les situer (3 accents aigus et 2 accents graves) et votre page se présente ainsi :

<HTML>
<HEAD>
<TITLE> Hygiène des chiens </TITLE>
</HEAD>
<BODY> L'hygiène des chiens doit faire l'objet ....... 
C'est souvent par négligence ..........  Notez bien tous les mois  maintenant réalisez votre première vérification, en glissant votre fichier sur le navigateur ouvert en local. </BODY>
</HTML>

vérification sur le navigateur :

L'hygiène des chiens doit faire l'objet .......
C'est souvent par négligence ..........

Notez bien tous les mois

maintenant réalisez votre première vérification, en glissant votre fichier sur le navigateur ouvert en local.

comme toujours, pas à pas mais ... sûrement separations

C'est vrai on n'est pas là pour faire la course, mais vous devez maintenant vous entraîner en ajoutant des tags pour créer du texte en gras, en italique, centrer un titre et pour cela vous trouverez tous les détails en cliquant sur le menu suivant LEXIQUE. (unenouvelle page va s'ouvrir, à refermer pour revenir ici)

Filets de séparation horizontaux

Pourquoi pas personnaliser la présentation en insérant des filets à l'aide des tags expliqués ci-dessous mais, dont il ne faut pas abuser sous peine de rompre la structure du texte. A vos claviers et pas de panique si tout ne fonctionne pas du premier coup : corrigez, effacez et recommencez !

<HR> va représenter un filet sur toute la largeur de la page, avec un effet de profondeur.

<HR WIDTH=50%> provoque un filet de 50% de la largeur de la page.

<HR WIDTH=50> provoque un filet long de 50 pixels.

<HR NOSHADE> va placer un filet plein.

<HR NOSHADE color=green> va placer un filet plein de couleur verte. (couleur apparente sur IE seulement)

<HR SIZE=6> correspond à un filet de 6 pixels d'épaisseur. (effet de profondeur)

<HR NOSHADE SIZE=8> donne un filet plein de 8 pixels d'épaisseur.

<HR WIDTH=50% align="center"> donne 50% de la largeur de la page, au centre.

<HR WIDTH=50% align="right"> donne 50% à droite de la page.

<HR WIDTH=50% align="left"> donne 50% à gauche de la page.

exemples :

ci-dessus une ligne noire, de 75% de la largeur de la page, centrée et d'une épaisseur de 2 pixels, dont voici le code : résultat identique en majuscules ou minuscules.

ci-dessus nouveau filet noir : <hr noshade width=100% size=4 align="center">

ci-dessus filet avec effet de profondeur : <hr width=50% size=3 align="center">

ci-dessus autre dimension avec effet de profondeur : <hr width=75% size=8 align="center">

Sommaire Page perso ......@...... Schéma définitif et un répertoire

- ASCII : (American Standard Code for Information Interchange) De même que sur une ligne électrique il y a du courant ou il n'y en a pas, dans un ordinateur les caractères sont créés à partir d'un code dans lequel s'il y a du courant il prend la valeur 1, et s'il n'y pas de courant il prend la valeur 0. Le Bit ainsi nommé, est la plus petite unité d'information qu'un ordinateur peut traiter. Au départ les américains n'ont besoin que de 7 bits pour codifier un caractère soit 7 fils, ce qui permet de représenter 128 valeurs (0 à 127) qui sont toutes exécutables à partir des touches du clavier type anglo-saxon QWERTY. Par contre pour pouvoir coder les caractères latins et autres commandes spécifiques utilisées par notre ordinateur il a fallu rajouter un fil, ce qui donne un Octet de 8 bits et les combinaisons possibles passent à 256 caractères (0 à 255). Dans ce dernier cas le code a pris le nom ISO 5589-1, et voilà pourquoi certains caractères du clavier européen type AZERTY comme par exemple les voyelles accentuées, doivent être traitées en langage HTML.
Ainsi au lieu du système décimal habituel, nous utilisons ici le système binaire qui ne reconnaît que deux états 1 ou 0. (retour texte)

Sommaire Page perso ... @... Schéma définitif et un répertoire