Tuto de Kayl n°6 - Insérer une police + les tables

Déjà là je vais commencer à me paumer dans les chiffres Fin compter jusqu'à 6 ça va encore Donc comme promis, on va juste commencer par Google Fonts et insérer des polices dans un code, et ensuite on fera les tables pour faire des colonnes

Les Polices

https://fonts.google.com

Voici le lien où y a les polices de Google Fonts o/ Donc, on peut choisir une police ou en rechercher une si on a déjà un nom Mais on va faire un essai simple, avec Dancing Script. Voici comment les polices se présentent :

https://i.gyazo.com/0e236abc2644b7c74b46c00060dc6894.png

Bon bah on clique sur le + en rose, qu'il y a à droite, pour l'ajouter. Après on a une belle fenêtre qui s'affiche (fin faut cliquer sur le bandeau noir qui s'affiche quoi mais bon on est pas con non plus)

https://i.gyazo.com/3f08596f90403fc7cdfe5b290115ef26.png

Voilà on a ça. Donc, on remarque tout de suite 2 codes Un

Ici on écrit un titre

On écrit le texte ici

Copyright by...

Code:

<center><div style="border: 5px double #FF0000; background-color: #CCEEFF; width: 80%; border-radius: 20px; padding: 20px;">
<div style="text-align: center; font-size: 26px;"><u>Ici on écrit un titre</u></div>

<div style="text-align: justify; font-size: 14px;">On écrit le texte ici</div>

<div style="text-align: center; font-size: 10px;">Copyright by...</div>
</div></center>

Voilà. Maintenant, on va placer les 2 codes de Google Fonts.
Le link href, c'est une balise à part entière. On peut la mettre tout au début, par exemple. Ou tout à la fin.

Code:

<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet"><center><div style="border: 5px double #FF0000; background-color: #CCEEFF; width: 80%; border-radius: 20px; padding: 20px;">
<div style="text-align: center; font-size: 26px;"><u>Ici on écrit un titre</u></div>

<div style="text-align: justify; font-size: 14px;">On écrit le texte ici</div>

<div style="text-align: center; font-size: 10px;">Copyright by...</div>
</div></center>

Comme ceci. Je montre pas l'aperçu, ça fonctionnera pas sans le 2nd

Le font-family: 'Dancing Script', cursive;
Faut le mettre dans la div du texte qu'on veut changer (bah oui hein pas dans le cul du pape) Par exemple dans le titre. C'est cool de donner un effet à un titre Donc il sera dans notre div qui englobe uniquement le titre. Mais on peut faire pareil pour le texte, ou même le mettre dans la div globale pour mettre tous les textes de la même police.

Code:

<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet"><center><div style="border: 5px double #FF0000; background-color: #CCEEFF; width: 80%; border-radius: 20px; padding: 20px;">
<div style="text-align: center; font-size: 26px; font-family: 'Dancing Script', cursive;"><u>Ici on écrit un titre</u></div>

<div style="text-align: justify; font-size: 14px;">On écrit le texte ici</div>

<div style="text-align: center; font-size: 10px;">Copyright by...</div>
</div></center>

Ici on écrit un titre

On écrit le texte ici

Copyright by...

WALA pour la 1ère partie. Ensuite euh oui on va faire les colonnes, même si y a aucun rapport x')

Donc, tout simplement, on va commencer par créer 2 blocs. Et ensuite on les mettra côte à côte

Code:

<div style="width: 250px; border: 2px solid black; background: #CCEEFF; color: black;">Texte</div>

<img src="http://www.rjparisijr.com/wp-content/uploads/2013/02/Orange-Butterfly-13-7-13-12.jpg" style="width: 250px;"></img>

On va partir avec ces deux codes séparés, pour mettre le bloc et l'image à côté. Et ensuite euh je pense que je vais remettre pareil dessous, pour bien tout expliquer mais vous comprendrez.
La première balise est :

Code:

<table></table>

Dedans, on va ajouter les lignes. Parce qu'il faut des lignes et des colonnes dans un tableau. Les lignes c'est :

Code:

<table>
<tr>
Ici on aura une ligne
</tr>
</table>

Donc ensuite, il va falloir mettre les colonnes, pour que ce soit à côté.

Code:

<table>
<tr>
<td>
Ici une colonne 1
</td>
<td>
Ici une colonne 2
</td>
</tr>
</table>

Bon ça fait beaucoup de trucs, mais c'est toujours pareil Et donc cette table, on peut la mettre à l'intérieur d'une div globale évidemment. D'abord, on va mettre le contenu de nos colonnes dedans : la div et l'image, simplement. On peut mettre tout et n'importe quoi dans le td, à condition qu'il y ait des largeurs (width) de mises. Sinon ça risque de tout déformer

Code:

<table>
<tr>
<td>
<div style="width: 250px; border: 2px solid black; background: #CCEEFF; color: black;">Texte</div>
</td>
<td>
<img src="http://www.rjparisijr.com/wp-content/uploads/2013/02/Orange-Butterfly-13-7-13-12.jpg" style="width: 250px;"></img>
</td>
</tr>
</table>

Texte

Et si on veut ajouter une 2e ligne avec d'autres colonnes dedans, on rajoute un tr après la fin du premier :

Code:

<table>
<tr>
<td>
<div style="width: 250px; border: 2px solid black; background: #CCEEFF; color: black;">Ici un texte, tel lien ou ce que vous voulez</div>
</td>
<td>
<img src="http://www.rjparisijr.com/wp-content/uploads/2013/02/Orange-Butterfly-13-7-13-12.jpg" style="width: 250px;"></img>
</td>
</tr>
<tr>
<td>
<img src="http://www.rjparisijr.com/wp-content/uploads/2013/02/Orange-Butterfly-13-7-13-12.jpg" style="width: 250px;"></img>
</td>
<td>
<div style="width: 250px; border: 2px solid black; background: #CCEEFF; color: black;">Ici un autre lien par exemple</div>
</td>
</tr>
</table>

Ici un texte, tel lien ou ce que vous voulez
	Ici un autre lien par exemple

Voilà, c'est tout J'ai mis un premier tr, et à l'intérieur il y a 2 td donc 2 colonnes, la 1ère étant un bloc et la 2e une image. Puis un 2e tr, avec 2 td encore, et cette fois l'image est dans le 1er, et le bloc div dans le 2e
Au prochain truc, je réserve euh un truc spécial un peu plus long o/ En attendant, vous pourrez faire vos fiches de liens ou vous entraîner
On peut mettre une div autour pour foutre un background, etc, et mettre des hauteurs et des overflow pour les blocs... Fin je donne des idées, vous faites ce que vous voulez après

Hello !
Voici ce que j'ai fait ^^
Encore merci pour tes tutos, tu expliques vraiment bien !

Ici tu met le lien que tu as avec un tel

Merci beaucoup !
Voilà ce que j'ai réussi à faire :D


Je vais pouvoir faire pleeeeeeeiiiiin de truc avec, encore merci !

Merci Kayl pour tes tutos