Repository Universitas Komputer Indonesia

Pemrograman WEB 1
Materi ini menjelaskan mengenai dasar-dasar HTML, HTML5, Web Browser, dan Text Editor, Pemrograman HTM

Suryana, Taryana

 
 
Pengenalan HTML, Browser dan  
Text Editor 
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 Web Browser Dan Text Editor

HUKUM PERUSAHAAN
Assalamu alaikum
materi untuk pertemuan 2, didownload yaa....

Yulianti, Farida

HUKUM 
PERUSAHAAN
1
By: Fy
HUKUM PERUSAHAAN
PERTEMUAN KE – 2:
Sumber Hukum & Jenis Badan Usaha
2
Apakah Perusahaan itu?
 Apa sajakah jenis-jenis badan usaha itu?
 Di mana Perusahaan diatur atau apa saja 
sumber-sumber hukum perusahaan itu? 
3
Perusahaan Perseorangan
 Apakah Perusahaan Perseorangan itu?
 Diatur dimana?
 Bagaimana cara pendiriannya?
 Legalitas usaha?
 Kewajiban pelaku usaha?
???
4
Jenis-jenis Badan Usaha?
Apa yg dimaksuk badan usaha yang berbadan 
hukum dan bukan badan hukum itu?
5
Perusahaan Perseorangan
 Diatur di mana?
 Apa kewajiban/legalitas usaha Persush. 
perseorangan?
 Bagaimana cara pendiriannya?
6
PERSEKUTUAN PERDATA:
 DIATUR DLM PS.1618 – 1652 KUH Pdt.
 SUATU PERSETUJUAN DG MANA DUA ORANG 
ATAU LEBIH MENGIKATKAN DIRI UTK MEMASUKAN 
SESUATU DLM PERSEKUTUAN DG MAKSUD UTK 
MEMBAGI KEUNTUNGAN YG TERJADI KRN NYA.
7
Maksud Perseroan
 Harus bersifat kebendaan.
 Harus memperoleh keuntungan.
 Keuntungan itu harus dibagi bagikan antara para 
anggota-anggotanya.
 Harus mempunyai sifat yg baik dan dapat 
diizinkan.
8
UNSUR-UNSURNYA:
 ADANYA LEBIH DARI SATU PIHAK/SUBYEK HK.
 ADANYA KEHENDAK BERSAMA.
 UTK MENCAPAI TUJUAN TERTENTU.
 ADANYA KERJA SAMA.
 MEMASUKAN SESUATU (INBRENG).
9
Isi Perjanjian Perseroan.
 Bagian yg hrs dimasukan oleh tiap-tiap peserta 
dlm perseroan.
 Cara bekerja.
 Pembagian keuntungan.
 Tujuan kerja sama.
 Lama (waktunya).
 Hal-hal lain yg dianggap perlu.
10
Pembagian Keuntungan
 Asas Keseimbangan (ps.1623 KUHPdt) : 
Apabila tdk ada perjanjian 
sebelumnya,maka keuntungan 
dibagikan berdasarkan besar kecilnya 
pemasukan(Inbreng).
 Thd pesero yg memasukan 
kerajinan/pengetahuan/pengalaman,t
enaganya ,bagian keuntungannya 
disamakan dg bagian pesero yg 
memasukan uang atau barang yg 
paling sedikit.
11
Penuntutan Terhadap 
Peseroan
 Kreditur hanya dpt menuntut piutangnya atas 
harta yg merupakan bagian dr anggota 
debitur,dan tdk dpt menuntut piutangnya atas 
harta perseroan.
12
Penuntutan piutang atas harta 
perseroan hanya dpt dilakukan:
 Jika para anggota lainnya telah memberi 
kekuasaan penuh kpd angota yg bertindak atas 
tanggungan perseroan.
 Jika tindakan anggota tsb memberi keuntungan 
utk perseroan.
13
Hubungan Intern Para Persero
 Ps.1630 KUHPdt : setiap anggota harus 
menanggung penggantian kerugian kpd 
perseroan apabila terjadi kerugian itu terjadi 
krn salahnya sendiri.
 Ps.1633 KUHPdt: keuntungan dan kerugian 
dibagi menurut perbandingan besar 
kecilnya modal yg disetor,kecuali 
diperjanjikan sebelumnya.
 Ps.1639 KHUPdt: Semua anggota boleh 
menyelenggarakan pemeliharaan 
perseroan,kecuali sdh disepakati bahwa 
hanya seorang dr mereka yg diserahi 
kewajiban itu.
14
PERSEKUTUAN FIRMA
PS.16 -35 KUHD
1618 – 1652 KUH Pdt
 PESERIKATAN PERDATA UTK  MENJALANKAN 
PERUSAHAAN DG NAMA BERSAMA DAN DLM 
MANA SETIAP SEKUTU BERTANGGUNG JAWAB 
SECARA PRIBADI DAN UTK SELURUHNYA BAGI 
PERSEKUTUAN (PS.16 & 18 KUHD).
15
KEKHUSUSAN FIRMA
 FORMIL : 1. MENJALANKAN PERUSAHAAN
2. MEMAKAI NAMA BERSAMA
 MATERIIL: PERTANGGUNGAN JAWAB SETIAP 
PESERTA SECARA PRIBADI DAN UTK SELURUHNYA 
BAGI PERJANJIAN2/PERIKATAN2 PERSEKUTUAN. 
16
UNSUR MENJALANKAN 
PERUSAHAAN
 TERANG TERANGAN.
 TERUS MENERUS.
 MENCARI UNTUNG
17
 PERTANGGUNGAN JAWAB SECARA PRIBADI 
UTK KESELURUHAN ADL KEKAYAAN PRIBADI 
DISAMPING UTK MEMENUHI KEWAJIBAN2 
DARI FIRMA JUGA AKIBAT DARI PERBUATAN 
MELANGGAR HUKUM.
 WALAUPUN DLM AKTE PENDIRIAN SUATU 
FIRMA PERTANGGUNGAN JAWAB PRIBADI 
ITU DITIADAKAN,MAKA PERTANGGUNGAN 
JAWAB TSB TETAP ADA,KRN MERUPAKAN 
UNSUR MUTLAK.
18
 PENDIRIAN FIRMA TDK TERIKAT OLEH SUATU 
BENTUK TERTENTU ARTINYA FIRMA BOLEH 
DIDIRIKAN SECARA LESAN ATAU TERTULIS,DG 
AKTE DIBAWAH TANGAN ATAU AKTE 
AUTENTIK.
 FIRMA DIANGGAP ADA DG ADANYA 
KONSENSUS ANTAR PENDIRI.
 AKTA AUTENTIK KEGUNAANYA ADL UTK 
MEMBUKTIKAN PARA SEKUTU THD PIHAK 
KETIGA BHW IA SBG FIRMANT.
19
STATUS HK FIRMA
 FIRMA BUKAN SBG BADAN HUKUM, 
KRN TDK ADA PEMISAHAN KEKAYAAN.
20
FIRMA DIMUKA 
PENGADILAN
 FIRMA DPT MENGGUGAT.
 FIRMA DPT DIGUGAT, PIHAK KETIGA BOLEH 
MEMILIH GUGATAN DITUJUKAN KPD 
FIRMA,SALAH SEORANG ATAU BEBERAPA 
ORANG FIRMANT NYA.
21
COMMANDITAIRE 
VENNOOTSCHAP (CV) 
(Diatur PS 19, 20, 21 KUHD)
 SEORANG ATAU LEBIH YG MEMPERCAYAKAN 
UANG/BARANG UTK DIPERGUNAKAN DLM 
PERNIAGAAN/PERUSAHAAN KPD SEORANG/LEBIH 
LAINYA YG MENJALANKAN PERNIAGAAN ITU ATAS 
PEMBIAYAAN BERSAMA.
22
CV MEMPUNYAI DUA 
SEKUTU:
1. SEKUTU KOMANDITER/PASIF
- SEKUTU YG BERKEWAJIBAN MEMASUKAN SESUATU (INBRENG) 
PD 
PERSEKUTUAN.
- TDK BOLEH MENCAPURI URUSAN SEKUTU KOMPLEMENTER.
- TANGGUNG JAWAB TERBATAS PD MODAL YG DISETOR.
- BERHAK MENGAWASI JALANNYA PERUSAHAAN.
2. SEKUTU KOMPLEMENTER/AKTIF.
- AKTIF MENJALANKAN PERUSAHAAN.
- BERHIBUNGAN DAN BERTANGGUNG JAWAB KPD PIHAK 
KETIGA.
-TANGGUNG JAWABNYA PRIBADI UTK KESELURUHAN.
23
 STATUS HK CV : BUKAN SBG BADAN HUKUM.
 PENDIRIAN CV TDK MENGHARUSKAN 
BENTUK TERTENTU.
 KEPAILITAN CV MERUPAKAN KEPAILITAN 
SEKUTU KOMPLEMENTER.
 JENIS CV:
 1. CV DIAM DIAM :PERSEKUTUAN YG 
NAMPAK    DR LUAR ADL FIRMA TETAPI 
SEBENARNYA DI DLMNYA ADA SEKUTU 
KOMANDITER.
 2. CV TERANG TERANGAN 
 3. CV DENGAN SAHAM.
24


Materi 2 : Sumber Hukum & Jenis Badan Usaha

Komputer Aplikasi IT-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; 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 
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 (2021) Memformat Dokumen Html. [Teaching Resource] 
9. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Materi Jurusan Perancangan 
Wilayah Dan Kota. [Teaching Resource] 
10. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Untuk Jurusan Teknik 
Sipil. [Teaching Resource] 
 
11. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html. [Teaching Resource] 
 
 
 
 
 
 
 


Membuat Tabel Dengan Html Kelas Ts-2021-1

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

Membuat Tabel Dengan Html Kelas If-wa1-ul2-2021

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

Membuat Formulir Atau Form Dengan Html Dan Html5 Kelas If2-2021-1

Komputer Aplikasi IT-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

Membuat Formulir Input Data Dengan Html Dan Html5 Kelas Pwk-2021-1

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.0 Frame Lanjutan 
 
Materi 7 merupakan lanjutan pembahasan mengenai frame dan juga  
menambahkan perintah lain yang telah dibahas, perintah link, color, dan image 
dan lainya, yang telah dibahas di materi 1 sampai Materi 6. 
7.1. 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.2. 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 (2021) Membuat Tautan Atau Link Dalam Html. [Teaching Resource] 
2. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
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] 
9. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching Resource] 
10. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Materi Jurusan Perancangan 
Wilayah Dan Kota. [Teaching Resource] 
11. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Untuk Jurusan Teknik 
Sipil. [Teaching Resource] 
12. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html. [Teaching Resource] 
13. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-ul2-2021. [Teaching 
Resource] 
14. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-2021-1. [Teaching Resource] 
15. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-2021-1. [Teaching Resource] 
16. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
17. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan Disdukcapil. [Teaching 
Resource] 
18. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-2021-1. [Teaching Resource] 
19. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-2021-1. [Teaching Resource] 
20. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-12021-1. [Teaching Resource] 
21. https://www.w3schools.com/html 
22. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
23. Suryana, Taryana (2021) Membuat Form Input Data Dengan Menggunakan Html Dan Html5 Kelas 
Ts-2021-1. [Teaching Resource] 
24. Suryana, Taryana (2021) Membuat Formulir Input Data Dengan Html Dan Html5 Kelas Pwk-2021-
1. [Teaching Resource] 
25. Suryana, Taryana (2021) Membuat Form Atau Formulit Input Data Dengan Html Dan Html5 Kelas 
If3-2021-1. [Teaching Resource] 
26. Suryana, Taryana (2021) Membuat Formulir Atau Form Dengan Html Dan Html5 Kelas If2-2021-
1. [Teaching Resource] 
27. https://w3schools.com 
 
 
 
 
 


Not a member yet

Materi 1. Pengenalan Html Web Browser Dan Text Editor

Materi 2 : Sumber Hukum & Jenis Badan Usaha

Membuat Tabel Dengan Html Kelas Ts-2021-1

Membuat Tabel Dengan Html Kelas If-wa1-ul2-2021

Membuat Formulir Atau Form Dengan Html Dan Html5 Kelas If2-2021-1

Membuat Formulir Input Data Dengan Html Dan Html5 Kelas Pwk-2021-1

Frame Untuk Membagi Layar Dalam Html Kelas If-2-2021-1

File 2 Image Pendukung Materi Css

File Image Pendukung Materi Css

File Gambar Pendukung Css

15,029

70,114