Buzz
With a simple HTML command, you can insert a linked image into almost any webpage. To do this, you need two things: the URL of the image and the URL of the webpage.
Steps
Write the HTML Code
Create an HTML File. Open a text editor and create a new file. Save the file with the name index.html.
- • You can use any text editor, even the built-in Notepad on Windows or TextEdit on macOS.
- • If you prefer a text editor specifically designed for HTML coding, click here to download Atom, a text editor compatible with Windows, macOS, and Linux.
- • If you're using TextEdit, click the Format menu and choose Make Plain Text before writing the HTML file. This ensures the file displays correctly in a web browser.
- • Text editors like Microsoft Word are not suitable for writing HTML code as hidden characters and formatting may break the HTML file, causing it not to display properly in the browser.
Copy and Paste the Correct HTML Code. Select and copy the HTML code below, then paste it into the open index.html file.
<a href="DESTINATION URL"><img src="IMAGE URL" /></a>
Find the Image URL. Locate the image on the Internet, right-click on the image, and select Copy Image URL, Copy Image Address, or Copy Image Location, depending on your browser.
- • Firefox and Internet Explorer use Copy Image Location. Chrome uses Copy Image URL. Safari uses Copy Image Address.
Insert the Image URL. In the index.html file, click and drag to select IMAGE URL, and then press CTRL + V to paste the URL.
Add the Destination URL. Simply remove DESTINATION URL in the index.html file and enter https://www.google.com.
- • You can choose any URL as the destination URL.
Save the HTML File.
Open the HTML file in your web browser. Right-click on the index.html file and select your preferred web browser to open it.
- • If the image doesn't appear when the browser is opened, make sure the image file name is entered correctly in the index.html text editor.
- • If you see HTML code instead of the image, it means the index.html file was saved as a rich-text file. You need to edit the HTML file with another text editor.
Learn HTML code
Understand the anchor tag. HTML code is created from opening and closing tags. The tag is the opening tag, and is the closing tag. This is called an anchor tag, used to add a link to a webpage.
- The <a tag tells the browser to render the link. The href attribute is short for "HTML reference" and the = symbol instructs the browser to take the content between the quotes and create a link. Any URL can be placed inside the quotes.
- The </a> tag tells the browser that the anchor tag is now closed.
- Anything placed between <a href=""> and </a> becomes a clickable link on the webpage. For example: <a href="https://www.google.com">Google</a> will link to Google.
Learn about the image tag. The ![]()
tag is self-closing. You can close the tag by writing https://img.tripi.vn/cdn-cgi/image/width=700,height=700/![]()
or https://img.tripi.vn/cdn-cgi/image/width=700,height=700/![]()
.
- The <img tag instructs the browser to display an image. The src attribute is short for "source," and the = symbol directs the browser to use the content between the quotes to find the image location.
- The /> instructs the browser to close the image tag.
- For example: <img src="https://www.google.com/images/srpr/logo11w.png" /> will retrieve and display the image from the specified URL.
Use this code anywhere. After understanding the information, you can use the code <a href="DESTINATION URL"><img src="IMAGE URL" /></a> to insert a clickable image link on any website that can render HTML code.
