Web Design

Links and Images

How to add hyperlinks and images to a webpage

Creating a Link

Creating a link is just as simple as writing a paragraph. Below is an example of a link.

    <a href=”https://www.google.com”>This is a link!</a>

The <a> stands for anchor. Inside of the <a>, there is a href=”https://www.google.com”. This allows us to put in links. Replace "google" with anything you want. Inside of the actual anchor tag, we can add any of our paragraphs or heading tags, shown below.

    <a href=”https://www.google.com”><p>Paragraph Link</p></a>
    <a href=”https://www.google.com”><h1>Heading Link</h1></a>

Adding an image

Adding an image is different than writing text or creating links. All you have to do is write the code below.

    <img src="cheetah.png">

When you create an image, you just need to place a <img> and give it an image source. Since nothing can go inside an image, you don’t need to close the image tag. You can use image addresses from the internet, or upload images to your Neocities dashboard.

Doing both

If you want to do both, just do below:

    <a href=”https://en.wikipedia.org/wiki/Cheetah”><img src=”cheetah.png”></a>

It's that easy.

In the next lesson, we will explore different types of lists in HTML.

chevron_up