How to Add a Link to a Picture
Create an HTML file., Copy and paste the standard HTML code., Find an image's URL., Add the image URL., Add the destination URL., Save the HTML file. , Open the HTML file in a web browser.
Step-by-Step Guide
-
Step 1: Create an HTML file.
Open a text editor, and then create a new file.
Save the file as index.html.
• You can use any text editor you want, even the system text editors provided by Windows, Notepad, and Mac OS X, TextEdit.
• If you want to use a text editor intended for working with HTML, click here to download Atom, a text editor that works on Windows, Mac OS X, and Linux operating systems.
• If you're using TextEdit, before starting to write the HTML file, click the Format menu, and then click Make Plain Text.
This setting will make sure the HTML file loads properly in a web browser.
• Word processors, such as Microsoft Word, are not great for writing HTML, because they add invisible characters and formatting that can break an HTML file so that it doesn't display correctly in a web browser. , Select and copy the HTML code below, and then paste it into your open index.html file. <a href="DESTINATION URL"><img src="IMAGE URL" /></a>
Find an image on the Internet, right-click the image, and then, depending on your browser, click Copy Image URL, Copy Image Address, or Copy Image Location.
• Firefox and Internet Explorer use Copy Image Location.
Chrome uses Copy Image URL.
Safari uses Copy Image Address. , In the index.html file, click and drag to select IMAGE URL with you mouse, and then press CTRL + V to paste the image URL. , In the index.html file, delete DESTINATION URL, and then type https://www.google.com.
• You can use any URL you want for the destination URL. ,, Right-click the index.html file, and then open it in the web browser of your choice.
• When the browser opens, if you don't see the image, make sure the image file name is spelled correctly in the index.html text editor window.
• When the browser opens, if you see HTML code instead of the background image, your index.html file was saved as a rich text document.
You may want to try editing the HTML file in a different text editor. -
Step 2: Copy and paste the standard HTML code.
-
Step 3: Find an image's URL.
-
Step 4: Add the image URL.
-
Step 5: Add the destination URL.
-
Step 6: Save the HTML file.
-
Step 7: Open the HTML file in a web browser.
Detailed Guide
Open a text editor, and then create a new file.
Save the file as index.html.
• You can use any text editor you want, even the system text editors provided by Windows, Notepad, and Mac OS X, TextEdit.
• If you want to use a text editor intended for working with HTML, click here to download Atom, a text editor that works on Windows, Mac OS X, and Linux operating systems.
• If you're using TextEdit, before starting to write the HTML file, click the Format menu, and then click Make Plain Text.
This setting will make sure the HTML file loads properly in a web browser.
• Word processors, such as Microsoft Word, are not great for writing HTML, because they add invisible characters and formatting that can break an HTML file so that it doesn't display correctly in a web browser. , Select and copy the HTML code below, and then paste it into your open index.html file. <a href="DESTINATION URL"><img src="IMAGE URL" /></a>
Find an image on the Internet, right-click the image, and then, depending on your browser, click Copy Image URL, Copy Image Address, or Copy Image Location.
• Firefox and Internet Explorer use Copy Image Location.
Chrome uses Copy Image URL.
Safari uses Copy Image Address. , In the index.html file, click and drag to select IMAGE URL with you mouse, and then press CTRL + V to paste the image URL. , In the index.html file, delete DESTINATION URL, and then type https://www.google.com.
• You can use any URL you want for the destination URL. ,, Right-click the index.html file, and then open it in the web browser of your choice.
• When the browser opens, if you don't see the image, make sure the image file name is spelled correctly in the index.html text editor window.
• When the browser opens, if you see HTML code instead of the background image, your index.html file was saved as a rich text document.
You may want to try editing the HTML file in a different text editor.
About the Author
Edward Harris
Experienced content creator specializing in home improvement guides and tutorials.
Rate This Guide
How helpful was this guide? Click to rate: