Add a Link to a Picture

With a single line of HTML code, you can add a clickable image to nearly any website. There are two things you'll need for this to work. You'll need the URL for an image, and you'll need the URL of a website.

Steps

Writing the HTML Code

  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.
  2. Copy and paste the standard HTML code. Select and copy the HTML code below, and then paste it into your open index.html file.
  3. Find an image's URL. 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.
  4. Add the image URL. 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.
  5. Add the destination 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.
  6. Save the HTML file.
  7. Open the HTML file in a web browser. 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.

Understanding the HTML Code

  1. Understand the anchor tag. HTML code is made up of open and closed tags. The <a href=""> tag is the open tag, and </a> is the closed tag. It's called an anchor tag and is used to add links to a web page.[1]
    • The <a tells a browser to render a link. The href is short for HTML reference, the = tells the browser to take everything between the " " and make it a link. Any URL can go between the two quotation marks.
    • The </a> tells a browser that the anchor tag is closed.
    • When you add text between <a href=""> and </a> it will make that text a clickable link on a web page. For example, <a href="https://www.google.com">Google</a> would create a link to Google.
  2. Understand the image tag. The <img> tag is a self closing tag. You can close it by writing <img src="" /> or by writing <img src=""></img>.[2]
    • The <img tag tells a browser to render an image. The src is short for source, the = tells the browser to take everything between the " " and get the image from that location.
    • The /> tells a browser to close the image tag.
    • For example, {{samp[|<img src="https://www.google.com/images/srpr/logo11w.png" />}} would get the image at that URL, and then display it in a web browser.
  3. Use this code anywhere. Now that you know this code, you can use <a href="DESTINATION URL"><img src="IMAGE URL" /></a> to add clickable images to any webpage that can render HTML code.

Related Articles

Sources and Citations

  1. ↑ http://www.w3schools.com/html/html_links.asp
  2. ↑ http://www.w3schools.com/html/html_images.asp

You may like

Retrieved from "https://kipkis.com/index.php?title=Add_a_Link_to_a_Picture&oldid=262856"