Link HTML

LINK HTML
Materi
Link Link Absolut Link Relatif Link Self Atribut Link Membuka Link New Window Menghapus Garis Bawah Link Link Mailto
PERTEMUAN KE-5 : LINK HTML
5.1 PENGANTAR LINK Kelebihan utama dari dokumen HTML adalah
kemampuannya untuk memberikan link dari satu teks dan atau gambar menuju dokumen atau bagian lain dalam satu dokumen. Browser web akan menyorot ( highlight ) teks atau gambar yang diidentifikasi sebagai link dengan warna dan atau garis bawah untuk menunjukkan bahwa itu adalah hypertext link atau biasa dikenal dengan sebutan link saja.
Gambar 5.1 Hyperlink dari Dokumen HTML
Bahasa Pemrograman Berbasis Web I 127
Dokumen HTML menggunakan hyperlink ( anchor ) untuk menghubungkan kepada dokumen lain dalam web.
5.2 BENTUK PENULISAN LINK Dalam HTML penulisan tag untuk membuat sebuah link yaitu menggunakan tag anchor. Tag anchor disimbolkan dengan <a>. Didalam tag tersebut terdapat sebuah attribut, yaitu href. Href digunakan untuk mendefinisikan lokasi link. Bentuk penulisan tag anchor atau untuk membuat sebuah link :
<a href= Sumber tujuan> deskripsi teks link </a>
Penjelasan : A : menunjukkan bahwa tag tersebut adalah tag anchor yang digunakan untuk membuat sebuah link. Href : merupakan attribut dari tag anchor untuk mendefiniskan lokasi link. Sumber tujuan : sumber tujuan dapat berupa URL yang merupakan alamat dari situs web atau menggunakan nama file notepad, jika ingin dilemparkan atau menuju ke file lainnya. Deskripsi teks : Deskripsi teks yang menjadikan judul dari link
5.3 LINK ABSOLUT Link absolut merupakan link yang digunakan untuk menghubungkan atau mengkaitkan antara alamat website satu dengan website lainnya. Bentuk penulisan untuk membuat sebuah link absolut sebagai berikut :
<a href=http://www.google.com> Pencarian Google </a>
Penerapan di dalam sebuah media editor teks seperti dibawah ini :
<html> <head> <title> Membuat Link Absolut</title> </head> <body> <h1>Silahkan Anda pilih tujuan Surfing Anda disini : </h1><hr> <a href=http://www.google.com> Pencarian Google </a><br> <a href=http://www.yahoo.com> Pencarian Yahoo ! </a><br> <a href=http://www.facebook.com> Sosial Facebook </a><br> <a href=http://www.tweeter.com> Sosial Tweeter </a><br> </body> </html>
Hasil dari menjalankan kode program tersebut dalam sebuah browser web :
Gambar 5.2 Hasil Tampilan contoh_link1.htm
5.4 LINK RELATIF Link Relatif adalah sebuah link yang digunakan untuk menghubungkan atau mengkaitkan antara halaman satu dengan halaman lainnya dalam satu komputer. Bentuk penulisan untuk membuat sebuah link absolut sebagai berikut :
<a href=contoh_link1.htm> Contoh Link Absolut </a>
Penerapan di dalam sebuah media editor teks seperti dibawah ini :
<html> <head> <title> Membuat Link Relatif</title> </head> <body> <h1>Klik Link Relatif dibawah untuk menuju halaman lain : </h1><hr> <a href=contoh_link1.htm> Contoh Link Absolut </a><br> <a href=contoh_css_external.htm> Contoh CSS External </a><br> <a href=contoh_css_internal.htm> Contoh CSS Internal </a><br> <a href=contoh_multiple.htm> Contoh CSS Multiple </a><br> </body> </html>
Hasil dari menjalankan kode program tersebut dalam sebuah browser web :
Gambar 5.3 Hasil Tampilan contoh_link2.htm 5.5 LINK SELF Link self adalah link yang digunakan untuk menghubungkan atau mengkaitkan antar bagian dalam satu dokumen atau halaman web. Hal ini digunakan apabila dokumen di dalam sebuah halaman web HTML termuat panjang. Bentuk penulisan untuk membuat sebuah link self antara lain :
<a name= nama_inisial>...bagian teks atau objek yang dituju </a> .............................................dst............................................. <a href= #nama_inisial> deskripsi teks link </a>
Contoh penerapan dalam dokumen HTML seperti pada kode program contoh_link3.htm berikut ini :
<html> <head> <title> Membuat Link Relatif</title> </head> <body> <h1>PENDAHULUAN</h1><hr> <p align="justify"> Kerja praktik adalah bentuk kegiatan bagi mahasiswa jenjang strata satu maupun diploma tiga yang bertujuan agar mahasiswa memiliki kemampuan profesional untuk menyelesaikan masalah-masalah bidang informatika yang ada dalam dunia kerja dengan bekal ilmu yang telah diperoleh selama masa kuliah. <p align="justify"><a name="kedua"></a> s Kerja praktik diarahkan pada organisasi/instansi/perusahaan yang mendayagunakan komputer sebagai instrumen teknologi informasi, sehingga mahasiswa dapat mengamati prosedur kerja dan menganalisis permasalahan kemudian merancang sistem pemrograman atau aplikasi yang sesuai. <p align="justify"> Lingkup kerja praktik dapat berupa : 1. Analisis dan perancangan peranngkat lunak atau jaringan pada suatu instansi. 2. Pembuatan perangkat lunak bantu 3. Network administration <p align="justify"> Dalam penentuan lingkup, skala dan kedalaman materi Kerja Praktik, perlu diperhatikan faktor kontribusi pada bidang ilmu dan ketepatan waktu. Pada suatu sistem institusi yang sudah mapan mahasiswa kerja praktik minimal harus berprofesi sebagai software programmer atau network administrator/designer. <p align="justify"> Penulisan laporan kerja praktik membutuhkan buku pedoman bagi mahasiswa maupun dosen pembimbing dalam membimbing mahasiswa bimbingannya sehingga dihasilkan suatu keseragaman
format laporan. </p> <hr><a href="#kedua">Ke paragraf Dua</a> </body> </html>
Dari kode program diatas, mohon diperhatikan baik baik yang telah diberikan tanda merah khusus. Pada bagian yang diberikan tanda merah tersebut merupakan titik penting untuk membuat sebuah link self. Proses pembuatannya boleh dimulai dari tanda merah yang pertama diatas atau dari yang bawah sama saja, asalkan pemberian nama inisial antara yang di URL link sama dengan yang diberikan pada anchor name, begitu pula sebaliknya. Berikut ini adalah hasil yang mana sementara menampilkan keseluruhan isi dari kode program diatas.
Gambar 5.4 Hasil Tampilan contoh_link3.htm utuh
Kemudian dihimpitkan ukurannya sehingga pada bagian paragraf kedua tidak lagi nampak dan diposisikan berada dibagian paling bawah, dimana terdapat sebuah link untuk menuju ke paragraf dua seperti pada gambar dibawah ini :
Gambar 5.5 Hasil Tampilan contoh_link3.htm posisi terbawah
Setelah posisi berada di bagian paling bawah, silahkan di tekan link untuk menuju Ke Paragraf Dua tersebut, maka akan segera ditunjukkan bagian paragraf keduanya sesuai dengan yang telah ditentukan dalam kode program, bahwa anchor name di taruh dibagian awal paragraf kedua.
5.6 ATTRIBUT LINK Dalam dokumen HTML, link memiliki atribut bawaan yaitu digunakan untuk memodifikasi pewarnaan judul link pada saat aktif, disentuh klik, maupun sesudah diklik. Masihkah ingat pada saat memperoleh dasar dasar HTML. Nah, pada attribut BODY terdapatlah atribut yang berkaitan dengan link ini. Adapun attribut tersebut dituliskan sebagai berikut :
<BODY alink=Kode /Warna vlink=Kode link=Kode /Warna > .........................................dst.................................. </BODY>
/Warna
Penjelasan : Alink : digunakan untuk menentukan warna link pada saat disentuh klik mouse maka akan terjadi perubahan warna. Vlink : digunakan untuk menentukan warna link pada saat link sudah digunakan atau di klik mouse, sehingga warnanya akan berubah sesuai yang diberikan. Link : digunakan untuk memberikan warna link pada saat link tersebut belum digunakan sama sekali.
Contoh untuk menerapkan sebuah attribut diatas dapat dicoba sesuai dengan kode program contoh_link4.htm berikut ini : <html> <head> <title> Penggunaan Attribut Link</title> </head> <body alink=red vlink=black link=orange> <h1>Mencoba attribut link pada BODY (alink,vlink, dan link ) :</h1><hr> <a href="http://www.google.com"> Pencarian Google </a><br> <a href="http://www.yahoo.com"> Pencarian Yahoo !
Bahasa Pemrograman Berbasis Web I
</a><br> <a href="http://www.facebook.com"> </a><br> <a href="http://www.tweeter.com"> </a><br> </body> </html>
Sosial Sosial
Facebook Tweeter
Sehingga hasil dari program tersebut bila telah dijalankan, seperti berikut ini :
5.7 MEMBUKA LINK NEW WINDOW Contoh_link5.htm berikut ini mendemonstrasikan bagaimana membuat sebuah link pada saat diklik akan membuka lembar baru pada browser web.
Bentuk penulisannya adalah menggunakan :
<a href=URL target=_blank> deskripsi teks judul link</a>
Berikut ini contoh kode programnya :
<html> <head> <title> Penggunaan Attribut Link</title> </head> <body alink=red vlink=black link=orange> <h1>Mencoba attribut link pada BODY (alink,vlink, dan link ) :</h1><hr> <a href=http://www.google.com target=_blank> Pencarian Google </a><br> <a href="http://www.yahoo.com" target=_blank> Pencarian Yahoo ! </a><br> <a href="http://www.facebook.com" target=_blank> Sosial Facebook </a><br> <a href="http://www.tweeter.com" target=_blank> Sosial Tweeter </a><br> </body> </html>
Hasil dari menjalankan kode program contoh_link5.htm seperti gambar dibawah ini :
Setelah diklik salah satu link tersebut, maka akan membuka lembaran baru seperti pada gambar berikut :
Gambar 5.9 Hasil Tampilan contoh_link5.htm setelah diklik
5.8 MENGHAPUS GARIS PADA LINK
Contoh ini akan menunjukkan bagaimana cara menghapus sebuah garis bawah yang terdapat pada saat setiap kali membuat sebuah link. <html> <head> <title> Penggunaan Attribut Link</title> </head> <body alink=red vlink=black link=orange> <h1>Mencoba attribut link pada BODY (alink,vlink, dan link ) :</h1><hr> <a href=http://www.google.com target=_blank style=textdecoration:none> Pencarian Google </a><br> <a href="http://www.yahoo.com" target=_blank style=text decoration:none> Pencarian Yahoo ! </a><br> <a href="http://www.facebook.com" target=_blank style=text decoration:none> Sosial Facebook </a><br> <a href="http://www.tweeter.com" target=_blank style=text decoration:none> Sosial Tweeter </a><br> </body> </html>
Hasil tampilan dari kode contoh kode program tersebut adalah :
Gambar 5.10 Hasil Tampilan Contoh Link Tanpa Garis
5.9 MEMBUAT LINK KIRIM MAIL Contoh ini mendemonstarikan bagaimana membuat sebuah link yang dapat mengirimkan sebuah pesan elektronik ( email ). Berikut ini bentuk penulisan dan contoh dari kode programnya :
<a href=mailto:alamat_email> Deskripsi teks judul link</a>
Penerapan dalam kode program pada media editor text :
<html> <head> <title> Penggunaan MAIL TO</title> </head> <body alink=red vlink=black link=orange> <h1>Mencoba Kirim Email :</h1><hr>
<a href=mailto:astmikdb@gmail.com decoration:none> Kirim Pesan </a> </body> </html>
style=text-
Hasil Tampilan dari kode program diatas :
Gambar 5.11 Hasil Tampilan contoh_mailto.htm
Kemudian pada saat diklik link Kirim Pesan, maka akan muncul seperti pada tampilan berikut :
Gambar 5.12 Hasil Tampilan Kirim Email
5.10 RANGKUMAN Definisi link adalah salah satu tag dari dokumen HTML yang digunakan untuk mengkaitkan atau menghubungkan antara halaman satu atau web dengan halaman atau web lainnya. Bentuk penulisan tag anchor atau untuk membuat sebuah link :
<a href= Sumber tujuan> deskripsi teks link </a>
Penjelasan :
: menunjukkan bahwa tag tersebut adalah tag anchor yang digunakan untuk membuat sebuah link.
Href
: merupakan attribut dari tag anchor untuk mendefiniskan lokasi link.
Sumber tujuan : sumber tujuan dapat berupa URL yang merupakan alamat dari situs web atau menggunakan nama file notepad, jika ingin dilemparkan atau menuju ke file lainnya. Deskripsi teks : Deskripsi teks yang menjadikan judul dari link
Link terdiri dari tiga jenis, yaitu link absolut, link relatif, dan link self. Link absolut digunakan untuk menghubungkan atau
mengkaitkan antara alamat website satu dengan website lainnya. Bentuk penulisan untuk membuat sebuah link absolut sebagai berikut :
<a href=http://www.google.com> Pencarian Google </a>
Link
Relatif
digunakan
untuk
menghubungkan
atau
mengkaitkan antara halaman satu dengan halaman lainnya dalam satu komputer.
Bentuk penulisan untuk membuat sebuah link absolut sebagai berikut :
<a href=contoh_link1.htm> Contoh Link Absolut </a>
Link self digunakan untuk menghubungkan atau mengkaitkan antar bagian dalam satu dokumen atau halaman web. Hal ini digunakan apabila dokumen di dalam sebuah halaman web HTML termuat panjang.
Bentuk penulisan untuk membuat sebuah link self antara lain :
<a name= nama_inisial>...bagian teks atau objek yang dituju </a> .............................................dst............................................. <a href= #nama_inisial> deskripsi teks link </a>

Link HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Link HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

LINK HTML

PERTEMUAN KE-5 : LINK HTML

5.1 PENGANTAR LINK Kelebihan utama dari dokumen HTML adalah

Gambar 5.1 Hyperlink dari Dokumen HTML

Bahasa Pemrograman Berbasis Web I 127

<a href= Sumber tujuan> deskripsi teks link </a>

<a href=http://www.google.com> Pencarian Google </a>

Penerapan di dalam sebuah media editor teks seperti dibawah ini :

Bahasa Pemrograman Berbasis Web I 129

Gambar 5.2 Hasil Tampilan contoh_link1.htm

<a href=contoh_link1.htm> Contoh Link Absolut </a>

Bahasa Pemrograman Berbasis Web I 130

Penerapan di dalam sebuah media editor teks seperti dibawah ini :

Bahasa Pemrograman Berbasis Web I 131

format laporan. </p> <hr><a href="#kedua">Ke paragraf Dua</a> </body> </html>

Bahasa Pemrograman Berbasis Web I 134

Gambar 5.4 Hasil Tampilan contoh_link3.htm utuh

Bahasa Pemrograman Berbasis Web I 135

Gambar 5.5 Hasil Tampilan contoh_link3.htm posisi terbawah

Bahasa Pemrograman Berbasis Web I 136

Gambar 5.6 Hasil Tampilan contoh_link3.htm

Bahasa Pemrograman Berbasis Web I 137

<BODY alink=Kode /Warna vlink=Kode link=Kode /Warna > .........................................dst.................................. </BODY>

</a><br> <a href="http://www.facebook.com"> </a><br> <a href="http://www.tweeter.com"> </a><br> </body> </html>

Gambar 5.7 Hasil Tampilan contoh_link4.htm

Bahasa Pemrograman Berbasis Web I 139

Bentuk penulisannya adalah menggunakan :

<a href=URL target=_blank> deskripsi teks judul link</a>

Berikut ini contoh kode programnya :

Bahasa Pemrograman Berbasis Web I 140

Gambar 5.8 Hasil Tampilan contoh_link5.htm

Gambar 5.9 Hasil Tampilan contoh_link5.htm setelah diklik

5.8 MENGHAPUS GARIS PADA LINK

Bahasa Pemrograman Berbasis Web I 141

Hasil tampilan dari kode contoh kode program tersebut adalah :

Bahasa Pemrograman Berbasis Web I 142

Gambar 5.10 Hasil Tampilan Contoh Link Tanpa Garis

<a href=mailto:alamat_email> Deskripsi teks judul link</a>

Penerapan dalam kode program pada media editor text :

<a href=mailto:astmikdb@gmail.com decoration:none> Kirim Pesan </a> </body> </html>

Hasil Tampilan dari kode program diatas :

Gambar 5.11 Hasil Tampilan contoh_mailto.htm

Bahasa Pemrograman Berbasis Web I 144

Gambar 5.12 Hasil Tampilan Kirim Email

<a href= Sumber tujuan> deskripsi teks link </a>

: merupakan attribut dari tag anchor untuk mendefiniskan lokasi link.

<a href=http://www.google.com> Pencarian Google </a>

Bentuk penulisan untuk membuat sebuah link absolut sebagai berikut :

<a href=contoh_link1.htm> Contoh Link Absolut </a>

Bentuk penulisan untuk membuat sebuah link self antara lain :

Bahasa Pemrograman Berbasis Web I 147

Anda mungkin juga menyukai