Pada postingan sebelumnya telah saya jelaskan mengenai elemen-elemen dasar dari HTML/XHTML dan implementasinya. Selain elemen-elemen dasar dari HTML/XHTML ada elemen-elemen lain yang memiliki peran yang lebih penting didalam menghasilkan dokumen HTML. Di postingan ini saya akan menjelaskan mengenai dasar-dasar elemen dan cara penggunaan elemen-elemen yang nantinya akan sering kita gunakan. Secara garis besar, elemen-elemen ini mencakup 3 bagian antara lain :
- 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.\
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.
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>
Kemudian, Simpan dokumen HTML dengan nama link1.html dan letakkan di lokasi direktori web. Langkah selanjutnya, buat halaman kedua (
link2.html) yang nantinya akan dikaitkan.
<!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.
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>
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.
Seperti sebagian besar bahasa script lainnya, PHP secara langsung dapat ditanamkan ke HTML. File PHP harus disimpan dalam format atau ekstensi .php, apabila anda menyimpan file php tersebut dengan format atau ekstensi .html maka yang terjadi adalah kerusakan dalam kode dan yang ditampilkan tidak akan berhasil menurut metode yang akan kita pakai. Untuk menuliskan file php harus diawali dengan <?php atau <? (jika server mengizinkan) Setiap baris instruksi program harus diakhiri dengan tanda titik koma “;”. Artinya jika menuliskan lebih dari 1 baris tetap akan dianggap satu baris instruksi program jika belum diakhiri tandan titik koma.
