Deviant Login Shop  Join deviantART for FREE Take the Tour
Group Info Group Founded 4 Years ago Statistics 3,253 Members
98,877 Pageviews5,093 Watchers

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:
More Journal Entries

Admins

:icongroupsplz:

We would love you to join! Just hit the "Join this group" button at the top of the page and you will be automatically approved! You don't need to be a tutorial creator to join this group - in fact, we encourage beginners to join so they can give us feedback on how useful our tutorials are for those who are new to a program!

Divinity




Deviants

Affiliates

Now accepting Affiliates! But be warned, we only accept groups with tutorials!

:iconhelp-to-draw::icondigitalartistsftw::iconvalvecrafts::iconblackandwhiteclub:

Recent Journal Entries

Folder Classification

Gallery Submissions
:gallery:

There is currently no limit on the number of tutorials you can submit! Excellent news no? All submissions will need to be voted on before being shown in the group, but this is just to filter out any non-tutorial pieces.

Please submit your work to the correct folder!

:bulletwhite: :bulletwhite: Featured :bulletwhite: :bulletwhite:
This folder features tutorials on how to create a tutorial. You cannot submit to this folder. If you have a tutorial which you feel belongs in this folder, please send the group a note.

:bulletwhite: :bulletwhite: Photoshop :bulletwhite: :bulletwhite:
Any tutorial which relates to the functions of Photoshop, or is specifically catered to Photoshop, goes into here.

:bulletwhite: :bulletwhite: Paint Shop Pro :bulletwhite: :bulletwhite:
Any tutorial which relates to the functions of Paint Shop Pro, or is specifically catered to Paint Shop Pro, goes into here.

:bulletwhite: :bulletwhite: Gimp :bulletwhite: :bulletwhite:
Any tutorial which relates to the functions of Gimp, or is specifically catered to Gimp, goes into here.

:bulletwhite: :bulletwhite: SAI :bulletwhite: :bulletwhite:
Any tutorial which relates to the functions of SAI, or is specifically catered to SAI, goes into here.

:bulletwhite: :bulletwhite: Drawing :bulletwhite: :bulletwhite:
Traditional drawing tutorials which either detail how to perform specific techniques with traditional methods (painting with brushes, drawing with pencils, etc.) go into here. This folder also includes general anatomical tutorials.

:bulletwhite: :bulletwhite: Artisan :bulletwhite: :bulletwhite:
Any tutorial which details how to create a physical item (such as jewellery, or plushies) goes into here.

:bulletwhite: :bulletwhite: Web Design :bulletwhite: :bulletwhite:
Any tutorial which explains HTML, CSS, PHP (or any other language which can be used in websites), or details how to create a web site design, go into here.

:bulletwhite: :bulletwhite: Deviant Art :bulletwhite: :bulletwhite:
Any tutorial about DeviantART goes into here!

:bulletwhite: :bulletwhite: Food :bulletwhite: :bulletwhite:
Tutorials, or recipes, for all foods go into here.

:bulletwhite: :bulletwhite: Photography :bulletwhite: :bulletwhite:
Any tutorials which detail photography techniques go into here; tutorials which offer post-processing through a graphics program do not belong here, and instead need to be submitted to the programs corresponding folder.

:bulletwhite: :bulletwhite: Writing :bulletwhite: :bulletwhite:
Any writing tutorials, whether fiction or non-fiction, belong here.

:bulletwhite: :bulletwhite: Walkthroughs :bulletwhite: :bulletwhite:
A walkthrough is a group of screenshots/photos which detail your process through a specific piece of art. Whilst textual guidance is unnecessary, it is appreciated.

:bulletwhite: :bulletwhite: Other :bulletwhite: :bulletwhite:
Anything which doesn't fit in the other categories belongs here!

:bulletwhite: :bulletwhite: Journal Features :bulletwhite: :bulletwhite:
Any journal which features tutorials goes into this folder.

Gallery Folders

Featured
Gimp
Web Design
Deviant Art
Writing
Journal Features

Comments


Add a Comment:
 
:iconmahogi:
Mahogi Featured By Owner Aug 22, 2014  Hobbyist
Hello! I have made a tutorial for PhotoShop, how to easily outline. I would like to share it :)
mahogi.deviantart.com/art/Tuto…
Reply
:icontehangelscry:
TehAngelsCry Featured By Owner 6 days ago  Professional Interface Designer
You're welcome to submit it to our gallery if you're a member :)
Reply
:iconmahogi:
Mahogi Featured By Owner 6 days ago  Hobbyist
Okay!
Reply
:iconcomandersprings:
ComanderSprings Featured By Owner Aug 19, 2014  New member
Hello! I have a question: when drawing a head, what should I draw first: the hair or the head?
Reply
:iconarielyiningloh:
arielyiningloh Featured By Owner Aug 21, 2014  Professional General Artist
Personal opinion? Head.
Reply
Add a Comment: