Les feuilles de style

par | Avr 23, 2021 | Codage

HTML

Les feuilles de style

 

Les feuilles de style


Concept et utilité

Présentation

Le concept des feuilles de style n'est pas une nouveauté dans le domaine de la programmation Html. Introduit en 1997 par Microsoft avec son Internet Explorer 3.0 (mais elles existaient déjà avec Arena sous Unix), ces feuilles de style n'ont connu qu'un intérêt limité du fait que celles-ci n'étaient pas reconnues par Netscape Navigator 3.0.
Depuis les choses ont bien changé. D'abord les navigateurs 4.0 de Microsoft et de Netscape reconnaissent tous deux les feuilles de style et surtout, la norme Html 4.0 en a repris le concept  (CSS version 1).

Concept

Dans un site Web de plusieurs centaine de page, il est important d'avoir une présentation homogène : de respecter la charte graphique du site. Celle-ci peut demander à ce que le titre de chaque page soit écrit en Arial, en gras avec une taille de 20 pixel et avec une couleur définie.
On peut imaginer que l'on puisse donner à cette définition de mise en forme un nom soit, par exemple : "titrepage" et qu'à chaque nouvelle page, plutôt que d'écrire à chaque fois le nom du titre et puis de devoir le mettre en Arial, gras, etc..., l'on puisse dire à l'ordinateur, d'utiliser les attributs simplement en rapellant le nom "titrepage". Cette définition de mise en forme particulière, on va l'appeler feuille de style.
Le concept de feuilles de style [Style Sheets] est né.

Voici des exemple de codage de définitions de style, pour des tête de chapitre :

 P.titrepg {
      font-family: trebuchet ms,arial, helvetica, sans-serif;
      font-weight: bold;
      font-size: 24px;
      color: #006633;
      }
 P.entete {
      font-family: trebuchet ms, arial, sans-serif;
      font-weight: bold;
      font-size: 20px;
      color: #996600;
      }

Précisons pour terminer que les feuilles de style ne sont pas une composante directe du langage Html mais un développement à part dans la publication de pages Web.

Utilité et avantages

  • Séparation du contenu et de la mise en forme.
  • Cohésion de la présentation tout au long du site.
  • Simplification de la gestion de la mise en forme des textes.
  • Simplification de l'écriture du code HTML dans chacune des pagesUne façon d'écriture concise et nette par rapport au Html qui devient vite fouillis.
  • Réduire le temps de chargement des pages.
  • Palier certaines insuffisances du langage Html (contrôle des polices, contrôle de la distance entre les lignes, contrôle des marges et des indentations (sans devoir utiliser de tableaux ou de balise
    ...).

Compatibilité

A l'origine, chaque navigateur avait sa manière de traiter les feuilles de styles et il fallait apporter une codification propre au navigateur dans le codage des feuilles de styles. Aujourd'hui, un standard de codification existe et chaque navigateur se doit de le respecter.

Définition d'un style

La définition de base d'un style est simple :
balise { propriété de style: valeur; propriété de style: valeur }

Exemple :
P.titrepg { font-family: Arial; font-style: italic }

Dans cet exemple, la balise P.titrepg sera en Arial et en italique. Et dans votre document, toutes les balises auront comme style Arial et italique.

Simple! Mais de nombreux commentaires s'imposent :
  • Les feuilles de style portent sur des balises principalement et quelques autres éléments comme par exemple A:link pour un lien non-visité et A:visited pour un lien visité. Comme balises souvent utilisées avec des feuilles de style, on peut citer les en-têtes Hn, P, BODY...
  • Les propriétés de style sont entourées par des "{" et pas des [ ou des parenthèses.
  • Le couple "propriété de style/valeur" est séparé par un double-point (:).
  • Chaque couple "propriété de style/valeur" est séparé par un point-virgule (;).
  • Il n'y a pas de limite pour le nombre de couples "propriétés de style/valeur".
  • L'espace entre propriétés de style et valeur n'est pas obligatoire mais aide fortement à la lisibilité du code source.
  • On peut attribuer plusieurs valeurs à une même propriété. Dans ce cas, on séparera les différentes valeurs par des virgules.
    {font-family: Arial, Helvetica, sans-serif}

Styles internes

Il faut maintenant incorporer les styles dans le document Html. Commençons par le plus simple, soit l'incorporation à l'intérieur d'une page. D'où le titre "Styles internes".

A l'intérieur des balises

Cette façon de procéder est de loin la plus commune et la plus logique. D'abord parce que les balises HEAD contiennent des informations pour le browser et les feuilles de style appartiennent à celles-ci. Ensuite parce que l'on rejoint ainsi l'essence même des feuilles de style qui est de séparer les éléments de mise en forme du contenu.
< HTML >
< HEAD >
< STYLE type="text/css" >
< !--
La ou les feuille(s) de style
-- >
< /STYLE >
< /HEAD >
< BODY >
  • La balise < STYLE > avertit le navigateur que l'on va utiliser des feuilles de style.
  • L'attribut type="text/css" informe que ce qui suit est du texte et qu'il s'agit de cascading style sheets (css). Pour l'instant, il s'agit de la seule possibilité mais on peut prévoir à l'avenir d'autres versions de ce "langage".
  • La balise Html de commentaires < !-- ... -- > empêche que les navigateurs qui ne connaissent pas les feuilles de style, tentent d'interpréter ces instructions. Les informations à l'intérieur des tags de commentaires seront ignorées par ces navigateurs.
  • Pour vos propres commentaires à propos des feuilles de style, on utilisera la convention désormais classique (C, C++, Javascript...) de /* commentaires */.

A l'intérieur des balises < BODY >< /BODY >

On peut aussi utiliser, au coup par coup, les feuilles de style dans le corps (BODY) du document. Cette façon de faire nous paraît illogique et peu conforme à l'esprit des feuilles de style qui est de définir un style déterminé valable pour la globalité du document. Mais elle existe pour quelques utilisations spécifiques...
< HTML >
< BODY >
< H1 style="font-family: Arial; font-style: italic" > texte affiché en H1 < /H1 >
< /BODY>
< /HTML >

Styles externes

Le style internes permet de définir une présentation de style valable pour une page. Mais CSS nous propose de définir une présentation de style valable pour plusieurs pages et même pour toutes les pages d'un site. Ce qui est possible, en créant une page externe qui regroupera toutes les feuilles de style, et en reliant chaque page à cette page de style.
On crée d'abord, dans le répertoire du site, un fichier avec l'extension .css soit styles.css par exemple, qui contiendra toutes les définitions de style.
< HTML >
< HEAD >
--- Les différentes feuilles de style ---
< /HEAD >
< BODY >
< /BODY >
< /HTML >
Ensuite, on crée une page normale, par exemple : page1.htm (bien entendu dans le même répertoire que le fichier styles.css).
< HTML >
< HEAD >
< LINK rel=stylesheet type="text/css" href="styles.css" >
< /HEAD >

La balise avertit le browser qu'il faudra réaliser un lien.
  • L'attribut rel=stylesheet (sans s et sans guillemets) précise qu'il trouvera une feuille de style externe.
  • L'attribut type="text/css" précise que l'information est du texte et du genre cascading style sheets (css).
  • L'attribut classique de lien href=" ... " donne le chemin d'accès et le nom du fichier à lier (styles.css).

Les classes et les ID

Notion de classes

On désire parfois affecter des styles différents à une même balise. Pas de problèmes, les feuilles de style vous proposent la solution des classes [class].
La syntaxe est ici aussi des plus simple.
La définition d'un style était :
        balise { propriété de style: valeur }
Elle devient :
         balise.nom_de_classe { propriété de style: valeur }
remarquez le point entre balise et nom_de_classe
Ou, comme la mention de la balise est facultative,
    .nom_de_classe { propriété de style: valeur }
Attention! L'emploi du point (.) devant le nom de classe est indispensable.
Pour appeler l'effet de style dans le document, on ajoute le nom de la classe à la balise.
    < balise class="nom_de-classe" > .... < /balise >
Un exemple ?
Je souhaite mettre ce qui est important dans le texte en gras et en bleu. Je crée la classe .essentiel :
   .essentiel { font-weight: bold; font-color: #000080 }
Et dans le document Html, il suffit d'appeler la classe .essentiel quand cela se révèle nécessaire :
< P class=".essentiel" > ... blabla ... < /P >
< H1 class=".essentiel" >Titre 1< /H1 >
< TABLE >< TR >< TD class=".essentiel" >cellule< /TD >< /TR >< /TABLE >

Notion des ID

Comme la convention nom/point/nom est utilisée aussi en Javascript, il a fallu trouver une autre convention d'écriture lorsqu'on désire utiliser les feuilles de style avec du Javascript. Ce sont les ID, aussi appelés les identifiants.
Les ID fonctionnent exactement comme les classes. Pas mieux, pas plus. C'est la même chose!
La syntaxe est :
         #nom_de_ID { propriété de style: valeur }
Et pour l'appeler :
         < balise id="nom_de_ID" > .... < /balise >
Notons qu'on ne pourra effectuer qu'un seul appel à #nom_de_ID par page. Ainsi,
         Pour #essentiel{ ... }
         < P id=essentiel > est correct.
         Mais si on rencontre dans la même page
         < H1 id=essentiel > ce n'est plus correct !
Si vous pensez utiliser des feuilles de style, mais sans vous compliquer la vie avec des scripts, oubliez au plus vite ID et utilisez exclusivement les classes.
Si par contre vous souhaitez utiliser des scripts avec les feuilles de style pour faire du DHTML par exemple (voir plus loin dans le site), la notion de ID vous sera alors indispensable.

< SPAN > et < DIV >

Utilité

Dernier point, il fallait penser à un système pour "déconnecter" certains morceaux de paragraphe ou plusieurs paragraphes de cette logique d'écriture avec des feuilles de style. Ce sont respectivement les balises SPAN et DIV qui créaient ainsi des petits blocs particuliers dans le document sans devoir repasser par les éléments structurels du Html classique.
Notons que SPAN et DIV s'utilisent toujours avec les classes et les ID.

SPAN

La balise < SPAN > ... < /SPAN > permet d'appliquer des styles à des éléments de texte d'un paragraphe ou si vous préférez à un morceau de paragraphe.
Ainsi je voudrais écrire : Un monde de géants.
< HTML >
< HEAD >
< STYLE type="text/css" >
.element{font-size: x-large; color: navy}
< /STYLE >
< /HEAD >
< BODY >
< P >Un monde de < SPAN class=element >géants< /SPAN >.< /P >
< /BODY >
< /HTML >

DIV

La balise < DIV > ... < /DIV > permet de regrouper plusieurs paragraphes ou si vous préférez, de délimiter une zone comportant plusieurs paragraphes.
< HTML >
< HEAD >
< STYLE type="text/css" >
.zone{font-size: x-small}
< /STYLE >
< /HEAD >
< BODY >
< DIV class=zone >
< P >Commentaire :< /P >
< P >N'oubliez pas l'attribut class! < /P >
< /DIV >
< /BODY >
< /HTML >

Positionner avec CSS

Quel concepteur de pages Web n'a pas laissé échapper quelques jurons bien sentis en essayant, à grand renfort de tableaux, de placer précisément du texte ou une image là où il le désirait ?
Le miracle est arrivé ! Outre le balise < LAYER > (mais qui était comprise que par Netscape 4.0), il est désormais possible de positionner, au pixel près, du texte ou une image avec les feuilles de style.
Le positionnement des éléments par les feuilles de style est repris sous la spécification CSS-P.

Position absolue ou relative

La position absolue {position: absolute} se détermine par rapport au coin supérieur gauche de la fenêtre du browser. Les coordonnées de ce point sont top = 0 et left = 0. Les coordonnées d'un point s'expriment en pixels, de haut en bas pour top et de gauche à droite pour left.
La position relative {position: relative} se détermine par rapport à d'autres éléments de la page, par exemple un élément du code Htm.
Précisons que l'on utilisera presque toujours le positionnement absolu car plus facile et plus sûr.

Positionner du texte

Plaçons en position absolue le texte "Publication Html" à 50 pixels du haut de la fenêtre (top) et à 150 pixels à gauche (left).
< HTML >
< HEAD >
< STYLE type="text/css" >
.pub{position: absolute; top: 100px; left: 25px;
color: yellow; font-size: x-large; font-weight: bold;}
< /STYLE >
< /HEAD >
< BODY >
< DIV class=pub > Publication Html < /DIV >
< /BODY >
< /HTML >
Ajoutons que plusieurs encodages sont possibles.

Positionner une image

Plaçons l'image htmlplus.gif en position absolue à 50 pixels de haut de la fenêtre (top) et à 100 pixels à gauche (left). Les dimensions de l'image sont width=242 et height=84.
< HTML >
< BODY >
< span style="position: absolute; top: 50px; left: 100px; width: 242px; heigth: 84px;" >
< IMG src="htmlplus.gif" >
< /span >
< /BODY >
< /HTML >
Spécifiez toujours les propriétés width et heigth avec les feuilles de style.
Ajoutons que, là aussi, plusieurs encodages sont possibles.

Superposer du texte sur une image

Reprenons l'image htmlplus.gif et on y superposera un texte, au pixel près dans la barre qui souligne le terme Html.
< HTML >
< BODY >
< span style="position: absolute; top: 50px; left: 100px; width: 242px; heigth: 84px;" >
< IMG src="htmlplus.gif">
< /span >
< span style="position: absolute; top: 96px; left: 145px; color: yellow; font-size: x-small; font-weight: bold;" >
Texte à superposer
< /span >
< /BODY >
< /HTML >

Liste des propriétés

Les styles de police


font-family définit un nom de police ou une famille de police
< nom > ou < famille >
police précise (Arial, Times, Helvetica...)ou
famille (serif, sans-serif, cursive, fantasy, monospace)
H5 {font-family: Arial}

font-style définit le style de l'écriture
normal ou italique ou oblique
H6 {font-style: normal}

font-weight définit l'épaisseur de la police
normal ou bold ou bolder ou lighter ou valeur numérique soit
(100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)
P {font-weight: 300}

font-size définit la taille de la police
xx-small ou x-small ou small ou médium ou large ou x-large ou xx-large
ou larger ou smaller
ou taille précise en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {font-size: 16pt}

font-variant définit une variante par rapport à la normale
normal ou small-caps
P {font-variant: small-caps}

font raccourci pour les différentes propriétés de police
P {font: bold italic}

Les styles du texte

text-align définit l'alignement du texte
left ou center ou right
H2 {text-align: center}

text-indent définit un retrait dans la première ligne d'un bloc de texte
souvent utilisé avec , n'oubliez pas dans ce cas .
spécifié en inches (in) ou en centimètres (cm) ou en pixels (px)
P {text-indent: 2cm}

text-decoration définit un attribut du texte, soit barré, clignotant, etc.
blink ou underline ou line-through ou overline ou none
A:visited {text-decoration: underline}

text-transform définit la casse du texte (majuscule, minuscule
uppercase : met les caractères en majuscules
lowercase : met les caractères en minuscules
capitalize : met le premier caractère en majuscule
P {text-transform: uppercase}

color définit la couleur du texte
par exemple en hexadécimal
H4 {color: #000080}

word-spacing définit l'espace entre les mots
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {word-spacing: 8pt}

letter-spacing définit l'espace entre les lettres
spécifié en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {letter-spacing: 5pt}

line-height définit l'interligne soit l'espace entre les lignes du texte
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {line-height: 12pt}

width détermine la longueur d'un élément de texte ou d'une image
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H1 {width: 240px}

height détermine la hauteur d'un élément de texte ou d'une image
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H1 {heigh: 100px}

white-space espace ou blanc
normal ou pre ou nowrap
PRE {white-space: pre}

Les arrière-plans

background-color définit la couleur de l'arrière-plan
couleur (par exemple en hexadécimal) ou transparent
H1 {background-color: #000080}

background-image définit l'image de l'arrière-plan
URL de l'image
BODY {background-image: image.jpg}

background-repeat définit la façon de répéter l'image d'arrière-plan
repeat ou no-repeat ou repeat-x (x = nombre de répétitions horizontales) ou
repeat-y (y = nombre de répétitions verticales
P {background-image: image.gif; background-repeat: repeat-4}

background-attachment spécifie si l'image d'arrière-plan reste fixe avec les déplacements de l'écran
scroll ou fixed
BODY {background-image: image.gif; background-attachement: fixed}

background-position spécifie la position de l'image d'arrière-plan par rapport au coin
supérieur gauche de la fenêtre
{1, 2}
{top ou center ou bottom , left ou center ou right}
ou en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
BODY {background-image: img.gif; background-position: right top}

background raccourci pour les différentes propriétés d'arrière-plan
P {background: image.gif fixed repeat}

Les marges

margin-top détermine la valeur de la marge supérieure
en unité de longueur ou auto
{ margin-top: 12px }

margin-right détermine la valeur de la marge droite
en unité de longueur ou auto
{ margin-right: 12px }

margin-bottom détermine la valeur de la marge inférieure
en unité de longueur ou auto
{ margin-bottom: 12px }

margin-left détermine la valeur de la marge gauche
en unité de longueur ou auto
{ margin-left: 12px }

margin regroupe les différentes propriétés de la marge

Les bords et les "enrobages"

border-top-width donne l'épaisseur du bord supérieur
thin ou medium ou thick ou spécifié par l'auteur
23 {border-top-width: thin}

border-right-width donne l'épaisseur du bord droit
thin ou medium ou thick ou spécifié par l'auteur
H1 {border-right-width: medium}

border-bottom-width donne l'épaisseur du bord inférieur
thin ou medium ou thick ou spécifié par l'auteur
H5 {border-bottom-width: thick}

border-left-width donne l'épaisseur du bord gauche
thin ou medium ou thick ou spécifié par l'auteur
H3 {border-left-width: 0.8cm}

border-width regroupe les différentes propriétés de border-width

border-color
détermine la couleur de la bordure
H3 {border-color: blue}

border-style détermine le style du trait de la bordure
none ou solid ou dotted ou dashed ou double
ou groove ou ridge ou inset ou outset
{border-style: solid dashed}

border regroupe toutes les propriétés des bords

padding-top valeur de remplissage haut entre l'élément et le bord
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H5 {padding-top: 5px}

padding-right valeur de remplissage droite entre l'élément et le bord
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H4 {padding-right: 5px}

padding-bottom valeur de remplissage bas entre l'élément et le bord
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H2 {padding-bottom: 5px}

padding-left valeur de remplissage gauche entre l'élément et le bord
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H5 {padding-left: 8px}

padding regroupe les différentes propriétés de remplissage

Les listes

list-style-type détermine le type de puces ou de numérotation
disc ou circle ou square
decimal ou lower-roman ou upper-roman ou lower-alpha ou upper-alpha
OL {list-style-type: square}

list-style-image permet de remplacer les puces par une image
url ou none
OL {list-style-image: img.gif}

list-style-position spécifie si les puces sont à l'intérieur ou à l'extérieur du texte
inside ou outside
UL {list-style-position: inside}

list-style regroupe toutes les propriétés de liste

Quelques informations complémentaires :

Non, les feuilles de style ne sont pas sensibles à la case [case insensitive]. Ecrire CLASS ou class ou Class est donc équivalent. Cependant les éléments qui ne sont pas sous le contrôle des feuilles de style comme les noms de police ou les URLs peuvent être case sensitive. Pour le système d'exploitation (et je pense à Unix), Arial n'est peut-être pas égal à arial, de même IMAGE.gif n'est pas forcément égal à image.gif.

Les noms des feuilles de style, des sélecteurs, des classes et ID peuvent contenir les lettres de a-z ou de A-Z, les chiffres de 0-9, le trait d'union et le caractère _. Les noms ne peuvent commencer par un chiffre ou un tiret. La documentation officielle affirme que les caractères spéciaux ASCII 160-255 peuvent être utilisés. Mais cela ne fonctionne pas chez moi. On prendra vite l'habitude (voir les langages de programmation) de les éviter.

Oui. Les feuilles de style seront ignorées par les navigateurs qui ne supportent pas les feuilles de style. Et c'est tant mieux pour la compatibilité de votre site sous les différents navigateurs.

Les propriétés des feuilles de style l'emportent sur les attributs Html. Si les deux sont spécifiés, les attributs Html seront affichés avec les navigateurs qui ne supportent pas les CSS et n'auront aucun effet avec les navigateurs qui supportent les feuilles de style.
Ainsi, < H3 style="color: red" >< B >< FONT COLOR="navy">Cascading Style Sheets < ;/FONT& gt;< /B >< /H3 >
apparaîtra en rouge sous un browser compatible CSS (par exemple Microsoft Explorer).
et sous une autre couleur (noire ? bleue ? ...) sous un browser qui ne reconnaît pas les feuilles de style
Ce qui est très bien pour la compatibilité mais qui ne simplifie pas la clarté de l'écriture.

En cas de concurrence entre plusieurs éléments de style, intervient alors la notion de "cascade" ou d'ordre de priorité.
La concurrence entre plusieurs éléments de style peut provenir des différentes possibilités de localisation de feuilles de style :
  1. dans un fichier externe avec l'extension css.
  2. dans la balise HEAD du document.
  3. dans le BODY du document.
La règle de priorité appliquée par le browser sera d'appliquer pour la présentation du document la feuille de style la plus proche de l'élément. Ainsi, un style spécifié dans le BODY sera retenu par rapport à un style déclaré dans un fichier externe.
Il y a cependant moyen de contourner ces règles de priorité par la déclaration ! important;. Du genre BODY {background: white ! important; color: black}. Vous l'avez compris, ce tutoriel est une ébauche qui permet de faire quelques pas avec les fuilles de style. Nous en resterons là dans le cadre de ce tutorial.
Si vous souhaitez aller plus avant, il existre de site internet beaucoup plus étoffé et exhauxtif qui pourront satifaire votre sagacité !

Le codage HTML

par | Avr 22, 2021 | Codage

HTML

Les bases du codages html

Le code HTML

 

Préambule


Notre objectif est une présentation de la codification HTML. Codification comprise par tous les navigateurs Web et base de tous les sites Web en fonctionnement à ce jour.
Notre ambition est de vous présenter les bases de cette programmation et ainsi, de mettre en avant la simplicité de cette codification.
Nous avons conscience que nous sommes loin d'être exhaustif, mais là n'est pas notre propos.
Il existe des sites et des livres qui sont cent fois plus complet que cette simple page de présentation.

Le Html


HTML est le langage universel utilisé pour communiquer sur le Web. Votre information sera ainsi transportée sur cette gigantesque toile qu'est Internet pour aboutir sur l'ordinateur d'un internaute ou un programme appelé navigateur (ou browser) pourra le décrypter et ainsi afficher les informations. 

Ce logiciel, que l'on appelle un navigateur, vous permet de surfer sur le Net et d'afficher les "pages" lues.
Les plus connus sont Chrome de Google et Internet Explorer de Microsoft mais il en existe d'autres.


  • Chaque navigateur a ses particularité.
    Ce qui fait que vous ne saurez jamais exactement comment sera affichée la page que vous avez conçu sur l'ordinateur de l'internautes visitant votre site.
    ce qui fait qu'avec le HTML, vous n'avez pas la maîtrise totale de la présentation de votre document.

  • Un éditeur de texte suffit pour programmer un site
    En effet, pour ne pas alourdir les lignes téléphonique (au temps de la création du HTML !), support privilégier de cette toile mondiale qu'est Internet, la codification utiliser est tout simplement ce bon vieux code ASCII à 7 bits, c'est à dire sans les caractère accentué !!!.  Ceux-ci faisant l'objet d'une codification spéciale.

     

  • Mais le HTML est un langage simple
    compris par tous les navigateurs existant, quelques soit la plate forme utilisé (windows, mac, linux, etc...)

    En premier vous avez le texte.
    Mais pour pouvoir "contrôler" son affichage, il faut donner au navigateur des instructions TOUJOURS encapsulé entre les caractères < et >

    Par exemple : < TITLE > pour donner le titre de la page, celui qui sera affiché dans le bandeau en haut de la fenêtre de votre navigateur.

    Certaines balises sont simples comme (< TITLE >), d'autres vont nécessiter des paramètres comme < TABLE BORDER="1" WIDTH="650"  > par exemple
     

    Les outils



    Pour écrire du code HTML, vous n'avez besoins que d'un éditeur de texte comme bloc-notes par exemple.
    Nous vous déconseillons d'utiliser un logiciel de traitement de texte comme Word par exemple.
    Heureusement, pour vous faciliter la tâche, il en existe qui comprenne le code HTML et même le codage des langages du net comme le PHP. .
    Leur avantage est qu'il mettre en couleur les balise pour les distinguer du texte.  Cela facilite grandement la frappe.

     

    Le document Html minimum





    < HTML >
    Balise de début d'un document de type HTML.
    < HEAD > Balise de début de la zone d'en-tête
    < TITLE > Balise de début du titre de la page.
    < /TITLE > Balise de fin du titre de la page.
    < /HEAD > Balise de fin de la zone d'en-tête.

    < BODY >
    Balise de début du document proprement dit.
    < / BODY > Balise de fin du document proprement dit.
    < /HTML > Balise de fin d'un document de type HTML.


  • Vous aurez remarqué qu'à chaque balise de début d'une action, soit "< code balise >", auquel correspond, normalement, une balise de fin "< /code balise >".
  • Vous noterez aussi que les balises ne sont pas "case sensitive". Il est donc équivalent d'écrire < TITLE >, < title >, < Title >, etc.

    Le texte


    Toutes pages web est constitué de texte. Les balises HTML vous permette de l'afficher selon la présentation choisie.


    Exemple de formatage de texte


    Affichage
    Balises à utiliser
    Commentaire
    Gras bold < B >...< /B >
    < STRONG >...< /STRONG >    		 Début et fin de zone en gras
    Italique italic < I >...< /I >
    < EM >...< /EM >    		 Début et fin de zone en italique
    Taille de caractère >font size < FONT SIZE=taille >......< /FONT > Début et fin de zone avec cette taille
    Couleur de caractère font color < FONT COLOR="#codecouleur" >........< /FONT > Début et fin de zone en couleur
    A la ligne line break < BR > Retour à la ligne
    >Commentaires Comments < !-- *** -- > Ne pas traiter (commentaire pour le programmeur)
    Centrage
    		< CENTER >......< /CENTER > Centrer



    Exemple de code HTML :

    < HTML >
    < HEAD >
    < TITLE >titre de la page< /TITLE >
    < /HEAD >
    < BODY >
    texte simple

    < B >texte en gras< /B >< BR >
    < STRONG >texte en gras< /STRONG >< BR >
    < I >texte en italique< /I >< BR >
    < EM >texte en italique< /EM >< BR >
    < B >< I >texte en gras et en italique< /I >< /B >< BR >
    < FONT SIZE=5 >texte en taille 5< /FONT >
    < FONT COLOR="#0000FF" >texte en bleu< /FONT >
    < !--Commentaire-- >
    < /BODY >
    < /HTML >

    Ce qui donne :


    texte simple
    texte en gras
    texte en gras
    texte en italique
    texte en italique
    texte en gras et en italique
    texte en taille 5
    texte en bleu



    Les principales balises de texte à connaître
  • Le texte tout simple s'écrit sans balises. Il sera afficher par le navigateur avec la police et taille de caractères selon sa configuration par défaut.
    D'un manière générale, quand vous sélectionnez une police de caractère, celle-ci ne s'affiche que si elle est présente sur l'ordinateur de l'internaute.

  • Le même browser ne tient compte que d'un seul espace entre les mots. Ainsi pour lui :
    < FONT SIZE=5 >texte< /FONT >
    < FONT COLOR="#0000FF" >en bleu< /FONT > est équivalent à :
    < FONT SIZE=5 >texte< /FONT >< FONT COLOR="#0000FF" >en bleu< /FONT >

  • Il n'est pas rare d'utiliser plusieurs balises les unes après les autres. Il vous faut veiller à bien les imbriquer. Ainsi < I >< U >...< /U >< /I > est correct et < I >< U >...< /I >< /U > peut vous créer des surprises.

  • Le navigateur affiche le texte qu'on lui "dicte". Il force un retour à la ligne quand le texte atteint le bord de la fenêtre. Pour rester maitre des retours à la ligne, il vous faut jouer avec la balise : < BR >. Celle-ci représente une action ponctuelle et n'a donc pas besoin de balise de fin.

  • Le tag < BLOCKQUOTE >...< /BLOCKQUOTE > introduit un retrait.
     
  • Vous savez déjà que les navigateurs ne reconnaissent qu'un espace entre les mots. Mais, pour remédier à certaine situation, la balise < PRE >...< /PRE > affiche un texte dit préformaté. Le navigateur affiche donc le texte telle que définit par le concepteur du site.
    Par exemple : < PRE >V o i c i Un Formatage qu i comprends d e s espaces v a r i a b l e s ...< /PRE >
    donne : 
    V o i c i Un Formatage qu i comprends d e s espaces v a r i a b l e s ...

     
  • La balise < U >...< /U > souligne le texte.
    Attention, par convention (qui à tendance à disparaitre) un lien dans un texte est écrit en soulignés. Par conséquent, il faut utiliser d'autres méthodes pour mettre en avant des portions de texte. 
  • Les tags < SUB >...< /SUB > et < SUP >...< /SUP > placent le texte respectivement en indice et en exposant. 
  • Pour aligner du texte, on utilise l'attribut ALIGN ou le tag < CENTER >. Il existe une balise permettant d'aligner différents éléments. c'est le DIV :

    < DIV align=left >...< /DIV >
    < DIV align=center >...< /DIV >
    < DIV align=right >...< /DIV >
    < DIV align=justify >...< /DIV >

    • Vous avez ici les principales balises du HTML à connaître pour formater un texte à l'écran. Il existe encore d'autres balises et les évolutions du HTML vont certainement en apporter de nouvelles comme en faire disparaître... mais là, le mieux est d'acquérir un guide du HTML permettant une recherche multicritères. 

    Les titres et les listes


    Comme dans les traitement de texte, il faut pouvoir mettre en place une présentation du texte avec des titres et des listes.

    En voici les principales balises

    Affichage Balises à utiliser Commentaire
    En-têtes Heading < Hn >< /Hn >
    avec n=1 à 6 (H1, H2, ..., H6    		 Afficher un titre de niveau n et sauter une ligne
    Liste non-ordonnée Bullet list < UL >< /UL > Afficher le texte sous forme d'une liste non-ordonnée.
    >Liste ordonnée Numbered list < OL >< /OL > Afficher le texte sous forme d'une liste ordonnée.
    Elément de liste List items < LI > Voici un élément de la liste
    Paragraphe >Paragraph < P >< /P > Saut de ligne, insérer une ligne vierge et commencer un paragraphe


    Pour exemple, le code suivant :


    < H1 >Les mois du printemps< /H1 >
    < UL >< LI >avril
    < LI >mai
    < LI >juin< /UL >
    < P >
    < H3 >Les mois d'automne< /H3 >
    < OL >< LI >octobre
    < LI >novembre
    < LI >décembre< /OL >

    Donne pour résultat :


    Les mois du printemps


    • avril
    • mai
    • juin

    Les mois d'automne


    1. octobre
    2. ovembre
    3. décembre




    Quelques commentaires :


    é est l'un de ces caractères spéciaux utilisés pour représenter le é. Les éditeurs Html vous déchargeront de cette corvée.
    Les paragraphes et les en-têtes peuvent s'aligner à gauche, au centre ou à droite.
    < H1 align=left >< /H1 >
    < P align=left >< /P >
    < H1 align=cente r>< /H1 >
    < P align=center >< /P >
    < H1 align=right >< /H1 >
    < P align=right >< /P >


    Les listes peuvent s'imbriquer:
    < H4 >Les 12 mois< /H4 >
    < UL > < LI >Les mois du printemps
    < OL >< LI >avril
    < /OL >< /UL >
       

    Les liens


    Html (Hyper Text Markup Language) est un langage hypertexte qui vous permet en cliquant sur un mot, une image, une portion de d'image, d'aller ailleurs, sur une autre page de votre site, comme sur un  autre site  
    La syntaxe de ces liens est simple : < A HREF="URL ou adresse" >...< /A >
    La complexité vient des option et des variantes.

    Les liens vers un autre site Web

  • >Lien vers un autre site web : "http://serveur/chemin.../fichier"    
  • Lien vers une boîte aux lettre électronique : "mailto:nombal@domaine.ext"    
  • Lien vers un site de téléchargement de fichier : "ftp://serveur/chemin.../fichier"    

    • Lien vers une autre page du site


    Quand on navigue dans un site Web, chaque fois que l'on fait un clic sur un lien, on appel un autre fichier, une image présentes dans le même répertoire, ou dans un répertoire différents.
    L'organisation des répertoires n'étant pas l'objet de cette page, nous n'en diront pas plus.
    Ce qu'il faut retenir c'est que vous avez deux manière de programmer ces liens :
  • En adressage absolu : "file:///lecteur:/répertoire/fichier.htm"
  • En adressage relatif :  "../../../fichier.htm"

    • Nous vous conseillons autant faire ce peut, d'utiliser l'adressage relatif. Celui-ci permet, quand il est bien maîtriser, de transporter assez facilement votre site d'un serveur à un autre. 

    Les Liens dans la même page, à un autre paragraphe.


     

    Les ancres

    Lien vers une ancre dans la même page < A HREF="#azert" >...< /A > Lien vers la cible azert
    dans la même page
    Lien vers une ancre dans une autre page < A HREF="URL#azert" >...< /A > Lien vers la cible "azert" dans une autre page
    Définition d'une ancre < A NAME="azert" >...< /A > Ceci est une cible



    Ces types de liens sont très utiles pour naviguer dans une page contenant beaucoup de texte. Maintenant, reste à voir s'il ne vaudrait pas mieux faire plusieurs pages...  
       

    Les images et le choix du format



    En préambule, il existe plusieurs format d'image. deux sont principalement utiliser sur le web : le GIF et le JPG (prononcer JPEG).
    Des différences existent.
    Nous conseillons, pour les logos, les icônes, les images demandant peu de couleur et n'ayant pas de nuance, d'utiliser le GIF en 256 couleur.
    Dans les autres cas, d'utiliser le JPG (photos par exemple).

    Ceci dit, il faut garder à l'esprit que l'ennemi du Web est la taille des pages (en ko), donc des images.
    Même avec les hauts débits qui se mettent progressivement en place.
    En premier la taille de l'image est prépondérante. Plus elle est "lourde", plus il faudra du temps pour la charger.
    Il n'y a aucun miracle, les kilos (ko) de l'image, il faut les faire passer par "les tuyaux"...... même avec des tuyau en fibre !
    Gagner du poids sur une image diminue sa qualité. Un compromis est à trouver !  
    Et ce n'est pas en changeant de serveur par un encore plus performant que le résultat sera plus nette ou plus rapide car celui-ci va dépendre aussi de la qualité de l'accès internet du visiteur comme de son matériel informatique  

    Liens vers une image

    < IMG SRC="./...../Adresse de l'image" > Pensez à utiliser des adresses en relatif....
    Balise pour mettre un Texte alternatif alt="****" Pour afficher un texte quand la souris passe sur l'image
    width=xxx height=yyy (en pixel) Forcer l'image à s'afficher dans une hauteur et une largeur donné
    border=x (en pixels) Taille de la bordure



    En Html, l'image ne fait pas partie de votre fichier HTML Le navigateur va la chercher à l'adresse indiquée.
    Presque en conséquence logique de ceci, le fait d'utiliser la même image dans un fichier Html ne modifie en rien sa taille totale de la page à charger.
    Une image utilisée sur plusieurs pages ne sera chargée qu'une fois par le navigateur (sauf si vous forcer la ré-initialistion du cache du navigateur)

    Liens à partir d'une image

    < A HREF="fichier.htm" >< IMG SRC="image.gif" >< /A > Pensez à utiliser des adresses en relatif....


    La ligne horizontale


    Le html permet d'insérer dans une page des trait horizontaux comme celui-ci :
       

    La syntaxe

    < HR size=? > Epaisseur du trait en pixels
    < HR width=? (ou %) > Largeur du trait en pixels ou en % de la fenêtre
    < HR color="#rrvvbb" > Couleur du trait selon la codification RVB en hexadécimal
    < HR align=left >
    < HR align=right >
    < HR align=center >     		Alignement gauche
    Alignement droite
    Alignement centré


    Les arrière-plans


    Le langage Html permet d'agrémenter la présentation du document d'un arrière-plan [background] coloré ou composé d'une image. Ce qui apporte un élément "artistique" à votre page.
    La balise à utiliser ne pose pas de problème :
    Pour une couleur d'arrière plan sur toute la page :  < BODY BGCOLOR="#$$$$$$" >
    Ce code peut permettre de donner une couleur d'arrière plan à un tableau ou une case 'un tableau.
    Il existe aussi des balises pour modifier les couleurs utilisées par défaut par le browser pour le texte et les liens.   
    Couleur de texte < BODY TEXT="#$$$$$$" >
    Couleur de lien < BODY LINK="#$$$$$$" >
    Lien visité < BODY VLINK="#$$$$$$" >
    Lien actif < BODY ALINK="#$$$$$$" >
         
    On peut aussi prévoir un fond en image. Cette image (petite de préférence) est affichée en mosaïque par le browser. Attention aux raccords... comme lorsque vous posez du papier peint.
    Texture d'arrière-plan  < BODY BACKGROUND="Adresse de l'image" >  avec bien une adresse en relatif...  

    Les tableaux

     
    En Html, les tableaux servent non seulement à aligner des chiffres mais surtout à placer des éléments à l'emplacement que vous souhaitez. L'usage des tableaux est donc très fréquent.
    Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau.
    Ce qui est à retenir : Si vous savez faire un tableau en HTML, vous savez faire une page web. C'est le premier conseil que j'ai eu quand j'ai fait mon premier site. J'avoue ne pas l'avoir comprise sur l'instant, mais dès la première page faite... en fait chaque page est un ensemble de tableau pouvant être imbriqué les uns dans les autres.

    Les balises de base sont donc :
    Définition du tableau [Table] < TABLE >  < /TABLE > Début et fin de tableau
    Définition d'une ligne [Table Row] < TR >  "codage de la ligne" < /TR > >Début et fin de ligne
    Définition d'une cellule [Table Data] < TD > "contenu de la cellule"  < /TD > Début et fin de cellule
     

    Exemple de codage d'un tableau à deux lignes et deux colonnes.


    < TABLE >
    < TR >< TD >Cellule 1 < /TD >< TD > Cellule 2 < /TD >< /TR >
    < TR >< TD > Cellule 3 < /TD >< TD > Cellule 4 < /TD >< /TR >
    < /TABLE >

    Joindre des bordures

       
    Bordure de cadre [Border] < TABLE border=x >   < /TABLE >
     
     
    Ce qui donne :
     
    cellule 1cellule 2
    cellule 3cellule 4
     

     Il y a encore trois type de codage :   
     
    L'espace entre les cellules ou
    l'épaisseur des lignes du quadrillage     		< TABLE cellspacing=? >
    L'enrobage des cellules ou
    l'espace entre le bord et le contenu    		 < TABLE cellpadding=? > 
    La largeur de la table < TABLE width=yyy >
    < TABLE width=xx% >
     

    Les cellules des tableaux


    Nous n'en avons pas fini avec les tableaux. Allons plus loin dans notre étude en nous penchant sur les cellules de ces tableaux.
    Avant toutes choses, les cellules peuvent contenir tous les éléments Html déjà passés en revue soit :
    ·       du texte
    ·       des images
    ·       des liens
    ·       des arrière-plans
    ·       et même des tableaux (eh oui!)
    Bien que l'allure de votre tableaux soit déjà déterminée, chaque cellule est en quelque sorte un petit univers à part qui a ses propres spécifications.
    Découvrons-en les possibilités :  
    Largeur d'une cellule < TD width=? >  en pixels
    < TD width=% >  en pourcentage
    Fusion de lignes < TD rowspan=x >
    Fusion de colonnes < TD colspan=x >
          

    Conclusion

     
    La première question qui va venir est : "Mais à quoi cela va-t-il me servir ? En fait c'est le besoin qui fera que vous vous en servirez ou pas. 
     C'est vrai qu'avec des outils comme WordPress, connaître de codage n'est pas essentiel. Mais, le jour ou vous aurez à faire des pages simples cela vous sera utile et vous permettra d'avoir une présentation de page maitriser.
    Personnellement autant au début je codais chaque page d'un site, autant aujourd'hui c'est très ponctuel. en fait, cette connaissance m'a permis de développer un mini site qui fonctionne en statique sur un simple disque dur de PC. Très utile pour faire un partage d'information au sein d'un service.
      

    Les Balises META

    par | Avr 21, 2021 | Codage

    INTERNET

    Les balises META

    Les Balises META et le référencement



    Introduction


    Véritable outil du concepteur de sites Web, ces balises META feront la différence entre un site d'amateur d'un site de pro

    Les balises META apportent un certain nombre d'information utiles aux moteurs de recherche et autres annuaires pour référencer un site Web.

    Dans la construction de la page, elles sont à insérer entre les balises et .

    Pour voir des exemples de balises META, n'hésitez pas, quand vous êtes sur un site, d'afficher la source.
    Simple, mais efficace pour voir comment les autres ont fait.

    Les moteurs de recherche


    A moins de faire un site à destination unique de vos amis, relations et famille (ce que nous appelons une carte de visite interactive) vous allez avoir besoins des moteurs de recherche pour faire venir les visiteurs sur votre site.

    Vous avez donc un intérêt particulier à soigner le référencement de votre site.

    Le navigateur


    Certaines balises META sont directement interprétées par le navigateur pour, par exemple, charger automatiquement un page Html après x secondes ou forcer le rechargement d'une page sur le réseau bien que déjà présente dans le cache.

    Attention, le code qui fonctionne pour un navigateur, peux n epas fonctionner avec un autre.
    On entre de plein pied dans la compatibilité des navigateurs.


    L'indispensable


    Cela peut paraître simple mais si vous tenez compte de ces éléments, vous avez de forte chances pour que le référencement de votre site soit un succès.
    Ensuite, il faut prendre en compte les particularités des robots, particularités qui changent d'un moteur de recherche à un autre.
    Il existe quelque trucs et astuces. Certains sont expliqués dans cette page, les autres, vous les trouverez dans la lecture de pages Web de la plus part des sites de référencement.


    Les codes META


    < META NAME="keywords" CONTENT="mot-clé1,mot-clé2,mot-clé3," >


    S'il n'en fallait qu'une, ce serait assurément celle-là ! Tous [ou presque] les moteurs de recherche l'utilisent.
    Quelques commentaires s'imposent cependant :
    • Les mots-clés doivent être séparés par une virgule. L'auteur préconise de ne pas mettre d'espaces (bien que cela se rencontre chez des webmestres confirmés) afin d'éviter toute confusion lors des recherches par mot-clé.
    • On parle dans la littérature d'une limitation à 1000 mots-clés. Plus qu'il n'en faut.
    • On conseille aussi de mettre tous les mots clés en minuscules pour éviter les problèmes selon que le moteur de recherche tient compte de la "casse", c’est-à-dire de la différence entre majuscules et minuscules (en anglais « case sensitive » ou non)
    Tout l'art consiste à trouver les bons mots-clés relatifs au contenu de votre site. Mettez-vous à la place de vos lecteurs potentiels. Quels mots, quels synonymes, quelles alternatives peuvent être utilisés pour décrire votre site?
    De grâce, éviter de mettre des mots-clés "bidon" qui sont bien entendu très attirants mais sans rapport avec votre site.
    La tentation est grande de répéter un certain nombre de fois un même mot-clé pour espérer un meilleur classement. Par exemple, < META NAME="keywords" CONTENT="html,html,html,html,html >. Désolé pour vous mais ce truc a vécu et est maintenant pénalisé [spam] par les moteurs de recherche.
     

    < META NAME="description" CONTENT="une description de la page" >


    Cette description sera pertinente, attirante et brève. En effet, selon les moteurs de recherche seuls les 150 à 240 premiers mots seront repris. Bavards s'abstenir.
     

    < TITLE > ... < /TITLE >


    Les moteurs de recherche tiennent fortement compte des titres des documents. Il faut impérativement en mettre sur toutes les pages d'un site. Même pour les pages qui n'apparaissent pas directement comme les sous-pages d'une page de frames !
    On dit également que le fait de reprendre un ou des mot(s)-clé(s) dans le titre de toutes les pages d'un site est très favorable pour un meilleur classement.
     
     

     < META NAME="author" CONTENT="nom de l'auteur"  >


    Cette balise est d'une utilité discutable car rares sont les moteurs de recherche en tiennent compte. A ma connaissance, seul Nomade fournit l'URL du site après avoir introduit le nom de l'auteur.
    Il n'empêche qu'il est d'une légitime fierté de signer son œuvre. N'est-il pas ?
     
    < META NAME="Copyright" CONTENT="Copyright © date nom" >
    Il ne m'importe pas de discuter ici de la valeur juridique et pratique d'une mention de copyright sur le Web. D'autres sites s'en chargent.
    Il me plaît cependant de noter que dans les e-mails reçus, il n'est pas rare que des étudiants ou des formateurs me demandent de pouvoir reproduire tout ou partie de mon site. Une règle élémentaire de la Netiquette est de respecter le copyright. "Le gratuit n'est pas forcément sans valeur".
     

    < META NAME="Distribution" CONTENT="Global ou Local ">


    Cette balise indique la destination de l'information de la page. Soit qu'elle est "Global" et donc destinée à être largement diffusée soit qu'elle est "Local" et donc à diffusion restreinte.
     
     

    <  META NAME="Generator" CONTENT="nom de l'éditeur Html utilisé" >


    Aucune influence, ni pour les moteurs de recherche, ni pour le navigateur utilisé. Cette information intéresse cependant au plus au point les responsables marketing des sociétés proposant des éditeurs Html pour calculer la part de marché de leur produit. Alors, pourquoi pas si cela les amuse...
     
     

    < META NAME="Rating" CONTENT="Destination de votre audience" >


    Permet de définir le contenu de votre site. Les appréciations sont General ou Mature ou Restricted ou 14 years pour respectivement tout public, adulte, accès restreint ou 14 ans.
    Cet indice d'audience n'a aucune influence directe.
     
     

    < META NAME="Robots" CONTENT="instructions pour les robots" >


    Par cette balise vous pouvez indiquez aux robots de recherche automatique si vous souhaitez que votre site soit ou ne soit pas indexé par eux.
    Les instructions sont :
    1. All (défaut) permet aux robots d'indexer vos pages et de suivre les liens hypertextes d'une page à l'autre.
    2. None dira aux robots de ne pas indexer vos pages et de ne pas suivre les liens.
    3. Index indique que vos pages peuvent être indexées par les robots.
    4. NoIndex pour que le robots ne procèdent à aucune indexation.
    5. Follow donne la permission aux robots de suivre les liens hypertextes des pages
    6. NoFollow pour le contraire.
    Exemples :
    < META NAME="Robots" CONTENT="None" >
    < META NAME="Robots" CONTENT="Index,Nofollow" >
    Cette balise est reconnue par tous les robots de recherche automatique.
     
     

    < META HTTP-EQUIV="Content-language" CONTENT="fr" >


     
    Cette balise déclare la langue utilisée dans le document Html. De plus en plus utile, maintenant que des monteurs de recherche anglo-saxons (et non des moindres comme Altavista et Hotbot) ont inclus la langue dans leurs critères de recherche.
     

     < META HTTP-EQUIV="Reply-to" CONTENT="votre adresse e-mail" >


    Cette balise permet au lecteur averti de connaître votre adresse e-mail si elle n'apparaît pas sur la page qu'il consulte (peut-être hors connexion, si elle a été préalablement enregistrée). Finalement, il est peut-être plus utile de donner son adresse électronique que son nom.
     
     

    < META HTTP-EQUIV="Reply-to" CONTENT="URL de votre page" >


    Variante de la balise précédente. Il est parfois utile de rappeler l'adresse de la page d'accueil de votre site pour ceux qui y sont  entrés par une des pages de celui-ci.
     
     

    Attributs éventuels


      A côté des balises META indispensables à un bon référencement auprès de moteurs de recherche, à côté des balises META qu'il est bon d'ajouter pour la bonne information du lecteur, il y a encore celles que vous utiliserez de temps en temps lors de l'élaboration de sites. Parcourons en quelques uns.
     

    Refresh


    Un grand classique du Html (2.0 ?) même si cette balise META n'est que rarement utilisé et alimente les trucs et astuces depuis des années. Cette balise META charge automatiquement la page spécifiée à l'attribut URL après un délai de x secondes.
      < META HTTP-EQUIV="Refresh" CONTENT="x;URL="adresse" >
    Cette balise est fréquemment utilisée pour rediriger automatiquement un visiteur dans le cas où l'adresse de votre site à été modifiée.
     

    Transition


    De très jolis effets de transition style PowerPoint sont possibles avec simplement une ligne de code. Mais autant vous le dire tout de suite, cela ne fonctionne que sous Explorer 4 et plus.
    Le code est :
    < META HTTP-EQUIV="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)" >
    < META HTTP-EQUIV="Page-Exit" content="revealTrans(Duration=1.0,Transition=23)" >
    Quelques explications :
    • Page-Enter et Page-Exit signifie que l'effet de transition se produira à l'entrée de la page ou à la sortie de celle-ci.
    •  Duration détermine la durée de la transition en secondes. Elle est dans l'exemple de 1 seconde. A l'usage, cette durée n'est pas d'une précision absolue.
    • Transition est un nombre de 1 à 23 pour l'effet de transition choisi. Le chiffre 23 donne une transition aléatoire (au hasard). Les autres transitions se répartissent de 1 à 22. Ainsi, 7 ouvre la page de droite à gauche, 17 a le même effet mais en diagonale, 22 découvre la page avec un effet de lignes horizontales aléatoires, etc.
    • Précisons que si ces transitions ressemblent furieusement aux transitions de PowerPoint, elles fonctionneront très bien même si PowerPoint n'est pas installé sur la machine de votre visiteur.
    • Et pour terminer, vous ne verrez les effets de cette transition que lorsque vous entrez dans la page à partir d'une autre page.
     
     

    Expires


    Cette balise META "dit" au navigateur la date à laquelle la page Html doit être considérée comme périmée. Avec Netscape, une requête pour un document dont la date est expirée initialisera une recherche sur le réseau au lieu de prendre la page éventuellement présente dans le cache. Ceci est très utile pour les pages fréquemment mises à jour.
    Exemple :
    < META HTTP-EQUIV="expires" CONTENT="Wed, 23 Feb 1999 10:49:02 GMT" >
    < META HTTP-EQUIV="expires" CONTENT="0" >
    Il faut noter que les robots de recherche peuvent retirer ces pages dites périmées de leur base de donnée.
     
    Pragma
    C'est une autre façon de contrôler le cache du navigateur. Avec ce META, vous pouvez demander au browser de ne pas tenir la page dans le cache.
    < META HTTP-EQUIV="Pragma" CONTENT="no-cache" >
    On rapporte que cela fonctionne sous Netscape mais pas par Explorer...
     
      Trucs et astuces de référencement
    Alors que les balises META font partie du Html, il existe des tas de trucs et astuces - plus ou moins vérifiables ou vérifiés - qui sont sensés améliorer le rang de votre site parmi les centaines renvoyés lors d'une recherche par un mot-clé. Vérité ou rumeur... Je vous laisse seul juge.
     
    Référencez-vous
    Cela peut paraître une évidence mais si vous attendez qu'un robot de recherche vienne visiter votre site, vous risquez de devoir attendre longtemps... Hotbot, le moteur de recherche le  plus complet estime lui-même que sa base de donnée ne reprendrait que 30 à 40% des sites du World Wide Web.
    Alors préparez votre liste des moteurs de recherche, prévoyez quelques heures dans votre emploi du temps et au travail ! Sur la page d'accueil de certain moteur de recherche, vous trouverez "Ajouter un site", "Référencement" ou quelque chose du même acabit. En cliquant sur le lien, vous ouvrirez un formulaire, plus ou moins long, à remplir pour référencer directement votre site.
    N'oubliez pas que certains moteurs de recherche style annuaire (comme Yahoo) se réservent de droit de reprendre ou de ne pas reprendre votre site, qu'il faut compter généralement 2 à 3 semaines avant d'apparaître dans la base de donnée et un bon mois avant que les internautes commencent à s'intéresser à votre site. Patience donc ...
     
    De l'importance des mots-clés
    Pour obtenir un bon classement, il faut non seulement définir ces mots-clés dans la balise < META NAME="keywords" CONTENT="mot-clé1,mot-clé2,mot-clé3,..." > mais il est aussi recommandé :
    1. que le ou les mots-clés soi(en)t repris dans le premier paragraphe de la page.
    2. que le ou les mots-clés soi(en)t repris dans le titre de la page (< TITLE >).
    3. que le ou les mots-clés revienne(nt) plus fréquemment que les autres mots de la page.
     
    Faire une page d'accueil en frames
    Les frames ne sont que modérément appréciés par les moteurs de recherche qui ne les tiennent pas ou difficilement en compte (voir tableau comparatif).
    Souvent, emporté par le désir d'en finir au plus tôt avec ce fichier délicat, on s'empresse d'écrire les balises de frame soit : 
    < FRAMESET ROWS="30%,70%" > < FRAME SRC="A.htm" >
      < FRAMESET COLS="30%,70%" > < FRAME SRC="B.htm" >
      < FRAME SRC="C.htm" > < /FRAMESET >.
    On en oublie les règles les plus élémentaires du référencement.
    On oublie généralement de mettre les balises META, plus que jamais indispensables pour les moteurs de recherche.
    On néglige de mettre un titre, à priori inutile car il n'apparaît pas, aux fichiers liés dans le cadre (ici a.htm, b.htm, c.htm). On perd ainsi, des points précieux pour le classement du site parce qu'il y a des pages sans titre et sans référence au mots-clés dans le titre.
    Les moteurs qui ne suivent pas les liens dans les frames se rabattent sur le contenu des balises < NOFRAMES > ... < /NOFRAMES >.
    Avouez que le classique "Désolé, ce site comporte des frames" ne leur apporte pas grand chose à se mettre sous la dent pour votre référencement ! On conseille de reprendre dans les balises < NOFRAMES > un petit texte descriptif du site (avec si possible un rappel des principaux mots-clés). Le "top" est d'y mette aussi un lien vers les pages principales du site.
     
    Une page d'accueil avec une (ou plusieurs) image
    Il est parfois joli de concevoir une page d'accueil composée d'une seule image que le visiteur doit cliquer pour entrer dans le site. Cette situation est assez inconfortable pour le robot à la recherche de mots-clés car il n'a alors aucun texte (et donc de mots) pour faire son référencement...
    Il importe dans ce cas extrême de reprendre le mot-clé dans l'attribut ALT de la balise de l'image.
    La page d'accueil avec une image mapée
    Pour rappel, les images mapées sont des images découpées en zones. Selon les zones cliquées par le lecteur, celui-ci est dirigé vers une page Html déterminée.
     Il est assez risqué, pour obtenir un bon référencement, de prévoir une page d'accueil qui ne comporterait qu'une image mapée comme seul outil de navigation pour votre site. En effet, beaucoup de moteurs de recherche (et pas de moindres comme Hotbot, Excite, Lycos) ne poursuivent pas leur indexation dans les fichiers d'une image mapée. A réserver donc à d'autres usages à l'intérieur de votre site.
    Cette caractéristique est reprise dans le tableau comparatif des moteurs de recherche plus loin dans notre étude.
     
    Et encore
    Sont ou seraient bénéfiques pour un bon référencement :
    1. le fait que votre site soit référencé par d'autres sites.
    2. le fait que votre site soit mis à jour régulièrement.
     
    Désolé...
    Désolé, mais les trucs suivants ne fonctionnent plus et seraient même pénalisés [spam] par les moteurs de recherche :
    1. texte invisible dans la même couleur que le fond de la page.
    2. texte repris en commentaire (balises ).
    3. les mêmes mot-clé repris indéfiniment dans la balise .
    4. le texte dans l'élément de formulaire (éléments cachés).

    Tableau comparatif
     
    Comparatif de la prise en compte des balises META et des particularités de référencement des cinq plus grands moteurs de recherche anglo-saxons.
     
    Prise en compte
    AltaVista
    Hotbot
    Excite
    Infoseek
    Lycos
    Longueur du titre (mots)
    78
    115
    70
    70
    60
    Si le titre est absent...
    No title
    Url de la page
    Untitled
    Premiers mots de la page
    		 Premiers mots de la page
    Longueur de la description
    150
    249
    170-240
    395
    135-200
    Balises META retenues
    mots-clés description
    mots-clés description
    description
    mots-clés description
    aucunes
    Balise ROBOTS
    Oui
    Oui
    Oui
    Oui
    Oui



    Prise en compte
    AltaVista
    Hotbot
    Excite
    Infoseek
    Lycos
    Texte de ALT des images
    Oui
    Non
    Non
    Oui
    Oui
    Texte en commentaire
    Non
    Oui
    Non
    Non
    Non
    Texte invisible
    Non [spam]
    Non [spam]
    Oui
    Non [spam]
    Non [spam]
    Frames
    Oui
    Non
    Non
    Non
    Non
    Images mapées
    Oui
    Non
    Non
    Oui
    Non
    Liens dans d'autres sites
    Non
    Oui
    Oui
    Non
    Oui
    >Date
    Ouitd>
    Oui
    Non
    Oui
    Non
    Mises à jour
    Oui
    Oui
    Non
    Non
    Oui

    Code erreurs SMTP

    par | Jan 10, 2021 | Codage


    INTERNET

    Les codes

    d’erreurs SMTP

        

    Les codes d'erreur SMTP



    Ces codes sont génés par le serveur SMTP lors du traitement des messages électroniques.
    Vous pouvez trouver ses codes lors de réception de message d'erreur par exemple et cette liste vous permettra de comprendre purquoi votre message n'est pas arrivé au destinataire..

    Code Description
    421
    		 Service non disponible, canal en fermeture (Domain service not available, closing transmission channel)
    432
    		 A password transition is needed.
    450
    		 Action non effectuée : boîte-aux-lettres non disponible [Ex., bloquée par un autre utilisateur] (Requested mail action not taken: mailbox unavailable.)
    451
    		 Action arrêtée : erreur de traitement (Requested action aborted: local error in processing)
    452
    		 Action non effectuée : manque de ressources système (Requested action not taken: insufficient system storage)
    454
    		 TLS not available due to temporary reason.
    Encryption required for requested authentication mechanism.
    458
    		 Unable to queue messages for node node.
    459
    		 Node node not allowed: reason.
    500
    		 Erreur de syntaxe, commande non reconnue (Command not recognized: command. Syntax error)
    501
    		 Erreur de syntaxe dans des paramètres ou arguments (Syntax error, no parameters allowed)
    502
    		 Commande non implémentée (Command not implemented)
    503
    		 Mauvaise séquence de commandes (Bad sequence of commands)
    504
    		 Paramètre de commande non implémenté (Command parameter not implemented)
    521
    		 Machine does not accept mail.
    530
    		 Must issue a STARTTLS command first.
    Encryption required for requested authentication mechanism.
    534
    		 Authentication mechanism is too weak.
    538
    		 Encryption required for requested authentication mechanism.
    550
    		 Action non effectuée : boîte-aux-lettres non disponible, non trouvée, pas d'accès (Requested action not taken: mailbox unavailable)
    551
    		 Utilisateur non local. essayer forwardpath (User not local; please try forwardpath)
    552
    		 Action arrêtée : manque de ressources de stockage (Requested mail action aborted: exceeded storage allocation)
    553
    		 Action non effectuée : nom de boîte-aux-lettres non autorisé (Requested action not taken: mailbox name not allowed)
    554
    		 Transaction échouée. (Transaction failed)



    Les codes d'erreur ESMTP

    Le protocole SMTP est limité dans les codes d'erreurs délivrés. Le protocole ESMTP est un système plus complet de gestion codes d'erreur. La syntaxe des codes est constituée de 3 chiffres qui sont respectivement : classe, subect et détail.

    Avec :
    • classe = "2", "4" ou "5",
      • 2 signifie succès (Success) : l'opération s'est déroulée sans heurt.
      • 4 indique une erreur temporaire (Persistent Transient Failure) : Attendez un peu avant de renvoyer le message.
      • 5 signale une erreur permanente (Permanent Failure) : Si vous avez un autre moyen de contacter le destinataire......
    • subject = nombre de 0 à 9
    • detail = nombre de 0 à 9
    Les deuxième (subject) et troisième (detail) parties donnent des indications supplémentaires
    • X.0.X Other or Undefined Status There is no additional subject information available. >X.0.0 Other undefined Status Other undefined status is the only undefined error code. It should be used for all errors for which only the class of the error is known.
    • X.1.X Addressing Status The address status reports on the originator or destination address. It may include address syntax or validity. These errors can generally be corrected by the sender and retried.
    • X.1.0 Other address status Something about the address specified in the message caused this DSN.
    • 5.1.1 Bad destination mailbox address L'adresse spécifiée n'existe pas : la partie de gauche de l'adresse e-mail (avant le @) est fausse.
    • X.1.2 Bad destination system address The destination system specified in the address does not exist or is incapable of accepting mail. For Internet mail names, this means the address portion to the right of the "@" is invalid for mail. This codes is only useful for permanent failures.
    • X.1.3 Bad destination mailbox address syntax The destination address was syntactically invalid. This can apply to any field in the address. This code is only useful for permanent failures.
    • X.1.4 Destination mailbox address ambiguous The mailbox address as specified matches one or more recipients on the destination system. This may result if a heuristic address mapping algorithm is used to map the specified address to a local mailbox name.
    • X.1.5 Destination address valid This mailbox address as specified was valid. This status code should be used for positive delivery reports.
    • X.1.6 Destination mailbox has moved, No forwarding address The mailbox address provided was at one time valid, but mail is no longer being accepted for that address. This code is only useful for permanent failures.
    • X.1.7 Bad sender's mailbox address syntax The sender's address was syntactically invalid. This can apply to any field in the address.
    • X.1.8 Bad sender's system address The sender's system specified in the address does not exist or is incapable of accepting return mail. For domain names, this means the address portion to the right of the "@" is invalid for mail.
    • X.2.X Mailbox Status Mailbox status indicates that something having to do with the mailbox has cause this DSN. Mailbox issues are assumed to be under the general control of the recipient.
    • X.2.0 Other or undefined mailbox status The mailbox exists, but something about the destination
      mailbox has caused the sending of this DSN.
    • X.2.1 Mailbox disabled, not accepting messages The mailbox exists, but is not accepting messages. This may be a permanent error if the mailbox will never be re-enabled or a transient error if the mailbox is only temporarily disabled.
    • 5.2.2 Boîte aux lettres saturée (Mailbox full) La boîte aux lettres du destinataire est saturée : son propriétaire a depassé le quota de courrier admis. Seule solution : attendre que votre correspondant vide sa boîte.
    • X.2.3 Message length exceeds administrative limit A per-mailbox administrative message length limit has been exceeded. This status code should be used when the per-mailbox message length limit is less than the general system limit. This code should be used as a permanent failure.
    • X.2.4 Mailing list expansion problem The mailbox is a mailing list address and the mailing list was unable to be expanded. This code may represent a permanent failure or a persistent transient failure.
    • X.3.X Mail System Status Mail system status indicates that something having to do with the destination system has caused this DSN. System issues are assumed to be under the general control of the destination system administrator.
    • X.3.0 Other or undefined mail system status The destination system exists and normally accepts mail, but something about the system has caused the generation of this DSN.
    • X.3.1 Mail system full Mail system storage has been exceeded. The general semantics imply that the individual recipient may not be able to delete material to make room for additional messages. This is useful only as a persistent transient error.
    • X.3.2 System not accepting network messages The host on which the mailbox is resident is not accepting messages. Examples of such conditions include an immanent shutdown, excessive load, or system maintenance. This is useful for both permanent and permanent transient errors.
    • X.3.3 System not capable of selected features Selected features specified for the message are not supported by the destination system. This can occur in gateways when features from one domain cannot be mapped onto the supported feature in another.
    • X.3.4 Message too big for system The message is larger than per-message size limit. This limit may either be for physical or administrative reasons. This is useful only as a permanent error.
    • X.3.5 System incorrectly configured The system is not configured in a manner which will permit it to accept this message.
    • X.4.X Network and Routing Status The networking or routing codes report status about the delivery system itself. These system components include any necessary infrastructure such as directory and routing services. Network issues are assumed to be under the control of the destination or intermediate system administrator.
    • X.4.0 Other or undefined network or routing status Something went wrong with the networking, but it is not clear what the problem is, or the problem cannot be well expressed with any of the other provided detail codes.
    • >X.4.1 No answer from host The outbound connection attempt was not answered, either because the remote system was busy, or otherwise unable to take a call. This is useful only as a persistent transient error.
    • X.4.2 Bad connection The outbound connection was established, but was otherwise unable to complete the message transaction, either because of time-out, or inadequate connection quality. This is useful only as a persistent transient error.
    • X.4.3 Directory server failure ou routing server failure (erreur de routage)
      Le message n’a pas été envoyé car le serveur n’a pas réussi à atteindre le serveur de messagerie de vos destinataires (indiqué dans l’adresse, après le @).
    • X.4.4 Unable to route The mail system was unable to determine the next hop for the message because the necessary routing information was unavailable from the directory server. This is useful for both permanent and persistent transient errors.
      A DNS lookup returning only an SOA (Start of Administration) record for a domain name is one example of the unable to route error.
    • 4.4.5 Mail system congestion The mail system was unable to deliver the message because the mail system was congested.
    • 4.4.6 Routing loop detected A routing loop caused the message to be forwarded too many times, either because of incorrect routing tables or a user forwarding loop.
    • 4.4.7 Delivery time expired Le délai d'acheminement de votre message a été jugé trop long. Votre message n'a donc pas été délivré. Cette erreur est temporaire : envoyez à nouveau votre message.
      The message was considered too old by the rejecting system, either because it remained on that host too long or because the time-to-live value specified by the sender of the message was exceeded. If possible, the code for the actual problem found when delivery was attempted should be returned rather than this code.
    • X.5.X Mail Delivery Protocol Status The mail delivery protocol status codes report failures involving the message delivery protocol. These failures include the full range of problems resulting from implementation errors or an unreliable connection. Mail delivery protocol issues may be controlled by many parties including the originating system, destination system, or intermediate system administrators.
    • X.5.0 Other or undefined protocol status Something was wrong with the protocol necessary to deliver the message to the next hop and the problem cannot be well expressed with any of the other provided detail codes.
    • 5.5.1 Invalid command (commande invalide) A mail transaction protocol command was issued which was either out of sequence or unsupported.
    • 5.5.2 Syntax error A mail transaction protocol command was issued which could not be interpreted, either because the syntax was wrong or the command is unrecognized.
    • X.5.3 Too many recipients More recipients were specified for the message than could have been delivered by the protocol. This error should normally result in the segmentation of the message into two, the remainder of the recipients to be delivered on a subsequent delivery attempt. It is included in this list in the event that such segmentation is not possible.
    • 5.5.4 Invalid command arguments A valid mail transaction protocol command was issued with invalid arguments, either because the arguments were out of range or represented unrecognized features.
    • X.5.5 Wrong protocol version A protocol version mis-match existed which could not be automatically resolved by the communicating parties.
    • X.6.X Message Content or Media Status The message content or media status codes report failures involving the content of the message. These codes report failures due to translation, transcoding, or otherwise unsupported message media. Message content or media issues are under the control of both the sender and the receiver, both of whom must support a common set of supported content-types.
    • X.6.0 Other or undefined media error Something about the content of a message caused it to be considered undeliverable and the problem cannot be well expressed with any of the other provided detail codes.
    • X.6.1 Media not supported The media of the message is not supported by either the delivery protocol or the next system in the forwarding path.
    • X.6.2 Conversion required and prohibited The content of the message must be converted before it can be delivered and such conversion is not permitted. Such prohibitions may be the expression of the sender in the message itself or the policy of the sending host.
    • X.6.3 Conversion required but not supported The message content must be converted to be forwarded but such conversion is not possible or is not practical by a host in the forwarding path. This condition may result when an ESMTP gateway supports 8bit transport but is not able to downgrade the message to 7 bit as required for the next hop.
    • X.6.4 Conversion with loss performed This is a warning sent to the sender when message delivery was successfully but when the delivery required a conversion in which some data was lost. This may also be a permanant error if the sender has indicated that conversion with loss is prohibited for the message.
    • X.6.5 Conversion Failed A conversion was required but was unsuccessful. This may be useful as a permanent or persistent temporary notification.
    • X.7.X Security or Policy Status The security or policy status codes report failures involving policies such as per-recipient or per-host filtering and cryptographic operations. Security and policy status issues are assumed to be under the control of either or both the sender and recipient. Both the sender and recipient must permit the exchange of messages and arrange the exchange of necessary keys and certificates for cryptographic operations.
    • X.7.0 Other or undefined security status Something related to security caused the message to be returned, and the problem cannot be well expressed with any of the other provided detail codes. This status code may also be used when the condition cannot be further described because of security policies in force.
    • X.7.1 Delivery not authorized, message refused The sender is not authorized to send to the destination. This can be the result of per-host or per-recipient filtering. This memo does not discuss the merits of any such filtering, but provides a mechanism to report such.
    • X.7.2 Mailing list expansion prohibited The sender is not authorized to send a message to the intended mailing list.
    • X.7.3 Security conversion required but not possible A conversion from one secure messaging protocol to another was required for delivery and such conversion was not possible. This is useful only as a permanent error.
    • X.7.4 Security features not supported A message contained security features such as secure authentication which could not be supported on the delivery protocol. This is useful only as a permanent error.
    • X.7.5 Cryptographic failure A transport system otherwise authorized to validate or decrypt a message in transport was unable to do so because necessary information such as key was not available or such information was invalid.
    • X.7.6 Cryptographic algorithm not supported A transport system otherwise authorized to validate or decrypt a message was unable to do so because the necessary algorithm was not supported.
    • X.7.7 Message integrity failure Votre message n'a pu être validé parce qu'il a été corrompu ou alteré en cours de route.
      A transport system otherwise authorized to validate a message was unable to do so because the message was corrupted or altered.


       

    Langage informatique

    par | Jan 10, 2021 | Codage

    INTERNET

    Les langages informatiques

       

    Principaux langages informatiques



    Language
    Origine
    Création
    Commentaires
    ADA
    		 Augusta ADA Byron (Lady Lovelace)
    1979
    		 Dérivé du Pascal, développé par le Département de la Défense américain.
    ALGOL
    		 ALGOrithmic Language
    1960
    		 Précurseur des languages structurés comme le C ou le PASCAL.
    APL
    		 A Programming Language
    1961
    		 Langage interprété ayant une syntaxe concise et utilisant la symbolique.
    BASIC
    		 Beginners All-Purpose Symbolic Instruction Code
    1965
    		 Langage de programmation interprété, d'abord simple ayant fortement participé à la démocratisation de l'informatique.
    C
    		 C'est une version améliorée du langage de programmation B de Bell Laboratory
    1972
    		 Langage de programmation structuré et compilé. Sa forte portabilité à grandement facilité son utilisation.
    COBOL
    		 COmmon Business-Oriented Language
    1959
    		 Langage de programmation proche de l'anglais employé essentiellement pour des application de gestion.
    FORTH
    		 FOuRTH generation language
    1970
    		 Langage structuré et interprété avec la possibiltié de développé ses propre fonctions.
    FORTRAN
    		 FORmula TRANslation
    1954
    		 D'un abord rude, mais permettant le développement d'applciation scientifique de part ses possibilités de manipulation de variable et de pilotage d'outil externe servant à acqurir des informations en "temps réel".
    LISP
    		 LISt Processing
    1960
    		 Langage de programmation interprété permettant la manipulation de liste de données. L'intelligence artificielle lui a donné ses lettres de noblesse.
    Pascal
    		 Blaise PASCAL, mathématicien et inventeur de la première machine à calculer
    1971
    		 Langage structuré et compilé. Comme le langage C, il est devenu un langage de développement standard pour les micro-ordinateurs.
    PHP
    		 Hypertext Preprocesseur. Conçu par Rasmus Lerdorf
    1994
    		Langage de programmation interprété en OPEN SOURCE servant aux développements de site Internet intéractif.
    PL/1
    		 Programming Language One
    1964
    		 Langage de programmation complexe. Il a été fortement utilisé dans les universités centres de recherche à connotation scientifique.
    PROLOG
    		 PROgramming in LOGic
    1972
    		 Langage de programmation utilisé en intelligence artificielle. Sa force provient de sa capacité à manipuler des ralations logiques.
      

    Le code UNICODE

    par | Jan 10, 2021 | Codage

    INTERNET

    Le code UNICODE

       

    Mémo UNICODE



    Caractères en code ISO 5589-1 , ainsi que leur abréviation ENTITY HTML.
    Utiliser le code ENTITY dans l'encodage de vos pages Web, en lieu et place du caractères à afficher.

    Caractère
    Code ISO
    ENTITY
    Caractère
    Code ISO
    ENTITY
    Caractère
    Code ISO
    ENTITY
     
     
     «
    «
    «
     Õ
    Õ
    Õ
     ‚
    ‚
     
     ¬
    ¬
    ¬
     Ö
    Ö
    Ö
     ƒ
    ƒ
     
     ­
    ­
    ­
     ´
    ×
    ×
     „
    „
     
     ®
    ®
    ®
     Ø
    Ø
    Ø
     …
    …
     
     ¯
    ¯
    &masr;
     Ù
    Ù
    Ù
     †
    †
     
     °
    °
    °
     Ú
    Ú
    Ú
     ‡
    ‡
     
     ±
    ±
    ±
     Û
    Û
    Û
     ˆ
    ˆ
     
     ²
    ²
    ²
     Ü
    Ü
    Ü
     ‰
    ‰
     
     ³
    ³
    ³
     Ý
    Ý
    Ý
     Š
    Š
     
     ´
    ´
    ´
     Þ
    Þ
    Þ
     ‹
    ‹
     
     m
    µ
    µ
     ß
    ß
    ß
     Œ
    Œ
     
     ¶
     à
    à
    &agrace;
     
     
     ·
    ·
    ·
     á
    á
    á
     
    Ž
     
     ¸
    ¸
    ¸
     â
    â
    â
     
     
     1
    ¹
    ¹
     ã
    ã
    ã
     
     
     º
    º
    º
     ä
    ä
    ä
     ‘
    '
     
     »
    »
    »
     å
    å
    å
     ’
    '
     
     ¼
    ¼
    ¼
     æ
    æ
    æ
      “
    "
     
     ½
    ½
    ½
     ç
    ç
    ç
      ”
    "
     
     ¾
    ¾
    ¾
     è
    è
    è
     •
    •
     
     ¿
    ¿
    ¿
     é
    é
    é
     –
    –
     
     À
    À
    À
     ê
    ê
    ê
     —
    —
     
     Á
    Á
    Á
     ë
    ë
    ë
     ˜
    ˜
     
     Â
    Â
    Â
     ì
    ì
    ì
     ™
    ™
     
     Ã
    Ã
    Ã
     í
    í
    í
     š
    š
     
     Ä
    Ä
    Ä
     î
    î
    î
     ›
    ›
     
     Å
    Å
    Å
     ï
    ï
    ï
     œ
    œ
     
     Æ
    Æ
    &Aelig
     ð
    ð
    ð
     
     
     Ç
    Ç
    Ç
     ñ
    ñ
    ñ
     
    ž
     
     È
    È
    È
     ò
    ò
    ò
     Ÿ
    Ÿ
     
     É
    É
    É
     ó
    ó
    ó
     espace
     
     
     Ê
    Ê
    &Ecric;
     ô
    ô
    ô
     ¡
    ¡
    ¡
     Ë
    Ë
    Ë
     õ
    õ
    õ
     ¢
    ¢
    ¢
     Ì
    Ì
    Ì
     ö
    ö
    ö
     £
    £
    £
     Í
    Í
    Í
     ¸
    ÷
    ÷
     ¤
    ¤
    ¤
     Î
    Î
    Î
     ø
    ø
    ø
     ¥
    ¥
    ¥
     Ï
    Ï
    Ï
     ù
    ù
    ù
      ¦
    ¦
    ¦
     Ð
    Ð
    Ð
     ú
    ú
    ú
     §
    §
    §
     Ñ
    Ñ
    Ñ
     û
    û
    û
     ¨
    ¨
    ¨
     Ò
    Ò
    Ò
     ü
    ü
    ü
     ©
    ©
    ©   
     Ó
    Ó
    Ó
     ý
    ý
    ý
     ª
    ª
    ª
     Ô
    Ô
    Ô
     þ
    þ
    þ
     
     
     
     
     
     
     ÿ
    ÿ
    ÿ
    Caractère
    Code ISO
    ENTITY
    Caractère
    Code ISO
    ENTITY
    Caractère
    Code ISO
    ENTITY