If we create another page of a website, we can link to it within our website using the <a href> </a> tags.
e.g.
<a href="about_me.html">About me</a>
If the file ‘about_me.html’ is in another folder above the root, we need to provide that folder name.
<a href="/mysitepages/about_me.html">About me</a>
If we are providing a link to an external site, it’s good, when the person clicks on the link, for a new tab to open in the browser, so they don’t easily navigate away from your site, this is done using the target attribute.
<a href="www.google.com" target="_blank">Google</a>
Instead of text for a link, we can use CSS to create a container which then becomes the actual link providing it’s in between the opening <a href> and the closing </a>
index.html
<!DOCTYPE html> <html> <head> <title>My website</title> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Merriweather:300i,400,700" rel="stylesheet"> <link rel="stylesheet" a href="browser-reset.css"> <link rel="stylesheet" a href="style.css"> </head> <body> <h1>I'm creating a link below</h1> <a href="http://www.google.com" target="_blank">Google</a> <a href="http://www.bing.com" target="_blank"> <div> </div> </a> </body> </html>
style.css
H1 { font-family: 'Merriweather', serif; line-height: 50px; font-size: 20; font-weight: 400; } div { height: 100px; width: 100px; background-color: red; }
Gives the page looking like:

Clicking on the text ‘Google’ opens a new tab and takes the user to the Google page. Clicking on the red box, which is now behaving exactly like a link, opens a new tab with the Bing website in it.