Langage : CSS&HTML Niveau : Débutant Temps : 15 minutes Auteur : Arya
Créer un bloc et un texte
Aloha ~ Alors ça fait pas mal de temps que j'avais envie de faire un tuto pour vous apprendre à coder, et puis je n'ai jamais eu le temps. Même là en fait je n'ai pas le temps mais j'ai décidé de séparer le cours en plusieurs parties afin que ce soit plus rapide pour moi de poster un tuto (je me mets au défi de faire un tuto en moins de 30 minutes si possible )
Nous allons apprendre à faire un bloc tout d'abord. C'est tout simple. La balise div vous permettra de créer un bloc et vous devriez lui attribuer plusieurs fonctions afin que le bloc prenne forme.
Le Html c'est tout ce qui est sous le forme de "<..>" Le CSS c'est tout ce qui est "1erAttribut;2èmeAttribut;3èmAttribut;". En bref le HTML forme le corps, le CSS forme les couleurs, les images, c'est le contenu. Il y a toujours des points virgules entre chaque attribut même s'il se trouve à la fin du CSS. Pensez également à bien referme le crochet en HTML.
Déjà nous allons décider de la hauteur→height et de la largeur→width de notre bloc. Prenons par exemple 450*600px. On les insère ainsi.
Code:
<div style="width:450px;height:600px;"></div>
Simple non ?
Sauf que là nous avons créer une zone vide. Alors pour compléter ça, on peut soit choisir une image, soit une couleur. Nous allons commencer par simplement y mettre une couleur de fond→background-color. Votre couleur doit être en html code, il commence par # et comporte 6 chiffres. Exemple : #000000=noir et #FFFFFF=blanc Pour chercher la couleur de votre choix je vous propose ce site : https://html-color-codes.info/Codes-couleur-HTML/
Mettons ensuite des bordures à ce bloc. Pour cela, nous utilisons border-right, border-left, border-top, border-bottom (droite, gauche, haut, bas). On les utilise ainsi : border: XXpx #000000 solid/dotted/dashed..etc Solid c'est pour faire une ligne continue, dotted une ligne en pointillée et dashed pour une ligne segmentée. Vous pouvez vous amuser à varier et faire comme vous voulez !
Ajoutons-y un titre. Pour trouver une belle police je vous conseille de chercher ici : https://fonts.google.com/ J'ai choisi Homemade Apple, mais faites comme vous voulez Google me donne donc deux choses :
J'espère que je ne vous ai pas perdu Pour la suite c'est simple, c'est comme avant, on crée un bloc, mais dans le bloc d'avant et après le bloc du titre. On choisit les dimensions, un fond et petite nouveauté que j'apporte, on peut utiliser l'opacité→opacity pour nuancer, et faire un peu apparaître le fond (utile quand le fond est une image). De plus, on ajouter overflow:auto pour faire la scrollbar, ainsi on pourra y mettre un texte long sans qu'il ne dépasse du bloc.
J'espère que vous n'êtes pas trop perdu car en fait je voulais faire un tuto hyper rapide mais je me rends compte qu'il se rallonge beaucoup mon tutoriel, j'ai envie de vous montrer tout en même temps désolée J'espère que ça ne vous gêne pas Je vous fais des bisous <3 Arya-sensei </div></div>
J'ai également ajouté des marges intérieures avec padding:5px; pour éviter que le texte colle aux bordures.
RESULTAT 3 (ci-dessous)
Ensuite vous pouvez varier avec les bordures, les couleurs et tout ce que vous voulez ! Sur le résultat final, j'ai juste varier l'opacité
J'espère que vous n'êtes pas trop perdu car en fait je voulais faire un tuto hyper rapide mais je me rends compte qu'il se rallonge beaucoup mon tutoriel, j'ai envie de vous montrer tout en même temps désolée J'espère que ça ne vous gêne pas Je vous fais des bisous <3 Arya-sensei
RESULTAT FINAL
Titre au choix
Aloha ~
J'espère que vous n'êtes pas trop perdu car en fait je voulais faire un tuto hyper rapide mais je me rends compte qu'il se rallonge beaucoup mon tutoriel, j'ai envie de vous montrer tout en même temps désolée J'espère que ça ne vous gêne pas Je vous fais des bisous <3 Arya-sensei
Aloha ~
J'espère que vous n'êtes pas trop perdu car en fait je voulais faire un tuto hyper rapide mais je me rends compte qu'il se rallonge beaucoup mon tutoriel, j'ai envie de vous montrer tout en même temps désolée J'espère que ça ne vous gêne pas Je vous fais des bisous <3 Arya-sensei
Aloha ~
J'espère que vous n'êtes pas trop perdu car en fait je voulais faire un tuto hyper rapide mais je me rends compte qu'il se rallonge beaucoup mon tutoriel, j'ai envie de vous montrer tout en même temps désolée J'espère que ça ne vous gêne pas Je vous fais des bisous <3 Arya-sensei
Si t'as survécu, commente
Voici un exercice à faire pour vous entraîne et voir si vous avez tout compris ! Postez vos résultats
Exercice 1
Aloha ~
Votre exercice est simple : reproduire cette div en entière !
Dimension : 300x200px Couleur de fond : #489D8B Couleur des bordures : #17473D Couleur de l'écriture : #85CFBE Police d'écriture : Homemade Apple Taille de l'écriture : 30px
Dimension de la div intérieure : 290x100px Couleur de fond : blanc Couleur de l'écriture : noir Opacité : 0.4
Je vous fais des bisous <3 Arya-sensei
Exercice 2 (libre) : Faire une fiche de réponse "Mon océan" (ou une fiche de présentation)
Exercice 3 (libre) : Faire une fiche RP de réponse
N'hésitez pas à y insérer des images !
Dernière édition par Arya le Lun 6 Nov - 17:40, édité 4 fois
Auteur
Message
Gaïa Baleine de Nemo
Messages : 1436 Date d'inscription : 18/07/2016 Age : 22
dsfjeirjfensaaahhh Vous êtes trop adorables, je continue de passer sur le forum pour vous observer jeunes enfants. @Chance, je te fais les gros noeu-noeuilles. Pourquoi t'as mis un "overflow: auto-padding;" ? Ca n'existe pas. ;-; Je suppose que c'est une erreur du coup je te pardonne.
Arya Léviathan des Nymphes
Messages : 4012 Date d'inscription : 14/07/2015 Age : 28
@ Undead Je vote Juh Présidente Parfait pour le codage ! Les bordures à droite et à gauche j'avais demandé 1px dashed mais c'est pas grave j'ai rien vu
En attendant le Cours #2, et comme je vois que vous vous débrouillez à merveille, je vous donne quelques exercices autonomes à faire
Exercice 2 (libre) : Faire une fiche de réponse "Mon océan" (ou une fiche de présentation)
Exercice 3 (libre) : Faire une fiche RP de réponse
@Arya : j'ai encore beaucoup à apprendre xDD d'ailleurs j'ai fini le premier exo, et les nouveaux me tentent bien, attends-toi à me revoir dans la semaine
EDIT 23:11 : j'ai craqué DD: J'ai besoin d'apprendre à centrer mes textes, là ça fait moche (pour le titre, j'ai centré avec un padding mais ça dépend de la taille du titre, du coup c'est moyen ;-; ) Ensuite, j'ai rajouté des "margin" parce qu'avec padding ça ne marchait pas et @Gaïa m'avait envoyé hier ce shéma qui, a-t-elle dit, serait mon meilleur ami. Du coup j'ai tenté et ça a fonctionné :DD Honnêtement, je suis assez contente de ma fiche, elle est basique mais j'en suis fièèreuuh c'est ma première
edit le 08/11 à 16h00 : j'ai réussi à center les textes 8D je vais essayer de custom les typos maintenant
Fiche RP:
Titre du RP ici
Ft. [ton nom] & [ton/tes partenaire(s)]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales efficitur fringilla. Praesent dictum accumsan bibendum. Sed cursus laoreet enim eu dictum. Donec euismod blandit quam vel ornare. Duis posuere sapien sagittis ante egestas, a cursus nisi lobortis. Sed eu volutpat ipsum. Duis vel erat vulputate, egestas lorem a, faucibus eros. Phasellus lobortis nec massa id imperdiet.
Donec ut arcu id neque vehicula eleifend. Donec eleifend quam eget cursus porta. Fusce vitae rhoncus elit. Ut quam ex, viverra mattis lectus ut, rutrum hendrerit nisl. Suspendisse ultrices lacinia ligula, vitae ultricies ex consectetur quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur pellentesque venenatis elit auctor pharetra. Pellentesque vitae augue nec nibh dignissim mattis. Fusce pellentesque ultricies odio id sollicitudin. In condimentum neque quis mauris vulputate condimentum. Sed in mollis nisi. Duis at purus neque. Sed ac massa sit amet tortor cursus pharetra eu aliquet nibh. Nullam vehicula nisi sed eros bibendum, ut accumsan mauris volutpat. Proin finibus leo in urna porta, in ultrices massa vestibulum.
Aliquam vel elementum augue, ut maximus tortor. Nulla ut finibus mauris. Pellentesque in lectus ex. Nunc molestie est sed diam dapibus, vitae lobortis eros tristique. Morbi mattis, nisl eu vestibulum egestas, ex lorem viverra tortor, ut fringilla odio massa ac lorem. Maecenas vitae est tellus. Sed semper lacus non odio volutpat placerat elementum eu velit. Aliquam molestie libero ac velit imperdiet aliquam. Fusce ante odio, pharetra eu ornare et, eleifend eu lacus. Vivamus lobortis euismod dictum. Ut blandit consectetur volutpat. Duis auctor rutrum mi quis aliquet. Mauris placerat, elit et bibendum sodales, metus ligula tempor enim, consectetur mattis urna ante quis tortor. Sed eget arcu ac tellus accumsan ornare. Duis semper, tortor quis semper condimentum, lacus velit accumsan ligula, vitae lacinia dui justo ac nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Ut sed semper neque. Etiam sagittis efficitur erat, a semper elit sagittis eu. Phasellus nec libero a orci molestie molestie vitae vel ante. Nam non vestibulum magna, ut laoreet dui. Phasellus eu hendrerit dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque pellentesque sodales. Morbi ac ultrices nisi. Pellentesque arcu magna, molestie in eleifend quis, tempor at ipsum. Nulla facilisi. Integer laoreet, neque id facilisis scelerisque, nisl enim dictum lacus, elementum tempor nulla nunc non sapien. Donec accumsan leo eu lectus dapibus, vel egestas mauris consectetur.
Nulla laoreet turpis vitae interdum viverra. Quisque vitae sapien nec eros gravida gravida et at nunc. Nunc eu ex odio. Nam eget quam et arcu posuere mattis rhoncus eget quam. Ut cursus ante at hendrerit elementum. Maecenas quis turpis consequat, dignissim purus at, facilisis sapien. Etiam arcu ante, viverra sed laoreet a, interdum et leo. Ut mi nisl, consectetur nec purus at, blandit tempor dolor. Nunc iaculis lacinia odio, in viverra libero pellentesque non. Suspendisse finibus lacus nisl, eget rutrum orci viverra et.
Ceci est un texte. Je sais que ça n'était pas évident à deviner, c'est pour ça que je le dis.
Code:
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet"><div style="width:550px;height:550px;background-color:#B4B2AE;border-right:1px #5F5E5D solid; border-left:1px #5F5E5D solid; border-top:1px #5F5E5D solid; border-bottom:1px #5F5E5D solid;"><div style="font-family: 'Playfair Display', serif;color:#E24A37;font-size:50px;padding-top:20px;text-align: center;opacity:0.8;">Titre du RP ici</div> <div style="width:450px;height:20px;background-color:#5F5E5D;color:#F2EEEA;opacity:0.6;margin-left:50px;margin-top:10px;margin-right:50px;padding:5px;text-align: center;">Ft. [ton nom] & [ton/tes partenaire(s)]</div><div style="width:500px;height:350px;background-color:#F2EEEA;color:#5F5E5D;opacity:0.5;margin-left:25px;margin-right:25px;margin-top:20px;padding:5px;overflow:auto;text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales efficitur fringilla. Praesent dictum accumsan bibendum. Sed cursus laoreet enim eu dictum. Donec euismod blandit quam vel ornare. Duis posuere sapien sagittis ante egestas, a cursus nisi lobortis. Sed eu volutpat ipsum. Duis vel erat vulputate, egestas lorem a, faucibus eros. Phasellus lobortis nec massa id imperdiet.
Donec ut arcu id neque vehicula eleifend. Donec eleifend quam eget cursus porta. Fusce vitae rhoncus elit. Ut quam ex, viverra mattis lectus ut, rutrum hendrerit nisl. Suspendisse ultrices lacinia ligula, vitae ultricies ex consectetur quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur pellentesque venenatis elit auctor pharetra. Pellentesque vitae augue nec nibh dignissim mattis. Fusce pellentesque ultricies odio id sollicitudin. In condimentum neque quis mauris vulputate condimentum. Sed in mollis nisi. Duis at purus neque. Sed ac massa sit amet tortor cursus pharetra eu aliquet nibh. Nullam vehicula nisi sed eros bibendum, ut accumsan mauris volutpat. Proin finibus leo in urna porta, in ultrices massa vestibulum.
Aliquam vel elementum augue, ut maximus tortor. Nulla ut finibus mauris. Pellentesque in lectus ex. Nunc molestie est sed diam dapibus, vitae lobortis eros tristique. Morbi mattis, nisl eu vestibulum egestas, ex lorem viverra tortor, ut fringilla odio massa ac lorem. Maecenas vitae est tellus. Sed semper lacus non odio volutpat placerat elementum eu velit. Aliquam molestie libero ac velit imperdiet aliquam. Fusce ante odio, pharetra eu ornare et, eleifend eu lacus. Vivamus lobortis euismod dictum. Ut blandit consectetur volutpat. Duis auctor rutrum mi quis aliquet. Mauris placerat, elit et bibendum sodales, metus ligula tempor enim, consectetur mattis urna ante quis tortor. Sed eget arcu ac tellus accumsan ornare. Duis semper, tortor quis semper condimentum, lacus velit accumsan ligula, vitae lacinia dui justo ac nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Ut sed semper neque. Etiam sagittis efficitur erat, a semper elit sagittis eu. Phasellus nec libero a orci molestie molestie vitae vel ante. Nam non vestibulum magna, ut laoreet dui. Phasellus eu hendrerit dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque pellentesque sodales. Morbi ac ultrices nisi. Pellentesque arcu magna, molestie in eleifend quis, tempor at ipsum. Nulla facilisi. Integer laoreet, neque id facilisis scelerisque, nisl enim dictum lacus, elementum tempor nulla nunc non sapien. Donec accumsan leo eu lectus dapibus, vel egestas mauris consectetur.
Nulla laoreet turpis vitae interdum viverra. Quisque vitae sapien nec eros gravida gravida et at nunc. Nunc eu ex odio. Nam eget quam et arcu posuere mattis rhoncus eget quam. Ut cursus ante at hendrerit elementum. Maecenas quis turpis consequat, dignissim purus at, facilisis sapien. Etiam arcu ante, viverra sed laoreet a, interdum et leo. Ut mi nisl, consectetur nec purus at, blandit tempor dolor. Nunc iaculis lacinia odio, in viverra libero pellentesque non. Suspendisse finibus lacus nisl, eget rutrum orci viverra et.</div><div style="width:550px;height:20px;background-color:#E87162;color:#5F5E5D;margin-top:30px;opacity:0.8;text-align: center;padding-top:4px;">Ceci est un texte. Je sais que ça n'était pas évident à deviner, c'est pour ça que je le dis.</div></div>
Dernière édition par Chance le Ven 10 Nov - 20:10, édité 1 fois
Arya Léviathan des Nymphes
Messages : 4012 Date d'inscription : 14/07/2015 Age : 28
@Gaïa Oooh j'avais pas vu ton message ! Et nous on peut pas t'observer ?
@Chance OOOOH MAGNIFIQUEEE ! Un génie Chance, t'es trop forte c'est vraiment trop beau ! Je suis contente que mon tutp serve un peu, avec l'aide de Gaïa, c'est vrai que je n'avais pas encore expliqué les margin désolée J'ai hate de voir avec les textes personnalisées !
Chance Baleine de Nemo
Messages : 2005 Date d'inscription : 09/09/2015 Age : 22
Merci beaucoup @Arya Pas de problème pour les margin, c'est normal de ne pas avoir eu le temps de nous en parler, c'est juste que comme j'étais déter j'ai approfondi le sujet dans mon coin Pour les textes, je verrai si j'y reviens parce que j'ai un peu la flemme j'avoue x) Ce soir je vais essayer de faire l'autre exercice huhu, je te montrerai le résultat
Arya Léviathan des Nymphes
Messages : 4012 Date d'inscription : 14/07/2015 Age : 28
@Arya : j'ai enfin finiiii Désolée pour le délai, j'avais un peu oublié xD Du coup j'ai tryhard hier et aujourd'hui :3
Je suis pas super contente du résultat mais c'est toujours mieux que rien
Ma Présentation
« petite citation »
« Passeport sous-marin »
• Ton prénom : réponse • Ton âge : réponse • Fille, garçon ou autre ? réponse • Localisation : réponse • Aimerais-tu un parrain ? réponse
« Questionnaire de Proust »
1. Le principal trait de mon caractère ? Réponse ici. 2. La qualité que je préfère chez un homme ? Réponse ici. 3. La qualité que je préfère chez une femme ? Réponse ici. 4. Ce que j'apprécie le plus chez mes amis ? Réponse ici. 5. Mon principal défaut ? Réponse ici. 6. Mon occupation préférée ? Réponse ici. 7. Mon rêve de bonheur ? Réponse ici. 8. Quel serait mon plus grand malheur ? Réponse ici. 9. Ce que je voudrais être ? Réponse ici. 10. Le pays où je désirerais vivre ? Réponse ici. 11. La couleur que je préfère ? Réponse ici. 12. La fleur que j'aime ? Réponse ici. 13. L'oiseau que je préfère ? Réponse ici. 14. Mes auteurs favoris en prose ? Réponse ici. 15. Mes poètes préférés ? Réponse ici. 16. Mes héros favoris dans la fiction ? Réponse ici. 17. Mes héroïnes favorites dans la fiction ? Réponse ici. 18. Mes compositeurs préférés ? Réponse ici. 19. Mes peintres favoris ? Réponse ici. 20. Mes héros dans la vie réelle ? Réponse ici. 21. Mes héroïnes dans l'histoire ? Réponse ici. 22. Mes noms favoris ? Réponse ici. 23. Ce que je déteste par-dessus tout ? Réponse ici. 24. Personnages historiques que je méprise le plus ? Réponse ici. 25. Le fait militaire que j'estime le plus ? Réponse ici. 26. La réforme que j'estime le plus ? Réponse ici. 27. Le don de la nature que je voudrais avoir ? Réponse ici. 28. Comment j'aimerais mourir ? Réponse ici. 29. État d'esprit actuel ? Réponse ici. 30. Fautes qui m'inspirent le plus d'indulgence ? Réponse ici. 31. Ma devise ? Réponse ici.
<div style="width:540px; height:170px; padding-left:5px; margin-top:-28px; overflow:auto;">[b]1. Le principal trait de mon caractère ?[/b] Réponse ici. [b]2. La qualité que je préfère chez un homme ?[/b] Réponse ici. [b]3. La qualité que je préfère chez une femme ?[/b] Réponse ici. [b]4. Ce que j'apprécie le plus chez mes amis ?[/b] Réponse ici. [b]5. Mon principal défaut ?[/b] Réponse ici. [b]6. Mon occupation préférée ?[/b] Réponse ici. [b]7. Mon rêve de bonheur ?[/b] Réponse ici. [b]8. Quel serait mon plus grand malheur ?[/b] Réponse ici. [b]9. Ce que je voudrais être ?[/b] Réponse ici. [b]10. Le pays où je désirerais vivre ?[/b] Réponse ici. [b]11. La couleur que je préfère ?[/b] Réponse ici. [b]12. La fleur que j'aime ?[/b] Réponse ici. [b]13. L'oiseau que je préfère ?[/b] Réponse ici. [b]14. Mes auteurs favoris en prose ?[/b] Réponse ici. [b]15. Mes poètes préférés ?[/b] Réponse ici. [b]16. Mes héros favoris dans la fiction ?[/b] Réponse ici. [b]17. Mes héroïnes favorites dans la fiction ?[/b] Réponse ici. [b]18. Mes compositeurs préférés ?[/b] Réponse ici. [b]19. Mes peintres favoris ?[/b] Réponse ici. [b]20. Mes héros dans la vie réelle ?[/b] Réponse ici. [b]21. Mes héroïnes dans l'histoire ?[/b] Réponse ici. [b]22. Mes noms favoris ?[/b] Réponse ici. [b]23. Ce que je déteste par-dessus tout ?[/b] Réponse ici. [b]24. Personnages historiques que je méprise le plus ?[/b] Réponse ici. [b]25. Le fait militaire que j'estime le plus ?[/b] Réponse ici. [b]26. La réforme que j'estime le plus ?[/b] Réponse ici. [b]27. Le don de la nature que je voudrais avoir ?[/b] Réponse ici. [b]28. Comment j'aimerais mourir ?[/b] Réponse ici. [b]29. État d'esprit actuel ?[/b] Réponse ici. [b]30. Fautes qui m'inspirent le plus d'indulgence ?[/b] Réponse ici. [b]31. Ma devise ?[/b] Réponse ici. </div>
</div> <div style="color:#969696; font-size:10px; text-align:center;">Code par @Chance sur Ocean Home.</div> </div>
EDIT : pourquoi c'est tout moche quand je le poste ? J'avais pourtant tout bien aligné, prévisualisé plein de fois, et là toutes les zones se mettent les unes sur les autres DDD: Même la police bug... J'essaierai de regarder après le repas
EDIT 2 : en fait c'est bon, ça bug juste quand c'est sous spoiler... Chelou DD:
Dernière édition par Chance le Sam 25 Nov - 19:32, édité 2 fois
Arya Léviathan des Nymphes
Messages : 4012 Date d'inscription : 14/07/2015 Age : 28
C'est touuuut beau ! Je suis éblouie qu'avec seulement mon cours t'as réussi à faire un truc super ! Je pense d'ailleurs que pour l'image tu t'es débrouillée seule et bravo
Par contre je vois un léger oubli ici du ";" après border-bottom car du coup on ne le voit pas sur ton image D:
Je sais bien que tu n’es plus très présente Arya, mais je tenais très sincèrement à te remercier pour ce magnifique tutoriel, je le tente dès demaaaain ! Un énorme coeur sur toi, je t’aime
Accueil 
Alors ça fait pas mal de temps que j'avais envie de faire un tuto pour vous apprendre à coder, et puis je n'ai jamais eu le temps. 
)
Sur le résultat final, j'ai juste varier l'opacité 
Undead
