8 Pengaturan Utama Penggunaan Link pada Dokumen HTML

Waktu Publikasi
Link adalah koneksi dari satu sumber web terhadap sumber web lainnya. Sebuah link memiliki dua tujuan akhir, anchor dan direction atau tujuan. Link dimulai dari sumber anchor (jangkar) dan menuju ke titik destinasi dari anchor, yang mungkin saja berupa sumber web lain seperti gambar, video, potongan suara, program pada html dokumen atau elemen yang terdapat pada html dokumen.

Sintak Link Html
Link secara spesifik pada html menggunakan tag "a".
<a href="url">Text link</a>

Penjelasan Sintak:
href: atribut href digunakan untuk mengarahkan ke alamat destinasi dari link yang digunakan.
Text link: text link adalah bagian yang tampak dari link.

Input:

<!DOCTYPE html>

<html>

 

<h3>

Contoh penambahan link

</h3>

 

<body>

<p>

Klik link berikut ini:

</p>

 

<a 

href = "https://elfanmauludi-tik.blogspot.com/">

blog ElfanMauludi

</a>

</body>

 

</html>

Output:

Klik link berikut ini:

blog ElfanMauludi

Internal Link adalah tipe dari hyperlink yang targetnya adalah sumber seperti gambar atau dokumen pada satu alamat website atau domain.

Input:

<!DOCTYPE html>

<html>

 

<h3>

Contoh internal link dan external link.

</h3>

 

<body>

<p>

<a 

href="https://www.elfanmauludi.id/p/about-us.html">

Halaman profil blog ElfanMauludi

</a>

</p>

 

<p>

<a 

href="https://elfanmauludi-tik.blogspot.com/">

blog ElfanMauludi

</a> 

</p>

</body>

 

</html>

Output:

Halaman profil blog ElfanMauludi

blog ElfanMauludi


Mengubah Warna Link pada HTML
Perbedaan tipe dari tampilan link pada format berbeda seperti diperlihatkan berikut ini:
  • satu, Tampilan link yang belum dikunjungi memiliki garis bawah dan warna biru secara default.
  • dua, Tampilan link yang telah dikunjungi memiliki garis bawah dan warna purple secara default.
  • tiga, Link aktif memiliki garis bawah dan warna merah secara default.

Tampilan dari warna-warna default pada link dapat diubah dengan menggunakan CSS.

Input:

<!DOCTYPE html>

<html>

 

<head>

<style>

 

a:link 

{

color: red;

background-color: transparent;}

 

a:visited 

{

color: green;

background-color: transparent;}

 

a:hover 

{

color: blue;

background-color: transparent;}

 

a:active 

{

color: yellow;

background-color: transparent;}

 

</style>

</head>

 

<body>

 

<p>

Mengubah warna default dari link.

</p>

 

<p>

Link yang dikunjungi

</p>

<a 

href="https://elfanmauludi-tik.blogspot.com/">

blog ElfanMauludi

</a>

 

<p>

Link

</p>

<a 

href="https://facebook.com">

facebook

</a>

 

<p>

efek hover

</p>

<a href="https://elfanmauludi-tik.blogspot.com/">

blog ElfanMauludi

</a>

 

</body>

 

</html>


Atribut Target pada Link
Atribut target digunakan untuk menunjukkan lokasi dimana link dokumen dibuka. Pilihan berbeda dapat digunakan pada atribut target yang ditandai berikut ini:

Input:

<!DOCTYPE html>

<html>

 

<body>

 

<h3>

Variasi pilihan yang tersedia

dalam atribut target

</h3>

 

<p>

Jika target diatur ke tipe

"_blank", maka link akan

membuka alamat tujuan pada tab

atau window baru pada browser.

</p>

<a 

href="https://elfanmauludi-tik.blogspot.com/" 

target="_blank">

blog ElfanMauludi

</a>

 

<p>

Jika atribut diatur ke tipe 

"_self", maka link akan

membuka alamat tujuan pada tab

atau window yang sama pada

browser.

</p>

<a 

href="https://elfanmauludi-tik.blogspot.com/" 

target="_self">

blog ElfanMauludi

</a>

 

<p>

Jika atribut diatur ke tipe

"_top", maka link akan membuka

alamat tujuan pada full

window.

</p>

<a 

href="https://elfanmauludi-tik.blogspot.com/" 

target="_blank">

blog ElfanMauludi

</a>

 

<p>

Jika atribut diatur ke tipe

"_parent", maka link akan

membuka alamat tujuan pada

parent frame.

</p>

<a 

href="https://elfanmauludi-tik.blogspot.com/" 

target="_blank">

blog ElfanMauludi

</a>

 

</body>

 

</html>

Output:

Variasi pilihan yang tersedia dalam atribut target

Jika target diatur ke tipe "_blank", maka link akan membuka alamat tujuan pada tab atau window baru pada browser.

blog ElfanMauludi

Jika atribut diatur ke tipe "_self", maka link akan membuka alamat tujuan pada tab atau window yang sama pada browser.

blog ElfanMauludi

Jika atribut diatur ke tipe "_top", maka link akan membuka alamat tujuan pada full window.

blog ElfanMauludi

Jika atribut diatur ke tipe "_parent", maka link akan membuka alamat tujuan pada parent frame.

blog ElfanMauludi


Menggunakan Gambar Sebagai Link pada HTML
Gambar dapat digunakan sebagai link untuk alamat url spesifik.

Input:

<!DOCTYPE html>

<html>

 

<body>

 

<h3>

Menggunakan image sebagai link.

</h3>

 

<p>

Klik untuk mengunjungi blog ElfanMauludi.

</p>

<a href="https://elfanmauludi-tik.blogspot.com/">

<img 

src="elf_200X200.jpeg" 

alt="blog elfanmauludi"

style="width:80px;height:80px;border:0">

</a>

 

</body>

 

</html>

Output:

Menggunakan image sebagai link.

Klik untuk mengunjungi blog ElfanMauludi.

blog elfanmauludi

Membuat Link Bookmark untuk Halaman Website
Sebuah bookmark adalah link yang bisa digunakan untuk menuju ke tujuan spesifik dari laman web. Bookmark sangat berguna jika sebuah laman web sangat panjang.

Tahap untuk Membuat Bookmark adalah:
satu, Gunakan atribut id, ciptakan bookmark.
<h2 id="T17">Topic</h2>

dua, Tambahkan jatah spesifik dari laman web menuju bookmark.
<p><a href="#T17">Jump to Topic 17</a></p>

Input:

<!DOCTYPE html>

<html>

 

<body>

 

<p>

<a href="#T11">

Jump to Topic 11

</a>

</p>

 

<p>

<a href="#T17">

Jump to Topic 17

</a>

</p>

 

<p>

<a href="#T20">

Jump to Topic 20

</a>

</p>

 

<h2>Topic 1</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 2</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 3</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 4</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 5</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 6</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 7</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 8</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 9</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 10</h2>

<p>

paragraph 1

.....

</p>

 

<h2 id="T11">Topic 11</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 12</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 13</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 14</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 15</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 16</h2>

<p>

paragraph 1

.....

</p>

 

<h2 id="T17">Topic 17</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 18</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 19</h2>

<p>

paragraph 1

.....

</p>

 

<h2 id="T20">Topic 20</h2>

<p>

paragraph 1

.....

</p>

 

</body>

 

</html>

Output:

Membuat Link Download pada HTML
Sebuah teks link dari sebuah pdf, doc, ataupun file zib dapat dibuat sebagai suatu laman download.

Input:

<!DOCTYPE html>

<html>

 

<h3>

Membuat link download

</h3>

 

<body>

<a href = "https://drive.google.com/file/d/1IH5EA4-bOe6MkifoYLxu4qHg7lYsBCwk/view?usp=sharing">Download PDF File</a>

</body>

 

</html>

Output:

Membuat link download

Download PDF File
Dipublikasikan Oleh Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia
Labels:

Komentar

  1. AnonimSenin, 24 Mei 2021 07.51.00 WIB

    Apa yang dimaksud dengan link pada html?

    BalasHapus
    Balasan
    1. AnonimSenin, 24 Mei 2021 07.51.00 WIB

      Link atau tautan merupakan object HTML yang memungkinkan user untuk melompat ke lokasi URL lain ketika dilakukan klik pada link yang dituju. Link juga dapat dilampirkan dalam bentuk teks, gambar, ataupun elemen lainnya pada HTML. Kebanyakan link atau tautan adalah berwarna biru, karena warna tersebut merupakan warna standar yang digunakan browser web untuk menampilkan tautan.

      Hapus
    2. AnonimSenin, 24 Mei 2021 07.53.00 WIB

      Pada situs website, hyperlink atau link adalah item yang berupa teks atau tombol yang mengarah ke lokasi lainnya. Ketika user mengklik sebuah link, maka link tersebut akan membawa user ke target link tersebut, yang bisa berupa halaman web, dokumen, ataupun konten online lainnya. Situs website juga menggunakan hyperlink sebagai cara untuk menavigasi konten secara online.

      Hapus
  2. AnonimSenin, 24 Mei 2021 07.53.00 WIB

    Apakah warna biru untuk hyperlink bisa diubah dengan warna lainnya?

    BalasHapus
    Balasan
    1. AnonimSenin, 24 Mei 2021 07.54.00 WIB

      Bisa, dengan menggunakan kode CSS,

      seperti pada blog ini digunakan warna hijau sebagai warna default untuk hyperlink.

      Hapus

Posting Komentar

*Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

Waktu Publikasi
Gambar
Enkapsulasi didefinisikan sebagai pembungkusan data dalam satu buah unit. Enkapsulasi adalah mekanisme yang mengikat code program dan data yang dimanipulasi secara bersamaan pada bahasa pemrograman Java. Cara lain untuk berpikir mengenai enkapsulasi adalah upaya untuk melindungi atau sebagai perisai proteksi yang mencegah data untuk diakses oleh pihak luar.
Tampilan Selengkapnya »

6 Contoh Program Method Overloading pada Java

Waktu Publikasi
Gambar
Overloading  memungkinkan berbagai  method  yang berbeda untuk memiliki nama yang sama, tetapi dengan  signature  yang berbeda pada bahasa pemrograman Java.  Signature  dapat berbeda oleh angka dari input parameter atau tipe dari input parameter atapun juga keduanya.  Overloading  juga berkaitan dengan  compile time  (atau  static )  polymorphism .
Tampilan Selengkapnya »

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

Waktu Publikasi
Gambar
Penelitian adalah upaya dalam mencari kebenaran mengenai permasalahan atau kejadian unik dengan menggunakan metode penelitian. Secara umum penelitian bertujuan untuk mengembangkan khasanah ilmu pengetahuan dengan memperoleh fakta baru, sehingga dapat disusun teori konsep, hukum, kaidah, dan metodologi yang baru. Penelitian dikelompokkan ke dalam beberapa jenis berdasarkan kriterianya, diantaranya penelitian berdasarkan manfaat dan tujuannya, penelitian dasar ( basic research ) dan penelitian terapan ( applied research ). Bedasarkan jenis data yaitu, penelitian kuantitatif dan penelitian kualitatif.  Berdasarkan pendekatan waktu  yaitu, penelitian  Cross Sectional  dan penelitian  Longitudinal .
Tampilan Selengkapnya »

3 Jenis Utama Looping pada Java

Waktu Publikasi
Gambar
Looping  pada bahasa pemrograman Java adalah fitur yang digunakan untuk memfasilitasi eksekusi program dari sekelompok instruksi atau fungsi secara berulang ketika beberapa kondisi tertentu yang menjadi syarat adalah bernilai benar. Java menyediakan tiga cara untuk melakukan eksekusi  looping  pada program. Dimana semua cara tersebut menyediakan fungsi dasar yang sama, dimana perbedaannya hanya terdapat pada sintak dan kondisi waktu eksekusi.
Tampilan Selengkapnya »

Perbedaan stdio.h dan stdlib.h pada Bahasa C

Waktu Publikasi
Terdapat dua file header penting yang digunakan dalam bahasa C. Pertama, "<stdio.h>" adalah file header untuk standar input dan output , dan kedua "<stdlib.h>" adalah header file untuk standar library . Salah satu cara mudah untuk membedakan kedua file header tersebut adalah "<stdio.h>" mengandung deklarasi dari printf() dan scanf() , sementara "<stdlib.h>" mengandung deklarasi dari malloc() dan free() . Secara umum, perbedaan kedua file header tersebut adalah "<stdio.h>" mengandung informasi header untuk file yang berkaitan dengan fungsi nilai input output pada program, sedangkan "<stdlib.h>" mengandung informasi untuk fungsi alokasi memori dan pembebasan alokasi memori.
Tampilan Selengkapnya »

3 Jenis Utama Teks Komentar pada Bahasa Pemrograman Java

Waktu Publikasi
Gambar
Komentar pada bahasa pemrograman mengambil peran penting dalam membuat program menjadi lebih mudah dibaca atau dimengerti oleh manusia dengan cara menempatkan rincian keterangan pada kode program yang diletakkan pada bagian program yang terlibat sehingga program menjadi lebih mudah untuk dipelihara dan lebih mudah untuk dilakukan  debugging . Komentar yang ditulis di dalam bahasa pemrograman Java akan diabaikan oleh kompilator ketika proses kompilasi dilakukan.
Tampilan Selengkapnya »