Label:
Desain Web,
HTML
- Link: Untuk mengaitkan antara satu dokumen dengan dokumen lainnya (atau bisa juga mengaitkan atau blok-blok di dalam satu dokumen)
- Tabel: Untuk menghasilkan data dalam bentuk tabular .
- Form: Untuk menghasilkan form masukan data.\
- Menggunakan Link
Fitur fundamental dari hypertext adalah hyperlink dokumen-dokumen, kita dapat mengelink ke lokasi-lokasi lain. Sebagaimana yang kita ketahui, hyperlink merupakan teks yang memungkinkan kita untuk melakukan perpindahan dari satu halaman ke halaman lainnya.
- Menciptakan Link
HTML menyediakan tag <a> atau bisa juga disebut anchor. Untuk mendefinisikan sebuah link. Dalam implementasinya, pembuatan link memerlukan atribut href yang menyatakan lokasi tujuan. Lokasi ini bisa berupa alamat lengkap (absolut) atau singkat (relatif) yang dimaksud disini bukan alamat rumah akan tetapi yang dimaksud adalah alamat lengkap atau singkat disini adalah alamat URL. Untuk mengetahui cara membuat dan mengaitkan dokumen satu ke dokumen yang lainnya ikuti langkah langkah berikut:
- Buka Editor Teks (Notepad, Notepad++, Sublime, Adobeweaver dan lain sebagainnya).
- Ketikkan teks (kode-kode HTML) dibawah ini kedalam Editor Teks
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Link</title>
</head>
<body>
<a href="link2.html">Klik di sini</a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Link 2</title>
</head>
<body>
Untuk kembali ke halaman pertama
<a href="link1.html">Klik di sini</a>
</body>
</html> - Simpan dengan nama link1.html
- Untuk menguji hasilnya, buka Web Browser (Mozilla Firefox, Google Chrome dan lain lain) dan arahkan ke alamat link1.html
- Klik link yang ada secara bergantian.
- Atribut Link
Elemen anchor menyediakan sejumlah attribut yang berguna untuk mendukung fungsionalitasnya, dua di antaranya yang kerap digunakan adalah target dan title. Attribut target digunakan untuk mengatur apakah link akan di buka di window yang sama (default) atau di window (atau tab) baru. Di sisi lain, title berfungsi untuk menampilkan teks manakala kursor mouse berada di atas link.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Atribut Link</title>
</head>
<body>
<a href="link2.html" target="_blank" title="Title link" >Klik di sini</a>
</body>
</html>- Link Internal
Elemen anchor juga memungkinkan kita untuk melakukan navigasi di dalam satu dokumen (layaknya seperti bookmark). Untuk mengimplementasikan hal ini, kita memerlukan attribut identifier. Langkah pertama untuk mengimplementasikan link internal adalah dengan mendefinisikan lokasi di attribut href yang diberi prefiks #. Langkah berikutnya adalah menetapkan nilai attribut identifier di blok yang akan dituju, di mana nilainya sama dengan href namun tanpa prefiks #. Untuk lebih jelasnya, perhatikan dokumen berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Link Internal</title>
</head>
<body>
Menu
<ul>
<li><a href="#pendahuluan">Pendahuluan</a></li>
<li><a href="#pembahasan">Pembahasan</a></li>
<li><a href="#kesimpulan">Kesimpulan</a></li>
</ul>
<h3 id="pendahuluan">Pendahuluan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisici ng elit, sed do eiusmod tempor incididunt ut labore et dol ore magna aliqua.
<h3 id="pembahasan">Pembahasan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisici ng elit, sed do eiusmod tempor incididunt ut labore et dol ore magna aliqua.
<h3 id="kesimpulan">Kesimpulan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisici ng elit, sed do eiusmod tempor incididunt ut labore et dol ore magna aliqua.
</body>
</html>Perlu diperhatikan, nilai attribut identifier tidak boleh sama atau harus unik di dalam lingkupannya.
1 komentar:
kalau memahami kode itu jangan tanggung-tanggung :-D
Balas1. Berkomentarlah yang baik dan sopan
2. Berkomentarlah dengan kata-kata yang bermutu
3. Jangan berkomentar hal yang negatif