|
|
|
|
 #1 "astuces html" 1.1
par Echo en novembre 2020
|
870ème
1 305 points
|
En novembre 2020
<h2>Hello chers lapinautes !</h2>
Voici un nouveau thème d’article !
<strong>Des astuces pour les codes html !!!</strong>
<strong>Si vous êtes débutants et que vous voulez vous créer une jolie fiche vous êtes au bon endroit ;)</strong>
Je suis moi-même assez débutante et pas totalement qualifiée, je tiens à vous le dire, mais je vais faire ce que je peux x)
Et je suis sûre qu’avec tous les autres journalistes on devrait réussir à faire un truc qui tienne la route !
<strong>Chaque article sera ciblé sur une seule technique assez simple, de manière à bien l’approfondir et à l’expliquer le mieux possible !</strong>
En guise d’exemple, on va commencer tout de suite avec le sujet du jour : <em>*roulement de tambour*</em> ce que j’appelle « les bannières » (vous savez les petits rectangles en haut de la fiche avec une image ?)
Bon comme je ne suis pas très claire voici une photo :
<img src="https://zupimages.net/up/20/48/r2oi.png" style="max-width:100%;" />
Et voici le code (nom d’utilisateur et tout le bla bla c’est un exemple, là on se concentre uniquement sur la « bannière ») :
<img src="https://zupimages.net/up/20/48/kawz.jpg" style="max-width:100%;" />
Donc je vais vous expliquer par balise et ce que vous pouvez modifier dans ces balises.
<strong> div style= ‘’ :</strong> 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
Et les ; entre chaque balise.</strong>
<strong><font color="#DE0B0B">Background- image : url(‘URL DU FOND’)</font></strong>
C’est la balise qui permet d’afficher le fond (le ciel avec les nuages tout ça ^^).
Une fois que vous avez trouvé votre image, il vous suffit de copier l’adresse de l’image et de la reporter entre les deux guillemets à la place d’URL DU FOND.
<strong><font color="#6929F1">Border-bott om :</font></strong> C’est ce qui va permettre de faire le petit trait que vous voyez en bas et qui sépare la bannière du reste de la fiche.
<strong><font color="#6929F1">Bottom</ font></strong> est une sous-catégorie – cela indique que c’est la bordure du bas de l’image.
Si vous mettez <strong><font color="#6929F1">border-left </font></strong> par exemple ce sera la bordure gauche, <strong><font color="#6929F1">border-righ t</font></strong> la droite et <strong><font color="#6929F1">border-top& lt;/font></strong> celle du haut. Si vous ne mettez que <strong><font color="#6929F1">border</ font></strong> alors les paramètres que vous allez rentrer s’appliqueront à toutes les bordures.
<strong><font color="#6929F1">Px (ici 3) correspond à la largeur de la bordure.</font></strong>
<img src="https://zupimages.net/up/20/49/mlbx.png" style="max-width:100%;" />
<em>La même bannière mais avec 4px</em>
<strong><font color="#6929F1">Solid</f ont></strong> correspond à la forme de votre bordure : il y a aussi <strong><font color="#6929F1">dotted</ font></strong> (à poids) <strong><font color="#6929F1">dashed</ font></strong> (pointillés) ou <strong><font color="#6929F1">double</ font></strong> (ps minimum 4px pour une double).
<img src="https://zupimages.net/up/20/49/e6u7.png" style="max-width:100%;" />
<em>La même bannière mais avec le paramètre dashed</em>
<strong><font color="#6929F1">Rgb(0,0,0)& lt;/font></strong> correspond à la couleur (ici du noir). Des logiciels comme paint vous donnent le nombre pour chaque couleur. Le premier chiffre correspond à la contenance de rouge (red), le deuxième celle de vert (green) et le troisième celle de bleu (blue).). Cela peut également être renseigné sous forme de #..... je vous conseille ce site : https://htmlcolorcodes.com/fr/
<img src="https://zupimages.net/up/20/49/fbx9.png" style="max-width:100%;" />
<em>Si l’on avait voulu cette couleur de violet, on aurait rentré <font color="#6929F1">rgb(128,0,2 55)</font></em>)
<strong><font color="#29F132">Width</f ont></strong> correspond à la largeur de votre bannière. Une fiche lapino fait 500 px (pixels) de largeur.
<strong><font color="#297EF1">Height</ font></strong> correspond à la longueur de votre bannière. En px également.
<img src="https://zupimages.net/up/20/49/zk00.png" style="max-width:100%;" />
<em>Si je change le paramètre qui était à 100 px en 200 px.</em>
On notera que l’on voit plus l’image.
Faites attention à la longueur et à la largeur quand vous choisissez votre image pour savoir quelle partie de votre image on verra et pour éviter qu’elle ne se répète (si l’image est trop peu large elle se répètera par exemple
<img src="https://zupimages.net/up/20/49/scdr.png" style="max-width:100%;" />
<em>Image trop peu large qui s’est répétée.</em>
C’est fini pour tout ce qui va être bannière (<strong>et on n’oublie pas de fermer hein avec /div</strong>).
Le problème, c’est que j’ai remarqué qu’une fois que l’on avait fait ça on ne pouvait plus écrire en dessous ! <strong>Il faut donc créer une zone de texte.</strong>
<img src="https://zupimages.net/up/20/49/m1ta.png" style="max-width:100%;" />
<em>La petite zone blanche ici qui entoure « nom d’utilisateur »</em>
<img src="https://zupimages.net/up/20/49/4q76.jpg" style="max-width:100%;" />
On ouvre donc à nouveau une balise avec « div style = ‘’ »
A nouveau <strong><font color="#29F132">width</f ont></strong> pour définir la largeur de la zone (vous remarquerez que je n’ai mis que 460 pixel c’est pour cela qu’elle est légèrement démarquée).
Et oh une nouvelle balise <strong><font color="#B46230">« padding »</font></strong>
<strong><font color="#B46230">Padding< /font></strong> définit ici la distance entre la zone de texte et le bord de la fiche. On l’exprime souvent par <strong><font color="#B46230">…px …px …px …px</font></strong>
Avec la première donnée en px qui correspond à la distance entre le haut de la fiche (ici la bannière) et la zone de texte (2eme = droite, 3eme=bas, 4eme=gauche).
Moi j’ai mis <strong><font color="#B46230">padding : 20px</font></strong> car je veux le même paramètre pour toutes ces données, j’aurais pu le répéter 4 fois mais c’est plus rapide de faire comme ça ^^
<strong><font color="#C98B4D">Background- color : rgb(255,255,255)</font></strong > correspond à la couleur du fond – ici blanc.
<strong><font color="#989592">Text-align : center</font></strong> correspond à l’alignement du texte- ici centré.
Si l’on veut qu’il soit à gauche on utilisera le paramètre : <strong><font color="#989592">left</fo nt></strong>, à droite : <strong><font color="#989592">right</f ont></strong> et justifié : <strong><font color="#989592">justify< /font></strong>.
Mais vous n’en avez pas vraiment besoin car c’est déjà dans les paramètres par défaut de lapino ^^
<img src="https://zupimages.net/up/20/49/59uh.png" style="max-width:100%;" />
Le code pour le nom d’utilisateur est volontairement coupé pour la même raison. ^^
Voilà cet article touche à sa fin !
<em>Source : bien entendu les « Créa’fiches » - si vous ne connaissez pas il est temps d’y aller ;)</em>
<strong>J’espère avoir été la plus claire possible, n’hésitez pas à poser des questions, à donner votre avis sur l’article, à suggérer des améliorations, à rectifier en cas d’erreur ou à apporter vos propres astuces ; toute remarque constructive est bonne à prendre ! :)</strong>
3
|
75ème
4 962 points
|
En décembre 2020
Article très bien détaillé et qui sera sans doute utilise à beaucoup de joueurs ! 
0
|
162ème
3 575 points
|
En décembre 2020
Super idée de faire des articles sur les codes HTML 
0
|
870ème
1 305 points
|
En décembre 2020
Merci beaucoup tous les deux pour vos retours ^^
Je fais juste un EDIT IMPORTANT : sur l'avant dernière image (le code pour la zone de texte) il manque >
il faut mettre (...) background-color rgb (255,255,255);"> </div>
Il faut bien fermer la balise sinon ça risque de ne pas marcher ou de créer des bugs ^^
Merci à Awani pour son retour 
0
|
|
|
Aujourd'hui, à 08:24
Publicité
|
|
900
