Blog for Learning

This blog contains lesson material, material summary, questions and answers, definitions, types and examples, and others.

Advertisement

Powered by Blogger.

Visitors

Flag Counter

Pages

Learning HTML: How to Make Links to Connect Pages

How to make links in HTML
A link is an html element that functions to connect a web page to another web page.
The link is divided into two:
  1. Internal Link : is a link that goes to the web domain itself;
  2. External Link : is a link that leads to another domain.
Examples of internal links:
Example of Internal Link
Examples of external links:
Examples of External Links
Links in HTML dalat are made with tags <a>then given attributes hrefto determine the address to be addressed.
Example:
<a href="about.html">About us</a>
That is, the link will go to the About us page that is in the file about.html.
This is an example for an internal link. Then what about external?
We just enter the URL address like this:
<a href="https://www.facebook.com/petanikode">Facebook</a>
Then when the link is clicked, we will open the https://www.facebook.com/petanikode page .
In addition to the attributes hrefthere are also other attributes such as targettitlerel, and others.

Using the Target Attribute

This attribute functions to tell the link, where to open the target. Suppose the target is in a new window or a new tab, then the target attribute must be filled with blankor _blank.
<a href='https://www.facebook.com/petanikode' target='blank'>Facebook</a>
Besides these attributes can also be filled with _parent_self_topand the name of a frame.
Example:
<a href="https://www.petanikode.com" target="tampil">Sebuah Link</a>
<iframe name="tampil">
</iframe>
As a result, the link will be opened in a frame element that has attributes name="tampil".
Image with the target iframe

Using the Title attribute

This attribute is used to make tooltips. Tooltips are additional information that will appear when the link is touched by the pointer.
<a href="mailto:dian@petanikode.com" title="kirim email ke Admin">Hubungi Saya</a>
The link above will call the mail client application, because we fill in the value hrefwith mailto:dian@petanikode.com.
The result: Contact me
Dead end links are usually not clickable, or the link won't go anywhere.
How to make this link, we simply fill in the attribute hrefwith a fence sign ( #) or a hash mark and an exclamation point ( #!).
Example:
<a href="#">Link Buntu</a>
<a href="#!">Link Buntu 2</a>
Actually the purpose of your fence in the attribute hrefis that it will go to an element with a particular id.
Example:
For example, if you want to go to the top page, the link will look like this:
<a href="#top">Ke Atas!<a>
The result: Up!
Value #topis the value to go to the top of the page.
Another example, we will try to go to a certain element with ID menggunakan-atribut-target
<a href="#menggunakan-atribut-target">Cara Menggunakan Atribut Target</a>
Value #menggunakan-atribut-targetis the ID of the element <h2>on this page.
This can be seen with Inspect Element .
Inspect Element to see the ID element
One of the uses of Link is to call the Javascript function. Usually the javascript function name is added to the attribute onclick and href.
Example:
<a href="javascript:alert('Helloo!!')">Klik Aku</a>
<a href="#!" onclick="alert('Yoi!!')">Klik Saya</a>
The result: Click Me | Click me
How do you make a picture as a link?
Easy…
We only need to wrap elements <img>into elements <a>So he will be a link.
Example:
<a href="/about/"><img src="/img/logo.svg" /></a>
The result: 
I use a vector ( .svgfile on the attribute srcin the element <img>We can also use other formats such as pnggifjpg, etc.

The final word…

Those are some examples of Link usage. If something is asked, please submit it via comments.
Have a good study.

0 Komentar untuk "Learning HTML: How to Make Links to Connect Pages"

Silahkan berkomentar sesuai artikel

 
Template By Kunci Dunia
Back To Top