How to Make a Clickable Link
A professional look to a website or blog can affect whether someone visits again. One of the simplest tools you can use to make a website easy to navigate and look professional is a clickable link that includes text indicating where the link will take you. With the use of HyperText Markup Language--the basic computer programming language that gives structure to a website--you can add these links to your website, and to online forums as well. Also, you can create links with images that you can re-size to your liking using this HTML code.
Other People Are Reading
Instructions
-
Text Link
-
1
Begin creating a link by typing in the anchor <a href=. The "href" stands for hypertext reference and the equal sign indicates you'll be placing your URL next.
-
2
Type your URL to the right of the <a href= and put it all in quotes. It it should look something like this: "http://MyWebsite.com/TutorialPage/". End that with an end bracket, which should look like this: ">"
-
-
3
Follow your URL with the text you want in the link. Type it to the right of your URL, exactly the way you want it to look. If the name you want to use is Tutorial Page, you'd type it exactly as you see it in this sentence.
-
4
End the code with </a>. The slash within the anchor brackets indicates you're ending an HTML code.
-
5
View your text link on your webpage. The text you used should be underlined and should take you to the website you indicated when the link is clicked.
Picture Link
-
6
Start off your HTML code again with <a href=, the name of your website in quotes and then an end bracket of >.
-
7
Use an image tag next, known as "img" for short in HTML. Add an <img src= to start off the code to add an image. Next, place in quotes the URL where the image is uploaded. It should look like this as a textual example: "Photo.gif."
-
8
Indicate the height and width you want your image to be and type it to the right of the URL of the image. For example, type Width=50 and Height=50 to create an image 50 pixels square (about 2/3 of an inch square).
-
9
Add "alt" to the right of the height and width tags. The "alt" HTML tag is very important when making clickable image links. It provides alternate text that shows up when the image doesn't work, to show an image does exist there. Add a code line by typing in alt="This image does not show up" or any other text you'd like to use. End the line with >.
-
10
End the code again with the </a> and you've added a clickable image to your webpage that will take a visitor to another location.
-
1
Tips & Warnings
More can be done with clickable links using simple HTML (see resources). You can create an email address link using the same HTML process of adding brief text in the link. Clickable links can also be made to take a visitor back to the top of a page and to file downloads. Colors can even be added to links using the <body bgcolor= tag.
As an alternative to sizing your clickable image link, use percentages for the height and width size. Use this only if you're not sure of the pixel size. For example, a 50 percent height would fit the image to half the length of your browser page size. A 50 percent width would make the image stretch across half of the page.
Always make sure your HTML code is perfect. If you misspell one word or leave out one little piece of the code, the link won't work.
References
Resources
- Photo Credit shutdown the computer image by Ludovic LAN from Fotolia.com
More Like This
Comments
-
yelgab
Aug 12, 2010
Would this code work to refer to a page in your own site? I am wanting to make a page of recipes, with the titles on one page and one would just click on the link to open the recipe. I do not have a site yet, but am trying to figure out how to do it first.
