| | EXERCICES CODE | |
| Auteur | Message |
---|
Admin Messages : 5 Date d'inscription : 30/07/2019 | Sujet: EXERCICES CODE Mar 30 Juil - 15:36 | |
| Aloooooors pour commencer dans les bases comme tu as dis, on va faire une div. mais qu’est ce que c’est ? C’est un bloc auquel tu donnes - une forme - une taille (longueur / largeur) Elle s’ouvre par « < div > » et se ferme obligatoirement et toujours par « < / div> » (j’ai mis des espace mais normalement tout est collé. ^^ Ce bloc "div" sera toujours remis à la ligne si 2 div se suivent Exemple : - Code:
-
<div>premier texte</div> <div>second texte </div> premier texte second texte Pourtant si tu regardes le codes, tu verras qu’ils sont écrits sur la même ligne mais que les textes s’affichent l’un en dessous de l’autre, comme je l'ai dis, les div se mettent l'une en dessous des autres. Bon. Voilà un début. ça c'est la base à savoir. Maintenant, on personnalise. Pour personnaliser une div, tu dois utiliser « style » Pour bien comprendre comment se personnalise une div, il y a plusieurs item à connaître que tu utiliseras tout le temps. Ça rentrera au fur et à mesure t’en fais pas. Quand je veux personnaliser ma div je rajoute « style="item......." » Chaque item doit être séparé par un « ; » sinon le navigateur ne reconnaît pas, et rien ne s’affiche. Une div n’affichera par défaut que son contenu (le texte entre les div). Si on veut voir apparaître physiquement le bloc div, on met en item « border:1px solid black » - Code:
-
<div style="border:1px solid black;"> texte là</div> texte là Dans ce cas : Border : item bordure 1px : largeur de la bordure solid : style de bordure (trait plein) on peut avoir dès bordure en pointillé avec « dotted » black : la couleur de la bordure. Si je veux une div de 300 pixels de large et 100 pixel de haut, j’ecris - Code:
-
<div style="width:300px;height:100px;">un texte comme ça </div> width: pour largueur height : pour hauteur px = pixel (on peut utiliser d’autres unités, mais on utilise beaucoup px) >>> EXO à faire !! Je veux - une div de 360 largeur et 310 de hauteur avec bordure rouge - une div de 18 de hauteur et 5 de largeur sans bordure avec le texte "je suis petit" - une div de 7 de largeur avec bordure noire - une div de 250 de hauteur et 360 de longueur, le texte prénom nom, avec une bordure verte.
Dernière édition par douceline le Mar 30 Juil - 15:59, édité 1 fois |
| | | Admin Messages : 5 Date d'inscription : 30/07/2019 | Sujet: Re: EXERCICES CODE Mar 30 Juil - 15:40 | |
| Bon.. maintenant que tu gères les largeurs et les hauteurs d’une div on va s’interesser à la personnalisation de la div Comment faire pour avoir une div d’un fond d’une couleur ? Avec une certaine police ? Avec des marges ? Des espaces ? Well..... 1) LE FOND Tout con, c’est l’item background-color - Code:
-
<div style="width:120px;height:40px;background-color:#ccffff;"> fond bleu </div> fond bleu Background-color : item de couleur du fond #fffffff : code couleur. Pour les codes couleurs tu trouveras sur internet la liste des codes couleurs mais si tu as Photoshop (ou autre) quand tu sélectionnes une couleur on te donne son code. Magnifique mais hm..... ton texte est collé à la bordure - Code:
-
<div style="width:120px;height:40px;background-color:#ccffff;border:3px solid blue;"> fond bleu </div> fond bleu Et c’est pas super beau.. on veut un truc esthétique. On va rajouter ce qu’on appelle des espaces sous l’item « padding », ce sont des "marges" - Code:
-
<div style="width:120px;height:40px;background-color:#ccffff;border:3px solid blue;padding:5px;"> fond bleu </div> fond bleu Évidemment quand on rajoute du padding (ici de 5 pixel) on ajoute un espace de 5 pixel en haut, en bas, gauche et droite, ce qui inévitablement change la taille de la div (on a ajouté 5 pixel de chaque côté du rectangle...) >>> EXO - une div de 140 largeur et 90 hauteur, fond jaune, pas de bordure, espace de 8 - une div 200 hauteur, bordure de 2 d’epaisseur verte, fond gris et espace de 10 - largeur 300 px, espace 2, fond blanc, bordure noire de 1 d’épaisseur - hauteur 200, largeur 320, fond transparent, bordure grise, espace de 5 en haut et 2 ailleurs. |
| | | Admin Messages : 5 Date d'inscription : 30/07/2019 | Sujet: Re: EXERCICES CODE Mar 30 Juil - 15:48 | |
| ex. 1 - Code:
-
<div style="width:300px;height:310px;border:1px solid red;">blabla</div> blabla ex. 2 - Code:
-
<div style="height:18px;width:5px;">je suis petit</div> je suis petit. ex. 3 - Code:
-
<div style="width:7px;border: 1px solid black;"></div> ex. 4 - Code:
-
<div style="height:250px;width:360px;border: green">prénom nom</div> prénom nom |
| | | Admin Messages : 5 Date d'inscription : 30/07/2019 | Sujet: Re: EXERCICES CODE Mar 30 Juil - 17:07 | |
| - Code:
-
<div style="width:140px;height:90px;background-color:#F0C300;padding:8px;">exercice 5</div> exercice 5 - Code:
-
<div style="height:200px;border: 2px solid #82C46C;background-color:#677179;padding:10px;">exercice 6</div> exercice 6 |
| | | Admin Messages : 5 Date d'inscription : 30/07/2019 | Sujet: Re: EXERCICES CODE Mar 30 Juil - 17:18 | |
| Ok, great !! Avançons 2) LES BORDS Si tu veux que ta div ait des bords plus rond on utilise l’item « border-radius » Style="border-radius: 50px 6px 10px 20px" 50 > le coin en haut à gauche 6 > le coin en haut à droite 10 > le coin en bas à droite 20 > le coin en bas à gauche Si tu veux que les coins aient le même arrondi (5px par exemple) alors on met juste border-radius:5px - Code:
-
<div style="width:200px;height:40px;border-radius:50px 10px;border:1px solid red;">texte</div> texte 3) TEXTE Ok, quand tu seras sur ton ordi, tu tapes texte latin et normalement le premier site te propose différents textes (nb de mots, nb de paragraphe..) https://www.faux-texte.com/Prends en un et met le dans la div que tu vas faire Pour modifier le texte il y a plusieurs items possible - sa taille : font-size:13px; - sa couleur : color:red; - sa famille : font-family:arial - son style : text-transform:(uppercase,lowercase) upper pour avoir que en majuscule et lower pour que minuscule même si dans ton texte initial il y a des majuscules ça les change - hauteur de ligne : line-height:12px; - espacement des lettres : letter-spacing:1px ou -1px (oui on peut faire en négatif). On peut le faire avec des mots mais on verra après. - Code:
-
<div style="padding:10px;width:300px;font-size:9px;color:green;border:1px solid;font-family:georgia;">Nunc vero inanes flatus quorundam vile esse quicquid extra urbis pomerium nascitur aestimant praeter orbos et caelibes, nec credi potest qua obsequiorum diversitate coluntur homines sine liberis Romae.</div> Nunc vero inanes flatus quorundam vile esse quicquid extra urbis pomerium nascitur aestimant praeter orbos et caelibes, nec credi potest qua obsequiorum diversitate coluntur homines sine liberis Romae. Si t’as div à une taille trop petite pour contenir un grand texte on utilise l’item « overflow » pour avoir des scroll bars Style="overflow:auto" pour afficher les scroll bars et que le texte reste dans la div sans déborder - Code:
-
<div style="height:50px;width:150px;border:1px solid black;overflow:auto;">Et interdum acciderat, ut siquid in penetrali secreto nullo citerioris vitae ministro praesente paterfamilias uxori susurrasset in aurem, velut Amphiarao referente aut Marcio, quondam vatibus inclitis, postridie disceret imperator. ideoque etiam parietes arcanorum soli conscii timebantur.</div> Et interdum acciderat, ut siquid in penetrali secreto nullo citerioris vitae ministro praesente paterfamilias uxori susurrasset in aurem, velut Amphiarao referente aut Marcio, quondam vatibus inclitis, postridie disceret imperator. ideoque etiam parietes arcanorum soli conscii timebantur. À toi de créer 4 div différentes |
| | | Admin Messages : 5 Date d'inscription : 30/07/2019 | Sujet: Re: EXERCICES CODE Mar 30 Juil - 17:18 | |
| 4) LES TABLES Alors là, c'est autre chose. Ce qu'on appelle les tables, ce sont les tableaux. Parce que ouai, on peut faire des tableaux. Pour créer un tableau on met < table> table> Entre ces 2 balises on peut mettre - des lignes : < tr> - des colonnes < td> - Code:
-
<table><td style="border:1px solid;">colonne 1</td><td style="border:1px solid;">colonne 2</td></table> - Code:
-
<table><tr><td style="border:1px solid;">ligne 1 colonne 1</td><td style="border:1px solid;">ligne 1 colonne 2</td></tr><tr><td style="border:1px solid;">ligne 2 colonne 1</td><td style="border:1px solid;">ligne 2 colonne 2</td></tr></table> ligne 1 colonne 1 | ligne 1 colonne 2 | ligne 2 colonne 1 | ligne 2 colonne 2 |
Bon... si déjà tu as compris comment ça marche, alors c'est déjà bien :vivi: Dans les td on peut mettre des div - Code:
-
<table><tr><td><div style="height:37px;background-color:red;border:1px solid;font-size:10px;color:white;padding:10px;">colonne 1 texte </div></td><td style="border:1px solid;">ligne 1 colonne 2</td></tr><tr><td><div style="height:20px;background-color:green;border:1px solid;font-size:10px;padding:2px;color:white;">colonne 2 texte </div></td><td><div style="height:80px;background-color:orange;border:1px solid;font-size:10px;color:blue;padding:10px;">colonne 2 texte </div></td></tr></table> colonne 1 texte | ligne 1 colonne 2 | colonne 2 texte | colonne 2 texte |
|
| | | Admin Messages : 5 Date d'inscription : 30/07/2019 | Sujet: Re: EXERCICES CODE Sam 3 Aoû - 15:25 | |
| show me love Nihil est enim virtute amabilius, nihil quod magis adliciat ad diligendum, quippe cum propter virtutem et probitatem etiam eos, quos numquam vidimus, quodam modo diligamus. Quis est qui C. Fabrici, M'. Curi non cum caritate aliqua benevola memoriam usurpet, quos numquam viderit? quis autem est, qui Tarquinium Superbum, qui Sp. Cassium, Sp. Maelium non oderit? Cum duobus ducibus de imperio in Italia est decertatum, Pyrrho et Hannibale; ab altero propter probitatem eius non nimis alienos animos habemus, alterum propter crudelitatem semper haec civitas oderit. Nihil est enim virtute amabilius, nihil quod magis adliciat ad diligendum, quippe cum propter virtutem et probitatem etiam eos, quos numquam vidimus, quodam modo diligamus. Quis est qui C. Fabrici, M'. Curi non cum caritate aliqua benevola memoriam usurpet, quos numquam viderit? quis autem est, qui Tarquinium Superbum, qui Sp. Cassium, Sp. Maelium non oderit? Cum duobus ducibus de imperio in Italia est decertatum, Pyrrho et Hannibale; ab altero propter probitatem eius non nimis alienos animos habemus, alterum propter crudelitatem semper haec civitas oderit. Nihil est enim virtute amabilius, nihil quod magis adliciat ad diligendum, quippe cum propter virtutem et probitatem etiam eos, quos numquam vidimus, quodam modo diligamus. Quis est qui C. Fabrici, M'. Curi non cum caritate aliqua benevola memoriam usurpet, quos numquam viderit? quis autem est, qui Tarquinium Superbum, qui Sp. Cassium, Sp. Maelium non oderit? Cum duobus ducibus de imperio in Italia est decertatum, Pyrrho et Hannibale; ab altero propter probitatem eius non nimis alienos animos habemus, alterum propter crudelitatem semper haec civitas oderit.
Dernière édition par Flo. le Ven 27 Déc - 21:07, édité 1 fois |
| | | Admin Messages : 5 Date d'inscription : 30/07/2019 | Sujet: Re: EXERCICES CODE Dim 4 Aoû - 14:33 | |
| ligne 1 colonne 1 | ligne 1 colonne 2 | ligne 2 colonne 1 | ligne 2 colonne 2 |
ligne 1 colonne 1 | Et quia Mesopotamiae tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta vastarat. erat autem quod cogitabat huius modi. | ligne 2 colonne 1 | ligne 2 colonne 2 |
|
| | | Admin Messages : 5 Date d'inscription : 30/07/2019 | Sujet: Re: EXERCICES CODE Lun 5 Aoû - 11:37 | |
| Si tu veux écarter 2 div l’une de l’autre tu utilises l’item « margin » Pareil tu peux l’utiliser en positif ou en négatif margin-left:-10px; margin:25px; Si t’as des questions envoie moi un message sur discord hein |
| | | | Sujet: Re: EXERCICES CODE | |
| |
| | | | EXERCICES CODE | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |