Komponen Html Lanjut (Elemen-elemen Html Bagian 2)
TABEL
Pada tabel data-data dimasukkan dalam kombinasi antara kolom dan baris tertentu. Beberapa baris dan kolom dari tabel bisa digabungkan untuk membuat tampilan yang sesuai dengan kebutuhan data kita. Pada html semua itu dapat dilakukan, namun tentunya kita harus mengetahui terlebih dahulu bahan-bahan apa saja yang diperlukan untuk meracik sebuah tabel. Untuk meracik sebuah tabel kita akan membutuhkan bahan-bahan sebagai berikut, <table>, <tr>, dan <td>.
Untuk membuat sebuah tabel maka susun bahan-bahan tersebut menjadi seperti ini,
Susunan seperti kode diatas akan membuat sebuah tabel sederhana yang berukuran 2 X 2, yaitu 2 kolom dan 2 baris. Sekarang perhatikan karena konsep dari tabel ini cukup sulit namun akan menjadi mudah apabila kalian memperhatikan penjelasan berikut.
Tabel dari html adalah berdasarkan kepada baris atau row. Anggap kamu ingin memasukkan data pada baris pertama kolom pertama maka pertama kali yang kalian harus lakukan adalah membuat sebuah baris lalu setelah itu membuat kolom, baru setelahnya memasukkan data. Apabila kalian ingin memasukkan data pada kolom kedua baris pertama maka kalian harus membuat sebuah baris, kemudian buat kolom pertama, setelah itu buat kolom kedua, baru isi datanya. Jadi intinya baris dulu baru kolom.
<tr> digunakan untuk membuat suatu baris baru. Sedangkan <td> digunakan untuk membuat kolom/data. Supaya gampang mengingatnya, ingat saja huruf belakangnya, tr --> r = row, td --> d =data.
Setelah mengetahui dasarnya, maka selanjutnya kita akan belajar untuk menyatukan 2 kolom pada sebuah tabel. Lihat contohnya
Perhatikan bagian "Ini adalah kolom yang digabungkan", sebelumnya terlihat perintah <td colspan="2">
Colspan memerintahkan agar beberapa kolom digabungkan tergantung dari nilai yang dituliskan. Pada contoh diatas nilai tersebut adalah "2" sehingga 2 kolom digabungkan menjadi satu dan hasilnya dapat kalian lihat seperti contoh tabel diatas.
Contoh diatas adalah untuk menggabungkan kolom secara horisontal, namun bagaimana cara menggabungkan kolom secara vertikal? Berikut ini kita akan belajar untuk menggabungkan kolom 2 secara vertikal. Lihat tabel dibawah ini.
Perhatikan tabel diatas, kolom 2 dan kolom 4 digabung sehingga kolom 4 nya hilang. Untuk membuat tabel seperti diatas atribut tambahan yang diperlukan adalah rowspan. Mudah bukan mengingatnya? jika masih dalam satu baris kita menggunakan colspan sedangkan apabila pidah baris kita menggunakanrowspan. Dibawah ini adalah perintah yang digunakan untuk membuat tabel seperti diatas.
FRAME
Frame, didalam dokumen HTML berfungsi untuk menggabungkan beberapa halaman website sehingga lebih menyatu dan interaktif. Namun, penggunaan dokumen HTML menggunakan FRAME sekarang sudah kurang popular karena kelihatan kurang professional dan jika dicetak akan terpisah-pisah halamannya.
Macam-macam bentuk FRAME :
Macam-macam bentuk FRAME :
1.<frameset rows> = banyaknya baris dan tinggi masing-masing frame.
2.<frameset cols> = banyaknya kolom dan lebar masing-masing frame. Angka yang ada dalam rows dan cols bisa dalam ukuran pixel, persen, atau symbol asterix (*). Symbol asterisk artinya sisa dari lebar / tinggi ukuran sebelumnya. Contoh : <frameset cols=110,50%,*>, artinya membuat frame dengan 3 kolom. Kolom pertama lebar 110 pixel, kolom kedua lebarnya 50% dari lebar layar, dan kolom ketiga adalah sisanya.
3.Src = dokumen yang akan ditampilkan dalam frame.
4.Name = nama yang digunakan untuk tujuan/target link.
5.Scrolling = menentukan apakah frame bisa digulung atau tidak. Diisi dengan Yes/No/Auto.
6.Marginwidth = jarak antara tepi kiri/kanan frame dengan tulisan dalam frame (satuan pixel).
7.Noresize = frame tidak bisa diubah ukurannya dengan mouse.
2.<frameset cols> = banyaknya kolom dan lebar masing-masing frame. Angka yang ada dalam rows dan cols bisa dalam ukuran pixel, persen, atau symbol asterix (*). Symbol asterisk artinya sisa dari lebar / tinggi ukuran sebelumnya. Contoh : <frameset cols=110,50%,*>, artinya membuat frame dengan 3 kolom. Kolom pertama lebar 110 pixel, kolom kedua lebarnya 50% dari lebar layar, dan kolom ketiga adalah sisanya.
3.Src = dokumen yang akan ditampilkan dalam frame.
4.Name = nama yang digunakan untuk tujuan/target link.
5.Scrolling = menentukan apakah frame bisa digulung atau tidak. Diisi dengan Yes/No/Auto.
6.Marginwidth = jarak antara tepi kiri/kanan frame dengan tulisan dalam frame (satuan pixel).
7.Noresize = frame tidak bisa diubah ukurannya dengan mouse.
FORM
<Form Action="URL Tujuan" Method="Post" enctype="multipart/form-data"> Input Field </Form>
Input Field Dasar
<Input type="Tipe" name="Nama Field" id="ID Field" value="Isi Field (Jika ada)">
Komentar
Posting Komentar