Repository Universitas Komputer Indonesia

Praktikum Aplikasi Berbasis Web II 
Materi 12 Membahas mengenai pembuatan program untuk Edit Data kedalam tabel barang, menggunakan perintah sql Inser

Suryana, Taryana

 
 
 
Melakukan Edit  atau Perubahan Data 
 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081321480577 
 
12.Edit  Data Barang 
Pada bagian ini akan dibahas mengenai bagaimana membuat program untuk 
melakukan perubahan atau edit pada data yang sudah ada dalam database atau 
tabel. 
 
Adapun file yang akan digunakan dan dibuat yaitu: 
1. editbarang.html 
2. carieditbarang.php 
3. Saveeditbarang.php 
 
 
12.1. Membuat form Edit Barang 
Buat form untuk memasukan data barang yang akan di edit, seperti berikut: 
 
NamaFile:editbarang.html 
 
<form action="carieditbarang.php" method=post> 
<center> 
<h1> 
FORM EDIT DATA BARANG 
<hr> 
<table> 
<tr><td>KODE BARANG<td><input name=kodebrg size=5> 
</table> 
<hr> 
<input type=submit value=Cari> 
<input type=reset value=Reset> 
 
 
 
12.2.Membuat Program Cari Edit Data Barang 
Program ini berfungsi untuk melakukan pencarian data kedalam database, jika data 
yang dicari ada maka data tersebut akan ditampilkan kelayar dan sekaligus dapat 
melakukan perubahan data pada form tersebut. 
 
NamaFile:CARIEDITBARANG.PHP 
<h1> 
<form action="saveeditbarang.php" method=post> 
<center> 
MENAMPILKAN DATA BARANG 
<hr> 
<table border=0> 
<?php 
$kode=$_POST['kode']; 
$conn=mysqli_connect("localhost","root","","IF"); 
$sql="select * from barang where kode='$kode' "; 
$hasil=mysqli_query($conn,$sql); 
$row=mysqli_fetch_row($hasil); 
do 
{ 
list($kode,$nama,$harga,$jumlah)=$row; 
echo "<tr><td>KODE BARANG<td><input name=kode value='$kode' size=5 readonly>"; 
echo "<tr><td>NAMA BARANG<td><input name=nama value='$nama' size=30>"; 
echo "<tr><td>HARGA<td><input name=harga value='$harga' size=10>"; 
echo "<tr><td>STOK<td><input name=jumlah value='$jumlah' size=3>"; 
} 
while($row=mysqli_fetch_row($hasil)); 
?> 
</table> 
<hr> 
<input type=submit value=Save> 
<input type=reset value=Reset> 
 
 
 
12.3. Menyimpan Hasil Edit Data Barang 
Untuk menyimpan hasil perubahan data kedalam database, selanjutnya dibuat 
program untuk meyimpan datanya. 
 
File SAVEEDITBARANG.PHP berfungsi untuk menangani proses penyimpanan data 
yang dimasukan dari form CARIEDITBARANG.PHP kedalam tabel Barang. 
 
NamaFile:Saveeditbarang.php 
<h1> 
<center> 
Save EDIT Data Barang 
<hr> 
<table> 
<?php 
$kode=$_POST['kode']; 
$nama=$_POST['nama']; 
$harga=$_POST['harga']; 
$jumlah=$_POST['jumlah']; 
echo "<tr><td>KODE<td>$kode"; 
echo "<tr><td>NAMA BARANG<td>$nama"; 
echo "<tr><td>HARGA<td>$harga"; 
echo "<tr><td>JUMLAH<td>$jumlah"; 
 
$conn=mysqli_connect("localhost","root","","IF");  
$sql="update barang set nama='$nama',harga='$harga',jumlah='$jumlah' where 
kode='$kode' "; 
$hasil=mysqli_query($conn,$sql); 
echo "</table><h1><hr>Data Barang Telah di Simpan"; 
?> 
 
 
12.4.Menampilkan Hasil Via Browser 
Setelah  Ketiga program dibuat yaitu editbarang.html, carieditbarang.php dan 
saveeditbarang.php dibuat dan disimpan dalam folder yang sama, kemudian adalah 
menampilkannya ke layar komputer: 
 
Untuk menampilkan hasilnya dapat dilakukan dengan cara seperti biasa menampilkan 
program php: 
1.Jalankakan Browser 
2. Pada Address Bar, ketikan:localhost/NamaFolder 
3.Click File editbarang.html 
 
Gambar 12.1. Menampilkan Form Pencarian Barang 
 
4.Click tombol Cari, pada contoh ini yang masukan adalah kode barang B001, 
selanjutnya akan ditampilkan hasil seperti berikut: 
 
 
 
Gambar 12.2. Menampilkan Form Edit Barang 
 
Lakukan perubahan data pada Nama Barang, Harga dan Stok, misalnya Harga 
dirubah menjadi 6000000 dan Stok menjadi 25 
 
 
 
 
Gambar 12:3. Menyimpan Data Kedalam Tabel Barang 
 
 
Setelah proses ini Data Barang yang ada di dalam database atau table akan 
terupdate. 
Berikut adalah contoh hasil perubahan data tersebut jika ditampilkan di phpmyadmin. 
 
 
Gambar 12.4. Browse Tabel Barang 
 
Sampai tahap ini pembuatan program untuk edit data barang telah selesai dan sesuai 
dengan yang diharapkan diawal materi. 
 
 
 
 
 
 
 
PUSTAKA 
 
1. Suryana, Taryana (2022) Navigasi Menu Dengan W3 Css. [Teaching Resource] 
2. Suryana, Taryana (2022) Pengelolaan Database Dan Structure Query Language. [Teaching 
Resource] 
3. Suryana, Taryana (2022) Objek Tipe Checkbox Dan Radio. [Teaching Resource] 
4. Suryana, Taryana (2022) Objek Tipe Select Dan Text Area. [Teaching Resource] 
5. Suryana, Taryana (2022) Membaca Form Dari Html Ke Java Script. [Teaching Resource] 
6. Suryana, Taryana (2022) W3 Css Display, Layout, Button. [Teaching Resource] 
7. Suryana, Taryana (2022) W3 Css Framework. [Teaching Resource] 
8. Suryana, Taryana (2022) Gambar Pendukung Meteri Css. [Teaching Resource] 
9. Suryana, Taryana (2022) Pengenalan Css. [Teaching Resource] 
10. Suryana, Taryana (2022) W3.css Display Dan Button. [Teaching Resource] 
11. Suryana, Taryana (2022) Navigasi Menu Dengan W3 Css. [Teaching Resource] 
12. Suryana, Taryana (2022) Materi 3. Operator Dalam Php. [Teaching Resource] 
13. Suryana, Taryana (2022) Materi 3. Membuat List Atau Daftar Dalam Html. [Teaching Resource] 
14. Suryana, Taryana (2022) Fungsi Logika Atau Percabangan. [Teaching Resource] 
15. Suryana, Taryana (2022) Pengenalan Dasar Pemrograman Java Script. [Teaching Resource] 
16. Suryana, Taryana (2022) Fungsi Logika Atau Pecabangan Dalam Javascript. [Teaching Resource] 
17. Suryana, Taryana (2022) Operator Dalam Php Dan Mysql. [Teaching Resource] 
18. Suryana, Taryana (2021) Edit Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
19. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan 
Mysql. [Teaching Resource] 
20. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching 
Resource] 
21. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
22. Suryana, Taryana (2021) Instalasi Xampp Untuk Menjalankan Web Server Apache Database 
Mysql Dan Program Php. [Teaching Resource] 
23. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
24. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
25. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching 
Resource] 
26. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
27. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
28. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
29. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
30. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
31. https://www.w3schools.com/  September, 2021 
32. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, 
Jogyakarta 
33. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
34. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
35. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 
 
 


Melakukan Edit  Atau Perubahan Data Pada Tabel

Praktikum Aplikasi Berbasis Web II 
Materi 13 Membahas mengenai pembuatan program untuk menghapus data dari tabel barang, dengan menggunakan perintah sql delet

 
 
 
Melakukan Delete  atau Penghapusan Data 
 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
13.Delete Data Barang 
Pada bagian ini akan dibahas mengenai bagaimana membuat program untuk 
melakukan penghapusan pada data yang sudah ada dalam database atau tabel. 
 
Adapun file yang akan digunakan dan dibuat yaitu: 
1. deletebarang.html 
2. cariedeletebarang.php 
3. Savedeletebarang.php 
 
 
13.1. Membuat form Delete Barang 
Buat form untuk memasukan data barang yang akan di edit, seperti berikut: 
 
NamaFile:deletebarang.html 
 
<form action="carieditbarang.php" method=post> 
<center> 
<h1> 
FORM EDIT DATA BARANG 
<hr> 
<table> 
<tr><td>KODE BARANG<td><input name=kodebrg size=5> 
</table> 
<hr> 
<input type=submit value=Cari> 
<input type=reset value=Reset> 
 
 
 
 
13.2.Membuat Program Cari Delete Data Barang 
Program ini berfungsi untuk melakukan pencarian data kedalam database, jika data 
yang dicari ada maka data tersebut akan ditampilkan kelayar. 
 
NamaFile:CARIDELETEBARANG.PHP 
<h1> 
<form action="saveeditbarang.php" method=post> 
<center> 
MENAMPILKAN DATA BARANG 
<hr> 
<table border=0> 
<?php 
$kode=$_POST['kode']; 
$conn=mysqli_connect("localhost","root","","if"); 
$sql="select * from barang where kode='$kode' "; 
$hasil=mysqli_query($conn,$sql); 
$row=mysqli_fetch_row($hasil); 
do 
{ 
list($kode,$nama,$harga,$jumlah)=$row; 
echo "<tr><td>KODE BARANG<td><input name=kode value='$kode' size=5 readonly>"; 
echo "<tr><td>NAMA BARANG<td><input name=nama value='$nama' size=30>"; 
echo "<tr><td>HARGA<td><input name=harga value='$harga' size=10>"; 
echo "<tr><td>STOK<td><input name=jumlah value='$jumlah' size=3>"; 
} 
while($row=mysqli_fetch_row($hasil)); 
?> 
</table> 
<hr> 
<input type=submit value=Save> 
<input type=reset value=Reset> 
 
 
 
13.3. Menyimpan Hasil Edit Data Barang 
Untuk menyimpan hasil perubahan data kedalam database, selanjutnya dibuat 
program untuk meyimpan datanya. 
 
File SAVEEDITBARANG.PHP berfungsi untuk menangani proses penyimpanan data 
yang dimasukan dari form CARIEDITBARANG.PHP kedalam tabel Barang. 
 
NamaFile:Saveeditbarang.php 
<h1> 
<center> 
Save EDIT Data Barang 
<hr> 
<table> 
<?php 
$kode=$_POST['kode']; 
$nama=$_POST['nama']; 
$harga=$_POST['harga']; 
$jumlah=$_POST['jumlah']; 
echo "<tr><td>KODE<td>$kode"; 
echo "<tr><td>NAMA BARANG<td>$nama"; 
echo "<tr><td>HARGA<td>$harga"; 
echo "<tr><td>JUMLAH<td>$jumlah"; 
$conn=mysqli_connect("localhost","root","","if");  
 
$sql="update barang set nama='$nama',harga='$harga',jumlah='$jumlah' where 
kode='$kode' "; 
$hasil=mysqli_query($conn,$sql); 
echo "</table><h1><hr>Data Barang Telah di Simpan"; 
?> 
 
 
14.4.Menampilkan Hasil Via Browser 
Setelah  Ketiga program dibuat yaitu editbarang.html, carieditbarang.php dan 
saveeditbarang.php dibuat dan disimpan dalam folder yang sama, kemudian adalah 
menampilkannya ke layar komputer: 
 
Untuk menampilkan hasilnya dapat dilakukan dengan cara seperti biasa menampilkan 
program php: 
1.Jalankakan Browser 
2. Pada Address Bar, ketikan:localhost/namafolder 
3.Click File editbarang.html 
 
Gambar 13.1. Menampilkan Form Pencarian Barang 
 
4.Click tombol Cari, pada contoh ini yang masukan adalah kode barang B001, 
selanjutnya akan ditampilkan hasil seperti berikut: 
 
 
 
Gambar 13:2. Menampilkan Form Edit Barang 
 
Lakukan perubahan data pada Nama Barang, Harga dan Stok, misalnya Harga 
dirubah menjadi 6000000 dan Stok menjadi 25 
 
 
 
 
Gambar 13:3. Menyimpan Data Kedalam Tabel Barang 
 
 
Setelah proses ini Data Barang yang ada di dalam database atau table akan 
terupdate. 
Berikut adalah contoh hasil perubahan data tersebut jika ditampilkan di phpmyadmin. 
 
 
Gambar 13.4. Browse Tabel Barang 
 
Sampai tahap ini pembuatan program untuk edit data barang telah selesai dan sesuai 
dengan yang diharapkan diawal materi. 
 
 
 
 
 
 
 
PUSTAKA 
 
1. Suryana, Taryana (2022) Navigasi Menu Dengan W3 Css. [Teaching Resource] 
2. Suryana, Taryana (2022) Pengelolaan Database Dan Structure Query Language. [Teaching 
Resource] 
3. Suryana, Taryana (2022) Objek Tipe Checkbox Dan Radio. [Teaching Resource] 
4. Suryana, Taryana (2022) Objek Tipe Select Dan Text Area. [Teaching Resource] 
5. Suryana, Taryana (2022) Membaca Form Dari Html Ke Java Script. [Teaching Resource] 
6. Suryana, Taryana (2022) W3 Css Display, Layout, Button. [Teaching Resource] 
7. Suryana, Taryana (2022) W3 Css Framework. [Teaching Resource] 
8. Suryana, Taryana (2022) Gambar Pendukung Meteri Css. [Teaching Resource] 
9. Suryana, Taryana (2022) Pengenalan Css. [Teaching Resource] 
10. Suryana, Taryana (2022) W3.css Display Dan Button. [Teaching Resource] 
11. Suryana, Taryana (2022) Navigasi Menu Dengan W3 Css. [Teaching Resource] 
12. Suryana, Taryana (2022) Materi 3. Operator Dalam Php. [Teaching Resource] 
13. Suryana, Taryana (2022) Materi 3. Membuat List Atau Daftar Dalam Html. [Teaching Resource] 
14. Suryana, Taryana (2022) Fungsi Logika Atau Percabangan. [Teaching Resource] 
15. Suryana, Taryana (2022) Pengenalan Dasar Pemrograman Java Script. [Teaching Resource] 
16. Suryana, Taryana (2022) Fungsi Logika Atau Pecabangan Dalam Javascript. [Teaching Resource] 
17. Suryana, Taryana (2022) Operator Dalam Php Dan Mysql. [Teaching Resource] 
18. Suryana, Taryana (2021) Edit Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
19. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan 
Mysql. [Teaching Resource] 
20. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching 
Resource] 
21. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
22. Suryana, Taryana (2021) Instalasi Xampp Untuk Menjalankan Web Server Apache Database 
Mysql Dan Program Php. [Teaching Resource] 
23. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
24. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
25. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching 
Resource] 
26. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
27. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
28. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
29. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
30. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
31. https://www.w3schools.com/  September, 2021 
32. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, 
Jogyakarta 
33. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
34. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
35. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 
 
 


Menghapus Data Pada Tabel

Komputer Aplikasi IT-2
Materi 13.  ini membahas mengenai pembuatan input dan label dengan menggunakan css framewor

 
 
W3.CSS INPUT dan LABEL 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
13.W3.CCS Input 
Kelas w3-input memungkinkan Anda untuk membuat form input lebih baik dan lebih rapih, 
ada beberapa type masukan yang dapad digunakan, yaitu: 
Text 
Checkbox 
Select 
Radio 
 
13.1. Input Text 
Jika anda ingin memasukan data dalam bentuk kotak masukan satu baris, maka dapat 
digunakan input type text,  adapun penggunaannya adalah seperti berikut: 
 
 
<input class="w3-input" type="text" name=”namaobjek”> 
 
 
Contoh Misalkan anda ingin membuat form input, dengan nama variable akan disimpan di 
namasiswa, maka code programnya adalah sebagai berikut: 
 
<input class="w3-input" type="text" name=”namasiswa”> 
 
 
Misalkan Anda, ingin membuat form masukan sebagai berikut: 
 
 
 
Gambar 13.1. Form Input dengan Tipe Text 
 
NamaFile:css36.html 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
<div class="w3-container w3-blue"> 
  <h2>Input Form</h2> 
</div> 
<form class="w3-container"> 
  <p> 
  <label>Nama Lengkap</label> 
  <input class="w3-input" type="text"></p> 
  <p> 
  <label>Alamat</label> 
  <input class="w3-input" type="text"></p> 
  <p> 
  <label>Email</label> 
  <input class="w3-input" type="text"></p> 
</form> 
</body> 
</html> 
 
 
 
13.2. Input Card 
Jika anda menghendaki agar form input berbentuk seperti kartu, maka dapat ditambahkan 
class card seperti berikut: 
 
<div class="w3-card-4"> 
 <div class="w3-card-4"> 
    <div class="w3-container w3-green"> 
      <h2>DATA SISWA</h2> 
    </div> 
 <div> 
</div> 
 
 
NamaFile:css37.html 
 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
 
<div class="w3-container"> 
  <h2>Input Card</h2> 
   
  <div class="w3-card-4"> 
    <div class="w3-container w3-green"> 
      <h2>DATA SISWA</h2> 
    </div> 
 
    <form class="w3-container"> 
      <p> 
      <input class="w3-input" type="text" name="nim"> 
      <label>NIM</label></p> 
      <p>      
      <input class="w3-input" type="text" name="namalengkap"> 
      <label>NAMA LENGKAP</label></p> 
    </form> 
  </div> 
</div> 
</body> 
</html> 
 
 
 
 
 
Gambar 13.2. Form Input Bentuk Kartu 
 
 
 
 
13.3. Input Checkbox 
Jika anda ingin membuat form input dengan pilihan berbentuk checkbox atau checklist, maka 
dapat digunakan kelas w3-check,  adapun perintah dasarnya adalah sebagai berikut: 
 
<input class="w3-check" type="checkbox" name="namaobjek"> 
 
NamaFile:css38.html 
 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
 
<form class="w3-container w3-card-4"> 
  <h2>Pilih Kota Pavorit Anda</h2> 
  <p> 
  <input class="w3-check" type="checkbox" checked="checked"> 
  <label>Jakarta</label></p> 
  <p> 
  <input class="w3-check" type="checkbox"> 
  <label>Bandung</label></p> 
  <p> 
 
  <input class="w3-check" type="checkbox"> 
  <label>Cianjur</label></p> 
  <p> 
  <input class="w3-check" type="checkbox" disabled> 
  <label>Garut (Disabled)</label></p> 
</form> 
</body> 
</html> 
 
 
 
 
Gambar 13.3. Form Input Checkbox 
 
 
 
13.4.INPUT TIPE RADIO 
Jika anda ingin membuat form input dengan pilihan berbentuk radio, maka dapat digunakan 
kelas w3-radio,  adapun perintah dasarnya adalah sebagai berikut: 
<input class="w3-radio" type="radio" name="namaobjek" value="nilai" checked> 
 
 
NamaFile:css39.html 
 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
 
<form class="w3-container w3-card-4"> 
  <div class="w3-container w3-purple"> 
   <h2>Jenis Kelamin Anda</h2> 
  </div> 
  <p> 
 
  <input class="w3-radio" type="radio" name="gender" value="male" checked> 
  <label>Pria</label></p> 
  <p> 
  <input class="w3-radio" type="radio" name="gender" value="female"> 
  <label>Wanita</label></p> 
  <p> 
  <input class="w3-radio" type="radio" name="gender" value="" disabled> 
  <label>Tidak Tahu (Disabled)</label></p> 
</form> 
</body> 
</html> 
 
 
 
 
Gambar 13.4. Form Input Radio 
 
 
 
13.5.Menggunakan Select Option 
Jika anda ingin membuat form dengan input berupa pilihan yang berbentuk dropdown, maka 
dapat digunakan kelas w3-select,  adapun perintah dasarnya adalah sebagai berikut: 
 
<select class="w3-select" name="namaobjek"> 
    <option value="" disabled selected>Pilihan Anda</option> 
    <option value="1">Satu</option> 
    <option value="2">Dua</option> 
    <option value="3">Tiga</option> 
    <option value="4">Empat</option> 
  </select> 
 
 
 
 
 
 
Contoh misalkan ingin dibuat pilihan seperti Gambar 13.5 berikut: 
 
 
Gambar 13.5. Menggunakan Select Option 
 
NamaFile:css40.html 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
   
<form class="w3-container w3-card-4" action=""> 
<div class="w3-container w3-green"> 
   <h2>Memilih menggunakan Select Option</h2> 
  </div> 
  
 
  <select class="w3-select" name="option"> 
    <option value="" disabled selected>Tempat Pavorit Kamu</option> 
    <option value="1">Cafe</option> 
    <option value="2">Taman</option> 
    <option value="3">Gunung</option> 
 <option value="4">laut</option> 
  </select> 
 
  <p><button class="w3-btn w3-teal">Kirim</button></p> 
</form> 
     
</body> 
</html> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13.6. Colored Labels dan Input 
Dengan menggunan w3css anda dapat merubah warna Label ataupun warna Input, misalnya akan 
dibuat form input seperti berikut: 
 
 
 
Gambar 13.6. Memberi Warna Pada Label dan Kotak Input 
 
 
NamaFile:CSS41.HTML 
<!DOCTYPE html> 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
<div class="w3-card-4"> 
  <div class="w3-container w3-pale-blue"> 
    <h2>Memberi Warna Pada Label dan Input</h2> 
  </div> 
  <form class="w3-container" action=""> 
    <p>       
    <label class="w3-text-brown"><b>First Name</b></label> 
    <input class="w3-input w3-border w3-amber" name="first" type="text"></p> 
    <p>       
    <label class="w3-text-deep-orange"><b>Last Name</b></label> 
    <input class="w3-input w3-border w3-sand" name="last" type="text"></p> 
    <p> 
    <button class="w3-btn w3-brown">Register</button></p> 
  </form> 
</div> 
</body> 
</html> 
 
 
 
 
Tugas 13. Buat Form Seperti berikut: 
Data Form, warna, isi, Boleh di Rubah asal memenuhi 4 jenis Tipe Input, yaitu ada text,select, radio 
dan checkbox 
 
 
 
Kirim Screenshot program dan Code Program dalam bentuk PDF ke Tugas Kuliah Online, dikirim paling 
telat hari minggu  
 
 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana (2021) Menggunakan W3 Css Display Dan Layout. [Teaching Resource] 
2. Suryana, Taryana (2020) Pertemuan 10 W3.css Framework. [Teaching Resource] 
3. Suryana, Taryana (2021) Pengenalan Css Cascading Style Sheet. [Teaching Resource] 2. 
4. Suryana, Taryana (2021) Penggunaan Css Dalam Html. [Teaching Resource] 3. Suryana, 
5. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
6. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
7. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
8. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
9. https://www.w3schools.com/html, September, 2021 
10. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
11. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
12. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching Resource] 
13. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Materi Jurusan Perancangan 
Wilayah Dan Kota. [Teaching Resource] 
14. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Untuk Jurusan Teknik 
Sipil. [Teaching Resource] 
15. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html. [Teaching Resource] 
16. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-ul2-2021. [Teaching 
Resource] 
17. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-2021-1. [Teaching Resource] 
18. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-2021-1. [Teaching Resource] 
19. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
20. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan Disdukcapil. [Teaching 
Resource] 
21. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-2021-1. [Teaching Resource] 
22. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-2021-1. [Teaching Resource] 
23. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-12021-1. [Teaching Resource] 
24. https://www.w3schools.com/html 
25. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
26. Suryana, Taryana (2021) Membuat Form Input Data Dengan Menggunakan Html Dan Html5 Kelas 
Ts-2021-1. [Teaching Resource] 
27. Suryana, Taryana (2021) Membuat Formulir Input Data Dengan Html Dan Html5 Kelas Pwk-2021-
1. [Teaching Resource] 
28. Suryana, Taryana (2021) Membuat Form Atau Formulit Input Data Dengan Html Dan Html5 Kelas 
If3-2021-1. [Teaching Resource] 
29. Suryana, Taryana (2021) Membuat Formulir Atau Form Dengan Html Dan Html5 Kelas If2-2021-
1. [Teaching Resource] 
 
 
 
 


Input Dan Label

Aplikasi IT-2
Materi 15. Membahas mengenai pembuatan Menu Untuk Integrasi semua program yang pernah dibuat sebelumnya, 
sehingga akan memudahkan ketika ingin menampilkan informasi atau data yang diinginka

 
 
MENU NAVIGASI DENGAN W3.CSS 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
15. Membuat Menu Dengan W3.CSS  
Untuk membuat menu dalam pembuatan Web, dapat dilakukan dengan 
menggunakan class="w3-btn”, sebelumnya anda harus memiliki file w3.css yang 
merupakan framework css yang memiliki banyak fungsi. 
Adapun sintak dasarnya adalah sebagai berikut: 
<a href="#" class="w3-btn w3-lime" style="width:10%">Link </a> 
 
Misal akan dibuat Menu Website seperti berikut: 
 
 
 
 
15.1.Buat Frame 
Untuk membuat tampilkan seperti diatas, pertama buat frame dengan bentuk kolom, dengan 
ukuran, sebelah kiri 20% dan sebelah kanan sisanya 
 
Pertama Buat Frame dulu, yaitu dengan membagi lagi layar menjadi 2 Bagian 
NamaFile:frame.html 
<frameset cols="20%,*"> 
   <frame src="menubar.html"> 
   <frame src="welcome.html" name="welcome"> 
</frameset> 
 
 
Kemudian buat file kedua yaitu:  
Namafile:menubar.html 
 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
<div class="w3-container"> 
 <center><h2>MENU</h2> 
 <a href="welcome.html" target="welcome" class="w3-btn w3-lime" 
style="width:200px">Home </a> 
<hr> 
 <a href="profile.html" target="welcome" class="w3-btn w3-red" 
style="width:200px">Profile </a> 
<hr> 
 <a href="inputbarang.html" target="welcome" class="w3-btn w3-orange" 
style="width:200px">Input Barang </a> 
<hr> 
<a href="tampilbarang.php" target="welcome" class="w3-btn w3-blue" 
style="width:200px">Tampil Barang </a> 
<hr> 
 <a href="editbarang.html" target="welcome" class="w3-btn w3-green" 
style="width:200px">Edit Barang </a> 
<hr> 
 <a href="deletebarang.html" target="welcome" class="w3-btn w3-purple" 
style="width:200px">Delete Barang </a> 
<hr> 
<a href="tampilperwalian.php" target="welcome" class="w3-btn w3-yellow" 
style="width:200px">Perwalian </a> 
<hr> 
  
 
 
Kemudian buat file ketiga yaitu: 
Namafile:welcome.html 
 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
<center> 
<header class="w3-container w3-blue"> 
  <h2>Belajar Pemrograman Web</h2> 
</header> 
<div class="w3-container"> 
   <img src="unikom-du.jpg" style="width:100%;max-width:600px"> 
</div> 
<footer class="w3-container w3-blue"> 
  <h5>HTML-JavaScript-CSS-PHP-MYSQL</h5> 
</footer> 
</div> 
 
 
 
15.2.Menjalankan Program 
Untuk menjalankan Program, buka file frame.html dengan menggunakan browser, 
selanjutnya akan ditampilkan hasil seperti berikut: 
 
http://localhost/relasi/frame.html 
 
 
 
Click pada menu yang diinginkan, jika benar maka akan ditampilkan isi dari halaman yang di click 
tersebut. 
 
 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana (2022) Membuat Form Dengan Html5. [Teaching Resource] 
2. Suryana, Taryana (2022) Membuat Tabel Pada Html. [Teaching Resource] 
3. Suryana, Taryana (2022) Materi 3. Operator Dalam Php. [Teaching Resource] 
4. Suryana, Taryana (2022) Materi 3. Membuat List Atau Daftar Dalam Html. [Teaching Resource] 
5. Suryana, Taryana (2022) Fungsi Logika Atau Percabangan. [Teaching Resource] 
6. Suryana, Taryana (2022) W3.css Animation Effect. [Teaching Resource] 
7. Suryana, Taryana (2022) W3.css Navigation Dan Javascript. [Teaching Resource] 
8. Suryana, Taryana (2022) Membuat Form Atau Formulir Input Dengan W3 Css. [Teaching 
Resource] 
9. Suryana, Taryana (2022) Membuat Program Hapus Data Akta Perkawinan. [Teaching Resource] 
10. Suryana, Taryana (2022) Membuat Program Untuk Menghapus Data Barang. [Teaching 
Resource] 
11. Suryana, Taryana (2022) Membuat Form Input Dan Label Dengan W3 Css. [Teaching Resource] 
12. Suryana, Taryana (2021) Menggunakan W3 Css Display Dan Layout. [Teaching Resource] 
13. Suryana, Taryana (2020) Pertemuan 10 W3.css Framework. [Teaching Resource] 
14. Suryana, Taryana (2021) Pengenalan Css Cascading Style Sheet. [Teaching Resource] 2. 
15. Suryana, Taryana (2021) Penggunaan Css Dalam Html. [Teaching Resource] 3. Suryana, 
16. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
17. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
18. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
19. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
20. https://www.w3schools.com/html, September, 2021 
21. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
22. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
23. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching Resource] 
24. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Materi Jurusan Perancangan 
Wilayah Dan Kota. [Teaching Resource] 
25. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Untuk Jurusan Teknik 
Sipil. [Teaching Resource] 
26. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html. [Teaching Resource] 
27. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-ul2-2021. [Teaching 
Resource] 
28. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-2021-1. [Teaching Resource] 
29. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-2021-1. [Teaching Resource] 
30. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
31. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan Disdukcapil. [Teaching 
Resource] 
32. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-2021-1. [Teaching Resource] 
33. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-2021-1. [Teaching Resource] 
34. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-12021-1. [Teaching Resource] 
35. https://www.w3schools.com/html 
36. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
37. Suryana, Taryana (2021) Membuat Form Input Data Dengan Menggunakan Html Dan Html5 Kelas 
Ts-2021-1. [Teaching Resource] 
 
38. Suryana, Taryana (2021) Membuat Formulir Input Data Dengan Html Dan Html5 Kelas Pwk-2021-
1. [Teaching Resource] 
39. Suryana, Taryana (2021) Membuat Form Atau Formulit Input Data Dengan Html Dan Html5 Kelas 
If3-2021-1. [Teaching Resource] 
40. Suryana, Taryana (2021) Membuat Formulir Atau Form Dengan Html Dan Html5 Kelas If2-2021-
1. [Teaching Resource] 
 
 
 


Menu Navigasi Dengan Css Framework

Pemrograman Web-1
 Materi ini membahas mengenai dasar pembuatan halaman WEB dengan HTM

 
 
Pengenalan HTML 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
Join Zoom Meeting  
https://us04web.zoom.us/j/3629329963?pwd=ZUhWcXl6RHp3dTNKZmlxWkUrV2ZCQT09  
 
Meeting ID: 362 932 9963  
Passcode: 8HQiXn 
 
 
Pendahuluan  
 Pengenalan Web Browser 
 Electronic Mail (E-Mail) 
 Pengantar Desain Website dengan HTML 
 
1.1. Pengertian Web Browser 
Web Browser adalah sebuah Software Aplikasi yang digunukan untuk menerima,  
menampilkan, dan menerjemahkan informasi dari world wide web (wikipedia). Dan 
salah satu informasi itu dibuat dalam format HTML. 
Kode HTML yang kita buat akan diterjemahkan oleh web browser agar tampil seperti 
yang dirancang. Pada dasarnya seluruh web browser dapat menampilkan kode HTML 
sama baiknya, namun jika sudah berbicara mengenai desain halaman, tiap-tiap 
browser memiliki beberapa perbedaan. 
HTML dirancang dan diatur oleh sebuah badan standarisasi dunia yang khusus 
menangani web, yaitu W3C (World Wide Web Consortium). Hal ini dikarenakan tiap-
tiap program web browser menerjemahkan kode-kode HTML secara berbeda-beda, 
sehingga di perlukan sebuah standar yang sama untuk seluruh browser. 
Namun pada penerapannya, standar ini hanya merupakan rekomendasi. Beberapa 
web browser membuat aturannya sendiri. 
Salah satu yang terkenal adalah Internet Explorer pada sekitar tahun 2000-an. Hampir 
90% web browser yang digunakan saat itu adalah Internet Explorer, dan IE tidak 
sepenuhnya mengikuti rekomendasi W3C. Sedangkan web browser Opera yang 
mencoba menerapkan standar W3C tidak terlalu populer. Perbedaan aturan 
penerjemahan HTML di antara web browser inilah yang terus menjadi tantangan bagi 
Programmer web. 
 
Sekarang Internet Explorer tidak lagi sekuat dulu. Web Browser Mozilla Firefox dan 
Google Chrome telah menguasai lebih dari 50%, dan IE juga telah berusaha 
menerapkan standar W3C, termasuk web browser terbaru mereka: Microsoft Edge. 
 
 
Fungsi Web Browser 
Untuk mempelajari HTML, web browser adalah perangkat utama yang kita butuhkan. 
Ibarat bahasa pemrograman lainnya, Web Browser adalah Compiler dan intrepreter 
HTML. Anda bebas menggunakan web browser yang disukai, namun dalam tutorial 
Belajar HTML ini saya akan menggunakan Google Chrome. 
 
1.2.Memilih Aplikasi Editor HTML 
Memilih sebuah aplikasi editor HTML tidaklah terlalu sulit. Aplikasi editor HTML 
digunakan untuk mempermudah kita membuat kode HTML. HTML sendiri pada 
dasarnya hanya text biasa yang ditulis dalam kode-kode khusus. Web Browser-lah 
yang akan menerjemahkan kode HTML ini menjadi sebuah tampilan halaman web. 
Untuk membuat kode HTML maupun halaman web sederhana, kita tidak perlu 
menggunakan aplikasi yang besar dan berat. Aplikasi Notepad bawaan Windows 
sebenarnya sudah cukup untuk membuat kode HTML. Namun untuk tutorial belajar 
HTML kali ini saya akan menggunakan aplikasi Notepad++. 
 
Text Editor Notepad++ 
Aplikasi Notepad++ bisa di download secara gratis dari http://notepad-plus-
plus.org/download/ dimana pada saat tutorial ini diupdate pada September 2020, versi 
terakhir adalah v7.8.9, berukuran sekitar 3.95MB. Notepad++ merupakan aplikasi 
editor text gratis ringan namun memiliki banyak fitur. Salah satunya adalah fitur 
pewarnaan code (syntax highlighting). Fitur ini akan memudahkan penulisan HTML. 
 
Untuk dapat mengikuti Mata Kuliah Pemrograman WEB ada beberapa perangkat 
lunak (software) yang harus disiapkan dan di Install di Komputer Anda, yaitu  sebagai 
berikut: 
1. Text Editor, bisa menggunakan Notepad++, Visual Studio Code, Atom, dan 
lain-lain  
2. Web Browser, bisa menggunakan Chrome, Mozilla, Internet Explorer, Microsoft 
Edge dan lain-lain 
 
 
 
 
 
 
 
 
 
 
Pada Materi ini dan materi selanjutnya Text Editor yang akan digunakan adalah 
dengan menggunakan Notepad++ dan browsernya menggunakan chrome 
 
Download Notepad++ ada di : 
https://notepad-plus-plus.org/downloads/ 
 
Gambar 1.1. Download Notepad ++ 
 
Ada 2 Pilihan Flatform Windows, ada yang versi 32 Bit, dan versi 64 Bit,  
Pada Materi ini penulis menggunakan Notepad++ versi 64-bit x64, setelah berhasil 
didownload, kemudian lanjutkan dengan menginstallasikan  notepad++, jika berhasil 
diinstall kemudian jalankan, maka akan ditampilkan jendela seperti berikut: 
  
 
1.3.Program Pertama dengan HTML 
Pada jendela editor Notepad++ tuliskan code program berikut: 
 
 
Gambar 1.2. Menuliskan Kode Program Pada Notepad ++ 
 
1.4.Menyimpan Kode Program 
Setelah mengetikan Kode Program diatas, selanjutnya adalah menyimpannya 
kedalam media penyimpanan anda, caranya adalah Pada  Jendela Notepad++, Pilih 
menu File, kemudian Save, misalnya simpan di drive 
D:\BELAJAR_HTML\pertama.html 
 
 
Gambar 1.3. Menyimpan File HTML 
 
1.5.Membuka File Dengan Browser 
Untuk menampilkan hasil dari kode program pertama.html yang tadi sudah dibuat, 
dapat dilakukan dengan cara, pada Jendela Windows Explorer, Click kanan pada file 
yang akan dibuka, kemudian pilih open With->Google Chrome 
 
Gambar 1.4. Menampilkan Halaman Pertama belajar HTML 
 
1.6.Pengertian E-Mail 
E-Mail adalah singkatan dari Electronics Mail atau dalam bahasa Indonesia disebut 
Surat Elektronik merupakan sarana dalam mengirim surat yang dilakukan melalui 
media internet. Media internet yang dimaksud bisa melalui komputer atau handphone 
yang memiliki akses internet. Pada umumnya mengirim surat biasa akan di kenakan 
biaya (Membeli Perangko) namun pada Surat Elektronik hanya dibutuhkan 
sambungan internet. 
 
Fungsi E-mail 
E-mail adalah alamat resmi kita di dunia maya. Dengan menggunakan email kita dapat 
terhubung dalam berbagai kegiatan internet, seperti bergabung di situs jejaring sosial 
semisal Facebook, Twitter atau Instagram maka saat pendaftaran akan membutuhkan 
email. Saat ini, Email telah berkembang hingga memiliki fungsi yang sangat beragam. 
Mengirim file, foto, video dengan teman dan keluarga menjadi lebih mudah 
Anda Mahasiswa yang kuliah di Unikom akan memiliki E-Mail dengan domain 
@email.unikom.ac.id, E-mail ini digunakan untuk seluruh aktivitas akademik yang ada 
di Unikom, seperti mengikuti perkuliahan online, registrasi, perwalian, nilaionline dan 
lain sebagainya. 
Cara menggunakan E-Mail unikom sama halnya seperti anda menggunakan Gmail 
(Google Mail) hal ini dikarenakan Unikom yang sudah bekerja sama dengan Google 
dalam hal Pemanfaatan Google Apps for Education. 
 
Gambar 1.5. Halaman inbox E-Mail Unikom Penulis 
 
 
1.7.HTML (Hypertext Markup Language) 
Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. 
HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard 
Generalized Markup Language (SGML).  HTML pada dasarnya merupakan dokumen ASCII atau teks 
biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu. 
HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali 
oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. 
Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari 
versi sebelumnya.  
Kegunaan bahasa ini ialah untuk memanipulasi browser sehingga dapat menampilkan informasi yang 
dapat dibaca oleh pengguna komputer.  
 
 
 
Materi yang akan dibahas meliputi diantaranya: 
 Dasar–Dasar HTML 
 Menambahkan Efek Karakter Fisik pada Halaman Web 
 Menambahkan Efek Karakter Logika 
 Membuat Tabel 
 Membuat Daftar 
 Mengatur Tampilan Dokumen 
 Membuat Link 
 Menempatkan Gambar ke dalam Web 
 Menambahkan Obyek-Obyek Multimedia 
 Membuat Formulir HTML 
 Membuat Frame 
 Membuat Web Site 
 
Struktur Halaman HTML 
Di bawah ini adalah visualisasi struktur halaman HTML: 
 
Gambar 1.6 Struktur Dokumen HTML 
 
 
 
Catatan: Konten di dalam bagian <body> (area putih di atas) akan ditampilkan di 
browser. Konten di dalam elemen <title> akan ditampilkan di bagian atas judul browser atau di 
tab halaman. 
 
Penjelasan Contoh 
 <!DOCTYPE html>deklarasi mendefinisikan bahwa dokumen ini adalah dokumen HTML5 
 <html>elemen elemen akar halaman HTML 
 <head>elemen berisi informasi meta tentang halaman HTML 
 <title>elemen menentukan judul untuk halaman HTML (yang ditampilkan dalam bar judul 
browser atau tab halaman ini) 
 <body>elemen mendefinisikan  dokumen, dan merupakan wadah untuk semua isi 
terlihat, seperti judul, paragraf, gambar, hyperlink, tabel, daftar, dll 
 <h1>elemen mendefinisikan judul besar 
 <p>elemen mendefinisikan sebuah paragraf 
 
 
Untuk jelasnya tuliskan kode program berikut pada halaman baru notepad++ anda: 
<!DOCTYPE html> 
<html> 
<head> 
<title> 
       Belajar HTML 
</title> 
</head> 
<body> 
     Belajar Pemrograman WEB dengan Menggunakan Bahasa HTML<br> 
     Unikom Bandung 
</body> 
</html> 
Gambar 1.7. Latihan1.html 
 Setelah selesai menuliskan dokumen tersebut di atas lakukan perintah FILE SAVE, atau 
SAVE AS nama  file latihan1.html dan pada bagian perintah SAVE AS TYPES pilih ALL FILES  
 
Gambar 1.8. Hasil tampilan latihan1.html 
 
 
Menambahkan Isi pada Bagian Body 
Isi dalam dokumen HTML ditempatkan di antara bagian <BODY> sampai dengan </BODY>. Untuk 
menambahkan isi tersebut  dapat dilakukan dengan cara sebagai berikut:  
Contoh Program 
<!DOCTYPE html> 
<html> 
<head> 
<title> JUDUL HALAMAN </title> 
</head> 
<body> 
 <h1> Potensi Manusia </h1> 
Manusia memiliki potensi diri untuk meraih sukses yang didambakannya.  
Sukses sejati tidak hanya diukur melalui pencapaian materi, akan tetapi  
lebih kepada seberapa besar peranan kita untuk manusia dan alam ini 
</body> 
</html> 
Gambar 1.9. kode Program Latihan.html 
Di bagian <BODY> sampai dengan </BODY> diisi dengan Header Halaman contohnya adalah “Potensi 
Manusia”. Cara membuatnya ialah dengan menggunakan perintah <H1> sampai dengan </H1>. 
Perintah H1 digunakan untuk membuat HEADER atau Kepala Berita.. Setelah itu ditambahkan Caption 
atau penjelasan singkat mengenai isi halaman tersebut..  
 
Setelah selesai menuliskan semua bagian dokumen tersebut, lakukan perintah FILE SAVE AS dengan 
nama file latihan2.html 
 
Gambar 1.10. Tampilan  Halaman latihan2.html 
 
 
Upload Latihan ke 
https://Kuliahonline.unikom.ac.id 
Setelah program latihan1.html dan latihan2.html selesai dibuat dan hasilnya sesuai 
dengan tampilan yang ada di materi ini:  
 
Dengan menggunakan Word Copy Paste Kode program latihan1.html dan 
latihan2.html beserta tangkapan layar (screenshot) hasil keluarannya (screenshot), 
kemudian kirim ke Modul Tugas yang ada di kuliahonline.unikom.ac.id, Nama 
Filenya: 
TUGAS-1-NIM-NAMA  Bisa dalam format Docs atau PDF 
Dikumpulkan Paling Lambat Setiap Hari Minggu Sore 
 
Terimakasih, selamat belajar 
 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, Elexmedia 
Komputindo, Jakarta 
2. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
3. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
4. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
5. https://www.w3schools.com/html, September, 2021 
 
 
 
 


Materi 1 Pengenalan Html

Komputer Aplikasi IT-5
Materi ini berisi penjelasan mengenai langkah-langkah membuat database, tabel, recod, field, type, size, menampilkan isi tabel dengan program ph

 
 
Membuat DataBase Penduduk 
 
Oleh:Taryana Suryana M.Kom 
Ilmu Pemerintahan Unikom 2022 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
2.0. Database 
Basis data atau Database dapat didefinisikan atau diartikan sebagai kumpulan data yang 
disimpan secara sistematis di dalam komputer yang dapat diolah atau dimanipulasi 
menggunakan perangkat lunak (software) program atau aplikasi untuk menghasilkan 
informasi. Pendefinisian basis data meliputi spesifikasi berupa tipe data, struktur data dan juga 
batasan-batasan pada data yang kemudian disimpan. 
Basis data merupakan aspek yang sangat penting dalam sistem informasi karena berfungsi 
sebagai gudang penyimpanan data untuk diolah lebih lanjut. Basis data menjadi penting karena 
dapat mengorganisasi data, menghidari duplikasi data, menghindari hubungan antar data yang 
tidak jelas dan juga update yang rumit. 
 
2.1. Membuat Database 
Untuk membuat database dapat dilakukan dengan menggunakan phpMyAdmin, seperti yang 
pernah dibahas di Bab 1 pada awal perkuliahan.  
 
 
 
Gambar 2.1. Membuat Database IP pada phpMyAdmin 
 
Adapun langkahnya adalah sebagai berikut” 
1. Click New Database, pada kotak Create database, tuliskan nama database yang ingin 
dibuat, pada contoh dimateri ini nama database yang akan dibuat adalah:IP kemudian 
click tombol Create 
 
 
2. Jika database IP sudah ada, lanjutkan dengan membuat tabel 
 
 
Setelah database berhasil dibuat, langkah selanjutnya adalah membuat tabel, misalnya anda 
memiliki data seperti berikut: 
Tabel:PENDUDUK 
 
Pada tabel  ini, ada dua tipe data yang akan digunakan, yaitu data yang bertipe Varchar untuk 
Data Text atau string dan Data bertipe Int untuk data angka atau numerik 
 
Gambar 2.2. Membuat Tabel PENDUDUK 
 
Langkah Untuk membuat Tabel: 
1. Click Database:IP 
2. Pada Kotak Create Tabel masukan : 
 
3. Kemudian Click tombol: Create 
Selanjutnya akan ditampilkan jendela berikut: 
 
 
Gambar 2.3. Struktur Tabel:IP 
Pada saat pembuatan tabel Kolom Pertama atau Field pertama harus di Index:Primary 
Click tombol Save, untuk menyimpan tabel tadi, jika berhasil dibuat, maka akan ditampilkan 
jendela seperti berikut: 
 
 
Selanjutnya untuk memasukan data, dapat dilakukan dengan cara meng-click tombol Insert 
 
Gambar 2.4. Memasukan Data Penduduk 
Masukan data pada kotak Value, seperti contoh gambar diatas, dan selanjutnya Click tombol 
Go, untuk menyimpan data, Kemudian Click Browse untuk menampilkan data, Untuk 
memasukan data kedua dan seterusnya dapat dilakukan dengan cara yang sama. 
Berikut adalah contoh jika semua data telah dimasukan 
 
 
Sampai tahap ini pembuatan database dan tabel telah berhasil, untuk kedepannya jika anda 
akan membuat database ataupun tabel, maka dapat dilakukan dengan cara yang sama seperti 
yang telah dibahas di atas. 
 
2.2.Menampilkan Data 
Pada bagian ini akan dibahas mengenai bagaimana membuat program dengan 
menggunakan bahasa pemrograman PHP untuk menampilkan data yang ada dalam 
database MySQL 
2.2.1. Membuat File Koneksi dari PHP ke MYSQL 
Pada bagian ini akan dibuat bagaimana cara menghubungkan antara program yang 
dibuat dengan PHP agar dapat terkoneksi dengan database dan tabel yang ada dalam 
MYSQL 
 
NamaFile:Koneksi.php 
<?php 
$conn=mysqli_connect("localhost","root","","IP"); 
?> 
 
 
*Jangan lupa selama belajar database ini semua file simpan dalam folder yang sama 
yaitu: 
di folder xampp/htdocs/IP 
 
 
2.2.2.Kode Program Menampilkan Data  
Kemudian buat file berikut untuk menampilkan data yang ada dalam tabel, misalnya 
akan ditampilkan data yang ada dalam tabel:PENDUDUK 
 
 
NamaFile:tampilpenduduk.php 
<html> 
<center> 
<h1>MENAMPILKAN DATA PENDUDUK </h1> 
<hr> 
<table border=1> 
<tr><th>NO<th>NIK<th>NAMA<th>ALAMAT<th>NOHP<th>UMUR 
<?php 
require ("koneksi.php"); 
$sql="select * from penduduk"; 
$hasil=mysqli_query($conn,$sql); 
$row=mysqli_fetch_row($hasil); 
$n=1; 
do 
{ 
list($nik,$nama,$alamat,$nohp,$umur)=$row; 
echo "<tr><td>$n<td>$nik<td>$nama<td>$alamat<td>$nohp<td>$umur"; 
$n++; 
} 
while($row=mysqli_fetch_row($hasil)); 
?> 
</table> 
<hr> 
Komputer Aplikasi IT-5 IP UNIKOM 
 
 
 
2.3.Menampilkan Hasil Via Browser 
Setelah kedua program tadi dibuat dan disimpan dalam folder yang sama, kemudian 
adalah bagaimana cara menampilkannya ke layar komputer: 
 
Untuk menampilkan hasilnya dapat dilakukan dengan cara seperti biasa menampilkan 
program php: 
1.Jalankakan Browser 
2. Pada Address Bar, ketikan:localhost/IP 
3.Click File tampilpenduduk.php 
Selanjutnya jika berhasil maka akan ditampilkan jendela berikut: 
 
 
 
Gambar 2.5.Menampilkan data Penduduk 
  
 
 
TUGAS 2 
Dengan mengikuti Contoh seperti sebelumnya buatlah Tabel dan Program Komputer Untuk 
menampilkan Data Pegawai Berikut:   
 
Program Menampilkan Data Pegawai 
 
Kerjakan Tugas2, kirim ke https://kuliahonline.unikom.ac.id dalam format PDF 
Coding Program dan Screenshot hasil akhir, paling Lambat hari Minggu Sore 
ooOOoo 
 
 
 
REFERENSI: 
1. Suryana, Taryana (2022) Pengenalan E-government Dan Aplikasi Pendukung. [Teaching Resource] 
2. Suryana, Taryana (2022) Instalasi Xampp Untuk Belajar Pemrograman E-government. [Teaching 
Resource] 
3. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
4. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, Jogyakarta 
5. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
6. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-government. [Teaching Resource] 
7. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, Elexmedia 
Komputindo, Jakarta 
8. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
 
 
 
 
 


Membuat Database

Pemrograman Web-1
Materi 3 ini membahas mengenai Daftar atau list dalam html, diperlukan untuk menampilkan informasi yang bersifat 
berurutan dan biasanya ditampilkan dalam bentuk sesuai type list yang diinginka

 
 
Membuat List / Daftar 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
 
 
3.0 List / Daftar 
Daftar atau list diperlukan untuk menampilkan informasi yang bersifat berurutan dan biasanya 
ditampilkan dalam bentuk sesuai urutan yang diinginkan. HTML menyediakan beberapa tipe daftar, 
yaitu: Daftar tanpa nomor atau unordered list atau disebut juga bulleted list; daftar dengan nomor 
atau ordered list atau disebut juga numbered list; dan daftar untuk definisi atau disebut juga sebagai 
definition list 
 
 UL – Unorder List 
 OL - Order List 
 UL TYPE 
 OL TYPE 
 
3.1. UL 
Bagian pertama ini akan diberikan contoh penggunaan daftar tanpa nomor yang dapat dibuat dengan 
cara sebagai berikut:   
Tag untuk membuat daftar dalam bentuk bullet atau unorder list dimulai dengan <UL>; kemudian 
untuk menampilkan daftar list  yang diinginkan digunakan perintah  <LI> dan untuk mengakhiri 
pembuatan daftar ditutup dengan </UL>.  
  
 
 
Contoh penggunaannya di bawah ini: 
Nama File:UL.HTML 
<!DOCTYPE html> 
<html> 
<head> 
<title>Daftar Bullet</title> 
</head> 
<body> 
Menampilkan Nama Kota 
<ul> 
<li> Bandung 
<li> Cimahi 
<li> Jakarta 
<li> Bogor 
</ul> 
</body> 
</html> 
 
Unordered List yang disebut juga sebagai bulleted list, mempunyai tanda bullet default berupa 
noktah. Simpanlah file di atas dengan nama ul.html 
 
Gambar 3.1 Menampilkan Unorder List / UL 
Unoreder List Memiliki Tiga Tipe yaitu: 
Tipe Keterangan 
circle Tanda Bulatan 
disc Tanda Bulat hitam 
square Kotak 
 
  
 
 
Berikut adalah contoh penggunaan Unorder List dengan Menggunakan Parameter Type 
Nama File: ULTYPE.HTML 
<!DOCTYPE html> 
<html> 
<head> 
<title>Daftar Bullet</title> 
</head> 
<body> 
Menampilkan List dengan Tanda Bulat Putih 
<hr> 
<ul type=circle> 
<li>Tahu 
<li>Gehu 
<li>Bakso 
<li>Siomay 
</ul> 
 
Menampilkan List dengan Tanda Bulat Hitam (disc) 
<hr> 
<ul type=disc> 
<li>Hardisk 
<li>SSD 
<li>Processor 
<li>Flashdisk 
</ul> 
 
Menampilkan List dengan Tanda Kotak<hr> 
<ul type=square> 
<li>BTC 
<li>BIP 
<li>BEC 
<li>BALTOS 
</ul> 
 
<body> 
</html> 
 
 
 
Gambar 3.2. Menampilkan Tipe Unorder List 
 
  
 
3.2. OL 
Bagian kedua ini akan diberikan contoh penggunaan daftar yang menggunakan nomor atau  disebut 
juga sebagai ordered list. Cara membuat daftar seperti ini ialah dengan menggunakan tag awal <OL>; 
kemudian untuk menampilkan daftar List yang diinginkan digunakan perintah  <LI> dan untuk 
mengakhiri ditutup dengan </OL> 
Contoh penggunaannya seperti di bawah ini:: 
<!DOCTYPE html> 
<html> 
<head> 
<title>Daftar Angka</title> 
</head> 
<body> 
Menampilkan List Berupa Angka 
<ol> 
<li>Komputer 
<li>Printer 
<li>Laptop 
<li>Handphone 
</ol> 
<body> 
</html> 
 
 
Simpanlah file di atas dengan nama ol.html 
 
 
Gambar 3.3 Menampilkan OrderList 
 
 
Kita dapat mengubah pembuatan daftar menggunakan nomor atau ordered list dengan menggunakan 
model yang lain, yaitu dengan cara menambahkan atribut type pada <OL> tersebut.  
Di bawah ini adalah tipe-tipe lain yang digunakan: 
Tipe Keterangan 
1 Daftar berupa angka 1,2,3 dst  
I Daftar berupa huruf Romawi besar 
i Daftar berupa huruf Romawi kecil 
A Daftar berupa abjad dengan huruf  besar 
a Daftar berupa abjad dengan huruf kecil 
  
Di bawah ini diberikan contoh penggunaannya: 
Nama File OLTYPE.HTML 
<!DOCTYPE html> 
<html> 
<head> 
<title>Menampilkan Daftar dan Type</title> 
</head> 
<body> 
 
Menampilkan List Huruf Romawi Besar 
<OL type=I> 
<LI>PENDAHULUAN 
<LI>IDENTIFIKASI MASALAH 
<li>MAKSUD DAN TUJUAN 
<li>BATASAN MASALAH 
</OL> 
<hr> 
Menampilkan List Huruf Romawi Kecil 
<OL type=i> 
<LI>PENDAHULUAN 
<LI>IDENTIFIKASI MASALAH 
<li>MAKSUD DAN TUJUAN 
<li>BATASAN MASALAH 
</OL> 
<hr> 
 
Menampilkan List dengan Alfabet Huruf Besar 
<OL type=A> 
<LI>PENDAHULUAN 
<LI>IDENTIFIKASI MASALAH 
<li>MAKSUD DAN TUJUAN 
<li>BATASAN MASALAH 
</OL> 
<hr> 
Menampilkan List dengan Alfabet Huruf Kecil 
 
<OL type=a> 
<LI>PENDAHULUAN 
<LI>IDENTIFIKASI MASALAH 
<li>MAKSUD DAN TUJUAN 
<li>BATASAN MASALAH 
</OL> 
<hr> 
Menampilkan List dengan Angka 
<OL type=1> 
<LI>PENDAHULUAN 
<LI>IDENTIFIKASI MASALAH 
<li>MAKSUD DAN TUJUAN 
<li>BATASAN MASALAH 
</OL> 
</BODY> 
</HTML> 
 
Simpanlah file di atas dengan nama oltype.html 
 
 
Gambar 3. 4 Hasil Menampilkan type Order List 
  
 
 
3.3. DD, DL & DT 
Definition List adalah jenis list yang ditujukan untuk membuat struktur yang berisi deskripsi atau 
daftar penjelasan. 
List jenis ini mungkin tidak sepopuler ordered list atau unordered list, namun jika anda membutuhkan 
struktur HTML untuk membuat list yang berisi penjelasan istilah-istilah dengan keterangannya, 
mungkin bisa menggunakan list jenis ini. 
 
Bagian ketiga diberikan contoh pembuatan daftar definisi atau disebut definition list yang 
menggunakan tag<DL>) yang terdiri dari definition term dengan tag<DT>, dan definition definition  
dengan tag<DD>. Contoh penggunaanya seperti di bawah ini: 
Nama File:Definisi_list.html 
<html> 
<head> 
<title>Daftar Definisi</title> 
</head> 
<body> 
<dl> 
<dt>GATEWAY</dt> 
<dd>Gateway adalah sebuah perangkat yang digunakan untuk menghubungkan  
satu jaringan komputer dengan satu atau lebih jaringan komputer yang  
menggunakan protokol komunikasi yang berbeda sehingga informasi dari satu  
jaringan Komputer dapat diberikan kepada jaringan komputer lain yang 
protokolnya berbeda. 
</dd> 
<dt>ROUTER</dt> 
<dd>Router merupakan perangkat jaringan yang bekerja pada OSI Layer 3, 
Network Layer.  
Pada layer ini sudah dikenal pengalamatan jaringan menggunakan IP 
Address, dan router ini berperan penting  
sebagai penghubung/penerus paket data antara dua segmen jaringan atau 
lebih 
</dd> 
</dl> 
</body> 
</html> 
 
Simpanlah file di atas dengan nama definisi_list.html 
 
 
 
Gambar 3.5. Daftar Definisi 
3.5. Nested List 
Bagian keempat diberikan contoh pembuatan nested list merupakan suatu daftar yang terdiri dari 
daftar utama yang diikuti dengan sub-daftar dan yang kemudian dapat diikuti dengan sub-sub daftar 
lagi. Untuk membuat nested list kita dapat menggunakan   unordered list atau ordered list  serta dapat 
juga menggabung unordered list dengan  ordered list. Contoh nested list dengan menggunakan 
unordered list 
Nama File:NESTED_LIST.HTML 
<!DOCTYPE html> 
<html> 
<head> 
<title>Nested List Unordered List</title> 
</head> 
<body> 
<h1>Nested List Un Ordered List </h1> 
<ul> 
 <li>Bagian pertama  
   <ul> 
  <li>Sub bagian pertama  
     <ul> 
    <li>Sub sub bagian pertama 1 
    <li>Sub sub bagian pertama 2 
    <li>Sub sub bagian pertama 3 
  </ul> 
  <li>Sub bagian kedua 
  <li>Sub bagian ketiga 
   </ul> 
 <li>Bagian kedua 
  <ul> 
    <li>Subpoint 1 
    <li>Subpoint 2 
  </ul> 
 <li>Bagian ketiga 
</ul> 
</body> 
</html> 
 
 
 
Simpanlah file di atas dengan nama nested_list.html 
. 
 
 
Gambar 3.6 Nested List Tidak berurutan 
 
Bagian kelima ialah penggunaan nested list dengan ordered list 
Nama File: nested_list_ol.html 
<!DOCTYPE html> 
<html> 
<head> 
<title>Nested List Ordered List </title> 
</head> 
<body> 
<h1>Nested List Ordered List </h1> 
 <ol> 
 <li>Bagian pertama  
  <ol type=A> 
  <li>Sub bagian pertama  
   <ol type=a> 
   <li>Sub sub bagian pertama 1 
   <li>Sub sub bagian pertama 2 
   <li>Sub sub bagian pertama 3 
   </ol> 
  <li>Sub bagian kedua 
  <li>Sub bagian ketiga 
  </ol> 
 <li>Bagian kedua 
  <ol> 
  <li>Subpoint 1 
  <li>Subpoint 2 
  </ol> 
 <li>Bagian ketiga 
 </ol> 
</body> 
 
</html> 
 
Simpanlah file di atas dengan nama nested_list_ol.html 
 
Gambar 3.7. Nested List Berurutan 
Bagian keenam adalah nested list dengan menggunakan gabungan antara unordered list dan ordered 
list 
Nama File:gabungan_list.html 
<!DOCTYPE html> 
<html> 
<head> 
<title>Gabungan Nested List</title> 
</head> 
<body> 
<h1>Gabungan List</h1> 
<ul type=disc> 
<li>Daftar merk handphone 
<ol type=1> 
<li>Nokia 
<li>Samsung 
</ol> 
<li>Daftar Stasiun TV 
<ol type=a> 
<li>TVRI 
<li>RCTI 
<li>TRANS 
</ol> 
<li>Daftar merk sepeda motor 
<ol type=a> 
<li>Honda 
<li>Yamaha 
</ol> 
</ul> 
</body> 
</html> 
 
 
 
. Gambar 3.8. List Gabungan 
 
TUGAS 3 
Dengan menggunakan perintah LIST yang telah dibahas sebelumnya, buatlah  halaman html seperti 
berikut: 
 
 
Gambar TUGAS 3 
Untuk Prodi selain Teknik Informatika, Tuliskan Daftar/List Seperti Diatas Pada Prodi Masing-masing, 
menambahkan Nama Dosen dan matakuliah yang diampunya. 
Nama File:Tugas3-nim-nama 
 
Program HTML dan Hasil Run Screenshot, dicopy ke dalam Word, dan kemudian di 
Konversi menjadi file PDF, selanjutnya kirim ke https://kuliahonline.unikom.ac.id 
Paling Lambat hari Minggu Jam 17.00 Wib 
  
 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana (2022) Materi 2 Memformat Dokumen Html. [Teaching Resource] 
2. Suryana, Taryana (2022) Materi 1 Pengenalan Html. [Teaching Resource] 
3. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
4. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
5. https://www.w3schools.com/html, September, 2021 
6. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
7. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
8. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
9. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 


Materi 3 Membuat List / Daftar

Materi 3. Membuat List / Daftar

Pemrograman Web-1
Materi 5. akan dibahas mengenai bagaimana membuat Formulir 
atau Form, Atribut Form, Elemen Form, Input Type, 
Input Atribut dan Input Form Atribut dalam HTM

Not a member yet

Melakukan Edit Atau Perubahan Data Pada Tabel

Menghapus Data Pada Tabel

Input Dan Label

Menu Navigasi Dengan Css Framework

Materi 1 Pengenalan Html

Materi 1 Pengenalan Html

Membuat Database

Materi 3 Membuat List / Daftar

Materi 3. Membuat List / Daftar

Materi 5 Form Dengan Html Dan Html5

15,029

70,114