Posted by
Zhullyblog
on
- Get link
- Other Apps
Hello, welcome to zhullyblog. If this is your first time here , please Subscribe to Zhullyblog by Email to get latest tutorial.
HTML links
The best way to learn to code is simply doing it yourself. I indulge you to please write the code yourself and not just read.
In this tutorial, you will learn to create a link i.e move from one page to another or jumping from top to a section.
What exactly is a link?
A link allows you to view the content of another page by simply clicking on a word or group of words. The definition is kinda wierd but take it like that.
You can decide to link your PDF , image , audio or video clip to your HTML document.
Now, you create page A which list what you need to do and then create page B which has the details of page A and you only want to view the content of page B when you click on a particular statement like read more ,--- here, a link is needed. All I am saying is you need a link to view or share the content of another web page.
A link has two ends -- called anchors.
A link starts with a source anchor and points to the direction anchor.
Link Syntax
Links are specified using the <a> tag
statement.
<a href ="url"> Link text </a>
Note : the 'link text' is what will be displayed by the browser , so once you click on it you will be directed to the linked page or documents.
The default color for link is blue.
Here is a good example
statement.
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to create a link</title>
</head>
<body>
<h1>How to create a link</h1>
<a href="https://www.zhullyblogg.blogspot.com">Visit Zhullyblog</a><br/>
<a href="index.html">Page A</a>
</body>
</html>
Output
Exercise: Create a file in HTML, save it as about.html- in the file, write about yourself, your name should have <h1> tag then create a new file , save it as index.html. Then copy the first file url and replace it with the url in the syntax, also replace "Link text" with - "About me".
If the link works, please let me know in the comment section.
Creating a link to a section within a page.
When you have a long page, and you want to make it easy for your user to jump to a section in that same page, you need to create a bookmark.
This is how it works.
• First, you add the Id attribute on the elements you want to jump to then you add (#) as the value of the href attribute.
Study the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to create a link</title>
</head>
<body>
<h1>How to create a link</h1>
<a href="#example1">Read example 1</a><br/>
<p id="example1">Example 1 is simply about .......</p>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to create a link</title>
</head>
<body>
<h1>How to create a link</h1>
<a href="#example1">Read example 1</a><br/>
<p id="example1">Example 1 is simply about .......</p>
</body>
</html>
Creating download links
You can add link that will enable user to download a document on your website. The file could be pdf , an image or anything.
Study the code below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to create a link</title>
</head>
<body>
<h1>How to create a download link</h1>
<a href="file.zip">Download zip file</a><br/>
<a href="file.pdf">Download pdf</a>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to create a link</title>
</head>
<body>
<h1>How to create a download link</h1>
<a href="file.zip">Download zip file</a><br/>
<a href="file.pdf">Download pdf</a>
</body>
</html>
Screenshot
Output
Setting target for link
When you create a link, you need to be very specific on where the link will open. Do you want your link on a blank page etc.
To specify this, you use the target attribute tells the browser where to open the link. A target starts with an underscore (_) character.
Let's talk about the target.
•_blank
This opens the document in a new window or tab
• _parent
Opens the linked document in the parent window
• _top
Opens the document in a full browser windeo
•_self
This opens the link in the page itself
Let's take a quick example on setting a link target.
statement.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to create a link</title>
</head>
<body>
<h1>How to create a link</h1>
<a href="file.zip" target="_top">Download zip file</a><br/>
<a href="www.zhullyblogg.blogspot.com" target="_blank">Visit Zhullyblog</a>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to create a link</title>
</head>
<body>
<h1>How to create a link</h1>
<a href="file.zip" target="_top">Download zip file</a><br/>
<a href="www.zhullyblogg.blogspot.com" target="_blank">Visit Zhullyblog</a>
</body>
</html>
Exercise: Create two files in HTML. The first will have the definition of a computer and it's uses while the second will display a question-- what is a computer. Then in the second file, create a link with the first file to display the answer.
Follow us on
Please share
HTML
JavaScript
PHP
JAVA
Comments
Post a Comment