Links and Images

Text is nice. But if we’re already creating a website, we’ll also want to include links and images. Here’s how:

Links

Links forward users to different websites. They have two main parts: The page that we want to link to and the clickable text that we want to display.

<a href="https://web.site">Clickable Text</a>

Becomes Clickable Text (Don’t click on it though–web.site does not exist.)

href stands for “hypertext reference,” the place that we’re linking to. <a></a> stands for “anchor” element.)

To use a working example we can link to Wikipedia in the following way:
<a href="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</a>

URLs and Relative Paths

Here’s something fun: We can not just link to other websites, we can also link to files in our repository. These are called “relative paths,” because the link is relative to our current file.

Let’s say that I want to create a link to my landing page, index.html. If you look at our repository, you can see that links.html (the file I’m currently editing) and index.html are in the same directory. In this case, if I want to link to index.html, I can create a link like this:
<a href="index.html">Landing Page</a>
This becomes: Landing Page
If you hover over the link, you can see that Github automatically turns the relative path index.html into the URL https://<username>.github.io/index.html

Relative links work with files in subfolders as well. For example, all of the screenshots used in the tutorials are in the “images” and then “tutorials” folder." If we want to link to one of the images in that folder, we can create a link like this:
<a href="images/tutorials/updated_website.png">Tutorial Image</a>
This becomes: Tutorial Image

Images

Images work very similar to links. The general syntax is
<img src="https://image.url"></img>

For example, you can find an image of a cute puppy on the Wikipedia Commons, hosted with a Creative Commons license.

If we want to display the image, we can do so like this:
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/The_Puppy.jpg/800px-The_Puppy.jpg"></img>

Just like links, images can use relative paths or absolute URLs. The images folder of our repository contains another puppy image from the Wikipedia Commons called "puppy.jpg." To display it, we can use a relative path:
<img src="images/puppy.jpg"></img>

Finally, to make your website accessible, you should include a description of each image in the image tag, which helps people who use screen-readers understand what gets displayed in the image. Adding a description works like this:
<img src="images/puppy.jpg" alt="An Image of a Puppy"></img>

I suggest that you play around with links and images on your landing page (index.html). Once you’re done, we’ll move on to the next section: creating and deleting new pages.