Web Programming (Pertemuan 3)

Web Programming Pengenalan form, table pada html dan css Rizki
Mufrizal

Rizki Mufrizal Technical Solution Architect Software Engineer https://rizkimufrizal.github.io

Pengenalan Form Pada HTML Jika kita perhatikan halaman web yang
populer seperti Google, Facebook dan Youtube Semua web tersebut memiliki bagian untuk menerima data, yang datanya dimasukkan oleh pengguna web tersebut Di HTML, untuk menerima input data dari pengguna, kita bisa menggunakan HTML Form Terdapat banyak sekali jenis input data yang bisa kita buat dalam Form, seperti teks, checkbox, selection, password, dan masih banyak yang lainnya

Membuat Tag Form <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
/> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar</title> </head> <body> <form action="/url" method="post"> Nama <input name="nama" type="text" /> <button>klik</button> </form> </body> </html>

Tag Table Saat membuat halaman Web, kita sering membuat tabel
Di HTML, kita kita juga bisa membuat tabel Ada banyak sekali tag yang digunakan untuk membuat table

Tag detail table Tag table, digunakan untuk membuat tabel Tag
tr untuk membuat row / baris Tag th untuk membuat kolom header table Tag td untuk membuat kolom isi table Tag thead, untuk grup header table Tag tbody, untuk grup isi table Tag tfoot, untuk grup footer table

Membuat Tag Table <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
/> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar</title> </head> <body> <table> <thead> <tr> <th>Nama</th> <th>Kelas</th> <th>Alamat</th> </tr> </thead> <tbody> <tr> <td>Budi</td> <td>A</td> <td>Sigli</td> </tr> <tr> <td>Nisa</td> <td>B</td> <td>Banda Aceh</td> </tr> </tbody> </table> </body> </html>

Pengenalan CSS Sekarang kita sudah bisa membuat tulisan, pertanyaannya, bagaimana
jika kita ingin mengubah font, ukurannya, dan warnanya Setiap tag di HTML memiliki atribut style, dimana kita bisa menambahkan informasi CSS, yaitu untuk mengubah gaya isi element-nya css dapat menggunakan file terpisah atau diluar dari file html dengan ektensi .css atau dapat juga langsung digunakan pada html Style attribute berisikan key:value CSS, jika lebih dari satu, maka gunakan ; (titik koma) sebagai pemisah, misal : <namatag style="property:value"></namatag> <namatag style="property:value; property2:value2"></namatag>

Menggunakan CSS <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar</title> </head> <body> <h1 style="color: red;">Belajar CSS</h1> </body> </html>

Pengenalan Bootstrap Bootstrap adalah framework gratis yang bersifat open-source. Skrip
dan syntax yang disediakan Bootstrap bisa diterapkan untuk berbagai komponen dalam desain web. Bootstrap dapat diakses di https://getbootstrap.com/

Menggunakan Bootstrap <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar</title> <link href="css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <table class="table"> <thead> <tr> <th>Nama</th> <th>Kelas</th> <th>Alamat</th> </tr> </thead> <tbody> <tr> <td>Budi</td> <td>A</td> <td>Sigli</td> </tr> <tr> <td>Nisa</td> <td>B</td> <td>Banda Aceh</td> </tr> </tbody> </table> <script type="text/javascript" src="js/bootstrap.bundle.min.js"></script> </body> </html>

Terima Kasih

Web Programming (Pertemuan 3)

Web Programming (Pertemuan 3)

rizki mufrizal

More Decks by rizki mufrizal

Other Decks in Technology

Featured

Transcript

Web Programming Pengenalan form, table pada html dan css Rizki

Rizki Mufrizal Technical Solution Architect Software Engineer https://rizkimufrizal.github.io

Pengenalan Form Pada HTML Jika kita perhatikan halaman web yang

Membuat Tag Form <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

Tag Table Saat membuat halaman Web, kita sering membuat tabel

Tag detail table Tag table, digunakan untuk membuat tabel Tag

Membuat Tag Table <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

Pengenalan CSS Sekarang kita sudah bisa membuat tulisan, pertanyaannya, bagaimana

Menggunakan CSS <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

Pengenalan Bootstrap Bootstrap adalah framework gratis yang bersifat open-source. Skrip

Menggunakan Bootstrap <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

Terima Kasih