FORMATAGE DE POLICE
Généralités sur le formatage de police
Sous le terme formatage de police, il faut comprendre les mentions concernant le genre de police, la taille de police, la graisse de police, les espaces entre les signes et les mots etc Ces mentions se prêtent à tous les éléments HTML qui peuvent contenir du texte. En font partie tous les repères qui sont décrits dans le chapitre sur les éléments pour structurer le texte, mais aussi par exemple tous les repères pour les tableaux. Même sur l'élément body il est possible d'employer les mentions de feuilles de style énumérées ici - dans ce cas les mentions sont valables pour tous les éléments de texte de tout le fichier HTML.
Sous le terme famille de police, il faut comprendre les espèces de polices comme par exemple Arial, Helvetica, Times Roman etc En font également partie des familles de police comme Sans Sérif etc
Avec la commande décrite ici, vous pouvez mentionner des espèces de polices sans vous soucier comment et si la police peut être affichée chez l'utilisateur. Au cas où la police mentionnée ne peut pas être affichée, la mention reste sans effet. Une possibilité d'imposer des polices en mentionnant une certaine source de données de polices est décrite dans la partie traitant du Formatage de police avec fichier depolices.
Exemple:
| font-family
petit texte d'exemple |
| en Times New Roman grand texte d'exemple en Times New Roman petit texte d'exemple en Verdana grand texte d'exemple en Verdana
|
Explication:
Avec font-family: vous pouvez spécifier une ou plusieurs polices. Si vous en mentionnez plusieurs, l'ordre dans lequel vous les mentionnez est déterminant: si la première est disponible, elle sera utilisée, sinon ce sera la deuxième au cas où elle est disponible etc
Séparez les noms de polices par des virgules. Le consortium W3 recommande de mettre entre guillemets les noms de police qui contiennent des espaces, donc par exemple font-familiy:"Century Schoolbook",Times. Vous pouvez utiliser pour le faire les guillemets doubles ou le guillemet simple (apostrophe). Au cas où les propriétés CSS comme dans l'exemple ci-dessus sont placées dans un attribut style dans du code source HTML, elles ne peuvent pas utiliser les mêmes guillemets que ceux utilisés pour l'affectation de valeur à l'attribut HTML. Dans l'exemple ci-dessus, vous voyez que l'affectation de style est placée dans des guillemets doubles. À l'intérieur sont utilisés pour cette raison des guillemets simples pour 'Times New Roman', ce qui permet d'éviter les conflits.
Les familles de police génériques suivantes dont prédéfinies - Vous pouvez utiliser ces mentions à côté du nom de police:
serif = une famille de police avec empattement, sans-serif = une famille de police sans empattement, cursive = une famille de police pour écriture manuscrite, fantasy = une famille de police pour écriture originale, monospace = une famille de police avec des signes courrier.
Il est recommandé, de noter ces familles de polices comme dernière mention d'une affectation de valeur à font-family - comme dans le premier des exemples ci-dessus. Vous donnez ainsi la chance au navigateur de choisir une famille de police qui corresponde au moins au type de celle que vous désirez, au cas ou la police désirée ne peut pas être affichée.
Le style de police désigne l'orientation de la police.
Exemple:
font-style
petit texte d'exemple avec le style de police italique
| grand texte d'exemple avec le style de police italique
|
Explication:
Avec font-style: vous pouvez spécifier le style de police. Les données suivantes sont possibles:
| italic | = | style | de | police | italique. |
| oblique | = | style | de | police | oblique. |
normal = style de police normal.
Comme variante de police particulière existent les capitales (petites majuscules).
Exemple:
| font-variant
petit texte d'exemple avec la variante de police normale grand texte d'exemple avec la variante de police normale petit texte d'exemple |
| avec la variante de police petites capitales grand texte d'exemple avec la variante de police petites capitales
|
Explication:
Avec font-variant: vous pouvez spécifier la variante de police. Les données suivantes sont possibles:
small-caps = petites capitales. normal = variante de police normale.
La taille de police est la taille dans laquelle elle sera représentée.
Exemple:
| font-size
Texte d'exemple avec une taille de police de 6pt |
Explication:
Avec font-size: vous pouvez spécifier la taille de police. Une mention numérique. est permise. Une mention en pourcentage est également permise. Les mentions en pourcentage se réfèrent à la taille de police de l'élément parent.
Les mentions "approximatives" suivantes sont aussi possibles et offrent une alternative aux données numériques:
xx-small =minuscule. x-small = très petit.
small = petit. medium = moyen. large = grand.
x-large = très grand. xx-large = géant. smaller = visiblement plus petit que normal. larger = visiblement plus grand que normal.
Attention:
Vous pouvez combiner la mention de la taille de police avec la mention de la hauteur de ligne, en notant les deux mentions dans la propriété font en respectant la syntaxe suivante (exemple): p { font:12pt/14pt }. Dans l'exemple la taille de police est de 12 points et la hauteur de ligne est de 14points. Pour cette façon de noter, le nombre placé avant la barre oblique désigne la taille de police et le nombre derrière la barre oblique, la hauteur de la ligne.
La graisse de police correspond à l'état plus ou moins gras dans lequel la police est représentée.
Exemple:
| font-weight
petit texte d'exemple avec un poids de police en gras grand texte d'exemple avec un poids de police en gras petit texte d'exemple avec un poids de police 100 grand texte d'exemple avec un poids de police 100
|
Explication:
Avec font-weight: vous pouvez déterminer la graisse de la police. les mentions permises relatives à la graisse de la police:
bold = gras. bolder = très gras. lighter = plus fin.
100,200,300,400,500,600,700,800,900 = très fin (100) jusqu'à très gras (900) . normal = graisse normale de police.
Pour les valeurs numériques la mention 500 correspond dans le domaine DTP au réglage habituel medium(moyen), et la mention 700 correspond au réglage bold(gras).
Attention:
Il n'y a pour ainsi dire aucune police installée qui supporte toutes les mentions permises relatives à la graisse de police.
L'étirement de la police mentionne à quel point la police paraît étroite ou large.
Exemple:
| font-stretch
petit texte d'exemple avec un étirement plus large (wider) grand texte d'exemple avec un étirement plus large (wider) petit texte d'exemple avec un étirement plus serré (narrower) grand texte d'exemple avec un étirement plus serré (narrower)
|
Explication:
Avec font-stretch: vous pouvez fixer l'étirement de la police. Les mentions suivantes sont possibles:
wider = plus large que normal. narrower = plus serré que normal.
condensed = condensé. semi-condensed = à moitié condensé. extra-condensed = très condensé. ultra-condensed = extrêmement condensé. expanded = étendu. semi-expanded = à moitié étendu. extra-expanded = très étendu.
ultra-expanded = extrêmement étendu. normal = étirement normal.
Attention:
Cette propriété n'est pas encore interprétée par les navigateurs répandus.
Cette mention est un résumé des mentions distinctes facultatives suivantes:
font-family font-style font-variant font-size font-weight line-height Exemple:
| font
Texte d'exemple avec police: bold 12pt Times Texte d'exemple avec police: italic 1cm Helvetica Texte d'exemple avec police: small-caps 14pt Verdana
|
Explication:
Avec font: vous pouvez mélanger différents formatages de police. Les mentions de valeur habituelles sont permises pour les propriétés de feuilles de style autorisées qui sont résumées dans font:. L'ordre des mentions n'a pas d'importance.
Avec cette mention, vous pouvez spécifier l'espace entre les mots dans le texte.
Exemple:
| word-spacing
Texte d'exemple avec espacement des mots de |
| 6pt Texte d'exemple avec espacement des mots de 8pt
|
Explication:
Avec word-spacing: vous pouvez déterminer l'espace entre les mots. Une mention numérique est permise, mais cependant aucune en pourcentage.
Attention:
Cette mention n'est pas encore interprétée par tous les navigateurs.
Avec cette mention vous pouvez spécifier l'espace entre les lettres ou signes dans le texte.
Exemple:
| letter-spacing
Texte d'exemple | avec | espacement | des |
| caractères de 1pt Texte d'exemple | avec | espacement | des |
| caractères de 2pt
| |||
Explication:
Avec letter-spacing: vous pouvez spécifier l'espacement de la police. Une mention numérique est permise, mais cependant aucune en pourcentage.
Attention:
Cette mention n'est pas encore interprétée par Netscape 4.x .
Avec cette propriété vous pouvez apporter des formatages supplémentaires comme préciser si le texte doit être souligné ou barré.
Exemple:
| text-decoration
|
|
Vour connaissez certainement la page d'accueil à SELFHTML Mais vous connaissez aussi les ?ou bien les abréviations de langue?
|
Explication:
Avec text-decoration: vous pouvez spécifier des formatages complémentaires. Les mentions suivantes sont possibles:
underline = souligné.
overline = ligne au dessus. line-through = barré. blink = clignotant. none = normal (pas de décoration du texte).
Attention:
L'Explorer Internet MS n'interprète pas la mention blink. Netscape 4.x n'interprète pas encore la mention overline ce que fait pourtant Netscape 6.x.
Avec cette mention vous pouvez imposer dans un passage de texte des minuscules, des majuscules ou des capitales indépendamment de la façon dont les lettres figurent effectivement dans le fichier.
Exemple:
| text-transform
petit texte d'exemple avec transformation du texte capitalize grand texte d'exemple avec transformation du texte capitalize
|
Avec text-transform: vous pouvez forcer une transformation du texte. Les données suivantes sont possibles:
capitalize = début des mots en majuscules.
uppercase = tout en majuscules. lowercase = tout en minuscules. none = normal (pas de transformation du texte).
Attention:
L'Explorer Internet 4.x n'interprète pas encore la mention capitalize.
color (Couleur du texte)
Avec cette mention vous pouvez spécifier la couleur de premier plan pour le texte ou bien une couleur de police.
Exemple:
| color
petit texte d'exemple avec la couleur bleu grand texte d'exemple avec la couleur bleu
|
Explication:
Avec color: vous pouvez spécifier la couleur du texte. Les mentions de couleursont permises.
Astuce:
Pour la définition de couleurs vous pouvez utiliser l' instrument de choix decouleur de SELFHTML.
Avec cette mention vous pouvez créer un effet d'ombre pour le texte.
Exemple:
| text-shadow
grand Texte rouge avec ombre noire grand Texte noir avec ombre verte
|
Explication:
Avec text-shadow: vous pouvez imposer un ombrage au texte. Les mentions decouleur ou bien la valeur none pour "aucune ombre pour le texte" sont permises.
Attention:
Cette commande qui appartient à la version 2.0 des feuilles de style CSS n'est encore interprétée à l'heure actuelle par aucun des navigateurs répandus.
@font-face, src, font-family (Formatage de police avec
Avec cette mention vous pouvez définir une police et adresser directement les ressources de données de la police désirée, à savoir certains fichiers de police ou tout au moins décrire exactement à l'aide de commandes spéciales les caractéristiques de la police désirée. Lors de la définition de la police, vous attribuez un nom pour la police. Vous pouvez ensuite utiliser ce nom avec la propriété font-family.
Exemple:
| font-face
Texte en Garamond
|
Explication:
Avec @font-face vous démarrez la mention d'une police exacte dans un passage style. Derrière suivent dans des parenthèses accolades {Alt123 et Alt125} les données. Les deux plus importantes sont le nom de la policefont-family et l'adresse URI du fichier de police src:url(fichier).
Vous affectez le nom de police avec la mention font-family: dans le passage @font-face. Sous ce nom, vous pouvez utiliser la police en HTML. Dans l'exemple ci-dessus il y a un paragraphe qui grâce à une mention de feuille de style imposera la police définie plus haut.
Mentionnez le fichier de police que vous avez spécifié pour les mentions relatives à font-family avec src:url(fichier). Si le fichier de police se trouve dans le même répertoire que le fichier HTML, la mention du nom de fichier suffit. Autrement vous devez indiquer la situation exacte du fichier de police soit par une mention relative de chemin soit par une adresse absolue du type http:// .
Dans l'exemple ci-dessus, vous voyez que d'emblée deux mentions URL ont été notées. Une fois c'est un fichier avec extension eot qui est mentionné comme source de police, une fois un fichier avec extension pfr. Les deux formats sont spécifiques aux navigateurs: les fichiers eot sont des fichiers de polices que reconnaît l' Explorer Internet MS (à partir de la version 4.0) comme polices Web; les fichiers pfr sont des fichiers de police que Netscape reconnaît (à partir de la version 4.0). Si vous pouvez proposer la police que vous désirez dans les deux formats, vous pouvez incorporer les deux formats comme dans l'exemple ci-dessus.
Vous trouverez les détails sur les polices eot- et pfr et comment vous pouvez les faire vous-même dans le chapitre sur les paramètres internationaux dans la partie traitant des Polices à télécharger.
Quand vous définissez une police avec un fichier de police, vous pouvez aussi faire mention des propriétés de format possibles de la police comme par exemple pour les style de police (font-style), variante de police(font-variant), taille de police (font-size) ou bien la graisse de la police (font-weight). Ainsi vous faites déjà savoir au navigateur WWW dans votre fichier HTML quelles propriétés de format supporte le fichier de police. Le navigateur ne transmet dans ce cas le fichier de police à l'utilisateur que si les formatages dans le fichier HTML le justifient.
Exemple:
| font-face
Texte
| font- |
Explication:
Avec les commandes de feuilles de style habituelles, vous pouvez, lors de la définition d'une police avec fichier de police, faire des mentions restrictives à la police.
Pour cela veillez aux particularités suivantes:
Pour font-style vous pouvez faire plusieurs mentions permises. Séparez ces mentions par des virgules, à savoir par exemple: fontstyle:normal,italic;.
Pour font-variant vous pouvez aussi faire plusieurs mentions permises. Séparez ces mentions par des virgules, à savoir par exemple: fontstyle:normal,small-caps;.
Pour font-weight les mentions bolder et lighter ne sont pas permises. Par ailleurs, vous pouvez aussi faire plusieurs mentions permises. Séparez ces
mentions par des virgules, à savoir par exemple: fontweight:normal,bold,900;.
Pour font-size seules sont permises des mentions de taille absolues comme par exemple font-size:18pt. Les mentions de taille relatives comme les mentions en pourcentage ou les mentions em ne sont pas permises. Par ailleurs, vous pouvez aussi faire plusieurs mentions permises. Séparez ces mentions par des virgules, à savoir par exemple: font-
Si vous définissez une police avec fichier de police, vous pouvez limiter le domaine des signes dans la définition. Ainsi vous faites déjà savoir au navigateur WWW dans votre fichier HTML quel domaine de signes soutient la police. Le navigateur ne transmet dans ce cas le fichier de police à l'utilisateur que si tous les signes d'un texte qui est formaté avec la police se trouvent dans le domaine Unicode défini. Pour cela prévaut le système Unicode comme base.
Exemple:
| unicode-range
Texte avec œ et ç
| unicode- |
Explication:
Avec unicode-range: vous pouvez faire connaître le domaine des signes du fichier de police avant le téléchargement. Dans l'exemple ci-dessus le domaine U+0000-007F est défini. Cela correspond à la page de codes ASCII. Si maintenant dans un passage qui utilise cette police se trouvent des caractères spéciaux qui ne se trouvent pas dans la page de codes, le fichier ne sera pas chargé.
Les mentions Unicode commencent toujours par U+. Puis suit une mention des signes désirés sous forme hexadécimale. Pour définir un domaine qui comprend plusieurs signes Unicode, vous pouvez utiliser comme joker (Wildcard) un point d'interrogation ?. Pour une mention comme unicoderange:U+00?? les deux points d'interrogation placés à la suite l'un de l'autre à la fin de la mention font en sorte que le domaine de signes désiré comprend 16 puissance 2, donc 256 signes à partir du signe U+00. Étant donné que d'après le système Unicode la page de codes Western-Latin-1 commence à U+0000 et qu'elle comprend 256 signes, la mention dans l'exemple couvre exactement cette page de codes. Si vous désirez spécifier un domaine Unicode de votre choix, vous pouvez le faire avec une mention du type U+AC00-D7FF
La version 2.0 du langage CSS dispose de quelques mentions de feuilles de style pour rendre les sources de police dans la mesure du possible définissables et accessibles de multiples façons.
Exemple:
Explication:
Vous pouvez faire en sorte que le navigateur WWW cherche d'abord sur l'ordinateur de l'utilisateur la police désirée et ne télécharge la police qui est prête sur le serveur que si la police n'est pas trouvée localement. Pour cela, notez d'abord, séparé par un espace des mentions sur src:local() et/ou src:url(), la mention format(). Dans les parenthèses vous pouvez noter le format du fichier de police. Dans l'exemple ci-dessus est mentionnée une police du type TrueType url(). Ce format n'est répandu que dans le monde de Windows. Les utilisateurs qui se servent par exemple d'un ordinateur Macintosh ou Amiga, ne peuvent rien faire d'un tel fichier. Un navigateur WWW qui connaît ces mentions n'a donc pas besoin de télécharger un tel fichier.
Il y a d'autres possibilités pour limiter exactement la police:
Avec panose-1:, suivi de 10 chiffres séparés par un espace, vous pouvez spécifier une police d'après le système Panose-1. Exemple: panose-1: 2 4
5 2 5 4 5 9 3 3;
Avec stemv: et stemh: vous pouvez mentionner les dimensions horizontale et verticale du corps des lettres.
Avec units-per-em: vous pouvez mentionner le nombre d'unités par unité de mesure em. Les valeurs habituelles sont 250 (pour intellifont), 1000 (pour Type-1) ou 2048 (pour TrueType). Si vous mentionnez stemv: et/oustemh:,vous devez aussi mentionner units-perem: .
Avec slope: vous pouvez mentionner l'angle des lettres avec la verticale.
Avec cap-height:vous mentionner la hauteur des lettres majuscules.
Avec x-height: vous mentionner la hauteur des lettres minuscules. Avec ascent: vous pouvez mentionner la hauteur maximale des lettres sans accent.
Avec descent: vous pouvez mentionner la profondeur maximale des lettres sans accent.
Avec definition-src:url() vous pouvez mentionner un fichier avec des définitions de polices.
Avec baseline: vous pouvez mentionner la ligne inférieure de base des lettres.
Avec centerline: vous pouvez mentionner la ligne centrale de base des lettres.
Avec mathline: vous pouvez mentionner la ligne mathématique de base des lettres.
Avec topline:vous pouvez mentionner la ligne supérieure de base des lettres.
Avant toute chose, assurez-vous d'avoir créé un dossier personnel de travail à votre nom sur la machine.
Première page
Il est demandé de créer une première page HTML de base, à l'aide du "BlocNote" de Windows. Cette page comportera :
• un titre dans la barre du navigateur
• trois paragraphes, alignés à gauche, droite, et justifiés.
• des commentaires
Placer une déclaration de type de document dans le prologue; tester le résultat de la validation de votre page sur le site du validateur HTML du W3C, en spécifiant tout d'abord du HTML 3.2, puis 4.01 Transitional, puis
4.01.
Mise en forme de texte
1. Mettre en forme l'article disponible dans le fichier .
o Copier le contenu de l'article o Appliquer un style de titre au titre général, et ajouter un titre de niveau moindre à chaque paragraphe o Créer les paragraphes avec des balises
o Mettre chaque nom de continent ou de langage en police Courier et en vert
o Mettre chaque nom de compagnie en italique et en marron o Placer une barre horizontale en fin de l'article o Ajouter à sa fin, après la barre, la date courante, dans un paragraphe aligné à droite
2. Tester le résultat en validant par le W3C
3. Tester les autres balises de mises en forme (cite, var, code, u, s, font, br )
Tokyo, ville la plus chère du monde, Asuncion la moins chère, Paris 17e
PARIS (AFP) - Tokyo est la ville la plus chère du monde, suivie de Londres tandis que Paris arrive à la 17e place et Asuncion arrive à la dernière place du classement, selon une enquête réalisée par le cabinet de conseil Mercer HRC. La capitale japonaise occupait déjà la première place du classement l'année dernière, en revanche la capitale anglaise est remontée de la cinquième à la deuxième place. C'est la russe Moscou qui monte sur la troisième marche du podium, suivie d'une autre ville japonaise Osaka et de Hong-Kong en cinquième position.
New York, la ville la plus onéreuse d'Amérique du Nord, s'affiche à la 12e place du classement. Et c'est au sud du continent américain, à Asuncion au Paraguay que la vie est la moins chère du monde, selon cette étude.
"Les importantes modifications dans le classement sur le coût de la vie sont dues aux fluctuations monétaires, notamment à celle du dollar et de l'euro", relève l'enquête. S'agissant de Paris, l'étude note que "le logement reste très difficile à trouver surtout lorsqu'il s'agit d'habitations meublées".
Quatre des cinq villes les moins chères d'Europe font partie des nouveaux entrants de l'Union européenne : Ljubljana (Slovénie), Vilnius (Lituanie), Limassol (Chypre) et Bucarest (Roumanie).
Parmi les cinquante villes les plus chères, près de la moitié (24) sont européennes. Dans cette zone géographique, Londres, la plus chère en raison "du logement et du transport", est suivie de Copenhague
(Danemark) et de Milan (Italie).
En Amérique Latine, c'est la capitale du Pérou, Lima, qui se situe à la première place sur le continent.
L'étude, qui porte sur 144 villes, se fonde sur des critères relatifs au logement, à la nourriture, à l'habillement et les appareils ménagers ou encore aux transports et aux loisirs.
TD Part 2:
Appliquer les styles suivants :
1. L'ensemble du document doit être dans l'ordre de préférence de police Verdana, Arial, et proposer une famille de police par défaut.
2. Les titres doivent être de police Arial ou proposer une famille de polices par défaut.
3. La première lettre de chaque élément paragraphe du blockquote doit être de police fantasy et de taille double de la taille par défaut.
4. Chaque cellule-titre doit être en petites majuscules.
5. Chaque cellule de classe reference doit être en police à espacement fixe.
Appliquer les styles suivants :
1. Chaque élément paragraphe du blockquote doit être indenté de 1em.
2. Le texte de chaque cellule de titre doit être souligné.
3. Chaque initiale du texte de chaque cellule de classe produit doit être en majuscule.
Appliquer les styles suivants :
1. Le fond de l'ensemble du document doit être blanc.
2. Le fond du dernier élément div doit être gris clair (C0C0C0).
3. Placer l'image de Snoopy en fond du premier div ; ne la répéter que verticalement ; la placer en bas à droite.
