Un forum de discussions pour parler de tout et de rien, de vos études,de vos vacances,de vos loisirs et faire plein de connaissances
 

Partagez
 

 Codage pour les nuls 1

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Codage pour les nuls 1 Empty
Message Sujet: Codage pour les nuls 1   Codage pour les nuls 1 EmptyMer 19 Aoû - 9:54


LE CODAGE POUR LES NULS N°1

En fait ce serait plutôt "Le codage pour les graphistes 8D"
LE CODAGE POUR LES FLEMMARDS *comme moi quoi*


Bon alors c'est trèèèès simple  :lama15:
Vous êtes graphiste ?
Vous utilisez Photoshop/Gimp/photofiltre et vous aimeriez avoir de beaux "codes" ? Cool
Et bien bienvenue dans ce tutoriel assez original !
Alors en fait l'astuce, c'est de faire le fond... C'est déjà une première approche au codage, ce sera votre base.
C'est très simple  :lama12:
Alors vous faites votre "planche". Armez vous d'imagination ! Vous n'êtes pas graphiste pour rien !
On commence par très facile, pour débuter !  :lama2:




Exemple 1
Alors là c'est vraiment simple. Mais ça marche seulement si vous avez la transparence bien sûr (donc pas Photofiltre, mais bon vous pouvez prendre le fond du forum, attention par contre il change tous les deux mois Cool). Alors j'ai pris cette image :
https://redcdn.net/hpimg15/pics/710846notration.png

Ensuite il faudra donc que cette image soit votre fond.
Fond se dit "Background" en anglais (et oui l'anglais vous suivra partout è_é )
Bref, vous voulez que ce background soit une image. Facile, ça donne ....?? *Dora*
Background-image, bravo !!
Bon alors pour mettre un fond, il vous faut le mettre dans la balise "div style".
Code:
<div style="background-image:url('')">
Ah oui j'avais oublié, il faut mettre url aussi, puis vous collez l'adresse url entre la parenthèse et l'apostrophe ainsi :
Code:
<div style="background-image:url('http://img15.hostingpics.net/pics/710846notration.png')">
Chaque élément mis est très important n'enlevez rien è_é
Maintenant les dimensions de l'image ! Height est la hauteur, Width est la largeur, en px le tout ! Espacez vos éléments avec ";", ça vous donne :
Code:

<div style="background-image:url('http://img15.hostingpics.net/pics/710846notration.png');width:540px; height:300px;">
Vous y êtes arrivé ? Bravoooo *-*

Maintenant on passe au texte à l'intérieur. C'est pareil, mais rétrécissez la largeur et la hauteur pour que ça rentre dans l'image ! *-*
Code:

<div style="background-image:url('http://img15.hostingpics.net/pics/710846notration.png');width:540px; height:300px;">

<div style=" height:170px; width:520px; ">
Ensuite j'ai rajouté un padding, qui permet que votre texte ne touche pas les bords (en clair c'est pour les idiots comme moi, qui ont mal redimensionner la partie texte donc c'est pour rétrécir 8D)
Pour le déroulant à droite, c'est overflow:auto
Code:

<div style="background-image:url('http://img15.hostingpics.net/pics/710846notration.png');width:540px; height:300px;">

<div style=" height:170px; width:520px; padding:20px;overflow:auto;">
Vous écrivez votre texte à la suite de cette balise et vous fermez avec deux /div, puisque vous en avez ouvert deux.
Et bien sûr mettez tout ça entre les balises center !
Code:
<center>
<div style="background-image:url('http://img15.hostingpics.net/pics/710846notration.png');width:540px; height:300px;">

<div style=" height:170px; width:520px; padding:20px;overflow:auto;">
TEXTE TEXTE TEXTE
</div></div></center>



Ça vous donne ça (c'est pas étonnant)   :lama9:



TEXTE TEXTE TEXTE


Facile hein ? Vous pouvez faire ça pour n'importe quelle image  :please: 
Vous avez juste besoin de ces choses :
background-image:url('http://www.url.com')
width:XXpx
height:XXpx
padding:XXpx
overflow:auto
center


Exemple de codage fait avec cette technique :
http://ocean-home.forumactif.org/t152-taniere-d-une-louve
Avec cette planche : https://i.imgur.com/anje2uz.png


Un merci ne vous coûte rien !   :lama6:

A la prochaine  :pingoun:


TUTORIEL BY ARYA



Codage pour les nuls 1 29VnchE
Merci Nolwenn ♥
Codage pour les nuls 1 Hl03vzZ
Revenir en haut Aller en bas
Lucyfer
Pingouin de Madagascar
Pingouin de Madagascar
Lucyfer
Messages : 235
Date d'inscription : 19/04/2016
Age : 18

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyMar 5 Juil - 8:54

howhow! merci bcp, je voulais me mettre au codage et je savais pas par quoi commencer, ton tuto est merveilleux, je te montrerai ce que j'ai fait!!

EDIT:
J'ai fait ça:
http://lucyxxgalleryss.forumactif.fr/h4-essai-fiche-1
(il est possible qu'il faille se connecter sur mon forum test pour le voir)

Mais ya un problème avec le cadre texte o/ et j'arrive pas à changer est ce que tu peux m'aider, voici le code:
Code:
<!fond><div style="background-image:url('http://img15.hostingpics.net/pics/490230Fiche1.png')
;height:684px
;width:530px;">
<!/fond>
<!cadre texte>
 <div style=" height:170px
  ;color: #93FFD8
  ;width:468px
  ;padding:30px
  ;overflow:auto
  ;padding-top:350px">
    jbnaezlfhbvziqbZIUVAMOBIjhbgtyfddrtesdtryftugyihuo<br/>
     FCZKHLIYV8FDRSXETDWSC V<br/>
    BJVGCXFYDET,kiouiuicyxtetrzqeedtryuioionibuvucxcvbn,vcxuhijnn<br/>
    HJBVUGCIFYXUDTWYR<br/>
    NJOUBIYVjbhvgycxtrxdtcfyvgubnjibyuvcyxxcyvgubhnjiubvyucx<br/>
    OINUPBIGYTFRD<br/>
    KJNHVUGCYRTREZ<br/>
    ONKJIBUYVUhbuvytyrtzqtyuuuytcxwwrxtcyvubicxTRYDESZQ<br/>
    OUIBYVTFRDESZQ<br/>
    PNOIUBIYnjbyuvifdres(drfytguihoijuygtfrdVUTCRDESZQ<br/>
    NKJOBUIYVbhvcyxtyeszssertugyiuhouoiytfrudesedrtgyuh<br/>
    jbiuhyuvtfrdes<br/>
    jbihuyvtfynjuhbygiutfdrhugyftdrsdrtgyuhjddrftugyiuhijjidsse<br/>
    knojbiuygvufuygtfdrftgyuhijgfdrrftugyuhijytfyuhoijpyguoipijttdreszq<br/>
    ojuniyutfrdeszq<br/>
    kinoujbiyvtfcdrse<br/>
  </div>
</div>



Merci à Shakumiro pour le code!♥ ♥ ♥
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyMer 6 Juil - 20:35

Oh super ! *-* Je suis contente que mon tuto t'a aidé !

Quel est le problème dans le texte ? Je ne vois pas de problème D:



Codage pour les nuls 1 29VnchE
Merci Nolwenn ♥
Codage pour les nuls 1 Hl03vzZ
Revenir en haut Aller en bas
Shakumiro
Carpe Japonaise
Carpe Japonaise
Shakumiro
Messages : 89
Date d'inscription : 07/06/2016

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyJeu 7 Juil - 11:46

Ahhhhhhh nonnn Arya t'as fait quoi :'(, la balise center au secoursss ! Pour centrer automatiquement tu peux utiliser le "margin:auto;" qui doit s'appliquer pour chaque élément. Sinon j'aime bien le tuto et l'exemple choisi :D good job!




Merci à toi Lucy pour le kit <3
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyMer 3 Aoû - 8:16

Haha j'le fais à la bledarde moi j'savais pas 8D



Codage pour les nuls 1 29VnchE
Merci Nolwenn ♥
Codage pour les nuls 1 Hl03vzZ
Revenir en haut Aller en bas
Myria
Léviathan des Nymphes
Léviathan des Nymphes
Myria
Messages : 4601
Date d'inscription : 04/06/2016
Age : 19

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyDim 28 Aoû - 20:36

@Arya Si on veut introduire une image dans le codage on fait comment pour que celle-ci se redimensionne automatiquement ? :) et c'est ou qu'on doit introduire les balises pour les images ? (entre le background et le code pour le texte ?)

+ je peux utiliser ce meme codage pour un tuto sur OH ? avec les crédits bien sur Codage pour les nuls 1 4159918501


Codage pour les nuls 1 PO1ALLN
Anciennement Rym


Codage pour les nuls 1 NpvzW01

« Tu es semblable à une étoile, on te voit quelques instants mais ta beauté est si intense qu'on s'en souvient toute notre existence »

Codage pour les nuls 1 QDmXvn4Codage pour les nuls 1 1467230065-stamp-template-by-kenchoCodage pour les nuls 1 XBnjO09

Je suis une étoile filante, perdue dans l'océan, je répands amour et chaleur. Je suis l'étoile de Ocean Home.

Spoiler:
 
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyDim 28 Aoû - 20:39

on fait comment pour que celle-ci se redimensionne automatiquement ? :
Code:
<img src="URL"width="LARGEUR EN PX">

c'est ou qu'on doit introduire les balises pour les images ? (entre le background et le code pour le texte ?)
J'ai pas bien compris ta question XD Tu veux mettre une image en background ?

Et oui tu peux utiliser ce codage avec crédit ! Codage pour les nuls 1 4159918501



Codage pour les nuls 1 29VnchE
Merci Nolwenn ♥
Codage pour les nuls 1 Hl03vzZ
Revenir en haut Aller en bas
Myria
Léviathan des Nymphes
Léviathan des Nymphes
Myria
Messages : 4601
Date d'inscription : 04/06/2016
Age : 19

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyDim 28 Aoû - 20:43

Non x') le fond reste le meme mais y aura genre des images à l'intérieur (un peu comme les créas dans les galeries)

Super merci ! :)


Codage pour les nuls 1 PO1ALLN
Anciennement Rym


Codage pour les nuls 1 NpvzW01

« Tu es semblable à une étoile, on te voit quelques instants mais ta beauté est si intense qu'on s'en souvient toute notre existence »

Codage pour les nuls 1 QDmXvn4Codage pour les nuls 1 1467230065-stamp-template-by-kenchoCodage pour les nuls 1 XBnjO09

Je suis une étoile filante, perdue dans l'océan, je répands amour et chaleur. Je suis l'étoile de Ocean Home.

Spoiler:
 
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyDim 28 Aoû - 20:46

Ah alors c'est :
Code:
<div style="CSS"><img src="URL">
TEXTE TEXTE TEXTE <div>
:dino8:



Codage pour les nuls 1 29VnchE
Merci Nolwenn ♥
Codage pour les nuls 1 Hl03vzZ
Revenir en haut Aller en bas
Myria
Léviathan des Nymphes
Léviathan des Nymphes
Myria
Messages : 4601
Date d'inscription : 04/06/2016
Age : 19

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyDim 28 Aoû - 21:03

Par exemple je veux placer ceci https://2img.net/image.noelshack.com/fichiers/2016/34/1472410956-beautiful.png tu le mettrais ou ?  :dino8:

Code:
<center>
<div style="background-image:url('http://image.noelshack.com/fichiers/2016/34/1472410706-code.png');width:540px; height:650px;">

<div style=" height:640px; width:520px; padding:20px;overflow:auto;">

TEXTE TEXTE TEXTE
</div></div></center>

Vazi je suis trop contente de mon fond Codage pour les nuls 1 610716569


Codage pour les nuls 1 PO1ALLN
Anciennement Rym


Codage pour les nuls 1 NpvzW01

« Tu es semblable à une étoile, on te voit quelques instants mais ta beauté est si intense qu'on s'en souvient toute notre existence »

Codage pour les nuls 1 QDmXvn4Codage pour les nuls 1 1467230065-stamp-template-by-kenchoCodage pour les nuls 1 XBnjO09

Je suis une étoile filante, perdue dans l'océan, je répands amour et chaleur. Je suis l'étoile de Ocean Home.

Spoiler:
 
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyDim 28 Aoû - 21:08








TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE


Voilà pour l'image et pour la case du texte faur revoir les dimensions, n'oublie pas de toujours tester ta case en mettant de longs textes ! :D (je te laisse faire, tu pourras tester ! Wink )
Code:
<center>
<div style="background-image:url('http://image.noelshack.com/fichiers/2016/34/1472410706-code.png');width:540px; height:650px;">




<img src="http://image.noelshack.com/fichiers/2016/34/1472410956-beautiful.png"width="400px">
<div style=" height:240px; width:520px; padding:20px;overflow:auto;">TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE
</div></div></center>



Codage pour les nuls 1 29VnchE
Merci Nolwenn ♥
Codage pour les nuls 1 Hl03vzZ
Revenir en haut Aller en bas
Myria
Léviathan des Nymphes
Léviathan des Nymphes
Myria
Messages : 4601
Date d'inscription : 04/06/2016
Age : 19

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyDim 28 Aoû - 21:19

Yaaay  :bavecoeur:
Et si en plein milieu des balises textes j'ai envie de mettre des images je n'aurais qu'à mettre ça ?
Code:
<img src="LIEN IMAGE"
Aussi est-ce-que la distance entre la balise du fond et celle de l'image a une signification ou pas  ? J'ai tellement l'habitude des codes, si tu oublies un espace ça part en cacahuète  Codage pour les nuls 1 463793218


Code:
<center>
<div style="background-image:url('http://image.noelshack.com/fichiers/2016/34/1472410706-code.png');width:540px; height:650px;">




<img src="http://image.noelshack.com/fichiers/2016/34/1472410956-beautiful.png"width="350px">
<div style=" height:200px; width:400px; padding:25px;overflow:auto;">TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE
</div></div></center>


Codage pour les nuls 1 PO1ALLN
Anciennement Rym


Codage pour les nuls 1 NpvzW01

« Tu es semblable à une étoile, on te voit quelques instants mais ta beauté est si intense qu'on s'en souvient toute notre existence »

Codage pour les nuls 1 QDmXvn4Codage pour les nuls 1 1467230065-stamp-template-by-kenchoCodage pour les nuls 1 XBnjO09

Je suis une étoile filante, perdue dans l'océan, je répands amour et chaleur. Je suis l'étoile de Ocean Home.

Spoiler:
 
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyDim 28 Aoû - 21:29

Oui c'est ça ! Et tu devras surement la redimenssionner !







In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

Hac ex causa conlaticia stipe Valerius humatur ille Publicola et subsidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patris.

Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum.


Code:
<center>
<div style="background-image:url('http://image.noelshack.com/fichiers/2016/34/1472410706-code.png');width:540px; height:650px;">




<img src="http://image.noelshack.com/fichiers/2016/34/1472410956-beautiful.png"width="350px">
<div style=" height:200px; width:400px; padding:25px;overflow:auto;">In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

Hac ex causa conlaticia stipe Valerius humatur ille Publicola et subsidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patris.
<img src="http://image.noelshack.com/fichiers/2016/23/1465289027-banniere-cadre.png"width="300px">
Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum.
</div></div></center>


Et oui ça a une signification sur le forum XD



Codage pour les nuls 1 29VnchE
Merci Nolwenn ♥
Codage pour les nuls 1 Hl03vzZ
Revenir en haut Aller en bas
Myria
Léviathan des Nymphes
Léviathan des Nymphes
Myria
Messages : 4601
Date d'inscription : 04/06/2016
Age : 19

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyDim 28 Aoû - 21:32

Ohhh super merci pour ton aide ! Le fait de voir tout vos beaux codages me donne envie de commencer petits à petits :dino4:


Codage pour les nuls 1 PO1ALLN
Anciennement Rym


Codage pour les nuls 1 NpvzW01

« Tu es semblable à une étoile, on te voit quelques instants mais ta beauté est si intense qu'on s'en souvient toute notre existence »

Codage pour les nuls 1 QDmXvn4Codage pour les nuls 1 1467230065-stamp-template-by-kenchoCodage pour les nuls 1 XBnjO09

Je suis une étoile filante, perdue dans l'océan, je répands amour et chaleur. Je suis l'étoile de Ocean Home.

Spoiler:
 
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyDim 28 Aoû - 21:35

Hihi pas de soucis ! COmme tu sais trop bien grapher, tu vas nous faire de trop beau codage j'en suis sure !



Codage pour les nuls 1 29VnchE
Merci Nolwenn ♥
Codage pour les nuls 1 Hl03vzZ
Revenir en haut Aller en bas
Myria
Léviathan des Nymphes
Léviathan des Nymphes
Myria
Messages : 4601
Date d'inscription : 04/06/2016
Age : 19

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyLun 29 Aoû - 2:11

J'arrive pas à trouver l'erreur dans le code, les images ne s'affichent pas D:

Code:
<center>
<div style="background-image:url('http://image.noelshack.com/fichiers/2016/34/1472410706-code.png');width:540px; height:650px;">




<img src="http://image.noelshack.com/fichiers/2016/34/1472410956-beautiful.png"width="350px">
<div style=" height:200px; width:400px; padding:25px;overflow:auto;"> Voici les ressources à utiliser !
[url=http://image.noelshack.com/fichiers/2016/34/1472413064-1451416920-elegant-render-by-blackrose2336-d7zqnfn.png]render[/url]
[url=http://image.noelshack.com/fichiers/2016/34/1472412337-1451575417-flower-13-by-junsoulsilver.png]fleur 1[/url]
[url=http://image.noelshack.com/fichiers/2016/34/1472412983-hl5m.png]fleur 2[/url]
[url=http://image.noelshack.com/fichiers/2016/34/1472412322-wkxv.png]papillon[/url]
[url=http://image.noelshack.com/fichiers/2016/34/1472413515-1459332952-paper.png]papier[/url]
[url=http://image.noelshack.com/fichiers/2016/34/1472412390-208594391664fesdemer30.png]bulles[/url]

LE FOND
Alors pour commencer appliques un dégradé radial du blanc au rose (ea817c) de sorte à avoir quelque chose de similaire à ceci
<img src="http://image.noelshack.com/fichiers/2016/34/1472414163-beautiful.png
"width="300px">

Après tu vas venir prendre ton render et le mettre sur le coté gauche de la créa en le décalant légèrement avec le raccourci alt+cmd+T. Après tu prends ce meme render, tu le mets en dessous du calque du premier en diminuant de sa taille et en faisant une symétrie axe horizontal (edition - transformation - symétrie axe horizontal) tu devrais avoir quelque chose de ce genre :
<img src="http://www.noelshack.com/2016-35-1472427204-1.png"width="300px">

L’ETAPE QUI SUIT N’EST PAS À SUIVRE À LA LETTRE, FAIT AU FEELING ;)
Maintenant on va passer aux éléments de ton fond, rien de bien compliqué. Tu va venir prendre ta fleur nX et la placer vers la gauche en ne laissant dépasser que les roses (faire des rotations si besoin) Apres ça tu prends ton png feuille et tu le places vers le coté droit à coté du petit render et un autre à coté du plus grand render. Ensuite tu prends ton png fleur nX et tu le place aussi derrière le plus grand render vers le bas. Tu reprends le meme png et tu en place cette fois ci derrière les deux renders au milieu. Ensuite tu fais un peu comme plus haut en passant les fleurs devant et derrière tes renders pour les incruster. A la fin tu devrais avoir quelque chose dans le genre :
<img src="http://image.noelshack.com/fichiers/2016/35/1472425287-2.png
"width="300px">

Maintenant  prend ton png bulle et tu le redimensionnes et tu fais quelque chose dans ce style, quand tu utilises une bulle gomme le reste puis crée un nouveau calque pour mettre la bulle suivante et ainsi de suite,… en jouant sur la taille pour tromper l’oeil.

</div></div></center>


Codage pour les nuls 1 PO1ALLN
Anciennement Rym


Codage pour les nuls 1 NpvzW01

« Tu es semblable à une étoile, on te voit quelques instants mais ta beauté est si intense qu'on s'en souvient toute notre existence »

Codage pour les nuls 1 QDmXvn4Codage pour les nuls 1 1467230065-stamp-template-by-kenchoCodage pour les nuls 1 XBnjO09

Je suis une étoile filante, perdue dans l'océan, je répands amour et chaleur. Je suis l'étoile de Ocean Home.

Spoiler:
 
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyLun 29 Aoû - 8:04








Voici les ressources à utiliser !
render
fleur 1
fleur 2
papillon
papier
bulles

LE FOND
Alors pour commencer appliques un dégradé radial du blanc au rose (ea817c) de sorte à avoir quelque chose de similaire à ceci


Après tu vas venir prendre ton render et le mettre sur le coté gauche de la créa en le décalant légèrement avec le raccourci alt+cmd+T. Après tu prends ce meme render, tu le mets en dessous du calque du premier en diminuant de sa taille et en faisant une symétrie axe horizontal (edition - transformation - symétrie axe horizontal) tu devrais avoir quelque chose de ce genre :


L’ETAPE QUI SUIT N’EST PAS À SUIVRE À LA LETTRE, FAIT AU FEELING Wink
Maintenant on va passer aux éléments de ton fond, rien de bien compliqué. Tu va venir prendre ta fleur nX et la placer vers la gauche en ne laissant dépasser que les roses (faire des rotations si besoin) Apres ça tu prends ton png feuille et tu le places vers le coté droit à coté du petit render et un autre à coté du plus grand render. Ensuite tu prends ton png fleur nX et tu le place aussi derrière le plus grand render vers le bas. Tu reprends le meme png et tu en place cette fois ci derrière les deux renders au milieu. Ensuite tu fais un peu comme plus haut en passant les fleurs devant et derrière tes renders pour les incruster. A la fin tu devrais avoir quelque chose dans le genre :


Maintenant  prend ton png bulle et tu le redimensionnes et tu fais quelque chose dans ce style, quand tu utilises une bulle gomme le reste puis crée un nouveau calque pour mettre la bulle suivante et ainsi de suite,… en jouant sur la taille pour tromper l’oeil.



Tu as mis un espace en trop après le lien de l'image, et pour la deuxième image, tu t'es trompée de lien, c'est ce lien qu'il faut mettre : https://2img.net/image.noelshack.com/fichiers/2016/35/1472427204-1.png
(tu avais mis : http://www.noelshack.com/2016-35-1472427204-1.png )
:kao3:



Codage pour les nuls 1 29VnchE
Merci Nolwenn ♥
Codage pour les nuls 1 Hl03vzZ
Revenir en haut Aller en bas
Myria
Léviathan des Nymphes
Léviathan des Nymphes
Myria
Messages : 4601
Date d'inscription : 04/06/2016
Age : 19

Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 EmptyLun 29 Aoû - 11:20

Ahh merci beaucoup :kao8:


Codage pour les nuls 1 PO1ALLN
Anciennement Rym


Codage pour les nuls 1 NpvzW01

« Tu es semblable à une étoile, on te voit quelques instants mais ta beauté est si intense qu'on s'en souvient toute notre existence »

Codage pour les nuls 1 QDmXvn4Codage pour les nuls 1 1467230065-stamp-template-by-kenchoCodage pour les nuls 1 XBnjO09

Je suis une étoile filante, perdue dans l'océan, je répands amour et chaleur. Je suis l'étoile de Ocean Home.

Spoiler:
 
Revenir en haut Aller en bas
Contenu sponsorisé



Codage pour les nuls 1 Empty
Message Sujet: Re: Codage pour les nuls 1   Codage pour les nuls 1 Empty

Revenir en haut Aller en bas
 
Codage pour les nuls 1
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Ocean Home :: Our Homes :: Vos talents artistiques :: Codage :: Tutoriaux-