Repository Universitas Komputer Indonesia

Pemrograman WEB 2

Materi 13 Membahas mengenai pembuatan program untuk menghapus data dari tabel barang, dengan menggunakan perintah sql delet

Suryana, Taryana

 
 
 
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

Pemrograman WEB 2
Materi 12 Membahas mengenai pembuatan program untuk Edit Data kedalam tabel barang, menggunakan perintah sql Inser

 
 
 
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

Pemrograman Web-1
Materi 2 ini membahas mengenai beberapa Elemen yang dapat digunakan untuk menampilkan informasi atau memformat dokumen html, diantaranya adalahParagraph
Blockquote, Divider, Heading, Style, Font (Color, Face dan Size), Ganti Baris dan Garis Horiontal, backgroun

 
 
Memformat Dokumen 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Telegram: 081221480577 
 
 
 
 
2.0 Memformat Dokumen 
Ada beberapa Elemen yang dapat digunakan untuk menampilkan informasi berupa 
Teks dalam HTML, yaitu: 
 
 Paragraph 
 Blockquote 
 Divider 
 Heading 
 Style 
 Font (Color, Face dan Size) 
 Ganti Baris dan Garis Horiontal 
 Background 
 Latihan  
 
 
  
 
 
2.1.Elemen Paragraph 
Elemen paragraph menggunakan tag <P>......</P> yang digunakan untuk menandai 
sekumpulan teks sebagai suatu paragraf. Tag <P> menyatakan awal paragraf; 
sedangkan tag </P> menyatakan akhir dari satu paragraf. Untuk menampilkan 
beberapa paragraf, misalnya 6 paragraf, maka penulisnnya menjadi sebagai berikut: 
 
Kode Program Menuliskan Tag Paragraph 
<!DOCTYPE html> 
<html> 
<head> 
<title>Membuat Paragraph</title> 
</head> 
<body> 
<p>Paragraph satu</p> 
<p>Paragraph dua</p> 
<p>Paragraph tiga</p> 
<p>Paragraph empat</p> 
<p>Paragraph lima</p> <p>Paragraph enam</p> 
</body> 
</html> 
 
 
Simpanlah file di atas dengan namfile:paragraph.html. 
Untuk membuat perataan paragraph digunakan atribut ALIGN. Atribut ALIGN 
mempunyai tiga nilai yaitu left untuk rata kiri, right untuk rata kanan ,dan center untuk 
posisi tengah. Untuk penulisannya sebagai berikut: 
 
 Rata kiri: <P Allign=”LEFT”> Teks paragraph akan ditampilkan rata kiri </P> 
 Rata kanan: <P Allign=”RIGHT”> Teks paragraph akan ditampilkan rata 
kanan </P> 
 Rata tengah: <P Allign=”CENTER”> Teks paragraph akan ditampilkan rata ke 
tengah 
 
<!DOCTYPE html> 
<html> 
<head> 
<title>Membuat Paragraph</title> 
</head> 
<body> 
<h2>Paragraph mempunyai beberapa pengertian</h2> 
 
<p align="left">Paragraph adalah karangan mini. Artinya semua 
unsur karangan yang panjang ada  dalam paragraph.</p> 
<p align="center">Paragraph adalah satuan bahasa yang terdiri 
beberapa kalimat yang tersusun secara runtut, logis,   dalam satu 
kesatuan ide yang tersusun lengkap, utuh dan padu.</p> 
<p align="right">Paragraph adalah bagian dari suatu karangan yang 
terdiri dari sejumlah kalimat yang mengungkapkan satuan informasi 
dengan pikiran utama sebagai pengendaliannya dan pikiran penjelas 
sebagai pendukungnya.</p> 
</body> 
</html> 
 
 
 
Gambar 2.1. Output Tampilan Paragraph2.html 
 
2.2.Blockquote 
Tag <BLOCKQUOTE>......</BLOCKQUOTE> Blockquote adalah tulisan yang 
menjorok ke dalam dari batas tepi kiri dan tepi kanan area posting. Tujuannya adalah 
untuk mempertegas isi tulisan ataupun teks yang dianggap penting yang berada di 
area blocquote.  
  
 
 
Contoh Penggunaan Blockquote: 
<!DOCTYPE html> 
<html> 
<body> 
<h1>Kejahatan di Internet </h1> 
<p> 
Jakarta - Belakangan ini banyak sekali kejahatan yang terjadi terkait 
dengan pengguna internet.  
Disinyalir kerugian yang dialami oleh para pengguna internet mencapai 
US$ 8,5 miliar (sekitar Rp 7,7 triliun) selama dua tahun terakhir ini.  
Penyebabnya antara lain karena virus, spyware dan phishing. Angka 
tersebut diungkapkan dalam laporan tahunan State of The Net yang 
dibuat oleh Consumer Report, majalah pemerhati konsumen di Amerika 
Serikat. Laporan itu berdasarkan penelitian yang dilakukan oleh 
Consumer Report National Research Center yang melibatkan 2.071 
responden online. 
</p> 
 
<blockquote> 
Data lain dalam laporan itu menyebutkan, satu dari enam pengguna 
kemungkinan akan menjadi korban kejahatan cyber. Peluang ini turun 
dari 1:4 pada tahun 2007.  
Kemudian, sekitar 19% responden mengatakan bahwa mereka tidak 
mempunyai program antivirus di komputernya. Sedangkan 75% lainnya 
tidak mempunyai anti-phishing. Demikian dikutip detikINET dari 
techWeb, Rabu (6/8/2008). 
</blockquote> 
</body> 
</html> 
 
 
Simpanlah file di atas dengan nama blockquote.html. 
 
 
 
 
Gambar 2.2. Menampilkan teks dengan Blockquote 
 
2.3.Divider 
Elemen divider digunakan untuk membagi-bagi dokumen HTML dalam suatu hirarki yang terstuktur. 
Teks yang ditempatkan dalam tag <DIV>.....</DIV> akan di tampilkan sesuai dengan nilai atribut ALIGN 
tersebut. Nilai atribut ALIGN, yaitu left, right, dan center. 
Pengertian DIV pada HTML - Didalam dokumen HTML terdapat tag DIV yang 
sering kita temukan, bahkan mungkin setiap kali pengembang web sering 
menggunakan tag DIV. Nah, taukah kalian apa sih tag DIV dan apa fungsinya ? 
Pada pembahasan ini akan saya coba ulas sedikit tentang tag DIV pada HTML. 
DIV pada HTML merupakan tag yang mendeskripsikan suatu bagian atau divisi yang 
sifatnya fleksibel, artinya penggunaan tag DIV bisa dgunakan sesuai dengan 
kebutuhan, misalnya saja ketika ingin membuat ID atau Class tag div sering kali 
dipakai. 
 
DIV tidak memiliki makna apapun seperti tag p untuk paragraf, atau h1 sebagai 
heading namun merupakan tag yang paling sering digunakan ketika membuat struktur 
website. Karena dengan DIV kita bisa membuat penamaan sesuai keinginan sendiri 
dengan menambahkan atribut ID atau Class. 
 
Contoh: 
 Teks akan ditampilkan rata kiri: <DIV Allign=”Left”> …. </DIV> 
 Teks akan ditampilkan rata kanan:: <DIV Allign=”Right”> …. </DIV> 
 Teks akan ditampilkan rata tengah: <DIV Allign=”Center”> …. </DIV> 
 
Contoh sederhana penggunaan DIV dalam pembuatan struktur website bisa kalian 
lihat berikut ini. 
<!DOCTYPE html> 
<head> 
   <title>Penggunaan Divider</title> 
</head> 
<body> 
    <div class="header"></div> 
    <div class="menu"> 
        <a href="">Home</a> 
        <a href="">Product</a> 
        <a href="">Service</a> 
        <a href="">Contact</a> 
    </div> 
    <div class="article"> 
        <h3>Title</h3> 
        <p>Paragraf</p> 
    </div> 
    <div class="footer"></div> 
</body> 
</html> 
Simpan dengan nama file: div_menu.html 
 
 
Gambar 2.3. Hasil Program div_menu.html 
 
2.4. Heading/Judul HTML 
Judul HTML didefinisikan dengan tag <h1> sampai <h6>. 
<h1>mendefinisikan judul yang paling penting. <h6>mendefinisikan judul yang 
paling tidak penting:  
Contoh 
<h1>Heading 1</h1> 
<h2>Heading 2</h2> 
<h3>Heading 3</h3> 
<h4>Heading 4</h4> 
<h5>Heading 5</h5> 
<h6>Heading 6</h6> 
 
 
Gambar 2.4. Menampilkan Heading 
2.5.Style 
Atribut gaya HTML digunakan untuk menambahkan gaya ke elemen, seperti warna, font, ukuran, 
dan lainnya. 
NamaFile:style1.html 
<!DOCTYPE html> 
<html> 
<body> 
<p>Ini tulisan Normal</p> 
<p style="color:red;">Text warna Merah</p> 
<p style="color:blue;">Text Warna Biru</p> 
<p style="font-size:50px;">Text Ukuran Besar</p> 
</body> 
</html> 
 
 
 
 
Gambar 2.5. Menampilkan Style 
 
 
Warna latar belakang dan Huruf 
Properti CSS background-color mendefinisikan warna latar belakang untuk elemen HTML. 
 
<!DOCTYPE html> 
<html> 
<body style="background-color:gray;"> 
<h1 style="background-color:powderblue;">Judul Halaman</h1> 
<p style="background-color:tomato;">Ini Sebuah paragraph.</p> 
<h1 style="color:blue;">Mewarnai Text Judul</h1> 
<p style="color:red;">Mewarnai Text paragraph.</p> 
</body> 
</html> 
 
 
 
 
 
Gambar 2.6. Menampilkan Style background dan Text 
  
 
2.6. Memberi Warna Huruf 
Warna huruf standar dalam halaman HTML selalu hitam; sekalipun demikian warna tersebut dapat 
diubah dengan menggunakan  perintah <FONT COLOR> ..... </FONT>. Untuk memberikan warna 
“merah”, “ biru”, “hijau”, “kuning” dan “ ungu”.  Pada awalnya dalam HTML versi 3.2 hanya 
diperkenalkan sebanyak 16 warna. Sedangkan pada html5 mendukung 140 warna bisa dilihat di link 
berikut: https://www.w3schools.com/colors/colors_hex.asp, 
 
Tabel 2.1.Kode Warna Pada HTML 3.2 
 
Berikut ini adalah contoh penggunaan perintah untuk mengganti warna Teks: 
<!DOCTYPE html> 
<html> 
<body> 
<h2>Warna Text</h2> 
<pre> 
<font color="red">teks warna merah.</font> 
<font color="blue">teks warna biru.</font> 
<font color="green">teks warna hijau.</font> 
<font color="yellow">teks warna kuning.</font> 
<font color="violet">teks warna ungu.</font> 
<body > 
</html> 
 
 
Simpanlah file di atas dengan nama warna1.html. 
1. Aqua  = aqua 
2. Black  = hitam 
3. Blue = biru 
4. Fuchsia= fuchsia 
5. Gray = abu-abu 
6. Green = hijau 
7. Lime = lime 
8. Maroon= maroon 
9. Navy = biru tua 
10. Olive = olive 
11. Purple = ungu 
12. Red = merah 
13. Silver = perak 
14. Teal = teal 
15. White = putih 
16. Yellow = kuning 
 
 
Gambar 2.9. Memberi warna pada teks 
Selain menggunakan cara seperti di atas; terdapat cara lain yang dapat digunakan membuat warna, 
yaitu dengan menggunakan hex code. Sedang cara penulisannya ialah dimulai dengan menggunakan 
karakter “#” kemudian diikuti kombinasi warna RGB (Red, Green, Blue). Setiap warna tersebut 
intensitasnya berupa HEX 2 Karakter, misalnya #FFEEA4 yang artinya intensitas Red (merah) = FF = 
255, Green (hijau) = EE = 238, Blue (biru) = A4 = 164. Apabila kita menginginkan warna terang maka 
unsur F digunakan sebaliknya jika warna gelap maka unsur 0 dipergunakan.  Beberapa contoh warna 
menggunakan hex code seperti di bawah ini. 
No Kode Heksadesimal Warna 
1 #FF0000 Merah 
2 #0000FF Biru 
3 #FFFF00 Kuning 
4 #FFFFFF Putih 
5 #00FFFF Cyan 
6 #888888 Abu-abu 
7 #00FF00 Hijau 
8 #FF00FF Ungu 
9 #FF8800 Oranye 
10 #000000 Hitam 
11 #AA8800 Coklat 
12 #004488 Biru tua 
 
<html> 
<h2>Memberi warna Teks Dengan Kode  Heksadesimal</h2> 
<pre> 
<Font Color="#FF0000">Teks Warna Merah.</Font> 
<Font Color="#0080FF">Teks Warna Biru.</Font> 
<Font Color="#00FF00">Teks Warna Hijau.</Font> 
<Font Color="#FFFF00">Teks Warna Kuning.</Font> 
 
<Font Color="#8080FF">Teks Warna Ungu.</Font> 
</html> 
 
 
Gambar 2.10. Mewarnai tulisan dengan perintah heksadesimal. 
 
Berikut contoh warna yang didukung oleh HTML5 
 
  
 
 
2.7 Mengganti  Latar Belakang Halaman 
Latar belakang halaman website standard defaultnya adalah berwarna putih, Dengan menggunakan 
latar belakang (background) maka website akan nampak semakin menarik.  
Untuk memasukkan latar belakang bisa menggunakan pilihan warna maupun gambar.  
 Untuk merubah latar belakang halaman dengan warna maka dapat digunakan perintah: 
 <body bgcolor=warna> 
Untuk warna dapat dilihat pada table warna diatas 
Berikut adalah contoh penulisannya dalam halaman website:  
<!DOCTYPE html> 
<html> 
<body> 
<body bgcolor="Violet">  
<p>Berikut adalah contoh membuat latar belakang dengan warna</p>  
<p>Warna adalah spektrum tertentu yang terdapat di dalam suatu cahaya sempurna (berwarna putih). 
 Identitas suatu warna ditentukan panjang gelombang cahaya tersebut. Sebagai contoh warna biru memiliki 
panjang gelombang 460 nanometer. 
</p>  
</html> 
 
 
 
Gambar 2.11. Mengganti Warna Latar Belakang 
 
Jika anda menghendaki agar latar belakang halaman ingin diganti dengan menggunakan gambar atau 
image, maka dapat dilakukan dengan menggunakan perintah <body background=”filegambar.jpg”>  
Caranya ialah tempatkan program di bawah ini bersama dengan file gambar yang akan ditampilkan 
dalam satu lokasi. 
 
 
 
 
<!DOCTYPE html> 
<html> 
<body> 
   <body background="kuliah_online.jpg"> 
 <h2> menggunakan gambar sebagai latar belakang </h2> 
</body> 
</html> 
Simpanlah file di atas dengan nama background.html. 
 
 
Gambar 2.12. Menampilkan gambar sebagai latar belakang halaman 
  
 
 
2.8. Menciptakan Efek Karakter Fisik 
Dalam Tampilan  
Beberapa bentuk efek karakter fisik diantaranya ialah huruf dengan cetak tebal, miring dan garis 
bawah. Elemen-elemen HTML yang dikategorikan sebagai karakter fisik diantaranya  adalah: 
 <b> - Teks tebal 
 <strong> - Teks penting 
 <i> - Teks miring 
 <em> - Teks yang ditekankan 
 <mark> - Teks yang ditandai 
 <small> - Teks yang lebih kecil 
 <del> - Teks yang dicoret 
 <ins> - Teks yang disisipkan 
 <sub> - Teks Subskrip 
 <sup> - Teks superskrip 
Penjelasan Elemen HTML 
ELEMEN DESKRIPSI 
<b> mendefinisikan teks tebal, tanpa kepentingan ekstra. 
<strong>  mendefinisikan teks dengan kepentingan yang kuat. Konten di dalamnya biasanya ditampilkan 
dalam huruf tebal. 
<i>  
 
mendefinisikan bagian teks dalam suara atau suasana hati alternatif. Konten di dalamnya 
biasanya ditampilkan dalam huruf miring. 
<em> Elemen HTML mendefinisikan teks yang ditekankan. Konten di dalamnya biasanya ditampilkan 
dalam huruf miring. 
small> Elemen HTML mendefinisikan teks yang lebih kecil: 
<del> Elemen HTML mendefinisikan teks yang telah dihapus dari dokumen. Browser biasanya akan 
menyerang garis melalui teks yang dihapus: 
<ins> Elemen HTML mendefinisikan teks yang telah dimasukkan ke dalam dokumen. Browser biasanya 
akan menggaris bawahi teks yang disisipkan: 
<sub> Elemen HTML mendefinisikan teks subscript. Teks subskrip muncul setengah karakter di bawah 
garis normal, dan terkadang ditampilkan dalam font yang lebih kecil. Teks subscript dapat 
digunakan untuk rumus kimia, seperti H 2 O: 
<sup> Elemen HTML mendefinisikan teks superscript. Teks superskrip muncul setengah karakter di 
atas garis normal, dan terkadang ditampilkan dalam font yang lebih kecil. Teks superscript dapat 
digunakan untuk catatan kaki, seperti WWW [1] : 
 
 
Di bawah ini akan diberikan contoh penggunaan efek karakter fisik tersebut dalam konteks dokumen 
HTML:  
 
<!DOCTYPE html> 
<html> 
<body> 
<p>Text Normal.</p> 
<p><b>Text Tebal</b></p> 
<p><i>Text Miring</i></p> 
<p><u>Teks dengan garis bawah </u></p> 
<p><em>Penekanan Pada Text</em></p> 
<p>Membuat Tulisan <small>diperkecil Kecil</small> Dari normal 
<p>Membuat TUlisan <mark>ditandai</mark> Warna Kuning 
<p>Membuat tulisan di <del>coret </del> </p> 
<p>Membuat Tulisan <ins>garis bawah</ins> </p> 
<p>Membuat Tulisan <sub>turun</sub> dari Normal</p> 
<p>Membuat Tulisan <sup>Naik</sup> dari Normal</p> 
<p>Tulisan <strong>ditebalkan</strong> dari Normal 
<p>AX<sup>2</sup>+BX 
<p>H<sub>2</sub>O 
</body> 
</html> 
 
 
 
Simpanlah file di atas dengan nama style6.html 
 
 
 
 
 
 
Gambar 2.13. Memformat Teks 
 
Efek karakter fisik lain digunakan untuk menentukan ukuran suatu teks, yaitu <FONT>… </FONT>. 
Elemen FONT menyediakan atribut SIZE yang mempunyai nilai dari 1 sampai 7. Nilai 1 digunakan untuk 
membuat teks dengan ukuran  yang paling kecil, sedang nilai 7 digunakan untuk membuat teks dengan 
ukuran paling besar. Nilai baku ukuran font adalah 3. 
 
Di bawah ini diberikan contoh dan penulisannnya dalam konteks dokumen HTML. 
<html> 
<h2> Ukuran huruf </h2> 
<font size=1> ukuran huruf  1</font><br> 
<font size=2> ukuran huruf  2</font><br> 
<font size=3> ukuran huruf  3</font><br> 
<font size=4> ukuran huruf  4</font><br> 
<font size=5> ukuran huruf  5</font><br> 
 
<font size=6> ukuran huruf  6</font><br> 
<font size=7> ukuran huruf  7</font><br> 
</html> 
 
Simpanlah file di atas dengan nama font.html 
 
Gambar 2.14. Menampilkan Ukuran Huruf 
 
2.8  Menempatkan Kutipan 
Untuk menempatkan suatu kutipan dari sumber lain di dokumen anda perlu menggunakan tag <CITE> 
…</CITE>. Contoh misalnya anda ingin  mengutip suatu pandangan dari orang lain seperti di bawah 
ini: 
<html> 
<h1>Kutipan</h1> 
<p> 
<cite> 
Mario Teguh (2012:5)  
Cobaan hidup terjadi karna tuhan punya alasan yg tepat untuk 
kamu, jangan berhenti dan menyerah, kamu harus terus melangkah 
</cite > 
</p> 
<p> 
<cite> 
 
Tinggalkanlah kesenangan yang menghalangi pencapaian 
kecemerlangan hidup yang diidamkan. Dan berhati-hatilah, karena 
beberapa kesenangan adalah cara gembira menuju kegagalan 
</cite> 
</p> 
 
Simpan file tersebut dengan nama file kutipan.html 
 
 
Gambar 2.15. Menampilkan kutipan 
2.9.Ganti Baris dan Garis Horizontal 
2.9.1. Penggunaan BR 
HTML element br menunjukkan sebuah line break (garis baru). Elemen br sebaiknya digunakan 
hanya untuk garis baru yang benar-benar merupakan bagian dari sebuah konten, seperti digunakan 
pada baris syair, puisi dan alamat. 
<html> 
<h1> 
UNIKOM <br> 
Jln.Dipatiukur No.114<br> 
Bandung 
</html> 
 
Simpan dengan Nama File:br.html 
 
 
Gambar 2.16. Menggunakan BR 
2.9.2.Penggunan HR 
hr menunjukkan sebuah horizontal rule atau garis horizontal, yaitu garis 
yang mendatar dari kiri ke kanan atau dari kanan ke kiri. 
HTML <hr> element digunakan untuk memisahkan konten atau paragraf 
satu dengan lainnya berdasarkan pengelompokkan tema atau topik 
masing-masing, istilahnya adalah paragraph-level thematic break. 
 
Gambar 2.17. Menggunakan BR 
 
Tugas 2 
Dengan menggunakan Perintah HTML yang telah dibahas diatas, buatlah program 
html untuk menampilkan hasil seperti layar berikut: pada Bagian Akhir tuliskan nama, 
nim, dan Jurusan  
 
 
 
Nama File: TUGAS2-NIM-NAMA 
 
Program HTML dan Hasil Run Screenshot, dicopy ke dalam Word, dan kemudian di 
Conversi menjadi file PDF, selanjutnya kirim ke https://kuliahonline.unikom.ac.id 
 
 
Sumber berita: 
https://finance.detik.com/berita-ekonomi-bisnis/d-5199662/anak-sd-pegawai-
kantoran-hingga-ustaz-jadi-pasien-joki-game-
online?tag_from=wp_beritautama&_ga=2.4691955.1792170232.1601881178-
1331536632.1599712921 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
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. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
6. https://www.w3schools.com/html, September, 2021 
 
7. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
8. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
 
 
 
 
 


Materi 2 Memformat Dokumen Html

Pemrograman Web-1
Materi 4. ini membahas mengenai perintah dasar untuk membuat tabel
table, border, bgcolor, tr, td, th, width, colspan dan rowspa

 
 
Membuat Tabel Pada HTML 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
 
 
4.0 Membuat Tabel 
Tabel biasanya digunakan apabila kita ingin membuat tampilan dalam bentuk baris dan kolom 
 
Untuk membuat table yang sederhana ada 4 elemen utama yaitu Table, TH, TR dan TD. Tag 
<table> adalah untuk membuat tabel kemudian di ikuti dengan tag <th> (table Header), <tr> 
(table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah 
untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table 
cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan. 
Table dalam dokumen HTML digunakan pula untuk mengontrol tampilan informasi yang ada 
dalam sebuah halaman web dan table juga dapat digunakan untuk menampilkan record-record 
pada database.  
 
 
Gambar 4.1. Contoh Tabel Tanpa Garis 
 
 
 
Untuk menampilkan table, perintah dasar yang digunakan adalah menggunakan tag sebagai berikut: 
<table></table> 
 
Nama File:tabel1.html 
<!DOCTYPE html> 
<html> 
<head> 
   <title>Penggunaan Tag Tabel</title> 
</head> 
<body> 
<h1>Belajar Tag Tabel</h1> 
<table border="1"> 
    <tr> 
        <th>Header Baris 1, Kolom 1</th> 
        <th>Header Baris 1, Kolom 2</th> 
        <th>Header Baris 1, Kolom 3</th> 
    </tr> 
    <tr> 
        <td>Baris 2, Kolom 1</td> 
        <td>Baris 2, Kolom 2</td> 
        <td>Baris 2, Kolom 3</td> 
    </tr> 
    <tr> 
        <td> Baris 3, Kolom 1</td> 
        <td> Baris 3, Kolom 2</td> 
        <td> Baris 3, Kolom 3</td> 
    </tr> 
    <tr> 
        <td> Baris 4, Kolom 1</td> 
        <td> Baris 4, Kolom 2</td> 
        <td> Baris 4, Kolom 3</td> 
    </tr> 
</table> 
</body> 
</html> 
 
 
 
Gambar 4.2. Menampilkan Tabel 
 
 
Perhatikan bahwa pada tag <table> kita memberikan atribut border. Atribut border digunakan untuk 
memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel. border=”1”, berarti kita 
mengistruksikan kepada web browser bahwa tabel tersebut akan memiliki garis tepi sebesar 1 pixel. 
Jika tidak ditambahkan, secara default tabel tidak memiliki garis tepi. 
 
 
4.1. Memberi Warna Tabel 
Untuk memberi warna Pada Tabel dapat digunakan perintah bgcolor 
Contoh: 
Nama File:tabel2.html 
<!DOCTYPE html> 
<html> 
<head> 
   <title>Penggunaan Tag Bgcolor pada Tabel</title> 
</head> 
<body> 
<h1>Menampilkan Data Siswa</h1> 
<hr> 
<table border="1"> 
    <tr bgcolor=silver> 
        <th>NAMA SISWA</th> 
        <th>ALAMAT</th> 
        <th>EMAIL</th> 
    </tr> 
    <tr bgcolor=pink> 
        <td>Diah Ayu</td> 
        <td>Jln.Pajajaran 12 Bandung</td> 
        <td>diah@gmail.com</td> 
    </tr> 
    <tr bgcolor=yellow> 
        <td>Purnama Dewi</td> 
        <td>Jln.Setiabudi 123 Cimahi</td> 
        <td>dewi_purnama@gmail.com</td> 
    </tr> 
</table> 
</body> 
</html> 
 
 
 
Gambar 4.2. Menampilkan Warna Pada Tabel 
 
 
4.2. Menggabung Kolom dan Baris Pada 
Tabel 
Untuk Menggabung Kolom (merger) dapat dilakukan dengan menggunakan perintah 
<td colspan=n>  
Sedangkan untuk menggabung baris dapat digunakan <td rowspan=n> 
 
n=Jumlah Kolom atau baris yang akan di Merger 
 
Contoh: 
Nama File:tabel3.html 
<!DOCTYPE html> 
<html> 
<head> 
   <title>Penggunaan Tag colspan dan rowspan pada Tabel</title> 
</head> 
<body> 
<center> 
<h1>Menampilkan Data Barang</h1> 
<hr> 
<table border="1"> 
    <tr> 
        <th rowspan=2>NO.</th> 
        <th rowspan=2>NAMA BARANG </th> 
        <th colspan=3><center>UKURAN</th> 
        <th rowspan=2><center>PRODUSEN</th> 
    </tr> 
    <tr> 
        <td>BESAR</td> 
        <td>SEDANG</td> 
        <td>KECIL</td> 
    </tr> 
 
     <tr> 
        <td>1</td> 
        <td>Air Mineral</td> 
        <td>Rp.5000</td> 
        <td>Rp.3000</td> 
        <td>Rp.1000</td> 
        <td>PT.Golden Misisipi</td> 
     </tr> 
     <tr> 
        <td>2</td> 
        <td>Susu Ultra</td> 
        <td>Rp.8000</td> 
        <td>Rp.5000</td> 
        <td>Rp.3000</td> 
        <td>PT.Ultra Jaya</td> 
     </tr> 
</table> 
</body> 
</html>     
 
 
 
 
Gambar 4.3. Menggunakan Rowspan dan Colspan 
 
  
 
TUGAS 4 
Dengan menggunakan perintah tabel yang telah dibahas sebelumnya, buatlah  halaman html seperti 
berikut: 
 
 
Gambar TUGAS 4 
 
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 18.00 Wib 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana (2022) Materi 3 Membuat List / Daftar. [Teaching Resource] 
2. Suryana, Taryana (2022) Materi 2 Memformat Dokumen Html. [Teaching Resource] 
3. Suryana, Taryana (2022) Materi 1 Pengenalan Html. [Teaching Resource] 
4. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
5. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
6. https://www.w3schools.com/html, September, 2021 
7. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
8. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
9. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
10. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
 
 
11. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
12. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
13. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
14. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
15. https://www.w3schools.com/html, September, 2021 
16. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
17. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
18. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching Resource] 
19. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Materi Jurusan Perancangan 
Wilayah Dan Kota. [Teaching Resource] 
20. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Untuk Jurusan Teknik 
Sipil. [Teaching Resource] 
21. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html. [Teaching Resource] 
 
 
 
 
 
 
 


Membuat Tabel Dengan Html

Pemrograman Web-1
Materi 4. ini membahas mengenai perintah dasar untuk membuat tabel table, border, bgcolor, tr, td, th, width, colspan dan rowspa

Materi 4. Membuat Tabel Dalam Html

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

Materi 5 Form Dengan Html Dan Html5

Komputer Aplikasi IT-5
Materi 6 membahas mengenai pembuatan modul untuk edit data yang sudah ada didalam database, dengan menggunakan perintah dasar sql
update se

 
 
 
Membuat Program Untuk Edit Data KTP 
 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 08621480577 
 
6.Edit  Data KTP 
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. edit_ktp.html 
2. proses_edit_ktp.php 
3. save_edit_ktp.php 
 
 
6.1. Membuat Form Edit KTP 
Untuk membuat Form Edit ktp dapat dilakukan dengan cara yang hampir sama 
dengan membuat form pencarian. 
 
Nama File:edit_ktp.html 
<html> 
<form action="proses_edit_ktp.php" method=post> 
<center> 
<h1>Form Edit Data KTP</h1> 
<hr> 
<table> 
  <tr><td><select name=pilihan> 
  <option value=nik>NIK 
  <option value=nama>NAMA 
  </select> 
  <td>:<input name=data_cari size=16> 
</table> 
<hr> 
 
<input type=submit value=Cari> 
<input type=reset> 
</html> 
 
 
 
6.2.Membuat Program Proses Edit 
Program Proses_edit_ktp.php berfungsi untuk menampilkan data yang akan di 
edit, dengan parameter atau variabelnya dikirim dari program edit_ktp.html. 
 
NamaFile:Proses_edit_ktp.php 
 
<center> 
<form action="save_edit_ktp.php" method=post> 
<h1> 
MENAMPILKAN DATA EDIT KTP<br> 
<hr> 
<table border=0> 
<?php 
require ("koneksi.php"); 
$pilihan=$_POST['pilihan']; 
$data_cari=$_POST['data_cari']; 
$sql="select * from ktp where $pilihan='$data_cari' "; 
 
$hasil=mysqli_query($conn,$sql); 
$row=mysqli_fetch_row($hasil); 
if($row) 
{ 
do 
{ 
list($nik,$nama,$tempat,$tgllahir,$jeniskelamin,$goldarah,$alamat,$rt,$rw,$
kelurahan, 
$kecamatan,$agama,$status,$pekerjaan,$warganegara)=$row; 
echo "<tr><td width=190>NIK<td width=280>:<input type=text name=nik 
value='$nik' readonly><td rowspan=15><img src='$nik.jpg' width=400 
height=400>"; 
echo "<tr><td>NAMA LENGKAP<td>:<input type=text name=nama value='$nama'>"; 
echo "<tr><td>TEMPAT<td>:<input type=text name=tempat value='$tempat'>"; 
echo "<tr><td>TGL LAHIR<td>:<input type=date name=tgllahir 
value='$tgllahir'>"; 
echo "<tr><td>KELAMIN<td>:"; 
if($jeniskelamin=="PRIA") { 
 echo "<input type=radio name=jeniskelamin value='$jeniskelamin' 
checked>$jeniskelamin"; 
 echo "<input type=radio name=jeniskelamin value='WANITA'>WANITA"; 
} 
else 
{ 
echo "<input type=radio name=jeniskelamin value='PRIA'>PRIA"; 
echo "<input type=radio name=jeniskelamin value='$jeniskelamin' 
checked>$jeniskelamin"; 
} 
echo "<tr><td>DARAH<td>:<select name=goldarah> 
<option>A 
 
<option>B 
<option>AB 
<option>0 
<option selected>$goldarah"; 
echo "<tr><td>ALAMAT<td>:<input type=text name=alamat value='$alamat'>"; 
echo "<tr><td>RT<td>:<input type=text name=rt value='$rt' size=5>"; 
echo "<tr><td>RW<td>:<input type=text name=rw value='$rw' size=5>"; 
echo "<tr><td>KELURAHAN<td>:<input type=text name=kelurahan 
value='$kelurahan'>"; 
echo "<tr><td>KECAMATAN<td>:<input type=text name=kecamatan 
value='$kecamatan'>"; 
echo "<tr><td>AGAMA<td>:<select name=agama> 
<option>ISLAM 
 <option>KRISTEN 
 <option>BUDHA 
 <option>HINDU 
 <option selected>$agama"; 
echo "<tr><td>STATUS<td>:<select name=status> 
<option>KAWIN 
 <option>BELUM KAWIN 
 <option>JANDA 
 <option>DUDA 
 <option selected>$status"; 
echo "<tr><td>PEKERJAAN<td>:<select name=pekerjaan> 
 <option>PNS 
 <option>SWASTA 
 <option>BURUH 
 <option>PETANI 
 <option>GURU 
 <option selected>$pekerjaan"; 
echo "<tr><td>KEWARGANEGARAAN<td>:"; 
if($warganegara=="WNI") { 
 echo "<input type=radio name=warganegara value='$warganegara' 
checked>$warganegara"; 
 echo "<input type=radio name=warganegara value='WNA'>WNA"; 
} 
else 
{ 
echo "<input type=radio name=warganegara value='WNI'>WNI"; 
echo "<input type=radio name=warganegara value='$warganegara' 
checked>$warganegara"; 
} 
 
} 
while($row=mysqli_fetch_row($hasil)); 
} 
else 
{ 
  echo "</table>Data yang dicari tidak ada ";  
} 
?> 
</table> 
 <hr> 
 <input type=submit value=Save> 
 <input type=reset value=Reset> 
 
 
6.3. Menyimpan Hasil Edit Data  
Untuk menyimpan hasil perubahan data supaya tersimpan kedalam database, maka 
dapat dilakukan dengan menggunakan perintah dasar update. 
 
File SAVE_EDIT_KTP.PHP berfungsi untuk menangani proses penyimpanan data 
kedalam tabel KTP. 
 
NamaFile:Save_edit_ktp.php 
<html>  
<center>  
<h1>SAVE EDIT DATA KTP </h1>  
<hr> 
<table>  
<?php  
require ("koneksi.php");  
$nik=$_POST['nik'];  
$nama=$_POST['nama'];  
$tempat=$_POST['tempat'];  
$tgllahir=$_POST['tgllahir'];  
$jeniskelamin=$_POST['jeniskelamin']; 
$goldarah=$_POST['goldarah'];  
$alamat=$_POST['alamat'];  
$rt=$_POST['rt'];  
$rw=$_POST['rw'];  
$kelurahan=$_POST['kelurahan'];  
$kecamatan=$_POST['kecamatan'];  
$agama=$_POST['agama'];  
$status=$_POST['status'];  
$pekerjaan=$_POST['pekerjaan'];  
$warganegara=$_POST['warganegara'];  
 echo "<tr><td width=150>NIK<td>:$nik"; 
 echo "<tr><td>NAMA LENGKAP<td>:$nama"; 
 echo "<tr><td>TEMPAT<td>:$tempat"; 
 echo "<tr><td>TANGGAL LAHIR<td>:$tgllahir"; 
 echo "<tr><td>JENIS KELAMIN<td>:$jeniskelamin"; 
 echo "<tr><td>GOL.DARAH<td>:$goldarah"; 
 echo "<tr><td>ALAMAT<td>:$alamat"; 
 echo "<tr><td>RT<td>:$rt"; 
 echo "<tr><td>RW<td>:$rw"; 
 echo "<tr><td>KELURAHAN<td>:$kelurahan"; 
 echo "<tr><td>KECAMATAN<td>:$kecamatan"; 
 echo "<tr><td>AGAMA<td>:$agama"; 
 echo "<tr><td>STATUS<td>:$status"; 
 echo "<tr><td>PEKERJAAN<td>:$pekerjaan"; 
 echo "<tr><td>WARGA NEGARA<td>:$warganegara"; 
echo "</table><hr>"; 
 $sql="update ktp set  
  nama='$nama', 
  tempat='$tempat', 
  tgllahir='$tgllahir', 
  jeniskelamin='$jeniskelamin', 
  goldarah='$goldarah', 
  alamat='$alamat', 
  rt='$rt', 
  rw='$rw', 
 
  kelurahan='$kelurahan', 
  kecamatan='$kecamatan', 
  agama='$agama', 
  status='$status', 
  pekerjaan='$pekerjaan', 
  warganegara='$warganegara'  
  where nik='$nik' "; 
 $hasil=mysqli_query($conn,$sql);  
 echo "<h1>Data Berhasil di Edit "; 
?> 
 
 
6.4.Menampilkan Hasil Via Browser 
Untuk menampilkan hasilnya dapat dilakukan dengan cara seperti berikut: 
1.Jalankan Browser 
2. Pada Address Bar, ketikan:localhost/ip 
3.Click File EDIT_KTP.HTML 
 
Gambar 6.1. Menapilkan Form Edit KTP 
 
4.Masukan Nik atau Nama yang akan di Edit,  Pada contoh ini yang dimasukan adalah 
Nama “BAGUS” selanjutnya click tombol Cari, dan akan ditampilkan hasil seperti 
berikut: 
 
 
 
Gambar 6:2. Menampilkan Form Edit KTP 
 
Lakukan perubahan pada Data Tersebut, misalnya Alamat diganti menjadi: 
JL.SETIABUDI 567,  
Kemudian simpan haril perubahan tadi dengan meng-Click tombol Save, dan akan 
ditampilkan informasi seperti berikut 
 
 
 
Gambar 6:3. Menampilkan  Data Berhasil di Edit 
 
 
 
: 
 
 
 
Setelah proses ini Data KTP yang ada di dalam database atau table akan terupdate. 
Berikut adalah contoh hasil perubahan data tersebut. 
 
 
 
Gambar 6.4. Browse Tabel KTP 
 
Sampai tahap ini pembuatan program untuk edit data KTP telah selesai dan sesuai 
dengan yang diharapkan. 
 
 
REFERENSI: 
1. Suryana, Taryana (2022) Materi 5. Pencarian Data E-ktp. [Teaching Resource] 
2. Suryana, Taryana (2022) Memasukan Atau Menambah Data Ektp. [Teaching Resource] 
3. Suryana, Taryana (2022) Membuat Form Memasukan Data Pegawai. [Teaching Resource] 
4. Suryana, Taryana (2022) Materi 3 Membuat Aplikasi E-ktp. [Teaching Resource] 
5. Suryana, Taryana (2022) Membuat Database. [Teaching Resource] 
6. Suryana, Taryana (2022) Instalasi Xampp Untuk Belajar Pemrograman E-government. [Teaching 
Resource] 
7. Suryana, Taryana (2022) Pengenalan E-government Dan Aplikasi Pendukung. [Teaching Resource] 
8. Suryana, Taryana (2022) Instalasi Xampp Untuk Belajar Pemrograman E-government. [Teaching 
Resource] 
9. Suryana, Taryana (2022) Menambah Data Dan Pencarian Data Akta Perkawinan. [Teaching Resource] 
10. Suryana, Taryana (2021) Membuat Aplikasi Integrasi Akta Perkawinan. [Teaching Resource] 
11. Suryana, Taryana (2021) Studi Kasus Integrasi Program Administrasi Ijin Gangguan. [Teaching 
Resource] 
12. Suryana, Taryana (2021) .delete Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
13. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan Mysql. [Teaching 
Resource] 
14. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, Elexmedia 
Komputindo, Jakarta 
15. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
16. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
17. https://www.w3schools.com/  September, 2021 
18. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, Jogyakarta 
19. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
20. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-government. [Teaching Resource] 
21. Suryana, Taryana (2021) Membuat Database Dengan Phpmyadmin. [Teaching Resource] 
22. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching Resource] 
23. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
 
24. Suryana, Taryana (2021) Membuat Aplikasi Kependudukan. [Teaching Resource] 
25. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, Elexmedia 
Komputindo, Jakarta 
26. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
27. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
28. https://www.w3schools.com/  September, 2021 
29. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, Jogyakarta 
30. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
31. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-government. [Teaching Resource] 
32. Suryana, Taryana (2021) Membuat Database Dengan Phpmyadmin. [Teaching Resource] 
33. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching Resource] 
34. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
35. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
36. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
37. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 
 
 
 
 
 


6.edit Data Ktp

Pemrograman Web-1
Materi 7 ini membahas mengenai Pembagian layar dengan menggunakan perintah Frame, frameset, frame src,  name dan target

 
 
Membuat Halaman Web dengan Frame  
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
7.1 Membuat Frame / Bingkai layar HTML 
Pada materi ini akan dibahas mengenai bagaimana teknik dalam menata atau membagi 
tampilan/window menjadi beberapa bagian. Yakni membagi posisi header, content, menu, 
sidebar, dll. 
 
HTML mempunyai elemen yang berguna untuk menampilkan beberapa halaman sekaligus pada layar 
komputer. Untuk keperluan tersebut kita dapat menggunakan frame. Fungsi frame diantaranya ialah 
digunakan untuk menampilkan halaman lain tanpa menghilangkan halaman menu utama yang masih 
tetap dapat ditampilkan dilayar browser. Atribut-atributnya diantaranya ialah: 
 
1. <FRAMESET></FRAMESET>Elemen FRAMESET merupakan elemen kelompok pengisi suatu frame. 
Pada perintah ini terdapat  dua atribut yaitu ROWS dan COLS. Tag ROWS berfungsi untuk 
menentukan jumlah spasi yang diberikan pada tiap baris. Jumlah tersebut dapat ditentukan dalam 
pixel, persen dengan menempatkan suatu % setelah nilai, atau nilai relatif dengan menempatkan 
tanda asterisk (*) di tempat nilai tersebut. Sedang tag COLS sebaliknya berfungsi unutk 
menentukan jumlah spasi pada kolom.  
 
2. <FRAME>Elemen FRAME menentukan properti  setiap frame masing-masing dalam frameset. 
Karena elemen ini  tidak mengandung teks, maka elemen tersebut tidak ada pasangan end-tag.  
 
Atribut dari FRAME adalah sebagai berikut:  
 
 Atribut SRC menunjuk spesifik kearah sumber URL untuk frame tersebut. 
 Atribut NAME digunakan untuk menentukan nama  frame, sehingga dapat berlaku sebagai 
target dari URLs lain. 
 Atribut marginwidth untuk memungkinkan perancang halaman menentukan lebar border 
frame dalam jumlah pixel. 
 Atribut marginheight digunakan untuk menentukan tinggi  margin. 
 Srolling berfungsi untuk membuat  scrolling bar. Setting untuk atribut ini ialah YES, NO, dan 
AUTO. 
 Atribut noresize digunakan mencegah pengguna untuk mengubah ukuran frame karena 
aturan baku (default) memungkinkan kita  dapat mengubah ukuran frame. 
 
 Atribut NOFRAMES akan mengabaikan data yang oleh browser akan  ditampilkan melalui 
frame, dan data tersebut dapat  ditampilkan oleh browser yang tidak mampu menampilkan 
frame. 
 
 
7.1.1.FRAMESET ROWS 
Kode Program berikut adalah contoh bagaimana membuat halaman dengan pembagian baris (Rows) 
Contoh Filename:Frame.html. 
Untuk membagi layar atas dan bawah dengan ukuran sama 50% 
 
Gambar 7.1. Frameset 2 Baris 
 
 
NamaFile:frame.html 
<frameset rows=50%,*> 
 <frame src="atas.html"> 
 <frame src="bawah.html"> 
</frameset> 
 
 
 
Filename:atas.html 
<html> 
<center> 
<h1>Halaman Atas </h1> 
<p>Isi halaman atas tulis disini </p? 
</html> 
 
Filename:bawah.html 
<html> 
<center> 
<h1>Halaman Bawah </h1> 
<p>Isi halaman bawah tulis disini </p> 
</html> 
 
Jika ketiga file tadi sudah dibuat, Jalankan File frame.html, maka kalau benar akan ditampilkan hasil 
pembagian layar seperti gambar diatas 
 
 
7.1.2.FRAMESET COLS 
Untuk membagi layar menjadi dua kolom, dapat dilakukan dengan menggunakan perintah frameset 
cols. 
 
Nama File:frame2.html 
Membagi layar menjadi 2 kolom dengan ukuran sama 50% 
<frameset cols=50%,*> 
 <frame src="kiri.html"> 
 <frame src="kanan.html"> 
</frameset> 
 
 
 
Gambar 7.2. Frameset 2 Kolom 
 
7.2.FRAMESET ROWS DAN COLS 
Untuk menggabungkan frame antara kolom dan baris dapat dilakukan dengan menggabungkan 
perintah frameset rows dan atau frameset cols. 
Berikut adalah contoh coding membagi layar menjadi tiga bagian. 
Nama File:frame3.html 
<frameset rows=30%,*> 
 <frame src="satu.html"> 
  <frameset cols=30%,*> 
   <frame src="dua.html"> 
   <frame src="tiga.html"> 
  </frameset> 
</frameset> 
 
 
 
Gambar 7.3. Frame Baris Atas dan bawah, Baris Atas Normal, Baris bawah dibagi menjadi  2 Kolom 
  
 
 
7.2.Membuka dua situs dalam frame 
Program berikut ini merupakan program yang dipergunakan untuk membuka situs yang mempunyai 
URL berbeda dalam dua frame.  
NamaFile:frame4.html 
    <frameset cols="50%,50%"> 
      <frame src="https://kompas.com"> 
      <frame src="https://viva.co.id"> 
  </frameset> 
   
 
Gambar 7.4.Membuka 2 Buah alamat website 
Frame sebelah kiri digunakan untuk menampilkan halaman website https://kompas.com, sedangkan 
frame sebelah kanan digunakan untuk menampilkan halaman website https://viva.co.id 
 
  
 
 
7.3.IFRAME 
Perintah IFRAME memungkinkan untuk membuat frame window  yang mengambang, Frame ini 
berfungsi  seperti text box, jika kita memerintahkan browser untuk melakukan scrolling  maka frame 
internal tersebut ini juga akan turut scrolling. 
 
<!DOCTYPE html> 
<html> 
<body> 
<h2>HTML Iframes</h2> 
<p>Contoh menampilkan halaman web lain ke dalam halaman anda:</p> 
<iframe src="https://viva.co.id" name="iframe1" height="300px" width="1000px"  
style="border:none"> 
</iframe> 
<p> 
Anda dapat mengatur lebar dan tinggi iframe  
dan juga menggunakan link untuk membuka file lain seperti berikut: 
<p><a href="anchor.html" target="iframe1">Anchor html</a></p> 
<p><a href="https://viva.co.id" target="iframe1"> Viva News</a></p> 
 
 
 
Gambar 7.5. Membuka website dalam iframe 
 
Perintah Width=”200px” height=”1000px” digunakan Untuk mengatur lebar dan tinggi iframe 
dengan angka px disesuaikan kebutuhan. 
Lainya mengenai Iframe 
 
1. Memberi judul iframe 
<iframe src="demo_iframe.htm" title="Judul"></iframe> 
2. Menghilangkan Garis  
<iframe src="demo_iframe.htm" style="border:none;"></iframe> 
3. Mewarnai garis tepi <iframe src="demo_iframe.htm" style="border:2px solid red;"</iframe> 
4. Memberi name, untuk dijadikan target 
<iframe src="satu.html" name="iframe_a" title="judul"></iframe> 
<p><a href="anchor.html" target="iframe_a">Anchor</a></p> 
  
 
 
7.4. Frame Navigasi 
Frame navigasi berfungsi untuk membuat navigasi pemilihan menu atau isi halaman-halaman web.  
Berikut contoh pemakaian 2 buah frame untuk membuat navigasi menu, dihalaman sebelah kiri diisi 
dengan menu, sedangkan halaman sebelah kanan diisi halaman pembuka yang nantinya akan 
dijadikan target. 
 
NamaFile: Frame_utama.html 
<frameset cols=20%,*> 
 <frame src="fkiri.html"> 
 <frame src="fkanan.html" name=kanan> 
</frameset> 
 
NamaFile: fkiri.html 
<html> 
MENU 
<hr> 
<a href="fkanan.html" target="kanan">HOME</a><br> 
<a href="biodata.html" target="kanan">Biodata</a><br> 
<a href="hoby.html" target="kanan">Hoby</a><br> 
<a href="sekolah.html" target="kanan">Sekolah</a><br> 
<hr> 
 
Namafile:fkanan.html 
<html> 
<Center> 
<h1>Menggunakan Frame 
<hr> 
Untuk Navigasi Menu 
<hr> 
 
Namafile:biodata.html 
<html> 
<center> 
<h1>BIODATA SAYA 
<hr> 
<table> 
<tr><td>Nama<td>: Fahra Ragita 
<tr><td>Alamat<td>: Jl.Gegerkalong Hilir 78 
<tr><td>Telp<td>: 2000333 
 
 
NamaFile:hoby.html 
<html> 
<center> 
<h1>HOBY SAYA<hr> 
<table> 
<tr><td>Musik<td>: Pop, Slow Rok 
<tr><td>Olah Raga<td>: Sepak Bola, Badminton, Lari 
 
 
 
 
 
 
 
 
Namafile:sekolah.html 
<html> 
<center> 
<h1>SEKOLAH 
<hr> 
<table> 
<tr><td>SD<td>: Sekolah Dasar Negeri Sukarasa 3 & 4 
<tr><td>SMP<td>: Sekolah Menengah Pertama Negeri 29 Bandung 
<tr><td>SMA<td>: Sekolah Menengah Atas Negeri 20 Bandung 
<tr><td>PERGURUAN TINGGI<td>: Universitas Komputer Indonesia 
 
 
 
Gambar 7.6.  Membuat Navigasi Menu dan Link 
 
 
7.5. Membagi layar menjadi 4 Frame 
Pada Meteri ini akan dibahas lebih lanjut mengenai pembagian layar dengan menggunakan lebih dari 
3 Frame . 
Contoh, misal akan dibuat halaman web dengan 4 frame seperti berikut: 
 
 
 
Langkah yang harus dilakukan adalah sebagai berikut: 
1. Bagi Layar menjadi 2 Bagian, yaitu bagian atas dan bagian bawah, misal bagian atas 20%, dan 
sisanya atau 80% untuk frame bagian bawah 
2. Frame Bagian Bawah kemudian dibagi menjadi 3 bagian, yaitu framekiri, frametengah, dan 
framekanan, dengan ukuran framekiri 20%, frametengah 60%,framekanan 20%, jadi total 
tetap 100% 
 
Contoh codingnya adalah sebagai berikut: 
Namafile:frame6.html 
<frameset rows=20%,*> 
 <frame src="atas.html"> 
  <frameset cols="20%,*,20%"> 
   <frame src="menukiri.html"> 
   <frame src="tengah.html"> 
   <frame src="menukanan.html"> 
  </frameset> 
</frameset> 
 
Tanda * menunjukan sisa pembagian layar, contoh 
<frameset cols=“20%,*,20%“> 
Artinya layar dibagi menjadi 3 frame berbentuk kolom dengan ukuran 20%,60%,20%> 
Jika ditulis seperti berikut: 
<frameset cols=“*,*,*“>  
Artinya layar dibagi menjadi 3 frame berbentuk kolom dengan ukuran yang sama 
 
Untuk pembagian baris dapat dilakukan dengan cara yang sama cukup mengganti cols menjadi 
rows, contoh sebagai berikut: 
<frameset rows=“20%,*,20%“> 
<frameset rows=“*,*,*“> 
 
Namafile:frame7.html 
<frameset cols="20%,*,20%"> 
 <frame src="menukiri.html"> 
 <frame src="tengah.html"> 
 <frame src="menukanan.html"> 
</frameset> 
 
 
 
Jika ingin dibuat menjadi 4 frame, misal frame yang tengah akan dibagi menjadi 2 bagian yaitu 
frame bagian atas 20% dan sisanya untuk frame bagian bawah, maka coding yang tadi harus 
ditambahkan seperti berikut: 
 
 
 
Namafile:frame8.html 
<frameset cols="20%,*,20%"> 
 <frame src="menukiri.html"> 
   <frameset rows="20%,*"> 
   <frame src="atas.html"> 
   <frame src="tengah.html"> 
   </frameset>   
 <frame src="menukanan.html"> 
</frameset> 
 
 
 
7.6. Membagi layar menjadi 5 Frame 
Untuk membagi layar menjadi lebih dari 4 frame, tinggal menambahkan bagian frame mana yang 
akan ditambahkan atau di bagi lagi 
Contoh: Misal akan dibuat frame seperti berikut: 
 
 
 
 
 
 
Maka Coding programnya adalah sebagai berikut: 
Namafile:frame9.html 
<frameset cols="20%,*,20%"> 
 <frame src="menukiri.html"> 
   <frameset rows="20%,*,20%"> 
  <frame src="atas.html"> 
  <frame src="tengah.html"> 
  <frame src="bawah.html"> 
   </frameset>   
 <frame src="menukanan.html"> 
</frameset> 
 
 
 Jika halaman “tengah” akan dijadikan target maka harus ditambahkan 
perintah “Name”  
contoh: 
<frame src="tengah.html" name=“tengah“> 
 
  
 
  
Tugas 7. 
Buat halaman Website seperti contoh berikut: 
Ketentuan: 
1. Frame Minimal 5, tidak boleh menggunakan yang sudah ada di contoh diatas 
2. Menu minimal ada 2, menukiri dan menukanan,  
3. Isi konten Bebas boleh mengenai apa saja, minimal 3 link dalam satu menu 
4. Jika Link Menu di Click maka tampilkan isi content di halaman utama 
5. Pada salah satu Frame, tuliskan nama dan jurusan kamu masing-masing 
 
 
 
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 6 Membuat Tautan Atau Link Dalam Html. [Teaching Resource] 
2. Suryana, Taryana (2022) Materi 5 Form Dengan Html Dan Html5. [Teaching Resource] 
3. Suryana, Taryana (2022) Materi 4. Membuat Tabel Dalam Html. [Teaching Resource] 
4. Suryana, Taryana (2022) Materi 3 Membuat List / Daftar. [Teaching Resource] 
5. Suryana, Taryana (2022) Materi 2 Memformat Dokumen Html. [Teaching Resource] 
6. Suryana, Taryana (2022) Materi 1 Pengenalan Html. [Teaching Resource] 
7. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
8. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
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; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
13. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
14. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
15. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
16. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
17. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
18. https://www.w3schools.com/html, September, 2021 
19. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
20. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
21. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching Resource] 
22. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Materi Jurusan Perancangan 
Wilayah Dan Kota. [Teaching Resource] 
23. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Untuk Jurusan Teknik 
Sipil. [Teaching Resource] 
24. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html. [Teaching Resource] 
25. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-ul2-2021. [Teaching 
Resource] 
26. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-2021-1. [Teaching Resource] 
27. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-2021-1. [Teaching Resource] 
28. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
29. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan Disdukcapil. [Teaching 
Resource] 
30. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-2021-1. [Teaching Resource] 
31. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-2021-1. [Teaching Resource] 
32. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-12021-1. [Teaching Resource] 
33. https://www.w3schools.com/html 
 
 
 


Frame Dalam Html

Pemrograman Web-1
Gambar pendukung materi dasar pembuatan cs

Gambar Pendukung

Pemrograman Web-1
File Image pendukung materi cs

Not a member yet

Menghapus Data Pada Tabel

Melakukan Edit Atau Perubahan Data Pada Tabel

Materi 2 Memformat Dokumen Html

Membuat Tabel Dengan Html

Materi 4. Membuat Tabel Dalam Html

Materi 5 Form Dengan Html Dan Html5

6.edit Data Ktp

Frame Dalam Html

Gambar Pendukung

Gambar Pendukung

15,029

70,114