HTML Créatif, Pour Tous

Informations

Présidente :: Lea-Sarah
Activité :: 0 connectée(s); 37 membres; 53 messages postés
Date de création :: le 27/12/2024 à 16:25

Présentation
Modifié le 13/02/2025

Le paradis du HTML

https://leparadisduhtml

MENU ⋅ DESIGN ⋅ PAGE PERSO ⋅ AIDE ⋅ CREDITS ⋅ IMAGES

Bonjour
Bienvenue dans Le paradis du HTML! (Le nom du club est différent, c'est normal).
Il faut savoir que je ne suis pas nouvelle dans le HTML. J'ai créé un site hub sur neocities pour regrouper mes divers projets et envies. Alors je connaissais déjà les bases avant de venir ici.
Cependant, les règles html dans sailorfuku sont très strictes. J'ai trouvé des moyens pour faire ce que je voulais et en bidouillant les balises, et quand je n'y arrivais pas, je consultais les clubs html d'ici.

MENU : Présentation générale du projet Le paradis du HTML

DESIGN : Catalogue de toutes les présentations ainsi que le lien pour tous les copier/coller.

PAGE PERSO : Décoration de sa page perso en dehors du cadre présentation

AIDE : Réponses à tous types de problèmes liées au HTML.

CREDITS : Blinkies pour notifier que le design vient d'ici. (Pas obligé, mais fortement apprécié)

IMAGES : Liens pour trouver de la décoration. (attention: si le hotlink est interdit par le site, merci de re-héberger l'image)

J'espère que vous trouverez votre bonheur. Si vous avez des recommendations ou des envies particulières, postez un message dans ce club! Je fais tout mon possible pour que votre envie devienne réelle.

Liste complète
Tous les designs que j'ai fait sont listés ici.
Pour ne pas faire une page beaucoup trop longue, les codes html sont tous présents sur mon site internet neocities. (s'ouvre dans un autre onglet)
Si vous avez des idées pour améliorer les thèmes en cours, n'hésitez pas!

Toutes les couleurs/images sont modifiables. (je précise car certains pensent que c'est "bloqué" et inchangeable).
Les thèmes finis :
Menu caché avec le thème 5, thème 8, thème 12

Les thèmes en cours :

THEME 16.

THEME17.

Décoration hors de la présentation.
Je vais vous apprendre à comment faire une mise en page hors de la zone présentation :
NB: retrouvez les balises à "copier/coller" sur mon site internet neocities.
sailor

Passons maintenant à l'ajout d'image sur les côtés. Il faut toujours commencer par l'image de gauche.

ImageGauche

Explications :
margin-left : dans le négatif car le "0" se trouve au milieu de la page. Pour le placer sur la gauche, il faut donc partir vers les "-".
transform scale : l'image est un peu trop grande et je veux pouvoir voir la plupart de celle-ci. Je diminue donc en mettant un chiffre en dessous de 1 (ici, 0.6). Dans le cas contraire, c'est-à-dire, agrandir l'image, j'aurai mis au dessus de 1 (par exemple 1.2 ou 2.3 si elle est vraiment petite).
Passons dès à présent à l'image de droite :
Imagetout

margin-top : en négatif car je n'ai pas mis les images à côté l'une de l'autre mais en "dessous" c'est pour cette raison que le négatif (-1095px) est très élevé.
Pour le margin left, le 0 est toujours au même endroit donc il me suffit de trouver la bonne distance.
Les couleurs Pour ajouter des couleurs sur les côtés,on prend toujours le même début (game_header top 0).
Puis, on va créer un div style avec la couleur qu'on souhaite grâce à box-shadow.(il existe sûrement une méthode plus simple, mais j'ai toujours fait comme ça donc je préfère ne pas changer.)

Puisque le site n'autorise pas les div seul, il faut lui mettre une donnée à l'intérieur. J'ai choisi img sans mettre d'image dedans. Par conséquent, il pense qu'il y a quelque chose, hors, c'est vide.
Je repète la même formule de l'autre côté ET VOILA.

Nos bordures colorées sont prêtes. Si vous n'aimez pas le vert et voulez une autre couleur, il faut changer les deux données en #82BF44.

ATTENTION! Pour ne pas que votre présentation ne soit cassée, je vous conseille de mettre toute la partie hors du cadre présentation avant (c'est-à-dire: les bordures, les images et les gifs qui sont sur les côtés/haut).

Questions d'HTML
Vous avez des soucis avec le "HTMLage"? Vous n'arrivez pas à vous repérer dans mes codes (c'est normal, même moi je m'y perd parfois)? Je vais répondre à toutes vos questions ici. Que ce soit sur la création pure et dure d'élément ou sur des interrogations par rapport aux balises à utiliser.

Tester son code avant de le publier

Je travaille sur ordinateur avec le logiciel Brackets. Voilà à quoi ça ressemble :
bracket

Le logicel à gauche et l'aperçu (via Google Chrome) à droite.
Si vous n'avez pas envie de télécharger Brackets, vous pouvez toujours aller sur w3schools.com
J'ai mis le lien pour tester son code, mais vous pouvez trouver aussi des cours "aide" pour faire vos HTML,CSS,Javascript(javascript ne marche pas sur Sailorfuku)

Faire une boite/box/fond...

(Il faut savoir que je préfère travailler avec div plutôt que span car c'est ce que j'utilisais avant d'arriver ici. Il est possible d'utiliser span dans certains cas, mais par doute, je vais tout faire en div)
Commencez par le crochet suivit de div. Puis, choisissez style="". Entre les guillemets, mettez les dimensions hauteur (height) et largeur (width) ainsi que la position relative.
J'ai tendance à toujours mettre une bordure pour repèrer où sont les limites. Pour les bordures, on met border: le nombre de pixels, le style (simple, double, points, tirets...) puis la couleur.
Voici à quoi ressemble ce que nous venons de faire :

Tadaaaa:!

Les différentes bordures possibles:

Pour une bordure simple, code HTML= solid	Pour une bordure double, code HTML= double
Pour une bordure pointillée, code HTML= dotted	Pour une bordure en tiret, code HTML= dashed
Pour une bordure relief (creux), code HTML= groove	Pour une bordure relief (bombé), code HTML= ridge
Pour une bordure relief (creux), code HTML= inset	Pour une bordure relief (bombé), code HTML= ouset

Tableaux d'aide

Et moi?
Vous pourrez le remarquer, je n'ai pas mis mon pseudo en bas des designs car je ne trouve pas ça jolie.
Par contre, si vous voulez notifier d'où vient votre présentation, vous pouvez mettre ce blinkie dans votre profil :

Le code du blinkie :
J'ai une autre version au cas où vous n'aimeriez pas le rose :

Le code :

Bonus
Ce style vous intéresse? Vous pouvez aussi le retrouver sur mon site! (version sans la partie Design remplie et les dividers/favicon/stamps...)

Liens
Quelques liens pour vos Favicons, Stamps, Buttons, Blinkies, Dividers, Dolls, Animals...
(cliquez sur les boutons)

Cinni Emojibank Pixel-soup Mooncady
Exemples de Favicons
minie

Exemples de Stamps

Exemples de Blinkies

Exemples de Dividers

Exemples de Dolls

Le paradis du HTML a pour but de vous montrer que tout le monde peut réussir. @Koccily

Nouvelles membres
37 membres

itana

Batouul

KawaiiAlie

anais370

justsmile33

xBarbapapa

ALECAL

Tilafi

Yumeji

LadyRuki

sandra77420

hyphaedust

BabySwagy

Kurenaii

luna972

Tenryu

Discussions

KawaiiAlie

Bonjour!
Je ne m'y connais pas trop en html et j'essaie finalement de me refaire un profil après plusieurs années ..
J'utilise une base préfaite et j'essaie de changer l'image de fond en copiant et collant l'adresse d'une l'image et tout semble fonctionner dans le preview par contre l'image disparait quand vient la sauvegarde finale et j'ai un message d'erreur qui dit "denied" devant le lien.
J'ai essayé une image de pinterest puis une image de google pour voir si il y avait une différence mais c'est le même résultat... J'ai aussi cherché en ligne mais je n'ai rien trouvé qui a aidé
Est-ce que quelqu'un pourrait m'aider?
Merci en avance

à 19:26 le 01/04/2025

anais370

Coucou

à 21:37 le 26/03/2025

Lea-Sarah

AJOUT : les deux premières pages des tableaux dans l'onglet "AIDE". Normalement vous pouvez bien vous amuser avec ça. La suite est en cours. (❁´◡`❁)

à 00:06 le 13/02/2025

Manoela_labest123

Merci

à 12:37 le 02/02/2025

Lea-Sarah

Coucou! Je n'ai pas compris tu parles d'un "titre" stylé? Nous sommes très restreint en terme de police d'écriture. Si tu souhaites un titre 'bonjour/bienvenue/welcome' joliement écrit, il faut chercher des images sur google en transparent. Puis, tu l'ajoutes comme une image normale dans ton div (exemple rapide <div style=width:"600px; height: 700px; border: 2px solid #ff0000;"> <img src="lien de limage"> </div>) ;)

à 17:47 le 01/02/2025

Manoela_labest123

Coucou comment on fait pour pouvoir mettre un tire stylée fin c'est quoi le code stp
merci

à 16:28 le 01/02/2025

Manoela_labest123

Très bonne idee

à 22:29 le 30/01/2025

Lea-Sarah

C'est très gentil, mais ce n'est pas grand chose, vraiment. Ca ne m'a pas pris beaucoup de temps en réalité! []~(￣▽￣)~* (j'ai plus galéré pour faire les polaroids de ma présentation de janvier que pour ça)

J'ai réfléchi aux prochains ajouts de ce club et je pense qu'au lieu de faire une aide trop détaillée pour chaque étape, ce serait mieux de faire un tableau pour expliquer toutes les balises une par une (je trouve que visuellement c'est plus parlant que mes blablas). Donc ce sera un grand tableau, avec des couleurs, en grand format pour bien pouvoir lire, ainsi que des exemples.
Et puis après si je suis encore motivée, expliquer le code complet d'une présentation simple. Voilà en gros pour les prochains ajouts qui vont arriver (ça va me prendre du temps donc ce sera pas pour demain ^-^" ) ♥

à 22:25 le 30/01/2025