deviant art

Deviant Login Shop  Join deviantART for FREE Take the Tour
[x]
more ▶

Featured in Groups:

Details

September 21, 2009
Link
Thumb

Statistics

Comments: 171
Favourites: 512 [who?]

Views: 12,411 (2 today)
[x]
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: [link]

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:
 
love 7 7 joy 6 6 wow 0 0 mad 0 0 sad 0 0 fear 0 0 neutral 0 0
:iconredtigger:
Mood: Joy ~RedTigger 3 days ago  Student
Really good explanation... Don't know how many times I already googeled this now I finally faved it
Reply
:iconpatmorepancakes:
~PatmorePancakes 4 days ago  New member Student General Artist
I was reading this.. then.. I closed it.
And I opened it again.
Only then did I realize it was written in a journal
on deviantart. Ohhh, the fool I am. o_o
Reply
:iconcutie-chu:
~Cutie-chu 6 days ago  Student Digital Artist
Thanks so much for this tutorial! :hug:
Reply
:iconmisskaythelareveuse:
~MissKaytheLaReveuse May 9, 2013  Hobbyist Traditional Artist
Just brilliant thanks so much!!! :D
Reply
:iconhetaoc-philippines:
I'm really confused on this :iconsulkplz: Anyway, when I put it on my 'Favorites' or 'Profile' (not I.D. or Avatar) it turns invisible? I try refreshing and it doesn't show up. But when I click edit, the img src is there and all that, but the image won't show up. Is this only for premium membership? Because others could do it on the 'Fav' and 'Prof.' I understand that only premium membership can put the img src on 'Journal Entries' dsfjlk I'm sorry if this bother you, I'm still new to this. Thank you :iconsupertighthugplz:
Reply
:icondanarashidi:
~DanaRashidi Apr 11, 2013  New member Hobbyist Traditional Artist
You need premium membership to do this :/
Reply
:iconlinebirgitte:
`LineBirgitte Apr 13, 2013  Professional Digital Artist
yes :)
Reply
:icongeneralwildfire:
~GeneralWildfire Apr 3, 2013  Hobbyist General Artist
This is very helpful!
Reply
:iconpen-candy:
*pen-candy Mar 13, 2013  Hobbyist General Artist
thank you so so much! I had totally forgot how to code but this helped me so much!! :D
Reply
:iconnjoydaview:
Mood: Adoration ~NjoyDAview Mar 13, 2013  Hobbyist General Artist
I think i love you.
Reply
Add a Comment: