Index
INFORMATION
Règlements
Présentations
Recrutements
Partenariats
COMMANDES
Bannières et avatars
Tenues RR
Parchemins et autres
GRAPHISME
Galeries
Tutoriels
Ressources
Evaluations
Coup de coeur
cadeaux
Tutoriel de Codage xhtml de base 62194810
FolyPlayArt Addict
Merci de venir lire le règlement et faire votre présentation afin d'avoir accès au reste du forum.
Sans cela, votre compte sera supprimé après deux semaines.
Merci de votre compréhension et bonne visite.
FolyPlayArt Addict
Merci de venir lire le règlement et faire votre présentation afin d'avoir accès au reste du forum.
Sans cela, votre compte sera supprimé après deux semaines.
Merci de votre compréhension et bonne visite.


Forum de partage, de détente mais surtout de Fun !
Le Deal du moment : -24%
PC Portable Gaming 15.6″ Medion Erazer Deputy ...
Voir le deal
759.99 €

Partagez
 

 Tutoriel de Codage xhtml de base

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Joshua023
Inscris le : 16/01/2015
Messages : 230



Joshua023
Fleur épanouie



Tutoriel de Codage xhtml de base Empty
MessageSujet: Tutoriel de Codage xhtml de base   Tutoriel de Codage xhtml de base EmptySam 24 Jan - 16:57


Codage Minato


Bonjour ou Bonsoir et Bienvenue dans ce petit tutoriel où je vais vous montrer, avec l'aide de Minato, comment créer un petit code simple. Le code que nous allons créer aujourd'hui est un contenu de rp, ce qui veut dire que ce code met en valeur votre texte lorsque vous faites du RPG. Vous êtes prêt ? Allons-y !

Niveau: Débutant
Temps: Cela dépend de chaque personne
Techniques utilisées: Les balises span et div, (x)html et css
Ce tutoriel a été créé par Joshua023 pour les membres de Folygraph!
Toute copie partielle ou complète de ce tuto est interdite!

Un petit aperçu [Vous devez être inscrit et connecté pour voir ce lien]


Le Tutoriel

Ce qu'il ne faut JAMAIS oublier


Il y a certaines choses qu'il ne faut jamais oublier lorsque l'on fait un code. Veuillez à bien re-vérifier votre code à chaque fois pour être sûr de repérer toutes les erreurs.

De 1, vous devez toujours fermer vos balises. Donc un < div > doit obligatoirement avoir un < / div >, un < span > avec un < / span >, etc. Toutes les balises doivent être fermées.

De 2, lorsque vous passez des propriétés css dans votre div ou votre span, n'oubliez jamais que votre css doit commencer par le css en question avec deux points.
Il faut également un espace entre les deux points. Finalement, pour séparer chaque css, vous devez avoir un point virgule à la fin. Un petit exemple: background-color: black;.

De 3, si votre propriété css possède plusieurs mots, exemple: background-color, n'oubliez jamais que les deux mots doivent être reliés par un trait d'union. Si vous avez 10 mots, ils doivent tous être reliés par un trait d'union.

De 4, prenez l'habitude d'écrire votre code en lettre minuscule. Vous pouvez écrire le titre de votre police d'écriture avec des lettres majuscules, mais c'est la grosse exception.

ÉTAPE 1
Le premier fond(boîte) !


Nous allons commencer par faire une première boîte.  La "boîte" signfie le premier plan du code, le premier fond. Donc Étape 1 :

Commençons par le début et parlons de la balise div style. Cette dernière permet de regrouper plusieurs autres balises ensemble et même de regrouper des propriétés css.
Elle est souvent utilisée en (x)html. Nous allons donc la remplir de css pour donner un premier aperçu du premier fond.

Code:
<center><div style="overflow: fixe; width: 500px; background-color: #D2D2D2; border-style: solid solid solid solid; border-width: 5px; border-color: #BDBDBD;  box-shadow: 0px 0px 5px black;"></div>

Ne vous affolez pas et ne vous dirigez pas vers la sortie, je vais vous expliquer en détail ce qui vient de se passer. Nous allons commencer par le css overflow: fixe;.
Ce petit bout de css a une utilité toute simple, c'est lui qui détermine si votre boîte aura une barre de défilement ou non.
La valeur fixe est normalement utilisée pour faire en sorte que la barre de défilement n'apparaisse pas.
Nous utilisons également la valeur auto pour ce css. La valeur auto, quant à elle, indique que la barre de défilement sera placée par défaut en conséquence de votre height (hauteur en français).
Alors pourquoi je n'ai pas placé de hauteur? Tout simplement parce que nous sommes sur le premier fond.
Il est inutile de rajouter une hauteur au premier fond, car celui-ci se réglera en fonction de ce qui se trouve à l'intérieur.
Normalement, on rajoute auto lorsque nous avons une zone de texte, une zone d'image, etc.
Ici, le premier div regroupe tous les autres div et span qui vont suivre, c'est donc inutile de placer ici une barre de défilement, et donc une hauteur également. Voilà un petit exemple.

Voilà un petit exemple de la valeur fixe. Comme vous pouvez le voir,
la largeur de la boîte n'est que de 200px. Elle ne possède pas non plus de height, donc tant que je continue à écrire, la boîte va continuer de s'élargir encore et encore.


Voilà un petit exemple de la valeur auto.
Dans le cas présent, mon code possède encore 200px de largeur, mais possède également une valeur de 100px en hauteur.
Avec la valeur overflow: auto;, cela veut dire que lorsque mon texte aura dépassé une hauteur de 100px, la barre de défilement s'affichera automatiquement.
Donc je vais continuer à écrire tout et n'importe quoi pour que la barre de défilement puisse vraiment s'afficher et qu'il y ait du texte pour rien.


Voilà, vous comprenez pourquoi il faut ajouter une valeur height à votre code si vous placez la valeur auto à votre overflow?
C'est tout simple, uniquement parce que la valeur auto va s'activer seulement lorsqu'elle aura atteint la hauteur que vous avez défini.
Si vous ne placez pas de hauteur, la boîte va continuer de s'élargir comme dans le premier exemple et la barre de défilement ne s'affichera jamais.
Placer une height permet de donner une limite à la boîte et d'afficher la barre de défilement.

Le css width indique la largeur du code, comme vous pouvez le voir, j'ai placé la valeur width: 500px;, ce qui veut dire que le code aura obligatoirement 500 pixels de largeur.
Si par hasard, vous placez plus tard un code avec une largeur plus grande, elle va traverser la bordure. Si vous avez, à l'inverse, un texte, il va se placer dans la ligne en-dessous.
Il y beaucoup de gens qui utilisent cela à leur avantage car cela donne des effets pas mal lorsqu'un bout de code sort en dehors du fond de base, mais cela est d'un tout autre niveau.

La valeur background-color, je crois que beaucoup de gens la connaissent. Background-color signifie Couleur de fond en français.
Elle est suivie normalement d'une couleur primaire écrite en lettre et en anglais (black, blue, white, yellow, green, red, etc), ou bien d'une dièse et de 6 chiffres et lettres. Cela indique la couleur que vous voulez pour le fond.
Il faut l'avouer, il y a des millions de couleurs et de teintes différentes. Ce petit #D2D2D2 permet au code d'identifier la couleur en question.

Nous allons maintenant passer à la bordure. Cette valeur border-style: solid solid solid solid; indique en quelque sorte quelle forme va prendre la bordure.
Il y en a plusieurs types, mais les plus souvent utilisés sont solid qui est une ligne droite et dashed qui est une ligne contenant des coupures. Comme un exemple est plus démonstratif qu'un texte, voilà un exemple.



Solid

Dashed


C'est bien plus clair comme ça je trouve. Vous pouvez aussi mettre des bordures à certains endroits et à d'autres non.
Il vous suffit de placer none comme valeur, ce qui veut dire que la bordure n'existera pas. Un petit exemple, la bordure à gauche et à droite ne seront pas là:

Il y a une valeur solid none solid none


Oui mais Joshua, pourquoi est-ce qu'il y a quatre solid, un serait suffisant non? Et bien non, chaque solid représente un côté de la bordure.
Dans l'ordre, le premier solid représente le haut, le deuxième la droite, le troisième le bas et le dernier la gauche.
Par exemple, pour reproduire le petit rectangle aux côtés gauche et droit sans bordure, je devrais entrer cette valeur border-style: solid none solid none;.
À l'inverse, si je ne veux pas de bordures en haut et en bas, border-syle: none solid none solid;. Vous pouvez tester plein de combinaisons de cette manière en utilisant dashed et solid ensemble par-exemple.

Passons maintenant à une autre valeur. Que dites-vous de border-width: 5px; ? Il est très simple de deviner ce que cette petite propriété veut dire.
Border pour la bordure et width pour la largeur. En effet, cette valeur indique la largeur qu'aura votre bordure. Vous devez l'indiquer en pixel.



5px

10px


Maintenant, voilà cette valeur border-color: #BDBDBD;. Qui peut me dire ce qu'elle veut dire? La couleur de la bordure ? Et c'est une EXCELLENTE RÉPONSE !
Cette petite valeur, comme le background-color, indique de quel couleur sera votre bordure en fonction de la valeur que vous placerez à l'intérieur.

Dernière étape de l'étape 1 ^^. Voilà une autre propriété: box-shadow: 0px 0px 5px black;. Cette propriété à la fabuleuse compétence de faire apparaître un ombrage selon votre désir autour ou à l'intérieur de la boîte.
Mais pourquoi il y a 3 valeurs alors ? Tout simplement parce que celles-ci permettent de donner un effet différent selon la valeur que vous placez.
Également, ce css ne possède pas de propriété pour définir sa couleur, tout simplement parce que la couleur se trouve dans la même propriété.
Il vous suffit de séparer la dernière valeur en pixel par un espace et d'y ajouter la couleur choisie. Comme un exemple est toujours mieux qu'un long texte, voilà trois petits carrés ombragés.



5px 0px 0px

0px 5px 0px

0px 0px 5px


Vous voyez la différence? La première et la deuxième valeur rajoutent en quelque sorte un surplus de taille à la bordure tandis que la dernière valeur, la plus utilisée, rajoute une ombre tout autour de la boîte.

Résumons donc l'étape 1. Notre fond sera fixe, il n'aura donc pas de barre de défilement.
Également, la largeur totale du code sera de 500 pixels, sa couleur de fond sera gris, il aura des bordures solides de 5 pixels de largeur de couleur grise et il aura une ombre noire de 5 pixels.
Voilà donc qui conclu notre première boîte. Nous allons maintenant passer à l'image, le titre et le sous-titre.

ÉTAPE 2
La Bannière, le Titre et le Sous-Titre !


Bienvenue à cette deuxième étape de comment faire un petit code de contenu de rp simple à la sauce Minato. Voilà le code. Comme à l'habitude, ne prenez pas peur, c'est plus simple qu'il n'y parait.

Code:
<img src="http://37.media.tumblr.com/tumblr_lz6x3mD8n31qdku5lo1_500.gif"/><div style="border-bottom-width: 3px; border-bottom-style: solid; border-color: #BDBDBD;"></div><div style="font-family: Ninja Naruto; font-size: 30px; text-transform: uppercase; margin-top: -10px; position: relative; color: #A52121; text-shadow: 2px 2px 2px black;">Titre du RP</div>
<span style="font-family: champignon; font-size: 25px; color: #A52121; text-align: center;">Sous-Titre</span>

Commençons par le début. Je crois que tout le monde connait la balise img. Bien sûr, si vous êtes graphiste, vous utilisez souvent cette balise et c'est normal.
Cette balise indique qu'une image doit être placée à cet endroit. Ensuite vient le lien et ploup, l'image est là. Joshua, j'ai cru voir un / à la fin, qu'est-ce qu'il fout là ?
Bonne question! En fait, c'est très simple. Il ne faut jamais oublier qu'il faut toujours fermer ces balises, toujours. Ici dans le cas présent, toute l'information se trouve en un seul endroit.
Donc pour pouvoir bien fermer la balise, nous ajoutons un / après l'apostrophe pour fermer la balise. C'est simple, c'est efficace et très utile.

Maintenant, passons à border-bottom-width, border-bottom-style et border-color. Ces propriétés, vous vous en doutez sûrement, sont des valeurs de bordures. Pourquoi les propriétés sont-elles différentes de tout à l'heure?
Eh bien c'est tout simple. Nous voulons simplement ajouter une bordure en-dessous de l'image, mais pas ailleurs, c'est pourquoi nous avons ajouter bottom dans le milieu. Cela permet d'ajouter seulement une bordure en bas.
Vous pouvez en faire de même avec top, left et right. Vous pouvez donc par la suite ajouter une taille, une couleur et une forme à la bordure du bas.

Nous allons maintenant passer à la div du texte. Mais Joshua, pourquoi ne pas avoir utilisé un span style, une balise faite pour le texte? Vous allez vite comprendre pourquoi. Commençons par font-family.
Cette petite propriété permet de changer la police d'écriture du texte que vous allez écrire plus tard. Dans mon cas, Minato a besoin de sa police d'écriture Ninja Naruto. Maintenant, passons à font-size.
Comme vous l'aurez deviné, celle-ci permet de changer la taille du texte. Nous allons continuer avec text-transform. Cette propriété permet de changer le format du texte.
Ici, c'est uppercase, ce qui veut dire que le texte sera automatiquement en majuscule. Par exemple, lowercase permet de changer le texte tout en minuscule, même si vous avez écrit votre texte en majuscule.

Passons maintenant à margin-top. Margin est une propriété qui permet de changer l'endroit où se trouve le texte en question.
C'est pour cette raison que nous avons utilisé div au lieu de span, puisque avec span, nous ne pouvons pas utiliser Margin. Nous avons passé la valeur à -10px pour faire en sorte que le texte soit placé plus en haut sur l'image.
La propriété position est souvent placée avec la propriété margin, ce qui permet de mieux utiliser la balise margin pour le positionnement. Maintenant, passons à color.
Pour le texte, nous avons mis font aux autres propriétés, mais la couleur du texte est la seule à ne pas prendre de font, il vous suffit simplement d'écrire color avec le code de couleur.
Text-shadow permet de rajouter un ombrage au texte en question. Comme pour box-shadow, elle possède trois valeurs ainsi qu'une couleur. Ici nous avons placé 2px 2px 2px de couleur noir.
Voilà, il ne vous reste plus qu'à écrire votre texte.
En ce qui concerne le sous-titre, la seule chose qui diffère est l'utilisation d'une balise span au lieu de div.
En temps normal, c'est la balise idéale pour le texte mais dans le  cas présent, nous n'utilisons pas de margin.
Également, pour le text-align, c'est le positionnement du texte en question. Nous avons placé center pour faire en sorte que le sous-titre soit centré.

Résumons maintenant l'étape 2. Il y aura une image animé qui sera collé à la bordure du haut.
Également, l'image aura une bordure en-dessous, la séparant du reste du code. Le texte sera de police d'écriture Ninja Naruto, de couleur rouge avec un ombrage et d'une taille de 30 pixels.
Le texte sera un peu au-dessus de l'image et il sera centré. Le sous-titre sera également rouge, centré, avec une taille de 25pixels et la police d'écriture champignon. Pas mal pour un début.

ÉTAPE 3
La Zone de Texte !


Courage, nous avons presque fini. Il s'agit de l'avant dernière étape. Il nous reste celle-ci puis l'étape 4 et nous aurons terminé un code. Voici la suite :

Code:
<div style="overflow: fixe; width: 480px; height: auto; background-color: #F6F6F6; border-style: solid; border-width: 2px; border-color: #707070; padding-left: 2px; box-shadow: 0px 0px 5px black; border-radius: 10px 10px 10px 10px; font-family: calibri; font-size: 12px; color: #205F7A; text-align: justify;"><div style="padding: 20px;">

Vous connaissez l'overflow, le width, mais pas le height. Avec la valeur auto, cela veut dire que la hauteur de la boîte dépendra toujours de ce qu'il y a dans votre boîte.
Donc si vous avez un texte de 1 000 mots, la boîte sera plus petite que si vous avez un texte de 10 000 mots. Vous connaissez plusieurs des propriétés, mais pas padding-left.
Padding-left a la même propriété que margin, sauf que le changement se fait à l'extérieur de la boîte. Padding-left permet donc de pousser un peu sur la gauche la boîte, pour bien la centrer.
Passons maintenant à border-radius. Quoi, encore un border ?
Eh oui, la fonction radius a une utilité qui permet à vos boîtes de ne pas être simplement carrées. Effectivement, radius permet de faire en sorte que votre boîte prenne une forme plus ronde.
Comme vous pouvez le voir dans le rendu en haut, la boîte est ronde sur les bords. C'est tout à fait normal, en fait, nous avons posé 10px 10px 10px 10px comme valeur, un pour chaque coin de la boîte. Voici un petit exemple:


10px 0px 0px 0px
0px 10px 0px 0px
0px 0px 10px 0px
0px 0px 0px 10px

Vous voyez la différence ? Pour chacune des quatre valeurs, vous pouvez changer en pixel la forme de cercle que prendra le bord.
La première valeur est en haut à gauche, la deuxième en haut à droite, la troisième en bas à droite et la dernière en bas à gauche. Et pour la dernière étape, padding: 20px;, vous vous demandez à quoi cela peut bien servir, pas vrai?
Eh bien c'est très simple, cela permet de faire en sorte que le texte soit éloigné de la bordure du haut, bas, gauche et droite.
Habituellement, sans cette petite propriété, le texte prend toute la place et se colle sur la bordure. Souvent, cela n'est pas très joli et même parfois pas très pratique.
C'est là que cette propriété entre en jeu, car elle permet de decoller le texte, un peu comme ce tutoriel. Le texte n'est pas collé sur la bordure.

Résumons ce que nous venons de faire dans l'étape 3. Nous avons créé une boîte avec un ombrage et des coins ronds.
Le texte ne sera pas caché par un menu déroulant car nous avons fait en sorte que le texte soit montré entièrement.
Également, la hauteur de la boîte suivra celle du texte. Nous avons choisi une police d'écriture et fait en sorte que le texte soit bleu. Puis, nous avons aligné le texte pour qu'il soit en justify.
Finalement, nous avons fait en sorte que le texte ne touche pas à la bordure.

ÉTAPE 4
Les Crédits et la Fermeture des Balises !


Vous pouvez souffler maintenant, nous sommes rendu à la dernière étape ^^. Voici donc la dernière partie du code:

Code:
<span style="font family: calibri; font-size: 9px; color: black; text-align: center;">Code créer par Joshua023 sur <a href="http://folygraph.monempire.net/"><font color=" black">Folygraph</font><a/></span>

Ici, seules deux choses ont été ajoutés. Le premier, c'est la balises a. Cette balise a une utilité que beaucoup de gens utilisent. Elle permet de placer un lien dans un mot.
Comme dans le cas présent, lorsque nous cliquons sur Folygraph, nous sommes redirigé vers le site de Folygraph. C'est la même chose pour le rendu en haut où "ici" permet d'être redirigé sur mon forum test.
Également, nous avons une balise font color. Celle-ci permet de changer la couleur du lien.
Ensuite, pour tester si le code fonctionne bien, il vous suffit de rajouter un texte qui n'a aucun sens pour voir si rien ne déborde ou autre.
Si vous avez bien suivi le tutoriel, vous devriez avoir un code qui ressemble à cela.

Code:
<center><div style="overflow: fixe; width: 500px; background-color: #D2D2D2;  margin: auto; border-width: 5px; border-color: #BDBDBD; border-style: solid solid solid solid; box-shadow: 0px 0px 5px black;"><img src="http://37.media.tumblr.com/tumblr_lz6x3mD8n31qdku5lo1_500.gif"><div style="border-bottom-width: 3px; border-bottom-style: solid; border-color: #BDBDBD;"></div><div style="font-family: Ninja Naruto; font-size: 30px; text-transform: uppercase; margin-top: -10px; position: relative; color: #A52121; text-shadow: 2px 2px 2px black;">Titre du RP</div>
<span style="font-family: champignon; font-size: 25px; color: #A52121; text-align: center;">Sous-Titre</span>

<div style="overflow: fixe; width: 480px; height: auto; background-color: #F6F6F6; border-style: solid; border-width: 2px; border-color: #707070; padding-left: 2px; box-shadow: 0px 0px 5px black; border-radius: 10px 10px 10px 10px; font family: calibri; font-size: 12px; color: #205F7A; text-align: justify;"><div style="padding: 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo dolor, ullamcorper quis ultricies sit amet, dictum adipiscing orci. Fusce scelerisque diam lorem, in rutrum est dignissim non. Suspendisse malesuada augue eget lacus malesuada, at viverra neque consectetur. Aliquam at facilisis sapien, vitae pulvinar mi. Nunc purus neque, semper scelerisque faucibus a, malesuada non risus. Proin tincidunt sem tortor, sed ultrices magna malesuada sed. Maecenas nec enim nec nulla posuere accumsan. Nam vel odio et metus feugiat tempus. Nulla eget tortor leo.

Sed ullamcorper id lorem id feugiat. Suspendisse felis nulla, facilisis ultrices mauris sed, ullamcorper luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium tellus lacinia condimentum fringilla. Nunc magna nisl, pharetra a posuere eu, fermentum mattis mauris. Vivamus sodales lectus libero, vitae commodo turpis imperdiet quis. Curabitur ante elit, facilisis et auctor et, suscipit ac leo. Suspendisse sed leo sit amet velit volutpat luctus id eget purus. Integer sed vulputate augue. Mauris semper euismod enim quis elementum. Nam mauris ante, viverra vel aliquet in, fermentum eu purus. Ut sagittis mauris eget purus volutpat viverra. Duis auctor feugiat dolor. Pellentesque euismod tincidunt nisi, quis lacinia nulla vehicula quis.</div></div>

<span style="font family: calibri; font-size: 9px; color: black; text-align: center;">Code créer par Joshua023 sur <a href="http://folygraph.monempire.net/"><font color=" black">Folygraph</font><a/></span>
</div></center>

Une autre étape s'incruste dans celle-ci, celle de re-vérifier votre code.
Vous devez vous assurer que chaque balise est bien fermée, que chaque css soit séparé de sa valeur par un deux point et que chaque css soit séparé par un point virgule.
Vous devez vous assurer de trouver toutes ces petites erreurs qui pourraient faire en sorte que votre code ne fonctionne pas. C'est comme lorsque l'on tape un texte.
D'abord on écrit l'histoire puis après on corrige les fautes. Ici c'est la même chose, sauf qu'une faute ici pourrait faire en sorte que votre code ait des incohérences.

Oui, mais Joshua, comment avez vous fait pour savoir quand l'overflow devait être avant widht dans votre balise div ? ou que le border-style devait être avant border-color?
Comment faites vous pour savoir l'ordre dans lequel vous devez placer vos propriétés? Eh bien, vous n'êtes pas obligé de placer cela dans un ordre précis.
Tant que la propriété se trouve dans votre balise div, c'est bon, elle fonctionnera s'il n'y a pas d'erreur.
C'est simplement que le plus souvent, il est plus facile de se repérer dans un code lorsque l'on y va dans le sens de la logique.
Vous pouvez placer votre code pour que ce soit bordélique, mais il est plus difficile après lorsque l'on corrige de s'y retrouver.
Donc le plus simple est de commencer par le overflow, le width et le height, s'il y a un height, ensuite la couleur de fond (background-color), la bordure, les ombrages pour enfin terminer avec tout le texte ou les images.
Mais cela est toujours à votre choix, vous pouvez placer le css comme bon vous semble.

Liste des balises et propriétés !


Balises XHTML
Div -> Permet de regrouper plusieurs propriétés css et balises xhtml. Souvent utilisé en xhtml.
Span -> Utilisé pour regrouper des propriétés css de texte.
Img -> Permet de placer une image dans votre code.
A href -> Permet de rajouter un lien hypertexte.

Propriétés CSS
overflow -> Décide si vous ajouter une barre de défilement ou pas. Fixe pour ne pas en avoir et auto pour qu'elle se place automatiquement en conséquence de votre height.
width -> Définit la largeur de votre code.
height -> Définit la hauteur de votre code.
background-color -> Définit la couleur de fond.
margin -> Définit la position intérieur de l'élément.
border-style -> Définit la forme de la bordure.
border-width -> Définit la taille de la bordure.
border-color -> Définit la couleur de la bordure.
border-radius -> Permet de faire en sorte que votre bordure ne soit pas carré.
box-shadow -> Définit l'ombrage de la boîte.
font-family -> Définit la police d'écriture de votre texte.
font-size -> Définit la taille de votre texte.
text-transform -> Permet de transformer le texte en minuscule, en majuscule ou seulement la première lettre en majuscule.
position -> Définit la position de votre texte. S'allie souvent à margin.
text-shadow -> Définit l'ombrage de votre texte.
text-align -> Définit la position de votre texte, centrer, justifier, left ou right.
color -> Définit la couleur de votre texte.
padding -> Définit la position extérieur de votre boîte.

Si vous avez des questions sur le tutoriel, n'hésitez pas à les poser à la suite de ce tuto et je tenterai de vous répondre le plus clairement possible.



Minato est un ninja plus rapide que l'éclair. Faites attention à vous si vous tenter de voler ce tuto !

Un gros merci à Saki Minora de m'avoir aidé à corriger les incohérences du tutoriel et d'avoir corrigé les fautes!

Code créé par Joshua023 sur [Vous devez être inscrit et connecté pour voir ce lien]

Revenir en haut Aller en bas
Saki Minora
Inscris le : 07/11/2014
Messages : 4232



Saki Minora
VIP  parce que je le vaut bien !



Tutoriel de Codage xhtml de base Empty
MessageSujet: Re: Tutoriel de Codage xhtml de base   Tutoriel de Codage xhtml de base EmptySam 24 Jan - 22:10
Merci du partage! Et c'est gentil ce que tu dis à la fin, pas de soucis!
Revenir en haut Aller en bas
 
Tutoriel de Codage xhtml de base
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Fiche de Tutoriel graphique

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
FolyPlayArt Addict :: Le codage c'est ici ! :: Libre Service :: Astuces forum-