Question: 'How do I link an image?'

3 min read

Deviation Actions

Divine-Tutorials's avatar
Published:
57.7K Views

Question


hello,~! uh lol idk how to say this but i need help with something. please help me, i cant figure out how to do it, but
i want to make like a picture link.
and what im talking about is
theres a little picture, and it says "click for my tumblr" and when u click the picture it takes you out of dA and on that persons tumblr, youtube, or instagram (wutever the pic would say)/
but its a drawn pic from the person. i want to do that for me but i dont know how! no clue!
but, thx for u time reading this lol c,: <3


Answer


:wave: Hey!

No worries about not understanding =) It uses something called HTML to create the link and then wrap it around the image. We create a link using an Anchor link, which looks like this:

<a href="http://www.google.com">Google</a>

<a starts the anchor link, and tells the browser that this will be a link!
href="http://www.google.com"> href stands for hypertext reference, and is followed by an equals sign and two quotation marks which surround the link you want to share (so this could be a tumblr link, or a facebook link).
Google Here we simply type the text of the link! (See example below for clarification).
</a> Then we need to close the tag, so the browser knows that the link has ended, and no further text should be linked.

If we copy the code above we get:

Google

Only "Google" is shown, and if we click on it, we go to http://www.google.com (like we specified inside the quotation marks). The little arrow next to Google is generated by deviantART to show an external link.

Note: It's important to include the http:// , else your browser won't realise it's a link correctly. Just make sure you copy and paste from your browser and you'll be okay!



So how do we add an image instead?

See in our previous example where we've written Google? All we need to do is replace this with the code for an image:

<img src="http://st.deviantart.net/minish/main/logo.png" />

<img as before, this tells the browser that this will be an image.
src="http://st.deviantart.net/minish/main/logo.png" src stands for source, and (like href) is followed by an equals sign and two quotation marks, which wrap around the image link. (I've underlined the image link to help it stand out for you).
/> the image link is closed differently to the anchor tag, and simply ends like this.

So when we use the code above, we get:






Now let's combine them!

<a href="http://www.google.com/"><img src="http://st.deviantart.net/minish/main/logo.png" /></a>

Now if you click on the image, it will take you to Google.com!







Do you have a question about anything?



For example: What strength pencil should I use for dark lines? Should I use <b> or <strong> to make text bold?

Ask it in the comments or through a note, and I'll post the questions in this blog. Then either myself or someone else will strive to answer it with either a written answer, or a link to a helpful tutorial/article! :dummy:
© 2013 - 2024 Divine-Tutorials
Comments13
Join the community to add your comment. Already a deviant? Log In
kool816's avatar
NONE OF THIS WORKS!!!!