Sanashiya R. KyokoAdministratrice « Iris » World's end is nothing more than a Theory.
PUF : Iris Age : 26 Messages : 105 Date d'inscription : 25/08/2012 Localisation : Avec Kuro et Fye *7*
Papier d'Identité Âge : 16 ans Carrière : Duo : Penguin's Constellation Tes Fans:
Sujet: Tuto HTML 1 ♪ Ven 31 Aoû - 9:42
Création d'une DIV & Propriétés de texte ♪
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 :
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 site
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 :
/!\ 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 :
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''
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 ):
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
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 pxTaille 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 :
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:
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
Et bien là aussi c'est simple, si vous tenez à votre hauteur il suffit de rajouter ce petit code :
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 ) :
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
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) ~
Tashemi HihariRockeur en Herbe #
PUF : Sunny - Soley } Age : 25 Messages : 94 Date d'inscription : 30/08/2012 Localisation : Popopopom ♫