Tutorial How to Easily Create Links in HTML (for Beginners)

You must be familiar with the term “link” because on various websites you can find links in the form of text or images. The question is how do I create a link in an HTML document? To answer this question, in this article I will explain how to insert links into HTML documents and other things related to links.

Links are used as links between one page to another. More specifically, the use of links in HTML is to link the HTML document to another page which is the destination address. A link is a text or image associated with a particular address. In order for you to better understand the material “Link”, consider the explanation below:

a. Use of tags

The use of links in HTML documents is characterized by the use of anchor elements, namely paired tags …… . In browsers, links are generally marked with blue text that has an underline. If you click on text or an image that contains a link, the path of the link will be opened either in the tab itself or in a new tab. The attributes in the tag are as follows:

Attribute	Function
href	Shows the location of the destination document
id	Linking style sheets (CSS) or marking locations on a page
hreflang	Indicates the language used
type	Note the content type of the destination document
rail	Describes the relationship of the current document to the destination document
rev	Describe the relationship between the destination document and the original document
charger	Specifies the character encoding of web documents
title	Provide a link title in the form of a tooltip

Here’s a simple example of using links in HTML:

       
Anda sedang belajar HTML di blog Nesaba Media
 

After you run the HTML code above in the browser it will appear as shown below:

b. Attribute id

href attribute on tag used to indicate a destination file. HTML destination path inside the tag can be followed by using the id attribute which is used to take the reader to a specific section in the document.

To make it easier to understand, try writing “#about” in the href attribute in the link and writing the id=”about” attribute in the tag

. For an example of writing code you can see below:

       
Klik Tentang untuk mengetahui informasi mengenai Nesaba Media
  






















  






















  






















  
Nesabamedia.com merupakan seputar tutorial komputer, internet dan jaringan komputer.
 

The result in the browser will be like this:

I purposely used a lot of tags
to make it easier for you to understand the function of this attribute. When you click the “About” link, you will be immediately directed to this section of the sentence “Nesabamedia.com is about computer tutorials………”.

c. title attribute

Furthermore, if you use the title attribute, the contents of the title will be displayed as a tooltip that will appear if you hover over the link. Here’s an example of writing it in HTML:

       Biografi  

After you run the code above, you will see a screen like the one below when hovering over the Biography link:

d. The difference between external links and local links

External links are used to open web pages that are on other websites (different domains), usually followed by writing the complete destination path address with the “http://” section. The following is an example of writing and using it in HTML:

       
Untuk mengetahui informasi lengkap mengenai Bill Gates, klik Biografi
 

After running the HTML code in the browser, it will look like this:

In contrast, local links are used to open web pages on the same website or document root. For example, your website address www.nesabamedia.com and on the website there is a page called learnpiano.html. If you want to create a link to that page, then you don’t need to write the full url like www.nesabamedia.com/learningpiano.html on the href attribute, simply write learnpiano.html just. An example of writing is as follows:

       
Klik link ini untuk membaca tutorial belajar piano yang benar
 

Another example like this, suppose we have a folder named LearnHTML. Inside the folder there are 2 html files and 2 folders, each of which has 1 html file. More specifically, the folder structure looks like this:

So, let’s say that I’m currently editing a file called webku.html and I want to create a link that leads to my story page.html, so I simply write the HTML code like this:

Let’s say I’m still editing my web.html file but this time I want to create a link that points to my career.html page, so the HTML code looks like this:

Still editing my webku.html file. If I want to create a link that points to the post.html page, then the HTML code is like this:

By using local links, you don’t need to write down the full address of the page you want to go to.

Make an image as a link

There are times when we want to make an image as a link for certain needs such as creating a button that leads to another page, where the button is actually made of an image. You can see an example of the HTML code below:

         
Klik tombol dibawah ini jika anda ingin membaca halaman posting.
       
 

After you run the HTML code above in the browser, it looks like this:

When you click the button image, you will be redirected to the posting.html page. Oh yeah, for writing button.jpg I put it in a folder with the html file, that’s why I just wrote image.html while the image file I named knob.

If you understand the concept of local links that I discussed earlier, you will not be confused at this step.

d. Target attribute on link

The target attribute is used to define or specify how a destination path is displayed after a link is clicked such as whether it is opened in the current tab/window or in a new tab/window. Here are the values ​​for the target attribute that you can use:

Attribute	Function
_blank	Open the destination web page in a new tab or window
_self	Opens the destination web page in the current tab or window (default)
_parent	Open the destination web page in the parent frame
_top	Opens the destination web page in the currently open tab or window, cancels all frames

Keep in mind, in HTML5, the use of “_parent” and “_top” has been deprecated because the website is now not written based on frames or framesets. In addition, these two attributes are rarely used. If you do not specify a target attribute on the link, by default the destination web page will open in the tab or window that is currently open (“_self”).

The following is an example of writing code and using the target=”_blank” attribute in HTML:

          Baca selengkapnya mengenai tutorial HTML hanya di Nesaba Media  

After you run the code above in the browser it will appear as shown below:

That’s a tutorial on how to create links in HTML along with an explanation of what tags and attributes are associated with links in HTML. The next material you need to learn is how to add images in HTML.

“If you’re doing your best, you won’t have any time to worry about failure.” H. Jackson Brown, Jr.

Share :