Adobe Dreamweaver CC

How to make a hyperlink

Learn how to create hyperlinks in HTML to link to external sites, pages within your website, or links to content within a page. (Try it, 5 min)

Hyperlinks are clickable text or images that direct your visitors to other web pages, documents, media files, or another section within a page. In this tutorial, you'll learn how to select text you want to turn into a link and use the <a></a>, or anchor tags, to make the text clickable. You'll then use the href attribute to specify which site, page, or document to open.

What do I need?

Get files Sample files to practice with (ZIP, 16.3 MB)

Before you start

Download and save the project files. Open create-hyperlinks.html in Dreamweaver and view the Source Code in Split View.

Choose View and uncheck Split Vertically. This will stack Code View and Live View one above the other, making it easier to read the HTML.

Open create-hyperlinks.html

Step 1 of 3

Scroll to the section titled <!-- Start Here --> and find the first menu item, labeled ABOUT.

First, add anchor tags (<a></a>) around the words ABOUT. Then, add the href=" " attribute to the opening <a> tag. Enter the full web URL http://www.nasa.gov inside the quotes (" ").

When you link to a page outside of your website, you may want to open the page in a separate window so the user does not navigate away from your site. To do this, add the target="_blank" attribute.

HTML

<a href= "http://www.nasa.gov" target="_blank">ABOUT</a>

Link to an external web page
Link to an external web page

Step 2 of 3

A typical website consists of multiple pages or documents. Users will likely access these pages by clicking links from the main menu or other parts of a page. In this example, we'll link to gallery.html which is included in the project files. 

Add the <a></a> tags around the word IMAGES. Then, type href=" in the opening <a> tag and browse to gallery.html. Click Open.

HTML

<a href="gallery.html">IMAGES</a>

Link to another page within your website
Link to another page within your website

Step 3 of 3

Some pages of a website may have a lot of content that requires scrolling. Anchor links enable visitors to click on a link that directs them to another part of the same page. Creating anchor links is a two-step process.

First, add a unique id to the section of the page you want to link to. The practice file already has an id of section2A defined in the <div> tag at about line 42. 

Next, add <a></a> tags around the word ARTICLES in the navigation menu. Then add the href=" " attribute. Specify the exact name of the id above starting with a hashtag (#) inside the quotes (" ").

HTML

<a href="#section2A">ARTICLES</a>

Link to a section within your page
Link to a section within your page

Done!

Click Preview in Browser and choose your preferred browser to test your hyperlinks!

You will need to save your files to view the changes.

Preview in browser

Let us know what you think