46
Sebagai latihan, kita coba menggabungkan kontrol-kontrol yang telah anda pelajari
sebelumnya menjadi satu form utuh.
Buatlah file baru, dengan nama file latihan6.html, lalu ketikkan kode HTML berikut pada
file latihan6.html
1. <!DOCTYPE HTML>
2. <HTML>
3. <head>
4. <title>Form</title>
5. </head>
6. <body>
7. <form>
8. <label for=‚nama‛>Nama</label>
9. <input type=‚text‛ name=‚nama‛><br>
10. <label for=‚alamat‛>Alamat</label>
11. <textarea name=‚alamat‛></textarea><br>
12.
13. <label for=‚kota‛>Kota</label>
14. <select name=‚kota‛>
15. <option>Jakarta</option>
16. <option>Bandung</option>
17. <option>Tasikmalaya</option>
18. </select><br>
19.
20. <input type=‚submit‛ value=‚kirimkan data‛>
21. </form>
22. </body>
23. </HTML>
Berikut ini adalah tampilan yang anda dapatkan jika file latihan6.html dibuka di dalam
browser.
Gambar 34 Form utuh
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
47
Dalam buku ini, saya tidak akan membahas bagaimana cara memroses data yang
dikumpulkan dari form tersebut, karena dalam HTML kita tidak bisa melakukan proses
pengolahan data. Ingat bahwa HTML hanya digunakan untuk memformat dokumen,
bukan untuk memroses data.
Untuk memroses data, kita bisa menggunakan bahasa pemrograman web, seperti
Javascript atau PHP atau bahasa pemrograman web lainnya.
Dengan bahasa pemrograman seperti Javascript atau PHP anda dapat mengolah data-
data yang dikumpulkan dari Form HTML untuk diproses dan dikeluarkan kembali
menjadi suatu informasi baru.
Latihan Membuat Form :
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
48
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
49
Bab 9
Tabel
Untuk menampilkan data dengan tipe tabel dalam HTML, kita bisa menggunakan tag
<table>.
<table></table>
Untuk membuat baris tabel, kita gunakan tag <tr> – singkatan dari table row (ditulis di
dalam tag table)
<table>
<tr></tr>
</table>
Sedangkan untuk menentukan banyaknya kolom, tergantung dari banyaknya tag <td>
(table data) yang digunakan di dalam tag <tr>.
1. <table>
2. <tr>
3. <td>No</td>
4. <td>Nama</td>
5. <td>Alamat</td>
6. </tr>
7. </table>
Untuk menyatukan kolom atau baris (merge-cell) kita tambahkan atribut colspan (untuk
merge horizontally-secara horizontal) atau rowspan (untuk merge vertically).
1. <table> <td rowspan=2>No</td>
2. <tr> <td colspan=2>Jenis Kelamin</td>
3. <td rowspan=2>Nama</td>
4.
5. <td>L</td>
<td>P</td>
6. </tr>
7. <tr> <td>1</td>
8. <td>L</td>
9. <td></td>
10. </tr>
11. <tr>
12.
13.
14.
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
50
15. <td>Rian</td>
16. </tr>
17. </table>
Jika anda tampilkan dalam browser, maka tabel tersebut tidak akan memiliki garis,
untuk memberi garis pada tabel anda dapat menambahkan atribut border=1 pada tag
<table> atau anda dapat menambahkan border lewat CSS nantinya.
Gambar 35 Tabel setelah pemberian atribut border
Sebagai latihan, anda tulis kode tabel di atas dan tambahkan beberapa data lagi, lalu
simpan dalam file latihan7.html.
9.1. Struktur tabel yang dianjurkan
Agar format tabel sesuai dengan ketentuan, Anda dapat menggunakan tag <thead> untuk
baris yang menjadi Judul tabel, <tbody> untuk data/isi dari tabel dan <tfooter> untuk kaki
tabel (bisa diisi sama dengan thead atau lainnya).
1. <table border=1> <td rowspan=2>No</td>
2. <thead> <td colspan=2>Jenis Kelamin</td>
3. <tr> <td rowspan=2>Nama</td>
4.
5. <td>L</td>
6. <td>P</td>
7. </tr>
8. <tr> <td>1</td>
9. <td>L</td>
10. <td></td>
11. </tr> <td>Rian</td>
12. </thead>
13.
14. <tbody>
15. <tr>
16.
17.
18.
19.
20. </tr>
21. </tbody>
22. </table>
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
51
9.2. Kesalahan dalam penggunaan <table>
Tag table digunakan untuk memformat data tabular/data yang membutuhkan
format tabel dalam menampilkannya, seperti contoh penggunaan tabel
untuk menampilkan data nilai berikut :
No Nama Nilai Akhir Index
1 Jono 90 A
2 Joni 75 B
3 Dedi 82 A
Masih banyak yang menggunakan tabel untuk keperluan layouting sebuah
website, misalnya menggunakan tag table untuk membuat layout 2 kolom, 3
kolom, atau 4 kolom seperti contoh berikut :
Gambar 36 Penggunaan table untuk layout adalah menyalahi aturan
Penggunaan tag <table> untuk keperluan layout adalah menyalahi aturan/fungsi
dari tag table tersebut.
Layout table biasanya dibuat secara otomatis oleh aplikasi seperti
Dreamweaver atau Photoshop (di-generate oleh slicing tool).
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
52
Latihan Membuat Tabel :
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
53
SOAL ULANGAN TENGAH SEMESTER
Jawablah pertanyaan di bawah ini memilih salah satu jawaban yang paling tepat !
1. HTML Merupakan singkatan dari
a. Hyper Link Markup Leaguage
b. Hyper Text Markup Laguage
c. Hyper Tool Markup Laguage
d. Hyper Test Markup Laguage
2. Berikut ini yang menjadi standarisasi Web
a. ECMAN (uropean Computer Manufacturers Association)
b. W3C (World Wide Web Consortium)
c. Google
d. PSR (PHP Standars Recommendation)
3. Berikut ini tag untuk membuat heading, kecuali
a. <h4>
b. <h5>
c. <h6>
d. <h7>
4. Untuk membuat baris baru menggunakan tag ?
a. <br>
b. <newline>
c. <break>
d. <hr>
5. Tag untuk membuat garis datar (horizontal)?
a. <br>
b. <newline>
c. <break>
d. <hr>
6. Sintak yang benar untuk menambah warna latar belakang?
a. <body =’background:green’>
b. <body style=’background-color:green’>
c. <body color=’green’>
d. <background>green</background>
7. Tag untuk membuat huruf tebal adalah
a. <bold>
b. <b>
c. <i>
d. <important>
8. Karakter yang digunakan untuk tag akhir ?
a. <>
b. /
c. *
d. \
9. Untuk membuat tabel menggunakan tag ?
a. <table>
b. <tables>
c. <tb>
d. <tab>
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
54
10. Saat membuat tabel tag <tr> berfungsi untuk ?
a. Membuat baris
b. Membuat kolom
c. Membuat header tabel
d. membuat body tabel
11. Tag <ol> digunakan untuk membuat list ?
a. List terurut
b. List Tidak terurut
c. List Tunggal
d. List Jamak
12. Terdapat 2 jenis list di HTML yaitu order list dan unordered list!
a. Benar
b. Salah
c. Jawaban a dan b benar
d. Semua jawaban salah
13. Untuk membuat checkbox menggunakan sintak?
a. <checkbox>
b. <input type=’checkbox’>
c. <input type=’check’>
d. <input type=’check_box’>
14. Untuk membuat radio button mengunakan sintak?
a. <radio>
b. <input type=’radio_button’>
c. <input type=radio’>
d. <radio_button>
15. Untuk membuat drop-down list menggunakan tag?
a. <input type=’drop-down’>
b. <drop-down>
c. <select>
d. <list>
16. Text area dapat dibuat menggunakan tag?
a. <textarea>
b. <input type=’textarea’>
c. <text>
d. Semua jawaban salah
17. Sintak yang benar untuk memasukan gambar adalah
a. <img href=’https://kelasprogrammer.com’ alt=’Kelas Programmer’>
b. <img src=’kelasprogrammer.png’ alt=’Kelas Programmer’>
c. <image src=’kelasprogrammer.jpg’ alt=’Kelas Programmer’>
d. <img type=’kelasprogrammer.gif’>
18. Atribut alt pada tag <img> berfungsi untuk?
a. Menampilkan alternatif teks ketika gambar tidak bisa ditampilkan
b. Membuat gambar dengan animasi
c. Mengatur ukuran gambar
d. Mengatur jarak gambar dengan elemen lain
19. Untuk membuat komentar di HTML adalah
a. dimulai dengan <!– diakhiri dengan –>
b. dimulai dengan <? diakhiri dengan ?>
c. dimulai dengan // diakhiri dengan *//
d. dimulai dengan # diakhiri dengan #
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
55
20. Untuk mendefinisikan judul menggunakan tag?
a. <head>
b. <body>
c. <footer>
d. <title>
21. Elemen HTML untuk memutar video adalah
a. <video>
b. <input type=’video’>
c. <media>
d. <canvas>
22. Elemen HTML untuk memutar suara adalah
a. <audio>
b. <sound>
c. <video>
d. <mp3>
23. Di dalam HTML onfocus merupakan bagian dari atribut?
a. atribut style
b. atribut event
c. atribut media
d. atribut html
24. Elemen <canvas> digunakan untuk?
a. Manipulasi data
b. Menampilkan jenis huruf
c. Membuat grafis
d. Memampilkan gambar dinamis
25. Atribut yang digunakan pada field untuk membuat aturan field tersebut harus diisi adalah atribut
a. validate
b. required
c. name
d. value
26. Untuk membuat navigasi link menggunakan tag?
a. <nav>
b. <navigation>
c. <navbar>
d. <panel>
27. Untuk membuat paragraf menggunakan tag?
a. <p>
b. <paragraf>
c. <i>
d. <italic>
28. Atribut utuk mengatur panjang dan lebar suatu elemen adalah
a. width dan height
b. width dan value
c. value dan height
d. style dan value
29. Didalam penggunaan tabel terdapat atribut colspan yang berfungsi untuk
a. Menggabungkan beberapa cell baris
b. Menggabungkan beberapa cell kolom
c. Memisahkan beberapa cell baris
d. Memisahkan beberapa cell kolom
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
56
30. Dalam atribut style properti yang digunakan untuk menentukan jenis huruf adalah
a. font-size
b. font-family
c. text-align
d. background-color
31. Untuk memerikan nilai pada suatu elemen HTML menggunakan atribut?
a. name
b. size
c. value
d. placeholder
32. Berikut ini atribut yang digunakan dalam form kecuali
a. method
b. name
c. action
d. placeholder
33. Dalam tag <form>terdapat dua jenis method yaitu?
a. GET dan HTTP
B. GET dan POST
c. POST dan SELF
D. HTTP dan SELF
34. CSS dapat ditambahkan dalam elemen HTML degan 3 cara kecuali
a. Inline
b. Outline
c. Internal
d. External
35. Untuk membuat tombol (button) menggunakan tag?
a. <button>
b. <input type=’button’>
c. Jawaban a dan b benar
d. Semua jawaban salah
36. Penulisan DOCTYPE yang benar dalaman HTML 5 adalah
a. <html>
b. <DOCTYPE>
c. <!DOCTYPE HTML>
d. <!DOCTYPE HTML5>
37. Grafik yang di buat dengan SGV menggunakan format?
a. HTML
b. XML
c. CSS
d. JS
38. Untuk memasukan kode javascript dalam dokumen HTML menggunakan tag?
a. <script>
b. <javascript>
c. <js>
d. Jawaban a, b dan c benar semuanya
39. Setiap elemen HTML hanya dapat memiliki satu atribut ID tunggal (unik)!
a. benar
b. salah
c. jawaban a dan b benar
d. jawaban a dan b salah
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
57
40. HTML merupakan bahasa markup yang pemrosesannya berada di sisi?
a. client side
b. server side
c. local side
d. eksternal side
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Materi Web Desain Dasar Kelas 8 1-62
Discover the best professional documents and content resources in AnyFlip Document Base.
Search