Artikel Terbaru

4 Keunggulan Utama Bitcoin

Waktu Publikasi 5 komentar
Sebelum membicarakan tentang bitcoin, terlebih dahulu mari pahami apa yang dimaksud dengan uang. Apa sebenarnya yang dimaksud dengan uang? Pada dasarnya, uang adalah segala sesuatu yang mewakili nilai tertentu.
Dipublikasikan Oleh

8 Pengaturan Utama Penggunaan Link pada Dokumen HTML

Waktu Publikasi Labels: Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia
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
Bekerja Sebagai Guru TIK di Kota Semarang, yang memanfaatkan blog sebagai sarana pendidikan dan informasi.

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

Catatan: setiap iklan yang ditayangkan pada blog ini bersumber dari google adsense. Dengan jenis iklan yang dipilih adalah, sebagai berikut.

POIN 1, Iklan yang ditampilkan hanya boleh berbahasa indonesia atau berbahasa inggris. Tidak menerima jenis iklan dalam bahasa yang lain selain yang telah disebutkan karena blog ini dibuat untuk para pengunjung dari negara atau orang yang berbahasa Indonesia.

POIN 2, Setiap gambar yang ditampilkan pada iklan sifatnya tidak mengganggu para pengunjung yang melihat blog, atau tidak boleh menampilkan gambar yang bersifat menjijikkan atau merangsang rasa mual.

POIN 3, Jenis iklan yang dipasang bukan merupakan iklan spam, atau berisi dan mengarahkan pengunjung ke alamat yang berbahaya atau bersifat penipuan.

POIN 4, Segala bentuk iklan tunduk dan patuh pada ketentuan dari pihak Adsense google dan pemilik blog.

POIN 5, Segala jenis iklan yang tidak bertentangan dengan poin 1-4 yang dijelaskan sebelumnya, maka iklan tersebut dapat ditampilkan pada blog.

POIN 6, Jika ada pihak ketika yang ingin memasang iklan pada blog ini secara langsung, maka dapat menghubungi pemilik blog melalui kontak 0882 3218 8316.



~ Ikatlah Ilmu dengan Memostingkannya ~

Hot Artikel

Enkapsulasi pada Java

Waktu Publikasi 12 komentar
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 »

Perbedaan stdio.h dan stdlib.h pada Bahasa C

Waktu Publikasi 7 komentar
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 »

4 Contoh Program Java dan Multiple Inheritance

Waktu Publikasi 5 komentar
Multiple inheritance  adalah fitur dari konsep berorientasi  object , dimana sebuah  class  dapat mewariskan propertinya kepada lebih dari satu  parent class . Permasalahan yang terjadi ketika terdapat  method  dengan  signature  sama dalam kedua  super class  dan  subclass  tersebut. Ketika  method  dipanggil maka kompilator tidak dapat menentukan  method class  mana yang akan dipanggil, bahkan ketika memanggil  method class  mana yang harus diproritaskan terlebih dahulu.
Tampilan Selengkapnya »

Perbedaan Antara int main() dan int main(void) pada Bahasa C

Waktu Publikasi 14 komentar
Perhatikan dua contoh definisi fungsi main(). int main() { /*  */ return 0; } dan int main(void) { /*  */ return 0; } Apakah perbedaan kedua definisi tersebut? Pada C++, tidak terdapat perbedaan apapun pada kedua definisi fungsi tersebut. Juga pada bahasa C kedua fungsi tersebut dapat dijalankan dengan baik, tetapi pada definisi fungsi yang kedua, penggunaan  void  secara teknis dianggap lebih baik karena memberikan gambaran lebih jelas bahwa fungsi main akan dipanggil tanpa menggunakan parameter apapun.
Tampilan Selengkapnya »