How to Insert a Link in an Image

With a single line of HTML commands, you can add a hyperlinked image to nearly any web page. You need two things to be able to do this: the URL of the image and the URL of the website.

Table of Contents

Write HTML code

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/da/769114-1.jpg/v4-460px-769114-1.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/d/da/769114-1.jpg/v4-728px-769114-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Create HTML file. Open a text editor and create a new file. Save the file in index.html format.

• You can use any text editing program, even built-in programs like Notepad on Windows and TextEdit on Mac OS X.

• If you want to use a text editor specifically for coding HTML, click here to download Atom – a text editor that works on Windows, Mac OS X and Linux operating systems.

• If you use TextEdit, click the Format menu and click Make Plain Text before composing the HTML file. This is to ensure that the HTML file is displayed correctly in the web browser.

• A word-processing program, such as Microsoft Word, is not suitable for writing HTML code, because hidden characters and formatting can corrupt the HTML file, causing the data to not display properly in the web browser.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/37/769114-2.jpg/v4-460px-769114-2.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/3/37/769114-2.jpg/v4-728px-769114-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Copy and paste standard HTML code. Select and copy the HTML code below and paste it in the open index.html file.

 < a href = "DESTINATION URL" >< img src = "IMAGE URL" /></ a >

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/aa/769114-3.jpg/v4-460px-769114-3.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/a/aa/769114-3.jpg/v4-728px-769114-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Find the path of the image. Find an image on the Internet, right-click it, and click Copy Image URL, Copy Image Address, or Copy Image Location depending on the browser you’re using.

• Firefox and Internet Explorer use Copy Image Location. Chrome uses Copy Image URLs. Safari uses Copy Image Address.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/2/2b/769114-4.jpg/v4-460px-769114-4.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/2/2b/769114-4.jpg/v4-728px-769114-4.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Add the URL of the image. In the index.html file, you would click and drag to select the IMAGE URL with your mouse pointer, and press CTRL + V to paste the URL.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/4e/769114-5.jpg/v4-460px-769114-5.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/4/4e/769114-5.jpg/v4-728px-769114-5.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Add the destination URL path. You just need to remove the DESTINATION URL in the index.html file and enter https://www.google.com .

• You can choose any URL as the destination URL.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/39/769114-6.jpg/v4-460px-769114-6.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/3/39/769114-6.jpg/v4-728px-769114-6.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Save the HTML file.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/c/cc/769114-7.jpg/v4-460px-769114-7.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/c/cc/769114-7.jpg/v4-728px-769114-7.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Open the HTML file in a web browser. Right click on the index.html file and open the web browser of your choice.

• When the browser opens, if you don’t see the image, make sure the name of the image file is entered correctly in the index.html text file editing window.

• When the browser opens, if you see HTML code instead of a background image, the index.html file has been saved as rich text. You need to edit the HTML file with another text editor.

Learn HTML code

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/f/f7/769114-8.jpg/v4-460px-769114-8.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/f/f7/769114-8.jpg/v4-728px-769114-8.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Learn anchor tags. HTML code is generated from opening and closing tags. The <a href=””> tag is the opening tag and </a> is the closing tag. This is called an anchor tag and is used to add links to a web page. ^{[1] X Research Source}

The <a tag tells the browser to render the path. The href tag stands for “HTML reference”, the = tag tells the browser to get all the information in between the ” “ and generate the link. All URLs can be enclosed in quotation marks.
The </a> tag tells the browser that the anchor tag is a closing tag.
When information is added between <a href=””> and </a> , it becomes a link on the web page. For example, <a href=”https://www.google.com”>Google</a> will generate a link to Google.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/2/2f/769114-9.jpg/v4-460px-769114-9.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/2/2f/769114-9.jpg/v4-728px-769114-9.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Learn image tags. The <img> tag is a self-closing tag. You can close the tag by writing <img src=”” /> or writing <img src=””></img>. ^{[2] X Research Source}

The <img tag tells the browser to render the image. The src tag is the abbreviation for “source”, the = tag tells the browser to get the information between the ” “ and get the image from that address.
The /> tag tells the browser to close the image tag.
For example, {{samp[|<img src=”https://www.google.com/images/srpr/logo11w.png” />}} will fetch the image from that URL, and display the image on Web browser.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/47/769114-10.jpg/v4-460px-769114-10.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/4/47/769114-10.jpg/v4-728px-769114-10.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Use this code anywhere. Once you’ve learned the information, you can use the code <a href=”DESTINATION URL”><img src=”IMAGE URL” /></a> to insert a link to an image on any renderable web page. HTML code.

Steps

Write HTML code

Learn HTML code

Related Posts