Astuces avancées Knol

Couleur de fond et "textboxes" (champ de texte) en couleur

Une aide vous montrant comment enrichir votre Knol avec de la couleur. Laissez jouer votre créativité.


Ajouter une couleur de fond au Knol




Vous préférez avoir une couleur au fond de votre Knol, mais vous ne savez pas comment vous y prendre ? Suivez pas à pas mon didacticiel qui vous guidera.



Comme Knol ne permets pas de travailler avec des "CSS" [1], alors il faut travailler avec des petites astuces pour y arriver quand même. Dans notre exemple ci-dessous nous employons du code HTML [2] pour créer un champ de texte auquel nous donnons des attributs [3]de couleur de fond (arrière-plan), qui selon la quantité de texte incorporé s'agrandit automatiquement ;-) 

Le code et explications


Le code brut

Le code mentionné ci-dessous provient d'un Knolateur anglophone, du Knol :
Enhancing your Knol using HTML 

Exemple 1 :
  -----------------------------------------------------------------------------------------------------------------------------------------------------------
<DIV><SPAN style="FONT-FAMILY: verdana, sans-serif"><SPAN style="FONT-FAMILY: arial">
<DIV style="MARGIN-LEFT: auto; MARGIN-RIGHT: auto; TEXT-ALIGN: left">

<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 1em; BORDER-LEFT-COLOR: rgb(136,136,136); BORDER-BOTTOM-WIDTH: 0px; BORDER-BOTTOM-COLOR: rgb(136,136,136); MARGIN: 1px; WIDTH: 98%; BORDER-TOP-COLOR: rgb(136,136,136); BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px; BORDER-RIGHT-COLOR: rgb(136,136,136); empty-cells: show" borderColor=#888 cellSpacing=0 cellPadding=30 border=1">

<TBODY>
<TR>
<TD>
<DIV style="TEXT-ALIGN: center"><FONT face=georgia,serif>"Veuillez remplacer ce texte par votre propre texte et formatez-le selon vos goûts en utilisant la fonction "Format".</FONT></DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
  ---------------------------------------------------------------------------------------------------------------------------------------------------------



Voici ci-dessous le résultat obtenu. Nous avons créé un champ de texte avec une bordure noir et une couleur d'arrière-plan blanc.




Veuillez remplacer ce texte par votre propre texte et formatez-le selon vos goûts en utilisant la fonction "Format".
Résultat de l'exemple 1

Astuce : Cliquez sur les images proposées ci-dessous pour les agrandir.

Astuce 1 :




Comme l'éditeur HTML de Knol ne dispose pas de numérotation de lignes, il faut travailler avec un petit truc pour repérer l'emplacement où nous voulons insérer notre code HTML (Exemple 1). En mode "Éditer" : 


Veuillez taper autant de fois le signe "-" jusqu'à obtention d'une ligne pointillée bien distincte -------------------------------------------------------------------------------------------------------------------------------------------------- à l'endroit où vous voulez voir apparaître le champ de texte.

Cliquez ensuite sur "HTML" dans la barre d'outils en haut à droite. L'éditeur HTML s'ouvre. Naviguez en bas en utilisant l'ascenseur (la barre de droite) jusqu'à ce que vous voyiez la ligne pointillée. Insérez en dessous de cette ligne le code  HTML, puis cliquez sur le bouton "Mettre à jour" (en bas à droite). Comme vous êtes maintenant à nouveau en mode "édition", cliquez maintenant derrière cette ligne pointillée et effacez-là. Voilà, le tour est joué.


Remarque : Comme vous pouvez le constater, le champ de texte est orienté vers la gauche (pas au centre). Mettons-en un peu de corrections esthétiques, centrer le champ de texte et aussi donner une couleur d'arrière-plan au champ de texte. Ci-dessous dans "l'exemple 2" vous voyez, marqué en rouge , les attributs qui doivent être changés et/ou ajoutés.

Exemple 2 :

  ----------------------------------------------------------------------------------------------------------------------------------------------------------
<DIV><SPAN style="FONT-FAMILY: verdana, sans-serif"><SPAN style="FONT-FAMILY: arial">
<DIV style="MARGIN-LEFT: auto; MARGIN-RIGHT: auto; TEXT-ALIGN: left">

<center>
<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 1em; BORDER-LEFT-COLOR: rgb(136,136,136); BORDER-BOTTOM-WIDTH: 0px; BORDER-BOTTOM-COLOR: rgb(136,136,136); MARGIN: 1px; WIDTH: 98%; BORDER-TOP-COLOR: rgb(136,136,136); BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px; BORDER-RIGHT-COLOR: rgb(136,136,136); empty-cells: show" borderColor=#888 cellSpacing=0 cellPadding=30 border=1" bgcolor="#FFFFEF"></center>

<TBODY>
<TR>
<TD>

<DIV style="TEXT-ALIGN: center"><FONT face=georgia,serif>Veuillez remplacer ce texte par votre propre texte et formatez-le selon vos goûts en utilisant la fonction "Format".</FONT></DIV>

</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
  ----------------------------------------------------------------------------------------------------------------------------------------------------------

Comme vous pouvez le constater maintenant, notre champ de texte est bien centré et il y a aussi une couleur d'arrière-plan qui correspond au code hexadécimal [4] "FFFFCC", tel que nous lui avions assigné le code ci-dessus (marqué en rouge). Si jamais vous vouliez jouer sur la largeur du champ de texte, réduisez alors la valeur de "WIDTH" (marqué en rouge ci-dessus dans le code HTML).


Veuillez remplacer ce texte par votre propre texte et formatez-le selon vos goûts en utilisant la fonction "Format" dans le mode "Édition".

Astuce 2 :










Le site Internet de référence SELFHTML  vous fournit une aide précieuse pour choisir le code couleur, lequel que vous remplacerez alors dans le code HTML de notre exemple, une fois votre couleur choisie.









Et pour ne pas oublier, l'excellent site Internet (en anglais) de W3Schools 




Si jamais vous vouliez utiliser une autre couleur comme employée dans notre exemple, veuillez vous référer au sites Internet suivants qui vous aident à choisir le bon code :





Voici des exemples que j'ai créé en employant un code HTML avec couleur arrière-plan : 




Bon knol ;-)

Astuce 3 :

Afin de vous accoutumer avec l'emploi du code HTML dans Knol, je vous conseille de créer un nouveau Knol, intitulé "Tests HTML" que vous ne publiez pas. 

De cette façon vous pouvez "jouer" avec le code, dont je vous encourage fortement. C'est la pratique qui compte le plus pour pouvoir comprendre comment cela fonctionne vraiment.

Pour ce faire, allez dans le mode "Éditer" et puis cliquez sur "HTML" (en haut à droite). "L'éditeur HTML" de Google Knol s'ouvre.

 

Ensuite copiez le code publié ci-dessus (dans Exemple 2) et ensuite cliquez sur le bouton "Aperçu" en haut à droite. Si cela vous plaît, alors cliquez sur le bouton "Mettre à jour", en bas à droite. Vous retournez ensuite dans le mode "Éditer", dont vous pouvez admirer votre chez d'oeuvre.


Avec l'insertion du code de "l'exemple 2", cela devrait s'afficher comme montré dans la capture d'écran (screenshot) ci-dessus). Maintenant retournez dans "l'éditeur HTML" et essayez de changer la valeur hexadécimale de la couleur d'arrière-plan. En parallèle ouvrez un nouveau onglet dans votre navigateur (browser) et introduisez l'adresse URL suivante : http://fr.selfhtml.org/petitsassistants/couleurs.htm

Vous serez dirigé vers l'assistant d'aide pour choisir les couleurs et qui vous donne la valeur hexadécimale de votre couleur choisie.

Admettons que vous ayez choisi la couleur "808080" (bien entendu vous faites votre propre choix, mais pour l'exemple il faut bien que je choisie une couleur), alors il vous faudra changer l'attribut suivant (marqué en brun et en gras) :

<center>
<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 1em; BORDER-LEFT-COLOR: rgb(136,136,136); BORDER-BOTTOM-WIDTH: 0px; BORDER-BOTTOM-COLOR: rgb(136,136,136); MARGIN: 1px; WIDTH: 98%; BORDER-TOP-COLOR: rgb(136,136,136); BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px; BORDER-RIGHT-COLOR: rgb(136,136,136); empty-cells: show" borderColor=#888 cellSpacing=0 cellPadding=30 border=1" bgcolor="#FFFFEF"></center>






Il faudra lui donner la valeur
 ----> bgcolor="#808080"










Ce qui devrait donner le résultat suivant, comme montré ci-contre. Le champ de texte est devenu "gris".





Voilà, sachant maintenant avec un exemple concret comment faire, je vous encourage à expérimenter avec votre Knol-Test. À part la couleur d'arrière-plan, vous pouvez aussi expérimenter à changer la largeur du champ de texte, la couleur des bords du cadre, etc. Osez...

Si vous aviez pris goût avec le code HTML, veuillez visiter aussi l'aide Knol pour découvrir comment insérer des tableaux ici : Insérer des tableaux dans un Knol 


D'autres astuces avancées pour enrichir votre knol peuvent être trouvées ici :





Bon knol à toutes et tous ;-)

Références

  1. Cascading Style Sheets (CSS)
  2. HTML
  3. attributs
  4. Couleurs du Web (Wikipédia)

Commentaires

Les commentaires sont modérés et ne seront visibles qu'une fois qu'ils auront été approuvés par l'un des auteurs de ce knol.


Guillaume

Test de styles

Salut !

Je suis en train de tester des boîtes et je voudrais ton avis. Pour le moment j'ai fait juste une boîte (j'ai pas énormement de temps en ce moment).

Knol limite énormément les CSS transmises via le paramètres style des balises, dommage mais heureusement que ton knol est la :D

Tu pourra jeter un coup d'œil sur ce knol :http://knol.google.com/k/guillaume-l/-/b3dmdyk1z5uo/24 ?

++
Guillaume

Dernière modification 2 juin 2009 05:09
Signaler des commentaires inappropriés
Gust MEES
Gust MEES
Formateur andragogique/pédagogique TIC (ICT Course Instructor)
Luxembourg
Avis sur l'article :
Votre avis :

Activité pour ce knol

Cette semaine :

81consultations de page

Totaux :

1484consultations de page
10commentaires
©2009 Google