Placing text + an image side-by-side on dA

A couple of years ago I wrote a detailed tutorial about how to format images and text on dA. One of the most widely asked questions on that tutorial goes along the lines of "How do I place an image and text side-by-side in a custom box on my profile?"

With the help of Sapphire-Skillz (for linking to an example) and night--rabbit (who had an example on their page) I was about to look at the HMTL to learn how this was done.

---

Code

An example of the code is shown below. The items in bold will need to be replaced.

Note: It is recommended that you type the code yourself - do not copy and paste from this tutorial, as it includes extra formatting that often breaks the code.

<img src="Direct link to image" width="Width of image" align="Alignment"/>

Direct link to image

Once you have uploaded the image you want to use to a website (e.g. stash, photobucket etc), the URL (web address) for the image needs to be inserted into the code. This needs to be a Direct Link to the image, which shows the image is shown on a plain background.

To acquire this link,  right click on the image and select 'copy image URL/Location/Address'. (Dependant on web browser). For example:

http://i971.photobucket.com/albums/ae198/syns-stuff/Avatars/63.png
http://orig14.deviantart.net/d26c/f/2012/148/0/5/how_do_i_use_emotes_on_da__by_synfull-d2tjctc.png

Width of image

The width of the image (in pixels). This can be found using an art program such as MS paint.

Alignment

Can be set to right or left to specify which side you want the image to appear on.

---

Examples

The code above adds in the image. To add text to the side, simply type it out after the code. For example:

<img src="http://imageURL.png" width="150" align="left"/>This text will appear to the right hand side of the image linked before it.

You can also add extra formatting to this text, to change how it looks. For example, you can make it bold, underlined, small or even center align it. To do this, simply add in the appropriate HTML tags around the text. For example:

<img src="http://imageURL.png" width="150" align="left"/><b><small>This text will appear to the right of the image, and be small and in bold.</small></b>

When you use a real image URL, the finished code will look something like this:

<img src="http://orig14.deviantart.net/d26c/f/2012/148/0/5/how_do_i_use_emotes_on_da__by_synfull-d2tjctc.png" width="150" align="left"/><div align="center"><i>The image to the side shows the preview of another tutorial. This text will appear to the right of the image, be center aligned and italic</i></div>

---

Other tutorials