Shop Mobile More Submit  Join Login
Note :
  • Ne sont cités ci-dessous, que les codes valable pour les comptes gratuits (ceci dit, je pourrai toujours compléter par un paragraphe "prenium account", mais dans ce cas, un peu d'aide ne sera pas de refus!).
  • Si vous oubliez de clore le texte par le </>, tout votre texte sera en gras/souligné/barré ect...
  • Vous pouvez combiner les codes entre eux, par exemple, si vous souhaitez que votre texte soit en gras et souligné, il suffit d'encadrer le texte entre :
    <u><b> et</b></u>
  • Mais vous pouvez aussi intensifier/doubler certains effets comme le <small, le <sub>, les listes, et le <sup>.
    Ex: J'en découvre chaque jour!


CODES UTILISABLE POUR LES PAGES PROFIL, JOURNAL, NOTES, COMMENTAIRES, ARTICLES ET  FORUM


- "Bold Text" : Texte en Gras
Encadrez le mot/la phrase que vous souhaitez mettre en gras par <b> [le mot/phrase en question] </b> .
Marche aussi avec <strong> et </strong> .

- "Underlined Text" : Texte souligné
Encadrez par <u> et </u> .

- "Italic Text" : Texte en italique
Encadrez par <i> et </i>. Marche aussi avec <em> & </em> .

- "Subscript Text" : le texte est minuscule, placé légèrement en-dessous des lignes usuelles.
Encadrez par <sub> & </sub> .

- "Supscript Text" : le texte est (toujours) minuscule, placé légèrement au-dessus des lignes usuelles.
Encadrez par <sup> & </sup>.

- "tt" dit télé-typé: Une police de texte différente de celle utilisée par Deviantart.
Encadrez par <tt> & </tt>.

- "BlockQuote" : Pour mettre en valeur une partie du texte, habituellement utilisée pour citer.
Personnellement, je l'utilise aussi pour tenter de "centrer" quelque peu certains textes (même s'il ajoute une barre latérale à gauche).
Encadrez par <blockquote> & </blockquote> .

- Pour créer des paragraphes :
Il suffit d'encadrer par <p> & </p>.

- "Acronym" : vous permez d'ajouter des descriptions en pop-up sur un mot (ou une partie de texte) souligné/un lien.
Encadrez par <acronym title="La description en pop-up que vous voulez mettre"> < a ref="Lien en question">Le lien </a></acronym>

<acronym title="Lisez-la, apprenez-la, Aimez-la."> <a href="faq.deviantart.com">deviantART FAQ</a></acronym>  deviendra: deviantART FAQ.

- "Abbr" pour Abbreviation : a la même fonction que l'acronyme, en affichant la définition complète du terme mis en abbrégé.
Encadrez par <abbr="LaDéfintionDuTerme"> et </abbr>.

<abbr="Patate Royale Avariée">P.R.A.</abbr>

- "Strike Text" : Texte barré
Encadrez par <strike> et </strike> .

- Pour faire un joli lien : <a href="adresseDuLien"> Nom du lien</a> (sans l'espace avant le "a" ni après), ce qui donnera par exemple : DeviantArt.


- Les codes "dl", "dd" et "dt" : permettent de créer une liste de terme dont la description suit, de manière à être clairement mise en avant. Notamment utile pour les personnes mal-voyantes pour que leur traducteur vocal marque le temps nécessaire, qu'ils puissent noter la différence.


<dl> début de la liste de définition, <dt> met en avant le terme à définir, <dd> définition du mot, fonctionnent ensemble. Il s'agit de balise pour créer une liste de définition/description.

Ex:

<dl>
<dt>Deviant-art.com</dt>
<dd>Une communauté artistique en ligne.</dd>
<dt>Chat</dt>
<dd>Animal ayant domestiqué l'homme à son service, ne cessant de s'interposer entre l'écran et l'homme.</dd>
</dl>

Deviant-art.com
Une communauté artistique en ligne.
Chat
Animal ayant domestiqué l'homme à son service, ne cessant de s'interposer entre l'écran et l'homme.




SPÉCIFIQUE AUX ARTICLES ET JOURNAUX

- "Ordered listings" : Listes croissante
Pour générer des listes croissants, vous devez commencez par < ol >  puis clore l'entier de la liste par < /ol > .
Entre ces deux codes, il vous faudra encadrer chaque objet par < li > & < /li > .

Exemple
  1. Objet 1
  2. Objet 2
  3. Objet 3
Soit, en code :
<ol><li> Objet 1</li>
<li> Objet 2</li>
<li> Objet 3</li></ol>


- Un-ordered listing : liste en vrac
Vous devez utiliser <ul> et </ul> pour l'entier de la liste, dont vous encadrerez chaque objet par <li> & </li>.

Exemple
  • Objet 1
  • Objet 2
  • Objet 3
Soit en code :
<ul><li>Objet 1</li>
<li>Objet 2</li>
<li>Objet 3</li></ul>



SPÉCIFIQUE AUX JOURNAUX

- Pour centrer: Commencez par <div align="center"> et clore le texte à centrer par: </div>

- "Small Text" : Texte en petit
Encadrez par <small> et </small>

- Vous pouvez aussi faire référence aux oeuvres de DA directement en mentionnant leur :thumb: (en bas à droite de chaque oeuvre), ou au travers de leur lien (le fav.me.) qui permet non seulement d'écourter les liens à rallonge, mais aussi de conserver la même destination même si l'auteur en modifierait le titre.
Si les :thumb: (les mini icones des oeuvres) sont désormais accessibles aux comptes gratuits, elles restent cependant limitées aux articles de journaux (les comptes premium peuvent s'en servir dans les descriptions des deviations -dans une limite de 5-, et dans les commentaires)!
On peut en mettre jusqu'à 200.


SPÉCIFIQUE AUX ARTICLES

- Une limite pour les textes soumis en deviations, de 65 535 signes (et les codes utilisés, comptent aussi, certains signes de ponctuations peuvent compter comme deux "signes").

- Les "Previews" ou images qui accompagnent un texte : il est suggéré d'utiliser ses propres ressources plutôt que celle d'autrui. Dans le cas contraire, il faut bien spécifier qui en est l'auteur en le créditant (en mentionnant son profil sur DA s'il a un compte) et en lui ayant demandé la permission au préalable.
Si vous ne respectez pas ces conditions, vous ne suivez donc pas le code de la propriété intellectuelle du code pénal; et sachez qu'outre la dimension juridique, les artistes n'apprécient pas qu'on se serve de leurs oeuvres comme si elles n'attendaient que ça.

- Heading Tag : Terme pour En-tête/titres/rubrique/chapitre/intitulé.
A encadrer entre <h2> et </h2>, puis <h3> et </h3> ect, selon le nombre de titres que vous aurez.

- <br> : Pour aller à la ligne (ceci dit, cela se fait automatiquement).

- <hr> : Pour créer une barre de séparation.


SPÉCIFIQUE A LA SHOUT-BOX

Vous pouvez utiliser Bold(texte en gras), Italic (italique), Underline (souligné) et :devpseudo: (pour nommer quelqu'un) dans la shout box. Les liens standards comme www.deviantart.com y marchent aussi. Les autres codes ne fonctionneront pas.


DIVERS

- Pour montrer l'icône (l'avatar) d'un membre, il suffit de faire :iconPseudo:, ce code n'est valable que dans les commentaires et les pages du journal.

- Pour désigner l'un des membres en employant que son nom (tout en conservant le lien vers son profil, le même système que l'icone en somme), il suffit de faire :devPseudo:.

-> A noter: toute "mention" d'un tiers (donc d'une oeuvre, d'un article ou d'un membre de Deviantart) sera signalé au principal concerné!

Les titres de vos "Deviations" ne doivent pas contenir de caractères spéciaux qui ne sont pas reconnu dans le langage HTML. Oubliez les accents, cédilles spécifiques à la langue française, mais aussi certaines ponctuations!
[Édit] : - [du 11/10/2013]: J'ai finalement remplacé ma pirouette des espaces (puisque la balise "code" permettant d'afficher le méta-langage utilité pour la typographie ne fonctionne pas dans les articles), en mettant directement les codes en gras (le texte entre "<>"). Pour vous, ça ne change pas grand chose, pour moi, ça a été un plus gros casse-tête (je vous dis pas la tronche de l'article avec la mise en page et tout ces codes partout). Mais au moins, vous pourrez directement copier/coller les codes à partir de cet article sans avoir à retirer les espaces. J'ai aussi actualisé certaines petites choses, mais il doit sûrement m'en manquer. Deviantart est ultra prolifique au niveau de ses mises à jour... Du coup, c'est assez difficile d'être vraiment à la page. 

- [du 27/01/2010] J'avais déjà fait un précédent tutorat très général concernant l'utilisation de Deviantart. Mais il me parait plus judicieux d'en faire une page spécifique aux codes d'écriture pour aider tout le monde tout en ajoutant ce qu'il pourrait manquer à mon ancien tuto :


Traduit des  FAQ #104: What HTML formatting can we use on deviantART? And what is the format for these codes?, FAQ #63: What sort of things can I use for Preview images? , :faq627:, FAQ #66: What journal features do I have access to? & FAQ #9: What are the limits for Thumbnails and Emoticons?

P.S. : Si vous constatez qu'un de ces codes ne fonctionnent pas/plus, ou qu'un autre utile devrait y être mentionné: n'hésitez pas à commenter!



AUTRES TUTOS FR qui pourraient vous être utiles! Mais aussi des groupes francophones qui vous aideront à mieux comprendre Deviantart et d'autres communautés francophones:

    :icontutofrench: :iconinternationalfaq: :iconbloc-notes: -- :iconkamifrenchcreation: :iconfranceofficiel: :iconfrenchconnexion: :iconfrance-expression: :iconrepaire-de-talents: :icondeviantartistsfr:




Et puis, figurez-vous que sur DA, je ne fais pas QUE DES TUTOS (bah oui!) ;):
 Pencil's Muse Scape by Cidiene Odenwald - The soft Autumn path by Cidiene Origin by Cidiene Fleur Solaire by Cidiene Turquoise by Cidiene Zolnerowich Family by Cidiene
Add a Comment:
 
:iconkibaura:
Kibaura Featured By Owner Jun 24, 2015  Hobbyist Writer
Un tuto très utile ! Merci :)
Reply
:iconapolline555:
apolline555 Featured By Owner Edited Apr 9, 2015  Student Traditional Artist
merci pour les commandes ^^
Reply
:iconyosonoaijin:
YosoNoAijin Featured By Owner Nov 24, 2014
Hey ! :3
J'aurai juste une petite question, dans nos profil, comment pouvons nous faire pour mettre le texte centré ? Merci d'avance. x3
Reply
:iconlatchdrom:
LatchDrom Featured By Owner Edited Sep 13, 2014  Hobbyist Photographer
Super, merci pour le tuto! Je m'étais toujours demandé comment certains deviants arrivaient à mettre une icône en citant un autre deviant, maintenant c'est fait grâce à toi :iconcidiene:
Merci!
Reply
:iconaya-redfield:
Aya-Redfield Featured By Owner Sep 8, 2014
Merciii Meiko Honma 'Menma' (Anohana) Emote - Happy 
Reply
:iconcidiene:
Cidiene Featured By Owner Sep 9, 2014  Student General Artist
At your service, Aya! ^^
Reply
:iconeru-4:
Eru-4 Featured By Owner Aug 26, 2014  Hobbyist Digital Artist
Très utile ! Merci beaucoup !
Sinon j'ai une question parce que à la base c'est ça que je cherchais... comment intégrer un lien dans une image ? par exemple je veux des boutons Youtube et faceBook qui renvoi vers mes coordonné et non vers l'endroit d'où viens le thumb.

Merci d'avance !
Reply
:iconcidiene:
Cidiene Featured By Owner Edited Sep 9, 2014  Student General Artist
Coucou Eru!
Mmmh, normalement il suffit d'encadrer l'image avec le code du lien (comme pour n'importe quel bouton), néanmoins avec un compte gratuit, je ne suis pas certaine que ce soit possible. Il faudra peut-être se résoudre à faire des liens "simple" (mais en les mettant en Maj et gras) ^^


[Edit] (oui, je suis allée vérifier sur les règles qui ont évoluées depuis, avant de poster ma réponse): Alors, c'est possible même pour les comptes gratuits mais uniquement dans le journal.

Le code utilisé juste pour intégrer une image : <img src="source URL" /> 

Et donc, pour faire une combo image/Url (type bouton): 
 <a href="adresseDuLien"><img src="source URL" /> </a>

Evidemment, là encore, ce sera possible que dans les articles journaux!


Ps: Va falloir que j'édite le tuto avec cette nouvelle donnée, haha!
Reply
:iconeru-4:
Eru-4 Featured By Owner Sep 11, 2014  Hobbyist Digital Artist
Merci beaucoup pour ta réponse o/
Je suis preneur de tes prochains tuto, c'est toujours pratique de savoir maîtriser ces petites choses
Reply
:iconfraizysmoothie:
Cha va m'être utile, merci °w°
Reply
:iconcidiene:
Cidiene Featured By Owner Sep 9, 2014  Student General Artist
:heart:
Reply
:iconsilith2002:
Silith2002 Featured By Owner May 25, 2014  Hobbyist Digital Artist
Oh, mon dieu, je viens de trouver plein de nolis cocode expliqué en fr ! *o*"
Sinon, j'ai mal compris en fait un point, comment on peut mettre les mini icones dans les descriptions de deviations ? ;w; ? (la version :thumb: des journaux, j'aimerais faire pareil mais dans la description de la deviation du coup, comme tu l'as fait ici avec tes images de tes créations -d'ailleurs elles sont toutes jolies ^o^-)
Reply
:iconcidiene:
Cidiene Featured By Owner May 25, 2014  Student General Artist
Coucou! (:

En fait, les thumbnails des descriptions, c'est une option des compte payant! En compte gratuit tu ne les as du coup, que dans les journaux...
Sinon, c'est exactement la même méthode que pour les journaux, il suffit de prendre le code à droite de chaque deviation, et de l'intégrer à la description tel quel!

(Merci beaucoup! Je viens d'en changer du coup ^^).
Reply
:iconolphey:
Olphey Featured By Owner Apr 28, 2014  Student Digital Artist
Tu es ma nouvelle déesse ! xD
Reply
:iconcidiene:
Cidiene Featured By Owner May 5, 2014  Student General Artist
Comment ? Je ne suis pas la seule!?
TRAHISON! D8 
Reply
:iconolphey:
Olphey Featured By Owner May 5, 2014  Student Digital Artist
Tu as remplacée l'ancienne, pitié ne me punis pas ! D8
Reply
:iconcidiene:
Cidiene Featured By Owner May 7, 2014  Student General Artist
J'y réfléchis. è.é
Reply
:iconolphey:
Olphey Featured By Owner May 7, 2014  Student Digital Artist
ÔÔÔ Grande déesse des Codes, j'implore ton pardon é_è
Reply
:icontoyaart:
ToyaArt Featured By Owner Mar 4, 2014  Hobbyist Digital Artist
Très utile :'3 Merciiii
Reply
:icongueparddefeu:
GueparddeFeu Featured By Owner Feb 8, 2014  Hobbyist Digital Artist
Ca va beaucoup me servir! Merci! *w*
Reply
:iconcidiene:
Cidiene Featured By Owner Feb 20, 2014  Student General Artist
Tant mieux! :)
Reply
:iconmadmikado:
madMikado Featured By Owner Jan 31, 2014   General Artist
Comme les 15mille gens avant moi je viens te remercier pour ce tuto qui centralise tous les codes, très pratique pour flemmarde comme moi o/
Reply
:iconcidiene:
Cidiene Featured By Owner Feb 20, 2014  Student General Artist
Je n'en dénombre pas tant, mais de rien! 
Comme toi, je n'aime pas chercher à dix endroits différents non plus ;)!
Reply
:icontheauthormissn:
TheAuthorMissN Featured By Owner Jan 29, 2014  Hobbyist Writer
Merci! La nulle que je suis sent qu'elle va en avoir besoin.
Reply
:iconcidiene:
Cidiene Featured By Owner Jan 30, 2014  Student General Artist
On est tous nul à un moment ou à un autre! Toi aussi un jour, tu te mettras à faire des tutos pour  les nuls o/
Reply
:icontheauthormissn:
TheAuthorMissN Featured By Owner Jan 30, 2014  Hobbyist Writer
Merci, c'est sympa :) (Smile) .
Reply
:iconexornali:
Exornali Featured By Owner Jan 6, 2014
Beaucoup te l'ont déjà dit mais j'y rajoute ma couche : merci de ce tuto très bien fait qui aide beaucoup !
Reply
:iconcidiene:
Cidiene Featured By Owner Jan 6, 2014  Student General Artist
Bin ce fait toujours plaisir d'avoir ce type de couche là ;).
Reply
:iconpapyjake:
PapyJake Featured By Owner Nov 22, 2013  Hobbyist General Artist
Merci pour le tutoriel, ça fait des décennies que je cherche comment réduire la taille du texte ;w;
Reply
:iconcidiene:
Cidiene Featured By Owner Nov 23, 2013  Student General Artist
Ravie d'avoir pu aider à nanifier ton écriture! ;D
Reply
:iconjackburned:
Jackburned Featured By Owner Oct 28, 2013  Student Digital Artist
L'italique ne veut pas marcher, j'ai exactement mis et à l'endroit où je souhaitais, mais c'est toujours droit !
Reply
:iconcidiene:
Cidiene Featured By Owner Oct 29, 2013  Student General Artist
C'est étrange vu que tu viens de l'inclure pour ton "et" (j'imagine que tu as voulu prendre l'exemple de l'encadrement d'un code) il marche parfaitement :O_o:

"Pourquoi me traite-on toujours de déviants sous prétexte que je ne file pas droit?" - dit l'italique.

Peut-être y-a t-il une balise qui n'a pas été fermée ailleurs dans ton texte (parfois, c'est le problème), il y a aussi parfois des problèmes de priorités, par exemple on ne peut intégrer une (autre) balise (italique ou autre) entre une ligne (le <hr>) ou un titre (les <h1> Titre</h1>), il faut l'y replacer et l'y fermer avant ou après. 
Il y a aussi parfois des problèmes de CSS de journal qui ont été précodés autrement (par exemple tout centré, ça devient un véritable capharnaüm pour l'avoir à gauche), et parfois quelques problèmes subsistent (mais là, il faut toucher au css même du journal, et ce n'est pas vraiment mon domaine).
Reply
:iconkojiana:
Kojiana Featured By Owner Oct 5, 2013
Merci pour ce tuto très utile. :clap:
Reply
:iconcidiene:
Cidiene Featured By Owner Oct 10, 2013  Student General Artist
Mais de rien! En plus, je viens tout juste de le mettre (très rapidement) à jour :) !
Reply
:iconmillia34:
Millia34 Featured By Owner Sep 1, 2013
Très utile, merci (:
Reply
:iconcidiene:
Cidiene Featured By Owner Oct 10, 2013  Student General Artist
:hug:
Reply
:iconclidjan:
Clidjan Featured By Owner Jun 22, 2013
Merci pour le tuto^^.
Reply
:iconmereline100:
mereline100 Featured By Owner Jun 1, 2013  Student General Artist
Excellent merci beaucoup!!
Reply
:iconponyta3:
Ponyta3 Featured By Owner May 5, 2013
Existe-t-il un code pour changer la couleur du texte sur DA ? ^^
Reply
:iconcidiene:
Cidiene Featured By Owner May 5, 2013  Student General Artist
A ma connaissance: non.
La seule exception demeure pour les comptes payants, sur le journal si on a au préalable codé le css pour. ;)
Reply
:iconponyta3:
Ponyta3 Featured By Owner May 5, 2013
Ah d'accord merci ^^;
Car oui pour le journal je sais faire mais bon tempis, merci beaucoup pour la reponse ^^
Reply
:iconcidiene:
Cidiene Featured By Owner May 5, 2013  Student General Artist
Mais de rien! :woohoo:
Reply
:iconponyta3:
Ponyta3 Featured By Owner May 12, 2013
^^
Reply
:icongwangelinhael:
Gwangelinhael Featured By Owner Apr 23, 2013  Hobbyist Photographer
Excellent tuto
Merci
Reply
:icongruuumsh:
Gruuumsh Featured By Owner Mar 30, 2013
J'ai utilisé avec succès
< p align="center" > et < p align="justify" > dans des journaux. Pour la couleur, je crains qu'il faille utiliser des éléments de style, et donc avoir un accès premium...
Reply
:iconcidiene:
Cidiene Featured By Owner Apr 5, 2013  Student General Artist
Au fait: tu finis l'encadrage par un < /a> du coup?
Reply
:icongruuumsh:
Gruuumsh Featured By Owner Apr 5, 2013
Tout tag se termine par sa négation : < p> par < /p>. On ne répète pas les attributs dans le tag de fermeture.
le a que tu cites sert à fait des liens hypertextes.
< a href="htp://blahbla/">le texte surligné < /a>
Reply
:iconcidiene:
Cidiene Featured By Owner Apr 15, 2013  Student General Artist
Merci Grusm! En fait je me l'étais demandée car, le code que tu venais de me donner ne marchait pas dans l'édit que j'avais fait dans l'article. Donc je me demandais si j'étais devenue ou non complètement illogique et si l'encadrement se fermait par autre chose que le tag d'origine. ;)

Parce que pour centrer en fait: < div align="center" > < /div >

C'est surtout ça qui marche. ^^

Mais au moins tu m'as rassurée sur un point et une règle!
Reply
:iconcidiene:
Cidiene Featured By Owner Apr 15, 2013  Student General Artist
Edit: Hum, en fait, je pense que cela revient au même. Ces codes n'ont l'air de fonctionner que dans les journaux, pas dans les articles .-.
Reply
:iconnooknook:
Nooknook Featured By Owner Mar 28, 2013  Hobbyist General Artist
Super ce tuto ! Merci !
Reply
Add a Comment:
 
×

:iconcidiene: More from Cidiene


Featured in Collections

WORDS by SylveryFox




Details

Submitted on
January 26, 2010
File Size
9.8 KB
Link
Thumb

Stats

Views
20,115 (8 today)
Favourites
305 (who?)
Comments
102
×