|
|
|
|
 #1 "astuces html" 1.1
par Echo en novembre 2020
|
999ème
1 268 points
|
En novembre 2020
Hello chers lapinautes !
Voici un nouveau thème d’article !
Des astuces pour les codes html !!!
Si vous êtes débutants et que vous voulez vous créer une jolie fiche vous êtes au bon endroit ;)
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 !
Chaque article sera ciblé sur une seule technique assez simple, de manière à bien l’approfondir et à l’expliquer le mieux possible !
En guise d’exemple, on va commencer tout de suite avec le sujet du jour : *roulement de tambour* 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 :
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 ») :
Donc je vais vous expliquer par balise et ce que vous pouvez modifier dans ces balises.
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)
On n’oublie pas de fermer avec /div
Et les ; entre chaque balise.
Background-image : url(‘URL DU FOND’)
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.
Border-bottom : 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.
Bottom est une sous-catégorie – cela indique que c’est la bordure du bas de l’image.
Si vous mettez border-left par exemple ce sera la bordure gauche, border-right la droite et border-top celle du haut. Si vous ne mettez que border alors les paramètres que vous allez rentrer s’appliqueront à toutes les bordures.
Px (ici 3) correspond à la largeur de la bordure.
La même bannière mais avec 4px
Solid correspond à la forme de votre bordure : il y a aussi dotted (à poids) dashed (pointillés) ou double (ps minimum 4px pour une double).
La même bannière mais avec le paramètre dashed
Rgb(0,0,0) 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/
Si l’on avait voulu cette couleur de violet, on aurait rentré rgb(128,0,255))
Width correspond à la largeur de votre bannière. Une fiche lapino fait 500 px (pixels) de largeur.
Height correspond à la longueur de votre bannière. En px également.
Si je change le paramètre qui était à 100 px en 200 px.
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
Image trop peu large qui s’est répétée.
C’est fini pour tout ce qui va être bannière (et on n’oublie pas de fermer hein avec /div).
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 ! Il faut donc créer une zone de texte.
La petite zone blanche ici qui entoure « nom d’utilisateur »
On ouvre donc à nouveau une balise avec « div style = ‘’ »
A nouveau width 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 « padding »
Padding définit ici la distance entre la zone de texte et le bord de la fiche. On l’exprime souvent par …px …px …px …px
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 padding : 20px 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 ^^
Background-color : rgb(255,255,255) correspond à la couleur du fond – ici blanc.
Text-align : center correspond à l’alignement du texte- ici centré.
Si l’on veut qu’il soit à gauche on utilisera le paramètre : left, à droite : right et justifié : justify.
Mais vous n’en avez pas vraiment besoin car c’est déjà dans les paramètres par défaut de lapino ^^
Le code pour le nom d’utilisateur est volontairement coupé pour la même raison. ^^
Voilà cet article touche à sa fin !
Source : bien entendu les « Créa’fiches » - si vous ne connaissez pas il est temps d’y aller ;)
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 ! :)
3
|
16ème
7 570 points
|
En décembre 2020
Article très bien détaillé et qui sera sans doute utilise à beaucoup de joueurs ! 
0
|
185ème
2 867 points
|
En décembre 2020
Super idée de faire des articles sur les codes HTML 
0
|
999ème
1 268 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);">
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, à 21:54
Publicité
|
|
900
