Creating hyperlinks

Inserting hyperlinks

Markdown

1. Click on the hyperlink icon.

2. A pop up of "Insert hyperlink" with 2 fields, Text and Link, will appear. Text is what you will see on the page while the link is the url that it will be directing to when the user clicks on it.
3. After clicking save, a hyperlink in the Markdown format will appear in your editor page.

Markdown format

The format for markdown hyperlinks goes like this:
[Isomer Guide](https://guide.isomer.gov.sg).

To create a link, enclose the link text in brackets (e.g., [Isomer Guide]) and then follow it immediately with the URL in parentheses (e.g., (https://guide.isomer.gov.sg)).

Picture hyperlink

1. To create a picture hyperlink, first add the picture following the steps here. Your markdown code should look like this:
   
2. Next copy and paste this into the Text portion of the hyperlink. After you click save, the hyperlink code shoudl appear to be embeded between the brackets like this:
   [](https://guide.isomer.gov.sg)
3. On your page, it will appear like this:
   [](https://guide.isomer.gov.sg/)

HTML

Image with hyperlink The code we used here is html for images with hyperlink. Html codes are usually characterized by sets of “<” and “>” brackets we call tags.

Inserting hyperlink

1. To insert a hyperlink with html code, we use the <a> tag. We will then direct it to the url by using href attribute:
   <a href="">
2. We would like the link to direct us to https://guide.isomer.gov.sg/. Hence, we will include the URL in between the " ":
   <a href="https://guide.isomer.gov.sg">
3. Next we will add the text or images that we would like to appear on the webpage and enclose it with a closing tag </a>. For e.g. I would like "Click here" to appear on the page.
   <a href="https://guide.isomer.gov.sg">Click Here</a>
4. On your page, it will look like this: Click here

Picture hyperlink:

To add the hyperlink to images, simply have the whole images tag enclosed within the hyperlink tag.

<a href=”https://guide.isomer.gov.sg”><img src=”/images/chicken.jpg/”></a>

Opening link in a new tab:

If you would like the link to open in a new tab, you can use the target attribute and set it to _blank.

For e.g. if you would like <a href=”https://guide.isomer.gov.sg”>Click Here</a> to open in a new tab. It will look like this:

<a href=”https://guide.isomer.gov.sg” target=_blank”>Click Here</a>

On your page, it will appear like this:
Click here

Creating a hyperlink to a particular section

If you will like to create a hyperlink to a particular section of a page, you can look at anchors.