What we learned last week …

We have learned to add a hyperlink using an ANCHOR tag –

<a href="url" title="title">link text</a>

Example:

www.lds.org homepage

<a href= "http://www.lds.org" title= "Go to the LDS.org home page">The Church of Jesus Christ of Latter-day Saints</a>

… and this week we learned …

In a separate presentation, we learned to add an IMAGE tag –

<img src="url" alt="some_text">

Example:

Armor of God

<img src= "http://www.prophetpaintings.com/ files/ 18001/ uploaded/AoG-Close-Lrg.jpg" alt= "AoG-Close-Lrg (460 x 575)">

Putting them together …

  • Adding an IMAGE inside of an ANCHOR is simple.
  • We will add an image to our website and include a hyperlink “under” the image
  • In this instance, we will use an image that is NOT from the website, but the steps remain essentially the same

Note: For this presentation, we will assume that you are using NetBeans IDE 8.0 as your HTML editing software. Other similar applications may use a different layout.

Gather your ingredients …

Find an image you like and save it in the IMAGES directory for your project in NetBeans

Be sure to give it a unique title

Save Image
IMG_eyjafjallajokull_iceland.jpg

Add ingredients and stir …

Nest the image tag INSIDE the anchor tag

<a href="url" title="title">link text<img src="url" alt="some_text"></a>

Insert the href URL for the target web page and add the title and link text

<a href= "http://www.icelandinpictures.com" title= "Iceland In Pictures">See Iceland<img src="url" alt="some_text"></a>

Add the path to the image

<a href= "http://www.icelandinpictures.com" title= "Iceland In Pictures">See Iceland<img src= "/images/IMG_eyjafjallajokull_iceland.jpg" alt= "Eyjafjallajokull - Iceland"></a>

The Final Product …

Final Product

More to Know …

  • Sources for more information about using images as hyperlinks:

Quick Links