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
Frisk Baleine de Nemo
Messages : 2356 Date d'inscription : 02/01/2017 Age : 21
Merci beaucoup @Arya, pour une nouille comme moi en codage ça peut être un bon début :') J'essaierai quand j'aurais le temps (et la motivation éé), merci du partage
Mauane Pingouin de Madagascar
Messages : 344 Date d'inscription : 25/08/2017 Age : 21
Bon, @Arya, tu es certaine de pouvoir compter sur moi pour suivre tes cours avec assiduité Merci pour ce superbe tuto très bien détaillé (c'est la première fois que je comprends vraiment du codage, incroyable)
Arya Léviathan des Nymphes
Messages : 4012 Date d'inscription : 14/07/2015 Age : 27
Merci beaucoup les filles, c'est un plaisir de rendre service !
@Mauane c'est vrai ? Tu me fais trop plaisir ! Je veux voir vos oeuvres ! *-*
Ou est-ce qu'il faut que je donne un exercice pour que vous le fassiez ? C'est ce que je me suis demandée d'ailleurs, puisque dans un cours, il y a une méthode puis des exercice d'application, est-ce que si je vous en donne (des simples bien sûr pour vous entrainer), ça vous intéresse ?
Louve Ailée Léviathan des Nymphes
Messages : 3660 Date d'inscription : 14/07/2015 Age : 27
Bon j'ai voulu essayer, mais en fait, en prévisualisant, rien ne marche :l'écriture ne marche pas sur le titre, le cadre à l'intérieur est collé aux bordures de l'autre cadre, et le titre comme le texte dans le cadre intérieur ne sont pas centrés... J'en ai marre !!!
Mauane Pingouin de Madagascar
Messages : 344 Date d'inscription : 25/08/2017 Age : 21
J'espère que ça marche A chaque fois j'y arrive pas, ça m'énerve... EDIT: J'ai réussi !!!
REEDIT : J'ai fait un autre essai !
Dream
Viens, tu verras la route est longue Parfois le ciel devient sombre Mais les nuages sont encore loin...
Et même si de fatigue tu tombes Dans ta course vagabonde Aie le courage de continuer ton chemin...
Dis-toi que rien n'est écrit L'avenir se construit Il n'y a que toi pour savoir quelles sont vraiment tes envies... Il n'y a que toi pour savoir quel sens donner à ta vie...
Dernière édition par Mauane le Dim 5 Nov - 11:45, édité 4 fois
Arya Léviathan des Nymphes
Messages : 4012 Date d'inscription : 14/07/2015 Age : 27
Bravoooo ! Tu as réussi tu vois ! Pour l'exercice à faire par contre tu as inversé les bordures, ça devait être les pointillés à droite et à gauche mais pas grave tu l'as fait dans le deuxième :p ...Euh enfait non j'avais demandé des dashed et c'est 1px
Mauane Pingouin de Madagascar
Messages : 344 Date d'inscription : 25/08/2017 Age : 21
@Arya : merci :3 Je suis en train d'éditer mon post, j'ai eu beaucoup de mal avec le titre xDD Heureusement @Gaïa (à qui je balance des keurs ) m'a aidé à comprendre xD
Arya Léviathan des Nymphes
Messages : 4012 Date d'inscription : 14/07/2015 Age : 27
Ooh super merci @Gaïa je te balance des coeurs moi aussi C'est vrai que le titre faut savoir bien placer je me suis dit que j'ai peut-être expliqué trop vite
Chance Baleine de Nemo
Messages : 2005 Date d'inscription : 09/09/2015 Age : 22
Tout le monde balance des keurs à @Gaïa de toute façon J'ai édité, par contre je me suis ratée pour l'opacité et j'ai oublié de mettre une distance entre le titre et le bloc j'essaierai ce soir de corriger ça
Arya Léviathan des Nymphes
Messages : 4012 Date d'inscription : 14/07/2015 Age : 27
Bon progrès quand même ! Ca prend forme ! C'est la bonne dimension pour la div intérieure ? D: Ben oui on lui fait des coeurs, mais tu la gardes que pour toi @Gaïa elle nous manque aussi
Jade Lion des mers
Messages : 621 Date d'inscription : 09/01/2017 Age : 26
@Chance Il y a des espaces invisibles   qui se sont glissés dans mes paramètres de bordures dans mon précédent post, je n'arrive pas à les enlever et c'est pour ça que mes bordures n'apparaissent pas :/ J'ai pu les voir en utilisant la fonction inspecter sur mon bloc Mais si je copie le code nouvellement modifié ici, ça devrait fonctionner normalement, avec les prévisualisations que j'ai pu faire :
Je vais tester ! J'avais réussi à pondre une fiche RP y'a deux ans, et j'ai suivi quelques cours de HTML mais je suis nulle XD J'édite quand c'est fait Merci à toi @Arya t'es la meilleure, c'est génial ce tuto
EDIT : 20:56:32
Juh présidente
raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine !
Bon nickel à priori j'ai pas oublié ce que j'avais appris
Dernière édition par ☯ Undead le Dim 5 Nov - 20:57, édité 1 fois