Adding Images and Links in HTML

If you haven’t already completed the first exercise, please go to Getting Started With HTML.

In this section, we’ll learn how to add images and links to an HTML page. If you have any questions, or you get stuck, please ask the instructor for assistance. Have fun!

At this point in the workshop, you should have an about.html page with some paragraphs, headers, and a list.

You may have added some additional content and HTML markup as well, and that’s encouraged because we’re here to tinker!

Your about.html document should look something like this:

example page with list

Adding images

  • We are going to add some images to our about.html page. What this is means, really, is that we are going to create a link to an image file that you store in another folder.
  • The link you provide in your about.html page tells browser where to go to retrieve the image file and display it.
  • To help keep things as tidy as possible, we are going to keep all our images in a separate folder called “images.”
  • In your html_workshop folder, create a new folder and name it exactly as follows: images.
  • We will now add an image to the images folder.
  • You can find an image on the Internet, or right-click with your mouse or trackpad on the image below, and then save it to the images folder.

zuko

Get to know the image <img> tag

  • <img> is the tag used to show images on an HTML webpage.
  • Notice that there is no closing, or forward slash, in this tag. This is because <img> is what’s called a self-closing tag, or a void element (↪).
  • You may see it written as <img/> to show that it is self-closing, but this is just for human readability.
  • Both <img> and <img/> are valid, so the important thing is to be consistent.

Add an <img> tag to your HTML page

  • Somewhere between the <body></body> tags, add the following: <img src="image.jpg" alt="image description">.
  • The src part of the img tag means “source,” or the location your HTML browser will look to display the image. My image, zuko.png, is stored in the images folder.
  • In the src part of the img tag you will see double quotation marks " ". It is between these quotation marks that we put the “filepath” to our image file, which creates a link between our image stored in the images folder and our about.html webpage.
  • The path in my case is images/zuko.png. If you used another image file, then you would replace zuko.png with your file’s name.
  • Note that if we ever move our image file to another folder we would break the link between the image and our HTML page.
  • The alt part of the img tag means “alternate text” for an image. What you put between the quotation marks will be displayed when the image fails to load. This text is also used by people who may have visual disabilities and who use screen reader software (↪).
  • Add your filepath and alternate text to your <img> tag.
  • When you have added your filepath and alternate text, you should have an <img> tag that looks something like this:
    <img src="images/zuko.png" alt="Zuko headshot with a frowning expression">
  • Note that my image is saved as a .png file but <img> accepts various types, the most common other ones being .jpeg (or .jpg), .svg, and .gif.
  • Here is an example, in my about.html file, of a complete <img> tag:

image tag example

  • Here is what the above <img> tag example looks like in a browser:

img tag browser example

  • Save your about.html file and refresh your browser to see your changes.
  • Hopefully, you will be able to see your image. If not please ask your instructor for help as needed.

HTML links are fundamental to websites. Links literally link your web page to other web pages and other forms of content. This content can be other websites, a different page within your own website, or even a different spot on the same web page. Links define relationships between content.

  • Here is an example of a complete hyperlink tag (↪) for an Internet URL (Uniform Resource Locator) web address: <a href="https://www.wikipedia.org/">Wikipedia</a>.
  • The content between the open and closed <a> tags will appear as a clickable link in your browser. In the example given, the word “Wikipedia” would appear as the clickable hyperlinked text.
  • The <a> in the hyperlink tag defines it as a hyperlink element, and the href is the attribute that indicates the link’s destination.
  • Hyperlinks come in flavours and here are the basic four:
    • “external links” link you to other locations outside of your directory, such as other webpages or websites. These links always use a full URL (the whole https://www part). Example: <a href="http://www.wordpress.com/my-webpage.html">clickable text</a>.
    • “internal links” link you to other locations within your directory, or folder(s), such as other webpages in your own website. These links do not use the full URL. Example: <a href="about-me.html">clickable text</a>.
    • “anchor links”, or hashtag links, “jump” you to locations in the same webpage. These are helpful in pages with a lot of text. You can, for example, create a table of contents at the top of your HTML page that jumps to sections (or text) within that same page. Example: <a href="#anchor-location">clickable text</a>.
    • “email links” link you to an email address. When you click on these, they tell your computer to open up whatever email program you are using. Example: <a href="mailto:some-email@yoursite.com">Email me</a>.

Add one or more hyperlinks to your HTML page

  • To get a feel for how hyperlinks work, choose one (or more, if you have time) of the following three examples to add to your about.html page.
  • This type of link takes you to somewhere outside of your website, such as to another website or webpage on the Internet.
  • The process to create an external link is identical to an internal link, except that the external link requires a full URL, the whole https://www part. This type of full URL is known as an “absolute” URL (↪).
  • In your about.html file, choose some text to turn into a link.
  • Wrap your selection of text in the following tags:

<a href="your web URL here">your link text here</a>

  • Add your full URL between the quotation marks, which includes the whole https://www part.
  • Important: Make sure that you do not add any accidental spaces before or after your URL.
  • Here’s my example URL:

<a href="https://www.w3schools.com/tags/att_a_href.asp">your link text here</a>

  • Save your HTML file and refresh your browser to see if your new link works.
  • This type of link jumps us to another HTML page in our directory.
  • To test this type of link, we need to create another HTML page to jump to.
  • In your html_workshop folder, create a new HTML page called index.html. This is the file to where we are going to link from our about.html page.
  • As with any new HTML page, we need to add at least <!DOCTYPE html> at the top of the page and some other tags to get us started.
  • Copy/paste the following into your index.html page (and be sure to save the file afterwards):
<!DOCTYPE html>
<html>
<head>
    <title>Your page title here</title>
</head>
  <body>
    <h1>Your heading here</h1>
    <p>Your paragraph of text here.</p>
  </body>
</html>
  • Let’s go back to the about.html page and add an internal link to the index.html file.
  • In your about.html file, select some text to turn into a link and wrap that text in the following tags:

<a href="index.html">your link text here</a>

  • Note that we only need to link to another location within the same directory, so notice that we do not need to add the full URL, as in the https://www part. We only add the file name between the double quotation marks.
  • In my example, I want my readers to know that I have another webpage on my website that they can read:

Be sure to check out <a href="index.html">my Index page</a> for more reading!

  • Save your about.html file and refresh your browser to see if your new link works.
  • This type of link jumps us to another place in the same page.
  • To begin this process, add some placeholder text of some kind to your about.html page.
  • Important: Add enough content so that you have to scroll down in Sublime to get to the end of it.
  • You can type multiple paragraphs on your own, or use placeholder text called lorem ipsum (↪), which is often used by web developers for creating website examples. People like to have fun inventing their own versions of lorem ipsum, and my current favourite is The Lord of The Rings lorem ipsum generator (↪).
  • Wrap a selection of text in a header tag of your choice and give it a unique id. Think of this as your named anchor. The <a> link we eventually create will link to this unique id anchor. In my example, I have wrapped the heading text of “Bilbo’s speech to the Council” in an h2 tag and assigned it a unique id of bilbo-speech:

<h2 id="bilbo-speech">Bilbo's speech to the Council</h> <p>I used to think that they were things the wonderful folk of the stories went out and looked for, because they wanted them, because they were exciting and life was a bit dull, a kind of a sport, as you might say. But that’s not the way of it with the tales that really mattered, or the ones that stay in the mind. Folk seem to have been just landed in them, usually their paths were laid that way, as you put it.</p>

  • Note that each anchor has to have a unique name. In my example, the anchor’s id is “bilbo-speech”. Any additional anchor on this same page would need to have a different name. For example, if I wanted to link to another of Bilbo’s speeches, I would change that anchor’s id to something like “bilbo-speech-2”.
  • Create an <a> link to your anchor’s unique id. This will be the clickable link that jumps you to the unique id you just created.
  • You can add this link anywhere on the HTML page, but add your link toward the top of your HTML page, but within the <body></body> tags. What we are doing in my example is making my h2 become a link that jumps us to the heading of “Bilbo’s speech to the Council.”
  • Here is what my link looks like:

<h2 href="#bilbo-speech">Read Bilbo's speech to the Council</h2>

  • Save your about.html file and look at it again, after you refresh your browser, to see if your anchor link works.
  • In my example, the text of “Read Bilbo’s speech to the Council” now jumps me to start of Bilbo’s speech.
  • Note that if your anchor link does not appear to “jump” you anywhere, it could be that there is not enough content on your page. In other words, the link could be working, but the page does not need to scroll down to get you to the link. You can solve this problem by adding a bunch of placeholder text to your page, so that you have to scroll to see the end of it.
  • This W3Schools test-space (↪) shows a working anchor link so that you can get a sense of how it is supposed to work, if you’re having trouble with yours.

Excellent! Now you know how to add images and links to a webpage! Let’s move on the next part of the workshop….

NEXT STEP: Adding CSS