Shop Mobile More Submit  Join Login
×

:iconsynfull: More from Synfull





Details

Submitted on
January 23, 2013
Image Size
6.7 KB
Resolution
120×120
Submitted with
Sta.sh
Link
Thumb
Embed

Stats

Views
39,389 (2 today)
Favourites
1,406 (who?)
Comments
519
×
Formatting text and images on dA (HTML + dA codes) by Synfull Formatting text and images on dA (HTML + dA codes) by Synfull
Throughout my tutorials and news articles on deviantART I use a variety of methods to help format my text and insert images. It’s becoming quite common that people ask me how I have achieved one or more of these effects, so I thought that I would write a quick guide as it allows me to quickly and clearly pass on the information each time.

This tutorial covers basic HTML tags available on deviantART, as well as a number of site specific features. It is mainly designed for those unfamiliar with HTML or those new to the site, as none of it is particularly complicated once you find the necessary code and understand how to use it.

Basic text formatting


The majority of the text formatting on dA is done through HTML tags. A ‘tag’ has angular brackets with some text inside which corresponds with a certain function. Each command has an ‘opening tag’ (e.g <b>) which says when the formatting should start, and a closing tag (e.g. </b>) which states when it should finish.

In some cases there may be multiple tags which do the same formatting. You can find these instances grouped together.

:bulletblue: <b>Bold text</b> -> Bold Text
:bulletblue: <strong>Bold text</strong> -> Bold Text

:bulletblue: <u>Underlined text</u> -> Underlined Text

:bulletblue: <i>Italicized text</i> -> Italicized text
:bulletblue: <em>Italicized text</em> -> Italicized text


:bulletblue: <s>Striked text</s> -> Striked text
:bulletblue: <strike>Striked text</strike> -> Striked text

Text sizes


:bulletblue: <h1>Large (Header 1) Text</h1> ->

Large (Header 1) Text


:bulletblue: <h2>Large (Header 2) Text</h2> ->

Large (Header 2) Text


:bulletblue: <h3>Medium (Header 3) Text</h3> ->

Medium (Header 3) Text


The <h1>, <h2> etc codes only work in certain areas of dA. For example, they cannot be used in normal comments. They can however be used in journals and the artist comments sections of deviations.

:bulletblue: <small>Small text</small> -> Small text
:bulletblue: <sup>Superscript text</sup> -> Superscript text
:bulletblue: <sub>Subscript text</sub> -> Subscript text

The options for small text differ in their positioning within a line of text. Superscript will place it at the top the line of text, where as Subscript will align it with the bottom. Small will keep it in the normal position and simply shrink the text size.

Text positions


HTML also allows you to alter the position of text making it line up with the left, right or centre of the page. In each code the basic code is the same, and you simply swap the word show in bold to achieve the designed alignment.

:bulletblue: <div align="Option">Text to be aligned</div>

The for 'option's are:
:bulletblue: Left aligned - (default option) Text aligns with the left of the text area
<div align="left">Left aligned text</div>

:bulletblue: Center aligned - Text aligns with the centre of the text area
<div align="center">Center aligned text</div>

:bulletblue: Right aligned - Text aligns with the right of the text area
<div align="right">Right aligned text</div>

Notes:
1) This HTML only works in limited places on dA such as journals and custom boxes. It doesn't work in normal comments, the dAmn chatrooms etc.
2) The option to centralise text uses the American spelling of 'Center'. For those that use the British spelling, this is a common mistakes which stops the code working.

Multiple formatting


It is possible to apply multiple formats to a single piece of text. This is achieved by nesting the tags inside each other. For example

:bulletblue: <b><u>Bold and Underlined text</u></b> -> Bold and Underlined text

:bulletblue: <sub><sub>Sup and Sub tags can be nested for even smaller text</sub></sub> -> Sup and Sub tags can be nested for even smaller text

However, when doing so you have to look out for the order you place the closing tags in. If Tag 2 is nested inside Tag 1, closing Tag 1 before Tag 2 (e.g.<t1><t2>Text</t1></t2>) will also result in Tag 2 being closed. For example:

<b><u>Sample</b></u> Text -> Sample Text

The underlined text ends at the same time as the bold, as closing the outer bold tags will also close the inner underlined tags. If you wanted all text to be underlined you would either need to swap the bold and underlined tags over to the order <t2><t1>Sample</t1> Text</t2> or place the remaining text in its own set of underlining tags e.g. <t1><t2>Sample </t2></t1> <t2>Text></t2>.

Further HTML


deviantART supports a number of other HTML tags which can be used to help format text within deviations, comments and journals. However, as these are generally less used I have left them out of this tutorial.

If you wish to find out more then you can find an official FAQ on the subject here

Inserting links


Using a mixture of HTML and deviantART codes it is possible to link to web pages and dA profiles using the following methods. In all cases, the bold text should be replaced with the appropriate link or text you wish to insert.

:bulletblue: :devsynfull: -> `Synfull

:bulletblue: :iconsynfull: -> :iconsynfull: (Shows the user’s icon, but also links to their profile)

:bulletblue: <a href="http://www.facebook.com">Text link should be attached to</a> -> Text link should be attached to

This method can be used to link to a dA profiles, but should only really be used if you want custom text to appear instead of the deviant’s username. If just the username is required then you should use the :devusername: version shown above.

:bulletblue: <a href="http://synfull.deviantart.com">My profile</a> -> My profile.

Inserting images


The majority of methods including The Emote Legend, Thumb Codes and Plz Accounts are explained in the tutorial below. Whilst it focuses mainly on emotes, the latter 2 methods can be applied to normal images as well.



In addition, if you wish to link to an image off dA, or display dA images at in a large size, then you can use the following code:

:bulletblue: <img src="DirectLinkToImage" />

The ’DirectLinkToImage’ part should be replaced with the URL (web page address) of the image. However, you need to use the direct link to the image. The direct links will lead to a web page where the image is shown on a plain background. These links can be acquired by right clicking on the image and selecting 'copy image URL/Location/Address'. (Dependant on web browser).

:bulletblue: <img src="http://i971.photobucket.com/albums/ae198/syns-stuff/Avatars/63.png" />

Unfortunately the end result of this piece of code cannot be shown here as the code can’t be used in the artist comments or regular comments. However, you can see examples in this journal.

Displaying code


From time to time it is useful to display the actual code that you are typing and prevent deviantART from formatting. For example, each time I have explained how a code works above I have given a sample piece of code which normally would produce specified effects. This is much better than adding in spaces at it allows people to see exactly how something should look.

To stop a piece of code from formatting, simply place a complete set of HTML tags (e.g. <b></b>) somewhere inside the formatting. From a coding point of view, it breaks the code/tags up so dA does not register that one has actually been used. For example:

:bulletblue: <<u></u>b>Sample Text<<u></u>/b> -> <b>Sample Text</b>

:bulletblue: :<b></b>devsynfull: -> :devsynfull:

:bulletblue: :<b></b>iconsynfull: -> :iconsynfull:

Alternatively, in the cases where a colon is used (i.e. :dev: and :icon: links) you can replace one of the colons with the ASCII code for a colon &#58; When posted in a comment or journal it will appear as a colon, but won't cause the dev or icon links to be created.

:bulletblue: &#58;devsynfull: -> `Synfull
Add a Comment:
 
:iconzoofa1230:
zoofa1230 Featured By Owner 2 days ago
Thanks
Reply
:iconhoneydoodles:
HoneyDoodles Featured By Owner Edited 3 days ago  Hobbyist Digital Artist
hello! how can i stop deviantart trying to format this code ?
it used to work but since an update to the site like two years ago it doesnt work for me trying to copy and paste it to people
it still works as a code though (as seen on page)

Tiny Music Player Tutorial - Add Music to your dA by HoneyDoodles
Reply
:iconsynfull:
Synfull Featured By Owner 2 days ago
The way I get around it is by putting an opening and closing html tag in places where dA will try to format it.

For example:

No formatting: My Profile
With HTML tags: <a href="http://synfull.deviantart.com">My Profile</a>

Code I used to show the one above: <a<b></b> href="http<b></b>://synfull.deviantart.com">My Profile<<b></b>/a>
Reply
:iconpokemonspriter11:
PokemonSpriter11 Featured By Owner Jan 23, 2015  Hobbyist Digital Artist
This is testing a thing
 This is testing a thing
Reply
:iconteapotz:
teapotz Featured By Owner Jan 19, 2015  Hobbyist Traditional Artist
May i ask, If i were to be putting images on my page like in custom boxes, How do i center them?
Reply
:iconsynfull:
Synfull Featured By Owner Jan 19, 2015
<div align="center">Items you want in the centre</div>
Reply
:iconteapotz:
teapotz Featured By Owner Jan 19, 2015  Hobbyist Traditional Artist
Oh thank you very much!
Reply
:iconbattys:
battys Featured By Owner Jan 5, 2015  Student Digital Artist
um, the center code isn't working for me..
Reply
:iconsynfull:
Synfull Featured By Owner Jan 6, 2015
If you send me the code in a note I can have a look and see what might be wrong.
Reply
:iconmegzwills:
MegzWills Featured By Owner Jan 2, 2015
Has anyone got a tutorial for adding full sized images into Custom boxes, and you're still able to click on them so it redirects you to the artwork page?
Reply
:iconsynfull:
Synfull Featured By Owner Jan 7, 2015
I can't say I know of one off the top of my head
Reply
:iconvicfania8855:
vicfania8855 Featured By Owner Edited Dec 29, 2014  Student Digital Artist
what code could I use to insert a clock timer's html from another website into my rp group's website?  this is the link to the timer: "freesecure.timeanddate.com/cou…
Reply
:iconsynfull:
Synfull Featured By Owner Dec 29, 2014
I'm not actually sure. I think they usually come with an embed URL, but that doesn't seem to have one.
Reply
:iconvicfania8855:
vicfania8855 Featured By Owner Dec 30, 2014  Student Digital Artist
do you mean this:

<iframe src="freesecure.timeanddate.com/cou…" frameborder="0" width="320" height="135"></iframe>


Reply
:iconsynfull:
Synfull Featured By Owner Dec 30, 2014
That looks a lot more like it, but it seems dA doesn't accept that either. Sorry, but I'm not sure what else I can suggest
Reply
:iconvicfania8855:
vicfania8855 Featured By Owner Dec 30, 2014  Student Digital Artist
Oh ok then.  Thank you for taking the time to look into this for me :tighthug:  I know that da has their own timer, but my group has to be a super group in order to use it.  And I don't have enough points to upgrade my group ^^;
Reply
:iconteamumbreon:
TeamUmbreon Featured By Owner Dec 18, 2014  Hobbyist Artist
Do you know how to make colored linked text?
Reply
:iconsynfull:
Synfull Featured By Owner Dec 18, 2014
In a journal this would be done via CSS. Not sure if it's possible elsewhere
Reply
:iconteamumbreon:
TeamUmbreon Featured By Owner Dec 19, 2014  Hobbyist Artist
Whats a CSS?
Reply
:iconsynfull:
Synfull Featured By Owner Dec 19, 2014
It's the coding used to change the colours and images. But you can't use it unless you have a premium membership to deviantART.

I don't know much about CSS. So if you have any questions, they would be better directed at a CSS group like :iconecssited:
Reply
:iconteamumbreon:
TeamUmbreon Featured By Owner Dec 19, 2014  Hobbyist Artist
Oh, okay. XD Thanks again!
Reply
:iconcelestial-emerald:
Celestial-Emerald Featured By Owner Dec 12, 2014  Hobbyist Writer
this really helped!
Reply
:iconl0ck3t-f0x:
L0cK3t-f0x Featured By Owner Dec 7, 2014  Hobbyist Digital Artist
what about things like this?

V̴̷̧̻͇͔͉̳̰̣̟͚͔͕͇̲̠̩̬͎̆̉̽͂̃͂̈́̓ͮ̽̔ͥ̑̔̓͟ ̵̢̙̮͙͂̒̔ͣ̾́̈́ͯͯͬͪ̌͆̏͆̽̚Ę̼͔̳̤̙̬̖ͦ̄̄̋̀͑͞ ͎̠͕̗͕͕̱̰͈̬͚̘̣̘̬̫̬̾͆ͩ̂ͨ̏̑͟͜ͅT̴̨̞͕̻͓̣̠̐̐ͥͪͩ̇͑ͣ̑̚̕ ̷̰̳͉͈̤̟͐̋͆ͫ̐̈́̈́͊̑͛̈́̈́͘͡Ȟ̸̛̪̰̭̹̦͍̳̙̘̐̑̽̑̌ͬ̓ͧ̑͑̋ͤ̒̓̆ͮ̕͞ͅ ̡ͧ̽̔͐ͥ̎ͥ̅ͫ̆ͨ͠҉̨͎͕̖̬̙͙̩̥̠̜̪̼͚͍͈ͅE̷̲̖̗̥̳̬̞͍̰͉͒ͯ͑ͫͮ̆ͨ͋̊ͮͮ̾̊͛͐́̈́̿̚͜ͅ ̨̝̺͈̜͍ͮ͗̎͋͑̔̐ͮ̚̕͟͢͟M͊̏͒̈́͌̓̾́͗͒̇͑͌̈́͆̅ͨ҉̧̦̣̩̫͔̥̥́̕͠
Reply
:iconkiiiing:
KiIIing Featured By Owner Edited Dec 13, 2014  New member
{outofpain} I think you can use a Zalgo generator to do that v.v</b>
Reply
:iconl0ck3t-f0x:
L0cK3t-f0x Featured By Owner Dec 13, 2014  Hobbyist Digital Artist
weres one?
Reply
:iconkiiiing:
KiIIing Featured By Owner Dec 13, 2014  New member
Reply
:iconl0ck3t-f0x:
L0cK3t-f0x Featured By Owner Dec 13, 2014  Hobbyist Digital Artist
thank u
Reply
:iconsynfull:
Synfull Featured By Owner Dec 8, 2014
What about it?
Reply
:iconl0ck3t-f0x:
L0cK3t-f0x Featured By Owner Dec 8, 2014  Hobbyist Digital Artist
is there a turorial for it?
Reply
:iconsynfull:
Synfull Featured By Owner Dec 8, 2014
Not one that I've created
Reply
:iconl0ck3t-f0x:
L0cK3t-f0x Featured By Owner Dec 8, 2014  Hobbyist Digital Artist
ahh ok
Reply
:iconteamumbreon:
TeamUmbreon Featured By Owner Dec 3, 2014  Hobbyist Artist
Hey, how do you make a linked text different sizes?
Reply
:iconsynfull:
Synfull Featured By Owner Dec 3, 2014
Surround the link html with the tags for resizing text. For example:

<h1><a href="http://website.com">Text to display</a></h1>
Reply
:iconteamumbreon:
TeamUmbreon Featured By Owner Dec 4, 2014  Hobbyist Artist
Wait, I meant like, linking any word you want, but just making the text to whatever you want as well.
Reply
:iconsynfull:
Synfull Featured By Owner Dec 4, 2014
The 'Text to Display' part can be changed to whatever text you want
Reply
:iconteamumbreon:
TeamUmbreon Featured By Owner Dec 4, 2014  Hobbyist Artist
Oh, okay! XD

Thanks again!
Reply
:iconteamumbreon:
TeamUmbreon Featured By Owner Dec 4, 2014  Hobbyist Artist
Thank you!
Reply
:iconmonsteygoo:
monsteygoo Featured By Owner Dec 1, 2014  Student Artist
Thanks
Reply
:icondottiii:
dottiii Featured By Owner Edited Nov 29, 2014  New member Hobbyist Digital Artist
Thanks! 
Reply
:iconsynfull:
Synfull Featured By Owner Nov 30, 2014
:)
Reply
:iconeichia:
eichia Featured By Owner Edited Nov 15, 2014  Hobbyist Digital Artist
Very useful!
Reply
:iconfloyddowel:
FloydDowel Featured By Owner Nov 3, 2014  New member
thanks for the information.
Reply
:iconsynfull:
Synfull Featured By Owner Nov 6, 2014
Glad you found it useful :)
Reply
:iconblioodkira:
BlioodKira Featured By Owner Oct 29, 2014
Thank yuo so much, i've been searching my brains out for a way to "Display the code" :D
Reply
:iconsynfull:
Synfull Featured By Owner Oct 31, 2014
No worries. Glad I could help
Reply
:iconangiethecow:
Angiethecow Featured By Owner Oct 19, 2014
do you know what to put words next to an image on your profile?
Reply
:iconsynfull:
Synfull Featured By Owner Oct 19, 2014
Sorry, I'm not sure how you do that
Reply
:iconangiethecow:
Angiethecow Featured By Owner Oct 19, 2014
Okay, thanks anyways!
Reply
:iconsmileyouramazing:
SmileYourAmazing Featured By Owner Oct 14, 2014  Hobbyist Digital Artist
How do you make dividers?
Reply
Add a Comment: