Download to read offline
HTML.pptx
- 1.
- 2. Membuat List PadaHTML List atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML yang digunakan untuk menampilkan data secara berurutan ke bawah. Dalam HTML penulisan list menggunakan tag <li>. dalam membuat list pada HTML ini terdapat dua jenis tampilan list yang bisa di gunakan yaitu ordered list (bentuk huruf atau angka) dan unordered list (bentuk bulatan atau kotak). <html> <head> <title>belajar membuat list</title> </head> <body> <br> <ol> <li>belajar HTML</li> <li>belajar PHP</li> </ol> </body> </html> <html> <head> <title>belajar membuat list</title> </head> <body> <br> <ul> <li>belajar HTML</li> <li>belajar PHP</li> </ul> </body> </html>
- 3. Menampilkan Gambar Untuk menampilkangambar dengan HTML, anda bisa menggunakan tag <img>.kemudian masukkan atribut “src=” pada tag <img>. atribut src berguna untuk menghubungkan dengan file gambar,
- 4. untuk pembuatan tabelmenggunakan tag <table>, dan menggunakan tag <tr> untuk membuat baris dan <td> untuk membuat kolom data, Dan tag <th> untuk membuat table head atau bagian kepala pada table. <html> <head> <title>belajar membuat tabel di html</title> </head> <body> <table border="1"> <tr> <td>baris 1 / kolom 1</td> <td>baris 1 / kolom 2</td> </tr> <tr> <td>baris 2 / kolom 1</td> <td>baris 2 / kolom 2</td> </tr> <tr> <td>baris 3/ kolom 1</td> <td>baris 3/ kolom 2</td> </tr> <tr> <td>baris 4/ kolom 1</td> <td>baris 4/ kolom 2</td> </tr> </table> </body> </html> tag table saya memberikan atribut border=’1’. atribut border ini digunakan untuk memberikan garis pada table dan nilai 1 ini merupakan nilai dari garis tepi pada tabel
- 5. Beberapa perintah pentinguntuk membuat tabel: 1. <table border=”1”> .... </table> merupakan perintah utama dalam pembuatan tabel, tabel dengan ketebalan 1px 2. <tr> ... </tr> tag untuk membuat baris 3. <td> ... </td> tag untuk membuat kolom/cell 4. colspan merge/melebarkan kolom/cell 5. rowspan merge/melebarkan baris
- 6. Kok tidak adagarisnya? Iya, karena kita tidak menambahkan atribut border pada tabelnya. Agar Tabelnya memiliki garis, silahkan tambahkan atribut border="1" di dalam tag <table>.
- 7. Mengatur Jarak Seldengan Cellpadding Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis di dalam sel. Atribut ini dapat kita berikan kepada tag <table>. Contoh:
- 8. Menambahkan Warna padaSel dan Baris Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor di dalam tag <td> (untuk sel) atau <tr> (untuk baris). Contoh: Nilai atribut bgcolor bisa kita isi dengan kode warna dalam heksadesimal atau nama warna dalam bahasa inggris.
- 9. Menggabungkan Sel Tabel Atributyang digunakan untuk menggabungkan sel tabel adalah rowspan dan colspan: •rowspan untuk menggbungkan baris; •colspan untuk mebggabungkan kolom. Atribut ini bisa kita berikan kepada tag <td> atau <th>.
- 10.
- 11. Menyisipkan Elemen yangLain ke dalam Sel Di salam sel <td> dan <th>, kita bisa menyisipkan elemen HTML yang lain, seperti gambar, link, video, list, dsb. Contoh:
- 13. Membuat Hyperlink PadaHTML Tujuan dari hyperlink ini membuat sebuah teks atau gambar yang ketika diklik akan di alihkan ke halaman tertentu yang sudah di tetapkan dalam penulisan hyerlink tersebut. Hyperlink sendiri ditulis dengan menggunakan tag <a>. di ikuti olehatribut href (hyperlink reference) <a href="http://uinsaizu.ac.id">klik disini</a> ketika di klik pada kata “klik disini” maka halaman akan di alihkan ke halaman www.uinsaizu.ac.id. hal ini sesuai dengan ketentuan yang telah kita tetapkan pada atribut href.
- 14. Membuat Form padaHTML Tag <form> Dalam tag <form> ini dibutuhkan beberapa atribut untuk memproses data yang akan dikirim. dan biasanya nilai yang di kirim berupa alamat dari sebuah halaman untuk memproses data inputan. dan atribut yang kedua berupa method. method ini menjelaskan bagaimana data yang akan dikirim oleh web browser. nilai dari method ini biasanya get atau post. Tag <input> Tag input merupakan tag yang akan digunakan dalam form pengisian. tag input ini memiliki banyak sekali bentuk yang bisa digunakan misalkan isian teks, password, checkbox, radio button, sampai dengan tombol submit berada dalam tag <input>.
- 15. Berikut beberapa bentukdalam tag <input> yang di kategorikan berdasarkan atribut : JENIS INPUT KETERANGAN <input type=’text’> Form ini bersifat menerima inputan text misalkan: username, nama, tempat lahir atau berupa inputan text yang pendek. <input type=’password’> Form ini bersifat menerima inputan password. Setiap text yang di input akan di tampilkan sebagai tanda titik(di samarkan), textbox ini biasanya digunakan untuk membuat inputan password. <input type=’submit’> inputan ini berupa tombol submit untuk memproses data inputan dari form. <input type=’checkbox’> inputan berupa checkbox yang dapat di ceklis oleh user. Inputan ini memungkinan user untuk men-checklist banyak pilihan sekaligus. <input type=’radio’> ini berupa radio grup, dimana user dapat memilih salah satu dari pilihan yang disediakan dengan menggunakan form radio. contoh nya adalah form pemilihan jenis kelamin. ********** Submit
- 16. Tag <textarea> Tag <textarea>adalah tag yang sama fungsinya dengan inputan text, hanya saja pada textarea ini dapat diisikan dengan lebih banyak teks didalamnya secara sekaligus. Contoh nya untuk pengisian alamat lengkap. <textarea> </textarea> Tag <select> Tag <select> merupakan tag yang digunakan user untuk memilih data yang sudah disediakan. Dalam penggunakan <select> selalu diikuti oleh <option> yang digunakan untuk membuat pilihan. <select> <option>Semarang</option> <option>Bandung</option> </select>
- 17.
- 19. Tulislah Perintah HTMLuntuk menghasilkan table seperti dibawah 1 2 3