Hyperlink adalah elemen HTML yang sering digunakan di situs web, karena berbagai halaman situs web terdiri dari hyperlink, dan hyperlink melengkapi lompatan antar halaman. Hyperlink adalah cara utama interaksi antara pemirsa dan server, dan pembelajaran akan secara bertahap diperdalam dalam teknologi berikutnya.
- Catatan: Gambar juga dapat digunakan sebagai tautan, dan Anda akan mempelajari secara detail gambar di halaman web bab berikutnya.
4.5.1 Tambahkan tautan ke teksTag dari hyperlink adalah <a> </a>, menambahkan hyperlink ke teks mirip dengan tag dimodifikasi lainnya. Teks setelah tautan memiliki gaya khusus sendiri untuk membedakannya dari teks lain. Gaya tautan default adalah teks biru dan digarisbawahi. Hyperlink diarahkan ke halaman lain, dan tag <a> </a> memiliki atribut HREF yang bertanggung jawab untuk menentukan alamat halaman baru. Alamat yang ditentukan oleh HREF umumnya menggunakan alamat relatif.
- Catatan: Dalam pengembangan situs web, dokumen lebih umum digunakan relatif terhadap alamat.
Buat file halaman web di d:/ web/ direktori, bernama A.htm, dan tulis kode seperti yang ditunjukkan pada kode 4.18.
Kode 4.18 Pengaturan Hyperlink: A.htm
<Html>
<head>
<title> Pengaturan hyperlink </iteme>
</head>
<body>
<ukuran font = 5>
<a href = ul_ol.htm> Masukkan halaman pengaturan daftar </a>
</font>
</body>
</html>
Masukkan http: //localhost/a.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.19.
Gambar 4.19 Pengaturan Hyperlink
Pembaca dapat melihat gaya default hyperlink pada Gambar 4.19. Saat Anda mengklik tautan di halaman, halaman akan melompat ke halaman UL_OL.htm di direktori yang sama, yaitu, halaman Pengaturan Daftar di bagian sebelumnya. Saat Anda mengklik tombol kembali browser dan kembali ke halaman A.htm, warna tautan teks berubah ungu, yang memberi tahu penampil bahwa tautan ini telah dikunjungi.
4.5.2 Ubah Metode Pembukaan Jendela TautanSecara default, cara hyperlink membuka halaman baru adalah overlay sendiri. Bergantung pada berbagai kebutuhan pemirsa, pembaca dapat menentukan cara lain untuk membuka jendela baru untuk hyperlink. Tag Hyperlink memberikan atribut target untuk pengaturan, dengan nilai -nilai seperti _Self (overwrite sendiri, default), _blank (buat jendela baru untuk membuka halaman baru), _top (terbuka di seluruh jendela browser, semua struktur bingkai akan diabaikan), dan _parent (terbuka di jendela sebelumnya).
- Catatan: Metode _top dan _parent digunakan untuk halaman bingkai, dan ada penjelasan rinci dalam bab -bab berikut.
4.5.3 Tambahkan teks prompt ke tautanDalam banyak kasus, teks hyperlink tidak cukup untuk menggambarkan konten yang akan ditautkan. Hyperlink Tag menyediakan atribut judul untuk memfasilitasi petunjuk bagi pemirsa. Nilai atribut judul adalah konten prompt. Konten yang cepat akan muncul ketika kursor browser tetap di hyperlink, yang tidak akan mempengaruhi kerapian tata letak halaman. Ubah file halaman web A.htm dan tulis kode seperti yang ditunjukkan pada kode 4.19.
Kode 4.19 Pengaturan Hyperlink: A.htm
<Html>
<head>
<title> Pengaturan hyperlink </iteme>
</head>
<body>
<ukuran font = 5>
<a href = ul_ol.htm target = _blank title = hello reader, apa yang Anda lihat sekarang adalah teks prompt. Klik tautan ini untuk melompat ke halaman UL_OL.htm. > Masukkan halaman Pengaturan Daftar </a>
</font>
</body>
</html>
Masukkan http: //localhost/a.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.20.
Gambar 4.20 Teks Prompt Hyperlink
4.5.4 Apa itu jangkarBanyak artikel web memiliki banyak konten, yang mengarah ke halaman panjang. Pemirsa harus terus -menerus menyeret scrollbar browser untuk menemukan konten yang mereka butuhkan. Fungsi jangkar hyperlink dapat menyelesaikan masalah ini. Jangkar adalah jangkar yang diambil dari kapal. Setelah jangkar dilemparkan ke bawah, kapal tidak akan dengan mudah melayang atau tersesat. Bahkan, jangkar digunakan untuk melompat di lokasi yang berbeda dalam satu halaman, dan di beberapa tempat mereka disebut bookmark.
Atribut nama tag hyperlink digunakan untuk menentukan nama jangkar. Satu halaman dapat menentukan beberapa jangkar. Melalui atribut HREF dari hyperlink, Anda dapat melompat ke jangkar yang sesuai sesuai dengan namanya. Buat file halaman web di d:/ web/ direktori, bernama a_anchor.htm, dan tulis kode seperti yang ditunjukkan pada kode 4.20.
Kode 4.20 Hyperlink Anchor: a_anchor.htm
<Html>
<head>
<title> Pengaturan hyperlink </iteme>
</head>
<body>
<ukuran font = 5>
<a name = top> di sini adalah jangkar di bagian atas </a> <br />
<a href =#1> 1st </a> <br />
<a href =#2> ke -2 </a> <br />
<a href =#3> ke -3 </a> <br />
<a href =#4> orang ke -4 </a> <br />
<a href =#5> ke -5 </a> <br />
<a href =#6> ke -6 </a> <br />
<H2> Presiden yang sukses dari Amerika Serikat </h2>
● Orang pertama (1789-1797) <a name = 1> Ini adalah jangkar orang pertama </a> <br />
Nama: George Washington <br />
George Washington <br />
Lahir dan Meninggal: 1732-1799 <BR />
Partai Politik :: Federasi <BR />
● Orang kedua (1797-1801) <a name = 2> Berikut adalah jangkar orang kedua </a> <br />
Nama: John Adams <br />
John Adams <br />
Lahir dan Meninggal: 1735-1826 <Br />
Partai Politik :: Federasi <BR />
● Orang ketiga (1801-1809) <a name = 3> Berikut adalah jangkar orang ketiga </a> <br />
Nama: Thomas Jefferson <br />
Thomas Jefferson <br />
Lahir dan Meninggal: 1743-1826 <BR />
Partai Politik :: Partai Komunis Rakyat <BR />
● Posting ke-4 (1809-1817) <a name = 4> Berikut adalah jangkar dari posting ke-4 </a> <br />
Nama: James Madison <br />
James Madison <br />
Lahir dan Meninggal: 1751-1836 <BR />
Partai Politik: Republik Rakyat Tiongkok <BR />
● Posting ke-5 (1817-1825) <a name = 5> Ini adalah jangkar dari posting ke-5 </a> <br />
Nama: James Monroe <br />
James Monroe <br />
Lahir dan Meninggal: 1758-1831 <Br />
Partai Politik: Republik Rakyat Tiongkok <BR />
</font>
</body>
</html> l>
Sebelum pengujian, pembaca dapat melihat dari kode 4.20 bahwa tag <a> </a> digunakan untuk menentukan jangkar, dan nama jangkar didefinisikan dengan atribut nama (nama tidak memiliki batasan, dan dapat disesuaikan). Tautan untuk mencari jangkar menggunakan atribut HREF untuk menentukan nama yang sesuai, dan simbol # harus ditambahkan sebelum nama. Masukkan http: //localhost/a_anchor.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.21.
Gambar 4.21 Hyperlink Anchor
Ketika penampil mengklik pada hyperlink, halaman akan secara otomatis menggulir ke posisi jangkar nama nilai atribut HREF.
- Catatan: Label yang mendefinisikan jangkar tidak selalu membutuhkan konten tertentu, itu hanya posisi.
4.5.5 Tautan Email, FTP dan TelnetHyperlink selanjutnya dapat memperluas fungsi halaman web, dan yang lebih umum digunakan adalah koneksi email, FTP dan telnet. Untuk menyelesaikan fungsi di atas, Anda hanya perlu memodifikasi nilai HREF dari hyperlink. Format untuk mengirim email adalah:
<a href = mailto: alamat email> kirimi saya email </a>
Alamat email harus lengkap, seperti [email protected].
Seperti disebutkan sebelumnya, protokol HTTP digunakan untuk menelusuri halaman web, sedangkan server FTP dihubungkan oleh protokol FTP. Format tautan adalah sebagai berikut:
<a href = ftp: // Alamat IP server atau nama domain> teks tertaut </a>
Perbedaan antara tautan server FTP dan tautan web adalah bahwa protokol yang digunakan berbeda. FTP memerlukan izin login dari administrator server. Namun, beberapa server FTP dapat diakses secara anonim, sehingga mendapatkan beberapa file publik. Demikian pula, server yang terhubung ke protokol telnet juga mengadopsi metode yang sama, formatnya adalah sebagai berikut:
<a href = telnet: // Alamat IP server atau nama domain> teks tertaut </a>
Protokol telnet sangat sedikit, dan sebagian besar digunakan dengan protokol HTTP. Buat file halaman web di D:/ Web/ Direktori, bernama Mail.htm, dan tulis kode seperti yang ditunjukkan pada kode 4.21.
Kode 4.21 Pengaturan Lain untuk Hyperlinks: Mail.htm
<Html>
<head>
<title> Pengaturan lain untuk hyperlink </iteme>
</head>
<body>
<ukuran font = 5>
<a href = mailto: [email protected] title = hello pembaca, klik di sini untuk mengirim email. > Kirimkan saya email </a> <br />
<a href = ftp: //101.22.25.11 title = hello pembaca, selamat datang di server ftp. > Hubungkan server FTP </a> <br />
<a href = telnet: //101.22.25.11 title = hello pembaca, selamat datang di server telnet. > Hubungkan Telnet Server </a>
</font>
</body>
</html> s
Masukkan http: //localhost/mail.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.22.
Gambar 4.22 Pengaturan lainnya untuk hyperlink