Soyez acteur du Web ! - Fun-Mooc

Soyez acteur du Web !
Michel MAINGUENAUD
Améliorer le look ou comment gérer des couleurs, organiser mon texte,
afficher des caractères spéciaux ?
Gestion des couleurs
●
●
●
Soit on utilise l'équivalent d'une feuille de style (CSS) soit la
définition est locale.
Il existe plusieurs modes de représentation des couleurs
–
Principe RVB : Rouge – Vert – Bleu
–
Principe CMJN : Cyan – Magenta – Jaune – Noir
–
Principe TSL : Teinte – Saturation – Luminosité
Principe HTML → RVB
En voir de toutes les couleurs
●
Comment se retrouver dans toutes ces couleurs ?
–
Noms prédéfinis (en anglais) pour certaines couleurs. Se restreindre
à ces couleurs est une bonne pratique.
–
Exemples
●
●
–
Noir → black
Blanc → white
De nombreux sites vous proposent des conversions à partir d'une
palette de couleur vers le code HTML
Principe Div et Span
●
Nous souhaitons regrouper logiquement des parties de texte
–
●
Balise Div
Nous souhaitons appliquer une représentation particulière sur
une partie de texte
–
Balise Span
Balise div
●
●
Applique une représentation (forme) et structure le document
(fond) :
–
Forme : un encadré avec une épaisseur d'encadrement donnée, …
–
Fond : organisation de la partie qui doit être ainsi traitée
(indépendamment du texte).
Permet de s'affranchir de la mise en page (automatique) du
navigateur
Exemple
Avec une largeur
Avec une hauteur
Dans un cadre
Avec un
ascenseur
Exemple (2)
Balise span
●
●
●
On traite maintenant localement le texte à l'intérieur d'une
organisation logique du document (un paragraphe, une liste,
…)
On va donc changer son mode de représentation (fonte,
couleur, …) via une série d'attribut.
Le traitement est soit local soit avec un style CSS
Exemple
Style de la fonte
En gras
En couleur
Exemple (2)
Eléments manipulables (local)
●
●
Le texte standard
–
<body text=black> … </body>
–
<body text="#AC1FBF"> … </body>
Le fond de la page
–
●
<body bgcolor=yellow > … </body>
Une partie spécifique du texte
–
<font color= red> … </font>
Exemple (suite)
Exemple
Couleurs en HTML
●
●
Chacune des composantes RVB est codée sur deux « chiffres »
dans l'ordre Rouge, Vert, Bleu
Exemples :
–
Noir : « #00 00 00 »
–
Blanc : « #FF FF FF »
–
Rouge : « #FF 00 00 »
Gestion des caractères spéciaux
●
●
De temps en temps nous souhaitons introduire dans un texte un
caractère dans un alphabet différent (lettre grecque, …).
Nous avons vu les problèmes d'encodage et leurs
conséquences. L'objectif est donc d'assurer une compatibilité
de lecture entre les différents navigateurs
Exemple
●
●
Des mots clés spécialisés sont utilisés :
–
Ils commencent par « & »
–
Ils se terminent par « ; »
Nous souhaitons écrire le texte suivant :
–
Une grande partie de l'Europe s'est dotée d'une monnaie unique
l'Euro dont le symbole est "€" : &euro;
–
La somme en mathématique est représentée par le symbole " ∑"
&Sigma;
: