Bonjour à tous ; aujourd'hui Iris va essayer de vous expliquer ce qu'est une " DIV ". Une DIV c'est juste deux balises largement modifiable permettant d'enfermer vos texte, images et cetera... La création d'une DIV est un pilier fondamental au codage HTML. Pour vous donnez un exemple concret ; mon tutoriel est prisonnier d'une DIV. Pour faire simple on peut dire qu'une DIV est une boîte. Maintenant je vais vais essayer de vous faire comprendre la création de cette fameuse boite... ♪

I ~ Bords ♪

Tout d'abord commençons par le code qui englobera tous les autres codes de modification.

Code:

<div style=" "> </div>

/!\ L'ensemble du code devra être mit entre guillemet.

Ensuite on ajoute entre les guillemets le code '' border ''; qui comme vous l'aurez certainement compris correspond à la bordure de votre boîte. Je vous montre un exemple :

Code:

<div style="border: 3px solid #000000">Essai</div>

Essai

Je vous décortique un peu tout ça :

2px Largeur de votre bordure en pixel.
solid Là c'est une bordure en trait uni ; vous pouvez changer par '' double '' pour avoir une bordure double ( comme la DIV de mon tuto ) ou encore ''dotted'' pour des pointillés, et dashed pour des tirets.
#000000 Là c'est le code couleur, en l’occurrence noir pour cet exemple. On peut obtenir le code couleur sur un logiciel de graphisme ( tel que photofiltre, photoshop ou encore gimp ) ou plus simplement aller sur ce [Vous devez être inscrit et connecté pour voir ce lien]

II ~ Fond ♪

Voila maintenant nous pouvons passer au fond. Ici nous avons deux possibilités. Soit mettre une couleur de fond ou encore insérer une image ( comme la DIV de mon tuto ). Les deux sont très simple. Si vous voulez mettre un fond en couleur vous ajouterez à votre code : background-color: #CODE COULEUR. Comme ceci, avec un fond blanc pour exemple :

Code:

<div style="border: 2px solid #000000; background-color: #FFFFFF">Essai</div>">Essai</div>

Essai

Voila ; et si vous voulez insérer une image de fond il suffit de mettre : background:url('URL DE L'IMAGE') ; comme ceci :

Code:

<div style="border: 2px solid #000000; background:url('http://obsession27.free.fr/divers/fonds/bo3.jpg')">Essai</div></div>

Essai

/!\ Vous remarquez sûrement le point virgule entre les deux propriété, il est impératif de ne pas l'oublier et de le faire suivre d'un espace, il sert à séparer les deux codes.

III ~ Codes de Base du Texte ♪

Alors, si vous ne le savez pas ici c'est un tutoriel sur le HTML. Voila, un préambule pour la partie numéro quatre de ce tutoriel. Le texte. Alors vous avez déjà utiliser du BBCode sûrement, une série de balises codes assez simples :

Code:

[b]gras[/b][i]italique[/i][u]souligné[/u][strike]barré[/strike][color=red]couleur[/color][font=Arial]police[/font][size=18]taille[/size]

grasitaliquesoulignébarrécouleurpolicetaille

Tout ça pour venir au fait que l'on peut reproduire la même chose avec des balises code HTML :

Code:

<b>gras</b><i>italique</i><u>Souligné</u><s>barré</s><font color=red>Couleur</font><font size=18>taille</font>

grasitaliqueSoulignébarréCouleurtaille


Bon j'espère que vous avez compris, maintenant revenons à notre chère boite.

IV ~ Propriétés de texte & Lettrines ♪

Dans les parties un et deux nous avons appris à réaliser une boite, maintenant nous allons insérer un texte dans cette boite. Pour mon exemple j'ai pris des paroles de chansons que j'ai mis à la place de ''Essai''

Code:

<div style="border: 2px solid #000000; background:url('http://obsession27.free.fr/divers/fonds/bo3.jpg'); text-align: center; text-shadow: 1px 3px 3px darkblue; letter-spacing: 3px; font-size: 16px; font-family: arial;">

Lili ♪

Lili,take another walk out of your fake world
please put all the drugs out of your hand
you'll see that you can breath without not back up
some much stuff you got to understand

for every step in any walk
any town of any thaught
i'll be your guide

for every street of any scene
any place you've never been
i'll be your guide

lili,you know there's still a place for people like us
the same blood runs in every hand
you see its not the wings that makes the angel
just have to move the bats out of your head

for every step in any walk
any town of any thaught
i'll be your guide

for every street of any scene
any place you've never been
i'll be your guide

lili,easy as a kiss we'll find an answer
put all your fears back in the shade
don't become a ghost without no colour
cause you're the best paint life ever made

</div>

Exemple ( il est moche maibon ):

Là aussi décortiquons un peu;

text-align: center L'alignement du texte, dans mon exemple 'center' donc centré. Mais vous pouvez mettre 'left' ( droite ) ; 'right' ( gauche ) ou encore 'justify' ( justifié ).
text-shadow: 1px 3px 3px darkblue Ici le code pour l'ombre du texte, pour la couleur à vous de choisir et de mettre votre code, moi j'ai choisis bleu foncé.
letter-spacing: 3px Là pour ajouter de l'espace entre les lettres, le tout exprimé en pixel
font-family: arial Simplement la police que j'ai choisis de mettre en Arial.

Ah , je crois que vous avez capté le truc. Comme c'est écris dans le titre de cette partie nous allons nous intéresser aux lettrines.

Code:

<span style="float: left; font-size: 40px; padding-top: 10px; margin-bottom: 3px; font-family: 'Times new roman'; color: pink; padding-right: 3px;">L</span>ili,easy as a kiss we'll find an answer
put all your fears back in the shade
don't become a ghost without no colour
cause you're the best paint life ever made

Lili,easy as a kiss we'll find an answer
put all your fears back in the shade
don't become a ghost without no colour
cause you're the best paint life ever made


Float: left L'emplacement de votre lettre. par exemple si vous mettez right votre lettre se retrouvera complètement a droite de la page.
Font-size: 40 px Taille de la lettre exprimé en pixel.
Padding-top: 10 px Emplacement du texte par rapport à la lettrine. Exprimé en pixel.
Margin-bottom: 3px Taille de la marge sous la lettre.
Font-family: Times new roman La police.
Color: pink Couleur de la lettrine
padding-right: 3 px Taille de la marge à droite de la lettrine, exprimée en pixel.

V ~ Autres propriétés ♪

Bon là c'est juste quelques petites propriété. Par exemple si vous voulez avoir une taille obligatoire pour votre DIV. Il suffit d'ajouter ces deux petits codes :

Code:

<div style="border: 3px solid #000000; width: 200px; height: 200px">Essai</div>

Essai

Width pour la largeur, exprimé en pixel Height pour la hauteur, également exprimé en pixel

Mais là vous me dites... Mais si je fixe une hauteur et que mon texte dépasse ? comme ceci :

Spoiler:

Et bien là aussi c'est simple, si vous tenez à votre hauteur il suffit de rajouter ce petit code :

Code:

overflow:auto

comme ceci :

Code: <div style="border: 3px solid #000000; width: 200px; height: 200px; overflow:auto">Lili ♪ Lili,take another walk out of your fake world please put all the drugs out of your hand you'll see that you can breath without not back up some much stuff you got to understand for every step in any walk any town of any thaught i'll be your guide for every street of any scene any place you've never been i'll be your guide lili,you know there's still a place for people like us the same blood runs in every hand you see its not the wings that makes the angel just have to move the bats out of your head for every step in any walk any town of any thaught i'll be your guide for every street of any scene any place you've never been i'll be your guide lili,easy as a kiss we'll find an answer put all your fears back in the shade don't become a ghost without no colour cause you're the best paint life ever made </div>

Lili ♪ Lili,take another walk out of your fake world please put all the drugs out of your hand you'll see that you can breath without not back up some much stuff you got to understand for every step in any walk any town of any thaught i'll be your guide for every street of any scene any place you've never been i'll be your guide lili,you know there's still a place for people like us the same blood runs in every hand you see its not the wings that makes the angel just have to move the bats out of your head for every step in any walk any town of any thaught i'll be your guide for every street of any scene any place you've never been i'll be your guide lili,easy as a kiss we'll find an answer put all your fears back in the shade don't become a ghost without no colour cause you're the best paint life ever made

Ensuite je voulais soulever deux autres petites propriété. Là j'entends votre question.
Vous : Mais Iris comment on fait les coin arrondis comme la DIV de ton tuto ?
Moi : Rien de plus simple je vous explique tout de suite.

Donc ; là aussi c'est une histoire de petit code. Ici il s'agit de celui ci :

Code:

border-radius: 10px

Comme ceci ( vous pouvez changer le nombre de pixel ) :

Code:

<div style="border: 3px solid #000000; border-radius: 10px"><justify>Lili ♪

Lili,take another walk out of your fake world please put all the drugs out of your hand you'll see that you can breath without not back up some much stuff you got to understand for every step in any walk any town of any thaught i'll be your guide for every street of any scene
any place you've never beeni'll be your guide</justify></div>

Lili ♪

Lili,take another walk out of your fake world please put all the drugs out of your hand you'll see that you can breath without not back up some much stuff you got to understand for every step in any walk any town of any thaught i'll be your guide for every street of any scene
any place you've never beeni'll be your guide

Mais, mais, mais... y a pas un truc qui va pas ?!
Effectivement le texte parait collé à notre boite, là aussi il y un code pour nous aider : ( exprimé en pixel lui aussi )

Code:

padding: 5px

Lili ♪

Lili,take another walk out of your fake world please put all the drugs out of your hand you'll see that you can breath without not back up some much stuff you got to understand for every step in any walk any town of any thaught i'll be your guide for every street of any scene
any place you've never beeni'll be your guide

Code:

<div style="border: 3px solid #000000; border-radius: 10px; padding: 5px"><justify>Lili ♪

Lili,take another walk out of your fake world please put all the drugs out of your hand you'll see that you can breath without not back up some much stuff you got to understand for every step in any walk any town of any thaught i'll be your guide for every street of any scene
any place you've never beeni'll be your guide</justify></div>

& Voila ♪

J'espère que vous avez tous bien compris, j'ai hâte de voir vos résultats et n'hésitez pas à me poser des questions ^^'
Je pense que la prochaine nous nous attaquerons aux tableaux je pense.

Tuto by Iris (c) ~