Shop Mobile More Submit  Join Login
Content in part 1
    Using <a> tags
    Using image tags




Using <a> tags.

How to link/make links
the <a> tag can used to make regular text links where you decide what the link will be called

Two kinds of links:

1) My Gallery: http://brgtt.deviantart.com/gallery/ will be displayed as:

My gallery: brgtt.deviantart.com/gallery/

2) <a href="http://brgtt.deviantart.com/gallery/">My gallery</a> will be displayed as:

My gallery

You can also put all kinds of other stuff inside <a> tags - like images, which will be explained further down in this journal ;)




Using image tags.

What is an image tag?

An image tag let's you put images (not thumbs) in your journal - like this:



the code to display an image is very simple and easy to remember:

<img src="imageurlhere" />

- so the image tag code consist of the actual tag (img) which holds the image url (the place online where the image is stored).

The image I used is stored here: http://th02.deviantart.net/fs51/300W/f/2009/262/5/6/Psychedelic_Studio___223_by_emperpep.jpg

I found it by going to to deviation, rightclicking it and selecting "copy image adress" - the image url is then copied to your clipboard and you can simple paste it into the image tag like this:

<img src="http://th02.deviantart.net/fs51/300W/f/2009/262/5/6/Psychedelic_Studio___223_by_emperpep.jpg" />

here's a visual on how to get the image url:



Image size

Ok so you got the image you want - but it's too big and takes up way too much space, and a thumb is too small for you.

Don't panic - you can simple tell the image tag how big the image should be.

If you set the height the width will follow automaticly and the same goes the other way around - BUT; if you set both of them you can stretch the image out of poportions - take a look at these four examples:

Width:200px

<img src="imageurlhere" width="200" />

Height: 200px

<img src="imageurlhere" height="200" />

Height: 200px, Width: 200px;

<img src="imageurlhere" width="200px" height="200" />

Huge thumbs
Ok - so you got an image in your journal now - but noone knows where to go to fave it! :noes:

There are a number of ways to let people know, you could simple tell them who made it and that they can find it in her gallery. But really - that's a lot of work, and a thumb they could simply click or collect would be much more satisfying - so why don't we simply turn our image into a thumb? (remember this will only work with work from dA)

Copy the url of the original deviation;


We are now using the <a> tag to make our image a link (see top of journal to learn more about the <a> tag). By putting the image tag inside the <a> tag the image will act as a link:



<a href="deviation_url_here"><img src="image_url_here" width="200" /></a>

try collecting the huge thumb as if it was a regular thumb :eyes: - nifty aint it?




- can't figure out what any of this meant? Let me know so I know how to improve this guide and help you understand!

  • Mood: Optimism
  • Listening to: Jack Johnson
  • Reading: Silly Cow
  • Watching: the words bounce up and down
Add a Comment:
 
:iconf4bul0u5-s3np41:
F4BUL0U5-S3NP41 Featured By Owner Jun 8, 2015  Hobbyist Traditional Artist
How do you put your mood and stuff at the bottom of your journal like that??
Reply
:iconaoikita:
AoiKita Featured By Owner Edited Apr 18, 2015  Student General Artist
I don't know why, but I cannot get it to work for me. Is it my browser or something? Even on this tutorial, the images are broken picture icons--like how mine turn out, but other times nothing shows at all.
Reply
:iconaltrumdissidia:
AltrumDissidia Featured By Owner Feb 11, 2015
How do you add images to notes and to the chat?
Reply
:iconkuruumi:
Kuruumi Featured By Owner Mar 26, 2015  Hobbyist Traditional Artist
copy and paste the :thumb: code wherever you want to~
Reply
:iconaltrumdissidia:
AltrumDissidia Featured By Owner Mar 28, 2015
thank you
Reply
:iconiscora:
Iscora Featured By Owner Dec 13, 2014
this is really helpfull! i still have a question, how do i make an Image as a link? like, i have a button, and if i klick it i will get to the Gallery or something (1.i am not a native english Speaker sorry xD
2. maybe its already in this tutorial but i didnt find it, if its so i am sorry D: )
Reply
:iconxxdreamdealerxx:
xxDreamDealerxx Featured By Owner Feb 21, 2015
<*a href="your link here"><*img src="your img url here"><*/a> without the *s.
Reply
:iconcute-heart:
Cute-Heart Featured By Owner Apr 23, 2015  Hobbyist Digital Artist
thanks ^^
Reply
:iconxxdreamdealerxx:
xxDreamDealerxx Featured By Owner Apr 23, 2015
No problem~
Reply
:iconiscora:
Iscora Featured By Owner Mar 2, 2015
thanks a lot :hug:
Reply
:iconxxdreamdealerxx:
xxDreamDealerxx Featured By Owner Mar 2, 2015
No problem c:
Reply
:icondragonmanipulator372:
DragonManipulator372 Featured By Owner Dec 4, 2014  Hobbyist Writer
This is really helpful, I'll have to check out the other parts!
Reply
:iconpurplefire40:
Purplefire40 Featured By Owner Oct 1, 2014  Hobbyist General Artist
Thank you so much for your clear explanation. This was very helpful!!! *throws glitter*
Reply
:iconmynameiswaifu:
mynameiswaifu Featured By Owner Sep 8, 2014
Doesn't work
Reply
:iconeveon99:
Eveon99 Featured By Owner Jul 17, 2014  Hobbyist Artist
Wow,it works! Thank you for this tutorial!! :D
I can't believe I just understand this with just for like 2 minutes!xDD
Reply
:iconakanehoshiko:
AkaneHoshiko Featured By Owner Mar 6, 2014  Hobbyist General Artist
Rather than doing this you could find an image on the internet, right click the image, and click "copy". Then right click where you want to put the image on your Journal and click "paste". Then it should show up.
Reply
:iconcutest-cannibal:
Cutest-Cannibal Featured By Owner Dec 25, 2014  Hobbyist Traditional Artist
i tried that and it did not work.
Reply
:iconjustsomerandomkidlol:
JustSomeRandomKidLol Featured By Owner Apr 18, 2014  Hobbyist General Artist
To be fair, this was back in 2009 :3
Reply
:iconakanehoshiko:
AkaneHoshiko Featured By Owner Apr 25, 2014  Hobbyist General Artist
Yes, I know :3
Reply
:iconmoomoonuati:
MooMooNuati Featured By Owner Mar 2, 2014  Professional Digital Artist
Bullet; Green Bullet; Blue  nice 
Reply
:iconazurynn:
Azurynn Featured By Owner Feb 26, 2014  Student Digital Artist
Doesn't work in my journal, I also tried removing the italics but still no picture. :(
Reply
:iconeverydaylegendaries:
everydayLegendaries Featured By Owner Jan 26, 2014
I just put the picture in a mail and copied it from there into my journal
Reply
:iconxiaooyu:
Xiaooyu Featured By Owner Jan 25, 2014  Hobbyist General Artist
thanks! :D
Reply
:iconbullsheeter:
Bullsheeter Featured By Owner Jan 16, 2014  Student Digital Artist
Reply
:iconbullsheeter:
Bullsheeter Featured By Owner Jan 16, 2014  Student Digital Artist
Reply
:iconbullsheeter:
Bullsheeter Featured By Owner Jan 16, 2014  Student Digital Artist
Reply
:iconxiaooyu:
Xiaooyu Featured By Owner Jan 25, 2014  Hobbyist General Artist
hey, it doesnt work in comments sorry . :C
Reply
:iconbullsheeter:
Bullsheeter Featured By Owner Jan 16, 2014  Student Digital Artist
Reply
:iconsecretelycharmed:
SecretelyCharmed Featured By Owner Jan 15, 2014  Hobbyist Traditional Artist
Thank you so much, it works!
Reply
:iconvaatiwithblue:
Vaatiwithblue Featured By Owner Jan 6, 2014  Hobbyist Traditional Artist
It doesn't work for me, only a weird box for me! 
Reply
:iconicyskiesranch:
IcySkiesRanch Featured By Owner Dec 28, 2013  Hobbyist Interface Designer
Whoo! It works!
Reply
:iconeagerbeast:
EagerBeast Featured By Owner Nov 7, 2013  Hobbyist
:icongatetrade15:
Reply
:icondoomsdaytreecko:
Doomsdaytreecko Featured By Owner Nov 3, 2013  Hobbyist General Artist
Thanks for this journal. The methods aren't working for people because, when copied, it's in italics, remove the italics and it works fine
Reply
:iconxzxrix:
xzxrix Featured By Owner Oct 29, 2013  Hobbyist Traditional Artist
Thank you a great deal:isonnatsusmileplz:
Reply
:iconsunny-scribble:
Sunny-Scribble Featured By Owner Oct 19, 2013  Hobbyist Traditional Artist
thank you!! :D
Reply
:iconpyrodark:
PyroDark Featured By Owner Oct 11, 2013  Hobbyist Digital Artist
I was just toying around with this and got it to work. Before you copy/paste this stuff go to the Edit tab of the "Sta.shWriter" bar and "switch to HTML Mode" otherwise it just doesn't show up at all. If you already have it written, it auto adds unnecessary coding when you switch and still won't work, so it's easiest to just re-paste it while in HTML mode.
Reply
:icontakatarikuzen:
TakataRikuzen Featured By Owner Oct 17, 2013  Hobbyist Digital Artist
I got it to work when I'm using Sta.shWriter but not when I'm putting in description when submitting works. I suspect it's because it's still in rich text mode. Any idea on how to change it to HTML mode?
Reply
:icontakatarikuzen:
TakataRikuzen Featured By Owner Oct 17, 2013  Hobbyist Digital Artist
Nevermind, just found out only premium members get to add pics on artists descriptions 
Reply
:iconhappygleyson:
HappyGleyson Featured By Owner Oct 4, 2013  Hobbyist Filmographer
<img src="fc06.deviantart.net/fs71/f/201…" width="200" />
Reply
:icontanblaque:
TANblaque Featured By Owner Nov 11, 2013  Hobbyist Digital Artist
You can't use it here. :) Only on Journals. :)
Reply
:iconhappygleyson:
HappyGleyson Featured By Owner Nov 28, 2013  Hobbyist Filmographer
Lol
Reply
:icontanblaque:
TANblaque Featured By Owner Nov 28, 2013  Hobbyist Digital Artist
lololol
Reply
:iconhappygleyson:
HappyGleyson Featured By Owner Oct 4, 2013  Hobbyist Filmographer
Nope
Reply
:iconhappygleyson:
HappyGleyson Featured By Owner Oct 4, 2013  Hobbyist Filmographer
I wish :I
Reply
:icontherebornace:
TheRebornAce Featured By Owner Oct 2, 2013  Hobbyist General Artist
I remembered this code used to work. Does it not work anymore because of the recent site updates?
Reply
:icondixiecrafting:
DixieCrafting Featured By Owner Oct 13, 2013  Hobbyist Digital Artist
It does work.

If you copied it and pasted it, then delete it and retype it.
Reply
:icontherebornace:
TheRebornAce Featured By Owner Oct 13, 2013  Hobbyist General Artist
what do you mean by deleting it and then retyping it? that just seems useless since it'll just be presented the same. 
Reply
:icondixiecrafting:
DixieCrafting Featured By Owner Oct 14, 2013  Hobbyist Digital Artist
I know it seems useless but it works.

I have no idea why but if you copy the code from this article it won't work. (Atleast for me)

It worked when i retyped the code.
Reply
:iconmilannikolapetrovic:
MilanNikolaPetrovic Featured By Owner Sep 27, 2013  Professional Photographer
Hi, tnx for the info.

But, I can't get this to work in my journal. Doing everything you did. :/
Reply
:icondixiecrafting:
DixieCrafting Featured By Owner Oct 13, 2013  Hobbyist Digital Artist
Look at my reply to TheRebornAce.
Reply
Add a Comment:
 
×

:iconlinebirgitte: More from LineBirgitte


Featured in Collections

Good to read by DianaGrigore

Journals etc by Lani-is-NINJA

Journal Entries by gogospirit


More from DeviantArt



Details

Submitted on
September 21, 2009
Link
Thumb

Stats

Views
27,154 (1 today)
Favourites
825 (who?)
Comments
262
×