Shop Mobile More Submit  Join Login
×

: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
25,423 (2 today)
Favourites
817 (who?)
Comments
256
×
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:
 
:iconaltrumdissidia:
AltrumDissidia Featured By Owner Feb 11, 2015
How do you add images to notes and to the chat?
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  Student General Artist
<*a href="your link here"><*img src="your img url here"><*/a> without the *s.
Reply
:iconiscora:
Iscora Featured By Owner 23 hours ago
thanks a lot :hug:
Reply
:iconxxdreamdealerxx:
xxDreamDealerxx Featured By Owner 12 hours ago  Student General Artist
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 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 Artist
Yes, I know :3
Reply
:iconmoomoonuati:
MooMooNuati Featured By Owner Mar 2, 2014  Professional Digital Artist
Bullet; Green Bullet; Blue  nice 
Reply
:iconazure--phoenix:
Azure--Phoenix 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
:iconmilannikolapetrovic:
MilanNikolaPetrovic Featured By Owner Oct 13, 2013  Professional Photographer
I'' try that. Tnx!
Reply
:icondixiecrafting:
DixieCrafting Featured By Owner Oct 14, 2013  Hobbyist Digital Artist
No problem.

Tell me if it worked.
Reply
:iconmilannikolapetrovic:
MilanNikolaPetrovic Featured By Owner Oct 14, 2013  Professional Photographer
Works like a charm! Winner 
Reply
:icondixiecrafting:
DixieCrafting Featured By Owner Oct 15, 2013  Hobbyist Digital Artist
Lovely. ;)
Reply
:iconisabella-alice:
Isabella-Alice Featured By Owner Sep 14, 2013  Hobbyist General Artist
Thank you so much! 

~Ceska
Reply
:iconcoronachan:
CoronaChan Featured By Owner Sep 14, 2013
I just copy the image and paste it.....I don't even need the code for some reason, the journal just converts it into the image of what its suppose to be ... O-O)....hm...
Reply
Add a Comment: