EXERCICES CODE

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>

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>

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.

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>

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>

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>

É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.

ex. 1

Code:

<div style="width:300px;height:310px;border:1px solid red;">blabla</div>

ex. 2

Code:

<div style="height:18px;width:5px;">je suis petit</div>

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>

Code:

<div style="width:140px;height:90px;background-color:#F0C300;padding:8px;">exercice 5</div>

Code:

<div style="height:200px;border: 2px solid #82C46C;background-color:#677179;padding:10px;">exercice 6</div>

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>

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>

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>

À toi de créer 4 div différentes

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>

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>

colonne 1

colonne 2

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

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