Information: En suivant ce tutoriel vous serez capable de réaliser un cadre similaire pour votre blog...
Le principe est simple
C'est assez facile, mais il faut obligatoirement passer en mode html !
exemple pour l'encadré bleu ci-dessus, le code est:
<div style="background-color: #c5ddf6; border-radius: 5px; border: 2px solid#1c75c8; padding: 3px;">
<strong>Information</strong>: En suivant ce tutoriel vous serez capable de réaliser un cadre similaire pour votre blog...</div>
<strong>Information</strong>: En suivant ce tutoriel vous serez capable de réaliser un cadre similaire pour votre blog...</div>
Voici 3 possibilités différentes pour créer un "CADRE" ou "FOND" en couleur dans un article ou une page de Blogger
1-Notion de couleur en html
2-Un simple fond de couleur sur un bloc de texte
3-Un cadre... à partir d'une cellule de tableau !
4-De jolis cadres élaborés en HTML avec du code à ajuster...=> l'idéal !
5-Un cadre avec ascenseur "scrollbar"
1-Préambule : notion de "couleur"
Comment peut-on afficher des couleurs? Vous savez que derrière le "texte brut " de votre article se cache du "code HTML" et donc les couleurs correspondent à un code HTML !
Formats de codes HTML : le code Hexadécimal
Chaque code HTML contient le symbole "#" et 6 lettres ou chiffres. Ces numéros sont sous forme hexadécimale. Par exemple "FF" en hexadécimal représente le nombre 255 en décimal.
On utilisera le code Hexadécimal de couleur
Signification des symboles :
Les deux premiers du code couleur HTML représentent l’intensité de la couleur rouge. 00 est le minimum, est FF le plus intense. Les troisième et quatrième représentent l’intensité de vert, les cinquième et sixième celle de bleu. En combinant l’intensité de rouge, vert et bleu, on peut former n’importe quelle couleur
Exemples :
#FF0000 - Avec ce code HTML, nous demandons au navigateur d’afficher un maximum de rouge, et ni bleu ni vert. Le résultat est du rouge pur :
#00FF00 – Ce code HTML affiche du vert, sans bleu ni rouge. Le résultat est :
#0000FF - Ce code HTML affiche du bleu, sans rouge ni vert. Le résultat est :
#FFFF00 – Combinaison de rouge et vert donne du jaune :
#CCEEFF - Prenez un peu de rouge, un peu plus de vert et un maximum de bleu pour obtenir la couleur du ciel :
NOIR #000000; BLANC #FFFFFF;
Obtenir facilement une couleur ?
Pour sélectionner un code couleur, divers sites vous proposent des solutions simples pour récupérer le code Hexadécimal de votre couleur (#suivi de 6 chiffres/lettres)
Autres formats : nom web & RGB
Les navigateurs modernes supportent 140 couleurs nommées (on utilise un "nom" pour les qualifier), qui sont énumérés sur ce SITE .
Vous pouvez les utiliser dans votre code HTM par nom, code Hex ou de la valeur RGB:
et vous avez déjà deviné...quelques noms: white black red pink tomato orange gold violet fuchsia magenta indigo green olive aqua turquoise blue chocolate snow
Comment intervenir dans le code et utiliser les couleurs
Dans le code, entre les balises <....>, dans les "modèles" ci-dessous, on modifiera seulement la couleur soit en "nom" soit en "héxadécimal" ainsi:
background-color: gold;
background-color: #c5ddf6;
Tous les codes (web, hexa et RGB)
Tous les codes (web, hexa et RGB)
2-Changer la couleur de fond d'un bloc de texte
Copier/coller ce code en modifiant la couleur et texte (padding=> marge intérieure)
pour obtenir
le code classqiue html devrait être :
<p style="padding: 20px; background: #code couleur; ">
Votre texte
</p>
mais Blogger le modifie comme indiqué ci-dessus
3- Un cadre dans un article à partir d'une cellule de tableau
C'est assez simple, mais il faut passer en mode html !
Voir également l'article consacré au tableau car, en fait, ici, nous allons créer un tableau composé d'une seule cellule.
METHODE dans un article, dans un "gadget" texte ou HTML/Javascript, se mettre d'abord en "Mode HTML"
Attention à bien distinguer
A-en mode "HTML" : insérer le code ci-dessous
C'est très simple si rien n'est encore rédigé...
Si l'article a du contenu, ce sera plus difficile. Il faudra, par exemple, d'abord repérer l'endroit ou mettre le code en mode HTML en ayant auparavant fait un repère dans le texte (avoir écrit en majuscule BLABLA par exemple)
B-en mode "Rédiger" : modifier le contenu du cadre "blablabla"
LE CODE HTML
Il faut tout copier ce qui se situe entre les 2 -----
ce qui donnera
=> en fait, il s'avère que Blogger n'accepte pas le code (classique) pour la couleur de la bordure (bordercolor) qui reste "grise". Seule la couleur de fond est modifiable.
Une couleur de bordure est toujours possible (voir ci-dessous) mais le code est complexe...
4-D'autres cadres élaborés...
SOURCE de tous les exemples ci-dessus partie3.
Merci à l'auteur !
<div style="background: #FCF550; padding: 10px;">
Mon texte
</div>pour obtenir
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
le code classqiue html devrait être :
<p style="padding: 20px; background: #code couleur; ">
Votre texte
</p>
mais Blogger le modifie comme indiqué ci-dessus
3- Un cadre dans un article à partir d'une cellule de tableau
C'est assez simple, mais il faut passer en mode html !
Voir également l'article consacré au tableau car, en fait, ici, nous allons créer un tableau composé d'une seule cellule.
METHODE dans un article, dans un "gadget" texte ou HTML/Javascript, se mettre d'abord en "Mode HTML"
Attention à bien distinguer
- Mode "code HTML" => Image de A
par défaut la balise <br> s'affiche.
Dans ce mode on ne peut que mettre du code et rien d'autre. - Mode texte "format RTF" => image de Bc'est le mode "visuel" par défaut : vous voyez ce qui s'affichera.
- Pour passer de l'un à l'autre :
- en mode HTML : cliquer sur "Format RTF"pour passer en mode texte
- en mode texte: cliquer sur "Modifier code HTML" pour passer en mode Texte RTF
A-en mode "HTML" : insérer le code ci-dessous
C'est très simple si rien n'est encore rédigé...
Si l'article a du contenu, ce sera plus difficile. Il faudra, par exemple, d'abord repérer l'endroit ou mettre le code en mode HTML en ayant auparavant fait un repère dans le texte (avoir écrit en majuscule BLABLA par exemple)
B-en mode "Rédiger" : modifier le contenu du cadre "blablabla"
LE CODE HTML
Il faut tout copier ce qui se situe entre les 2 -----
- CODE pour un cadre basique (changer ensuite le texte, ici colorié en rouge)
<TABLE BORDER><TR><TD>blablabla</TD></TR></TABLE> ----------------------------------------------------------------------- ce qui donnera
| blablabla |
- Améliorer les COULEURS il faudra ajouter ou modifier le code:
BORDER=3 => épaisseur de la bordure en pixelsBORDERCOLOR="red"> => couleur de la bordureBGCOLOR="F9FFD9"> => couleur de fond=> en fait, il s'avère que Blogger n'accepte pas le code (classique) pour la couleur de la bordure (bordercolor) qui reste "grise". Seule la couleur de fond est modifiable.
Une couleur de bordure est toujours possible (voir ci-dessous) mais le code est complexe...
Compléments utilesles codes de couleur ? : ici ou làvous pouvez utiliser le code HTMl ou le "nom" (voir ces explications)
pour mieux comprendre le code html pour une cellule
ce qui donne :CODE pour un cadre amélioré
(changer le texte, et, aussi les valeurs du code, ici colorié en rose) -----------------------------------------<TABLE BORDER=3 BORDERCOLOR="#003399" BGCOLOR="F9FFD9"><TR><TD>blablabla</TD></TR></TABLE>----------------------------------
blablabla
SOURCE de tous les exemples ci-dessus partie3.
Merci à l'auteur !
5-Un cadre avec ascenseur
Un élément (texte, tableau, image,...) est trop large pour être affiché complètement dans un article : créez un Zone avec une barre de défilement horizontale (scrollbar) placée à la base de l’élément avec la propriété CSS overflow.
Un élément (texte, tableau, image,...) est trop large pour être affiché complètement dans un article : créez un Zone avec une barre de défilement horizontale (scrollbar) placée à la base de l’élément avec la propriété CSS overflow.
Créer un ascenseur =Scrollbar de texte avec la balise scroll
1-D'abord taper son texte "normalement", en édition basique, de choisir sa police, sa taille, sa couleur....
2-Passer en mode HTML
3-Avant votre texte, ajouter :
<div style="height: 400px; width: 650px; overflow: auto; 1px solid;">et
après votre texte :
</div>
4-Paramétrages
- "Height" représente la hauteur de votre ascenseur.
- "Width" représente la largeur de l'ascenseur
- "1px solid "représente le cadre et son épaisseur
- Autres valeurs de la propriété overflow: auto;
- visible : rend visible tout ce qui dépasse de l’élément et ne met pas de barre de défilement. Valeur par défaut.
- hidden : cache tout ce qui dépasse de l’élément et ne met pas de barre de défilement (scrollbar).
- scroll : met toujours une barre de défilement horizontale et verticale.
- auto : met une barre de défilement horizontale ou verticale si besoin.
- inherit : hérite de la propriété CSS overflow de son parent (CSS2).
votre ascenseur n'apparaîtra que si le texte à l'intérieur "dépasse" de la taille définie.
