#2 astuces html

Forums » La Gazette

Nouveautés

Astuces

EDL

Communauté

#2 astuces html
par Echo en février 2021

» 1

870^ème
1 305 points

En février 2021

Echo

900

<h2>Hello, les lapinautes ! xD</h2>

Voici un nouvel article sur les codes HTML !

Ici, ce sont des <strong>petits goodies</strong> : des petits codes faciles à mettre en place et qui peuvent donner de l’allure à votre fiche !

Je vous invite à aller voir <em>« Les Créa’fiches »</em> si le sujet vous intéresse ! Plusieurs codes sont tirés du site de LiseFleur ; la différence c’est qu’ici <strong>j’essaye de vous expliquer toutes les balises pour que vous compreniez le code et que vous puissiez le modifier ! ^^</strong>

Ne perdons pas plus de temps en bavardage ! :

<h4><u>Nous allons apprendre à :</h4></u>

- Changer la couleur de votre texte
- Modifier la police de caractère
- Faire bouger votre texte
- Changer la couleur du fond

<h4><u>Changer la couleur, la police de caractère et la taille de votre texte</h4></u>

Il y a déjà de nombreuses couleurs et 9 polices sur Lapino ! Mais il est possible que vous en vouliez encore plus

! Pour cela c’est très simple :

<img src="https://zupimages.net/up/21/08/tk58.jpg" style="max-width:100%;" />

On va utiliser ce code.
<strong>Comme la dernière fois, je vais vous expliquer par balise et ce qu’on peut modifier dans ces balises.</strong>

<font color="#000000">font</fo nt> : c’est la balise qui permet de modifier le texte (la couleur, la taille, la police…)

(Je me suis rendue compte que je m’étais mal exprimée dans l’ancien article -> ce qu’il y a à l’intérieur de font, par ex : color est un attribut et non une balise. Color est l’attribut de la balise font.)

<font color="#6734C6">Color= "#000000"</font> : cet attribut permet de modifier la couleur. La couleur est définie par un code (<font color="#6734C6">"#0000 00"</font> correspond à du noir). Pour mettre la couleur que vous souhaitez, il vous suffit de renseigner le <font color="#6734C6">«&rsq uo;’#’’ »</font> correspondant à votre couleur.
Je vous renvoie <a href="https://htmlcolorcodes.com/fr/" style="">vers ce site</a> pour le trouver ! ^^

<font color="508DCB">Face= ‘’Forte’’</fo nt> : cet attribut permet de modifier la police de caractère.

<em>

(Ce code ne marche que si vous avez un PC. Si vous avez un Mac, vous ne verrez pas les polices de caractères des autres, ni la votre à moins de les télécharger !)</em>

Pour le modifier, il vous suffit de mettre le nom votre police de caractère entre les guillemets : <font color="#508DCB">Face=&rsquo ;’nomdelapolice’’</ font>.

Voici une liste de polices dont je suis sûre qu’elles marchent (mais je vous avoue que toutes celles disponibles dans word et que j’ai testées sur lapino marchaient ^^) :
Forte
Chiller
Goudy Stout
Blackadder ITC
Bradley Hand ITC
Dead Kansas
Matura MT Script Capitals

<img src="https://zupimages.net/up/21/08/sd6t.jpg" style="max-width:100%;" />
<em>Voici un aperçu (dans l’ordre) des polices citées ci-dessus.</em>

Enfin <font color="F22228">size=’ ’5’’</font> : permet de modifier la taille de votre texte. Vous n’en avez pas vraiment besoin puisque c’est déjà dans les paramètres de lapino !

<em>Vous mettez votre texte à l’emplacement de Texte x) (entre les balises font…/font)</em>

<h4><u>Faire bouger votre texte</h4></u>

<h5>Pour faire défiler votre texte :</h5>

<img src="https://zupimages.net/up/21/08/pml1.jpg" style="max-width:100%;" />

Vous l’aurez compris il vous suffit juste d’encadrer le texte souhaité par la balise <font color="1AB847">marquee</ font>

<h5>Pour faire défiler votre texte et qu’il rebondisse sur les bords</h5>

<img src="https://zupimages.net/up/21/08/bzlg.jpg" style="max-width:100%;" />

La balise <font color="#1AB847">marquee< /font> pour faire défiler le texte.
L’attribut <font color="#975A12">behavior< ;/font> définit le type de glissement, si vous mettez <font color="#975A12">alternate&l t;/font> il rebondira des deux côtés de votre fiche sans jamais s’arrêter, si vous mettez <font color="#975A12">slide</f ont> il ira jusqu’au côté gauche de la fiche et s’arrêtera.

<h5>Pour faire défiler le texte dans une direction précise</h5>

<img src="https://zupimages.net/up/21/08/xrav.jpg" style="max-width:100%;" />

A nouveau la balise <font color="#1AB847">marquee< /font> pour faire défiler le texte. L’attribut <font color="#DC48C5">direction&l t;/font> permet de modifier (suspens…) la direction x)
Ici <font color="#DC48C5">up</font > (ça défilera vers le haut)
<font color="#DC48C5">Down</fo nt>=bas
<font color="#DC48C5">Left</fo nt>=gauche
<font color="#DC48C5">Right</f ont>=droite

<h4><u>Changer la couleur du fond</h4></u>

Voici le code pour changer la couleur du fond :

<img src="https://zupimages.net/up/21/08/iwfe.jpg" style="max-width:100%;" />

div style= ‘’ : c’est le début, c’est une balise qui englobe les autres balises et permet de dire « voilà j’ouvre un code » (grossièrement)

<strong>On n’oublie pas de fermer avec /div</strong>
<strong>Et les ; entre chaque balise.</strong>

<font color="#0F1EB1">Background- color : Lavender</font>
Cet attribut permet de modifier la couleur du fond, on modifie la couleur en renseignant son nom (ici <font color="#0F1EB1">lavender< ;/font>). Je vous mets <a href="http://fichelapino.eklablog.fr/couleurs-html-a1090[...] style="">le site de LiseFleur</a> pour trouver le nom de la couleur que vous souhaitez :

<font color="#1E9025">Width : 500px</font>
<font color="#1E9025">Width</f ont> correspond à la largeur. Une fiche lapino fait 500 px (pixels) de largeur.

<font color="#297EF1">Height :435px</font>
<font color="#297EF1">Height</ font> correspond à la longueur/hauteur de votre bannière. En px également.

<img src="https://zupimages.net/up/21/08/24ob.jpg" style="max-width:100%;" />
<em>Aperçu de fond couleur lavande</em>

Voilà ! C’est fini pour cette première partie d’HTML goodies ^^ J’en ferais peut-être une deuxième alors <strong>n’hésitez pas à me dire si le concept vous plaît !</strong>

<strong>N’hésitez pas à partager vos petits tips perso, le forum est fait pour vous entraider ! ^^</strong>

Comme d’habitude, si vous avez <strong>une remarque, une question, des choses à dire pour compléter ou une erreur à corriger ↓↓↓</strong> :)

163^ème
3 575 points

En février 2021

PetitSable niveau/12

1575

Hey hey! Perso', je crois que je vais plus changer de fiche parce que j'avais mis plusieurs heures pour la faire, mais encore une fois, c'est vraiment une superbe idée de faire des articles sur les codes fiches !

Comme écriture jolies, j'aime bien utiliser du Segoe Print ou Segoe Script!