CodeDragon circular icon

CodeDragon might not work properly for you...

CodeDragon is designed to work with Google Chrome and Firefox, and a few features of CodeDragon have been found not to work properly with other web browsers. To make sure you get the best experience when using CodeDragon, please download the latest version of Google Chrome or Firefox and try again. You can install Google Chrome for free here, and Firefox here.

Or, you can continue anyway.

Introduction: Using links

Introduction/2

Without links, where would the web be? Use links to take your user to a different page or website.

Written by Pal Kerecsenyi

PreviousExitNext

Introduction: Using links

Ad Ethical + impactful advertising with tiny prices  Advertise on CodeDragon 
PreviousExitNext
Ad Ethical + impactful advertising with tiny prices  Advertise on CodeDragon 

Click here

The term 'hyperlink' (the full name for 'link') was first used in 1965 to describe a 'trail' of pages with related information on them. Nowadays, a website simply can't exist without them. Fortunately for you, hyperlinks are one of the easiest parts of HTML.

The <a> tag

The tag used for hyperlinks is extremely simple. It's just <a>. Surround some text with this tag, and you have yourself a link. Now you just need to tell the browser where the link should take the user.

The href attribute

The link tag has one important/special attribute, called href. It's used to define a URL that you want the link to take the user to. Here's how you use it:

Your task

Now that you know all about hyperlinks, try making your own! Don't worry, we've done most of the hard work for you by joining some blocks together.

  1. Drag the big blue basic structure block into the workspace. Change the title to anything you want.
  2. Drag the second yellow block into the <body> .
  3. Type some text into the text block inside the hyperlink. This can be anything you want.
  4. Change the text of the href to make it link to your favourite website.
  5. Click on the link in the preview and see what happens! (don't worry, all CodeDragon links open in a new tab)

End of tutorial

PreviousExitNext