2.1 Table, Frame Dan Web Page

LAPORAN
WORKSHOP PEMROGRAMAN WEB

MINGGU KE 2
TKK120707
SEMESTER 2
OLEH :
NAMA : Alfian Dani Ahmad Prasetyo
NIM : E32222411
GOLONGAN C
PROGRAM STUDI TEKNIK KOMPUTER

JURUSAN TEKNOLOGI INFORMASI
POLITEKNIK NEGERI JEMBER
TAHUN 2022
Acara 3. Penggunaan HTML
Pokok Bahasan : Membuat Tabel dan Frame

Acara Praktikum/Praktik : Acara 1 / Minggu 2
Tempat : Politeknik Negeri Jember
Alokasi Waktu : 120 Menit
a. Capaian Pembelajaran Mata Kuliah (CPMK)

1. Mahasiswa mampu membuat tabel sederhana menggunakan tag pada html
2. Mahasiswa mampu menggunakan cellspacing dan cellpadding untuk mendesain tabel
3. Mahasiswa mampu menggunakan rowspan dan colspan untuk membuat tabel
4. Mahasiswa mampu menggunakan frame untuk membagi halaman web menjadi
beberapa bagian
5. Mahasiswa mampu memanfaatkan frame untuk membuat website sederhana
b. Indikator
Kemampuan bekerja individu terkait dasar pembuatan dan aturan HTML
c. Dasar Teori
Tag yang akan digunakan pada workshop kali ini adalah :
1. <pre>…</pre>
Digunakan untuk preformatted text. Bertujuan untuk menampilkan text sesuai denganapa
yang diketikkan.
2. <ul>…</ul>
Unordered list. Atau list tidak berurut. List ini menampilkan isi list dengan
menggunakanbullet
3. <ol>…</ol>
Ordered list. Atau list berurut. List ini menampilkan isi dengan menggunakan angka12.
<ul>…</ul>
Unordered list. Atau list tidak berurut. List ini menampilkan isi list dengan
menggunakanbullet
4. <dl>…</dl>
Definition list digunakan untuk mendefinisikan daftar. Contoh penggunaannya adalahuntuk
glosarium.
5. <li>…</li>
Digunakan untuk mengisi list yang berada di dalam ul, ol, dan dl.
6. A
Anchor, untuk membuat link, baik berada di luar, maupun internal halaman
7. <table>…</table>
Untuk membuat tabel yang di dalamnya berisi tag :
• <tr>…</tr> menunjukkan row pada tabel
• <th>…</th> untuk mengisi data pada header tabel
• <td>…</td> untuk mengisi data pada sel tabel
8. <frameset>…</frameset>
Menujukkan elemen kelompok pengisi sebuah frame
9. <frame>…</frame>
Menentukan properti dari setuap frame yang berada pada frameset
d. Alat dan Bahan

1. Komputer Kerja
2. Ms. Word
3. Browser (Mozila/Chrome)
4. Instaler Xampp dapat di download di https://www.apachefriends.org/download.html
5. Instaler IDE (tidak mengikat)\
- notepad++ (https://notepad-plus-plus.org/downloads/)
- visual studio (https://code.visualstudio.com/download)
e. Prosedur Kerja
1. Tabel
Pada bagian ini, kita akan pelajari tabel dan atributnya pada html. Untuk membuat tabel,
diperlukan tag <table>…</table>. Di dalam tag table ada tag
<tr> yang menunjukkan row atau baris pada tabel, <th> yang berisi header pada tabel,
dan <td>yang merupakan data pada tabel.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Tabel </title>
</head>
<body>
<table border="1" align="center" cellspacing="0" cellspading="10" >
<caption> Data Mahasiswa </caption>
<tr>
<th> No. </th>
<th> Nama </th>
<th> Prodi </th>
</tr>
<tr>
<td> 1 </td>
<td> Dani </td>
<td> TKK </td>
</tr>
</table>
</body>
</html>
Setelah di jalankan pada browser, amati apa yang terjadi, apa guna atribut cellspacing dan
cellpadding?
CELLSPACING digunakan untuk melebarkan jarak antara sel di

tabel.
CELLPADDING digunakan untuk melebarkan ukuran sel di tabel.
Selanjutnya akan mempelajari cara menggabungkan cell dalam tabel pada html. Ketikkan
kode, kemudian jalankan pada browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<table border="1" align="center" cellspacing="0" cellspading="10" >
<caption> </caption>
<tr>
<th> No. </th>
<th> Nama </th>
<th> Prodi </th>
<th> Nilai </th>
<th> Nilai </th>
<th> Nilai </th>
</tr>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> Sastra Komputer </th>
<th> Teknologi Mikro Quantum </th>
<th> Ilmu Putih </th>
</tr>
<tr>
<th> 1 </th>
<th> Ivan </th>
<th> TKK </th>
<th> 98 </th>
<th> 98 </th>
<th> 100 </th>
</tr>
</table>
</body>
</html>
Amati hasil dari kode diatas (jangan lupa SS kode dan hasil untuk laporan).
Kemudian, modifikasi tag th menggunakan atribut rowspan dan colspan.
Apa yang dapat anda simpulkan mengenai colspan dan rowspan?

Rowspan merupakan salah satu atribut yang berkaitan erat dengan pembuatan tabel dan
berfungsi sebagai untuk menggabungkan beberapa data dalam baris.
Colspan adalah perintah untuk menggabungkan beberapa kolom menjadi satu.
Latihan selanjutnya adalah mengubah warna background gambar dan mengatur lebar dari
cell tabel, ubah background gambar menggunakan kode heksadesimal warna.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<table border="1" align="center" cellspacing="0" cellspading="10"
bgcolor="cyan" >
<caption> </caption>
<tr>
<th rowspan="2"> No. </th>
<th rowspan="2" > Nama </th>
<th rowspan="2"> Prodi </th>
<th colspan="3"> Nilai Mata Kuliah </th>
</tr>
<tr>
<th> Sastra Komputer </th>
<th> Teknologi Mikro Quantum </th>
<th> Ilmu Putih </th>
</tr>
<tr>
<th> 1 </th>
<th> Ivan </th>
<th> TKK </th>
<th> 98 </th>
<th> 98 </th>
<th> 100 </th>
</tr>
</table>
</body>
</html>
Kesimpulan nya walaupun menggunakan nama jenis warna masih tetap bisa digunakan
Sama saja menggunakan Kode Heksadesimal atau Nama Warnanya masih bisa dipakai dan
berjalan.
2. Frame
HTML memiliki elemen untuk menampilkan beberapa halaman sekaligus pada layar, yaitu
menggunakan frame. Frame membutuhkan tag <frameset></frameset>. Tag tersebut
menujukkan elemen kelompok pengisi sebuah frame. Selain itu, dibutuhkan juga tag
<frame> untuk menentukan properti dari setuap frame yang berada pada frameset.
Pertama, buat 3 file yaitu frame1.html, satu.html, dan dua.html. kemudian, jalankan
frame1.html pada browser.
Main Frame (Frame 1)

<!DOCTYPE html>
<html lang="en">
<head>
<title> Main Frame </title>
</head>
<frameset rows= 50%,* >
<frame src="Frame2.html">
</frameset>
<body>
</body>
</html>
Frame 2 (Halaman Satu)

<!DOCTYPE html>
<html lang="en">
<head>
<title> Frame </title>
</head>
<body>
<center>
<h1>
Halaman Satu
</h1>
</body>
</html>
Frame 3 (Halaman Dua)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<center>
<h1>
Halaman Dua
</h1>
</body>
</html>
Selanjutnya menambahkan File untuk halaman ketiga
Frame4 (Halaman tiga)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<center>
<h1>
Halaman Tiga
</h1>
</body>
</html>
Main Frame (Halaman 1 Enchanced)

<!DOCTYPE html>
<html lang="en">
<head>
<title> Main Frame </title>
</head>
<frameset rows= 30%,* >
<frameset cols= 30%,60% >
</frameset>
</frameset>
<body>
</body>
</html>
3. Tugas Praktikum
Dengan memanfaatkan yang sudah kalian pelajari, buat halaman website sederhana dengan
layout seperti dibawah ini :
Spesifikasi :
1. Tema bebas, tidak harus sama dengan contoh.
2. Frame di bawah logo digunakan untuk link Buat sekreatif mungkin
TUGAS PRAKTIKUM
Untuk tugas, saya telah membuat halaman, untuk tampilan halaman saya seperti gambar
diatas.
Untuk pengerjaannya saya membaginya menjadi 3 bagian yaitu, bagian header, bagian
body, sama bagian footer.
Untuk bagian header saya memasangkan kode program seperti dibawah.


<table border= "0" align="center" cellspacing="7" cellspading="10"
bgcolor="0000ff">
<thead>
<tr>
<th bgcolor="#0066ff"> <img src="Polije.png" height="120" width="150"
/> </th>
<th bgcolor="#0066ff"> <font face="LEMON MILK" size="8"
color="white"> Politeknik Negeri Jember </font> </th>
</tr>
</thead>
Bagian body
Untuk bagian body saya memasangkan kode program seperti dibawah.

<tbody>
<tr>
<th bgcolor="#0066ff">
<a title="Menu">
<button style="background-color:blue; border-color: cadetblue;
color:cyan"
type="button" onclick="alert('HALAMAN INI SUDAH MERUPAKAN HALAMAN
UTAMA YA GES YA :D')">
<font face="Orbitron" size="4,5"> LIST MENU </font>
</button>
</a>
</th>
<th rowspan="4" bgcolor="#0066ff" width="800">

<font face="Open Sans" size="3,5" color="white">
<p align="justify">
Hypertext Markup Language (HTML) adalah bahasa markah standar untuk

dokumen yang dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu
oleh teknologi seperti Cascading Style Sheets (CSS) dan bahasa skrip lainnya
seperti JavaScript, VBScript, dan PHP.
Peramban internet menerima dokumen HTML dari server web atau dari
penyimpanan lokal dan membuat dokumen menjadi halaman web multimedia. HTML
menggambarkan struktur halaman web secara semantik dan isyarat awal yang
disertakan untuk penampilan dokumen.
Elemen HTML digambarkan oleh tag, ditulis menggunakan tanda kurung

siku. Tag seperti img dan input langsung perkenalkan konten ke dalam halaman. Tag
lain seperti <p> mengelilingi dan memberikan informasi tentang teks dokumen dan
mungkin menyertakan tag lain sebagai sub-elemen. Peramban tidak menampilkan tag
HTML, tetapi menggunakannya untuk menafsirkan konten halaman.
HTML dapat menyematkan program yang ditulis dalam bahasa skrip

seperti JavaScript, yang memengaruhi perilaku dan konten halaman web.
Dimasukkannya CSS mendefinisikan tampilan dan tata letak konten. World Wide Web
Consortium (W3C), mantan pengelola HTML dan pemelihara standar CSS saat ini,
telah mendorong penggunaan CSS pada HTML presentasi eksplisit sejak 1997.
</p>
</font>
</th>
</tr>
<tr>
<a href="Form.html" target="_blank" title="TUGAS FORM">
color:cyan" type="button">
<font face="Orbitron" size="4"> PRAKTEK FORM </font></button>
</a>
</th>
</tr>
<tr>
<a href="Table.html" target="_blank" title="TUGAS TABLE">
<font face="Orbitron" size="4"> PRAKTEK TABLE </font></button>
</a>
</th>
</tr>
<tr>
<a href="Frame1.html" target="_blank" title="TUGAS TABLE">
<font face="Orbitron" size="4"> PRAKTEK FRAME </font></button>
</a>
</th>
</tr>
<tr>
<a href= https://www.instagram.com/alfian_dani.7/?hl=id target="_blank"
title="Instagram">
<font face="Orbitron" size="4"> INSTAGRAM </font>
</button>
</a>
</th>
</tr>
<tr>
<a title="Keluar">
color:cyan"
type="button" onclick="windowClose();">
<font face="Orbitron" size="4"> KELUAR </font>
</button>
</a>
</th>
</tr>
</tbody>
Bagian footer
Dan bagian terakhir footer saya memasangkan kode program seperti ini.


<tfoot>
<tr>
<tr>
<tr>
<th colspan="2" bgcolor="0066ff">
<font face="Nebula" size="2" color="white"> Copyright =
Alfian Dani Ahmad Prasetyo </font>
</th>
</tr>
</tr>
</tr>
</tfoot>
</body>
</html>
Penjelasan
Program yang saya gunakan kali ini agak berbeda dari acara sebelumnya dan saya
menambahkan beberapa atribut dan juga saya menambahkan tag <thead>, <tbody>, dan
<tfooter>
<thead> digunakan untuk membungkus konten bagian judul atau

kepala tabel.
<tbody> digunakan untuk membungkus konten bagian isi atau tubuh

tabel.
<tfoot> digunakan untuk membungkus konten bagian bawah atau

kaki dari tabel.
Selain itu saya juga menambahkan beberapa button pada bagian <tbody>
yang dimana buton tersebut mengarah pada halaman yang lain. Butyon
sendiri memiliki tag tersendiri yaitu menggunakan tag
<button>…</button>.
Menu
Buton menu Ketika di pencet akan menampilkan alert. Alert ini termasuk
salah satu dari atribut tag button
Instagram dan Facebook

Sama halnya dengan button praktek, button ini sama menggunakan anchor,
tetapi hrefnya bukan mengara ke file, melainkan mengarah ke link webiste.
Praktek Form, Praktek Table, Praktek Frame

Button dari ketiga ini gunanya untuk mengarahkan ke file html dan isinya seperti tugas
tugas yang sudah dikerjakan sebelumnya
Keluar
Yang terakhir button keluar, dimana buton ini mempunyai tag
<script>…</script> yang dimana tag tersebut memiliki basa pemrograman
JS (JavaScript). Buton keluar berfungsi untuk mengclose tab, jadi Ketika
buton di tekan, maka tab halaman akan tertutup.
Acara 4. Form
Pokok Bahasan : Membuat Form Sederhana
Acara Praktikum/Praktik : Acara 2/ Minggu 2
Tempat : Politeknik Negeri Jember
Alokasi Waktu : 120 Menit
a. Capaian Pembelajaran Mata Kuliah (CPMK)

1. Mahasiswa mampu membuat form sederhana menggunakan HTML.
2. Mahasiswa mampu memvalidasi isian form sesuai dengan spesifikasi yang dibutuhkan.
b. Indikator
Kemampuan bekerja individu terkait dasar pembuatan dan validasi form menggunakan
HTML
c. Dasar Teori
Form dalam HTML adalah sebuah fasilitas berupa halaman web yang dapat digunakan untuk
menerima masukan dan/atau data dari pengguna. Masukan dari pengguna website
selanjutnya dapat diolah menggunakan bahasa pemrograman web lainnya, baik oleh
server-side (contoh : php) ataupun client-side (contoh : java script). Form dapat digunakan
untuk berbagai keperluan seperti form pendaftaran, form login, transaksi penjualan,
mengumpulkan informasi atau meminta feedback dari pengguna, menawarkan barang/jasa
secara on-line dan sebagainya. Form sangat sering kita jumpai dalam satu aplikasi sistem
informasi berbasis web.
Tag yang digunakan untuk membuat form pada HTML adalah <form></form>
d. Alat dan Bahan

1. Komputer Kerja
2. Ms. Word
3. Browser (Mozila/Chrome)
4. Instaler Xampp dapat di download di https://www.apachefriends.org/download.html
5. Instaler IDE (tidak mengikat)
- notepad++ (https://notepad-plus-plus.org/downloads/)
- visual studio (https://code.visualstudio.com/download)
e. Prosedur Kerja
Pada workshop kali ini, kita akan belajar membuat form sederhana menggunakan HTML.
Form yang akan dibuat, tidak berisi aksi tertentu (tidak dapat disubmit) tetapi bisa diisi dan
bisa divalidasi sesuai kebutuhan.
Buka notepad++ atau IDE yang anda gunakan, kemudian ketikkan kode dibawah ini,
simpan, kemudian jalankan pada browser. Jangan lupa screenshot kode dan hasilnya untuk
digunakan sebagai laporan.
Jangan lupa analisa kode program yang dibuat.
1. Membuat Form Isian
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Registrasi</title>
</head>
<body>
<h3>Formulir Pendaftaran</h3>
<form action="" method="post" >
<table border="0">
<tr>
<td>NIM</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Nama</td>
</tr>
</body>
</html>
2. Menambahkan Tombol Sumbit dan Cancel pada Form
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<table border="0">
<tr>
<td>NIM</td>
</tr>
<tr>
<td>Nama</td>
</tr>
<tr>
<td>
<input type="submit" value="submit">
<input type="submit" value="cancel">
</td>
</tr>
</body>
</html>
3. Menambahkan Atribut Placeholder
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<table border="0">
<tr>
<td>NIM</td>
<td><input type="text" placeholder="Insert your NIM" ></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" placeholder="Insert your Name"></td>
</tr>
<tr>
<td>
</td>
</tr>
</body>
</html>
Apa perbedaan tampilan form diatas dan sebelumnya?
Placeholder merupakan atribut pada HTML yang mendeskripsikan singkat pada kolom input
agar sesuai format yang diinginkan.
4. Menggunakan required
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<table border="0">
<tr>
<td>NIM</td>
<td><input type="text" placeholder="Insert your NIM" required/
></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" placeholder="Insert your Name" required/
></td>
</tr>
<tr>
<td>
</td>
</tr>
</body>
</html>
Apakah ada perbedaan tampilan?
Klik tombol submit dalam kondisi NIM kosong dan nama terisi, apa yang terjadi?
Klik tombol submit dalam kondisi nama kosong dan NIM terisi, apa yang terjadi?
Untuk Tampilan tidak berbeda dari yang sebelumnya tetapi perbedaan nya ini seperti memberi
sebuah peringatan untuk mengisi form yang kosong dan tidak boleh kosong
Jika ada kotak form yang kosong habis itu di submit secara otomatis akan muncul peringatan
untuk diharapkan mengisi form nya agar tidak kosong dan berlaku untuk semuanya

2.1 Table, Frame Dan Web Page

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

2.1 Table, Frame Dan Web Page

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN

WORKSHOP PEMROGRAMAN WEB

PROGRAM STUDI TEKNIK KOMPUTER

Pokok Bahasan : Membuat Tabel dan Frame

a. Capaian Pembelajaran Mata Kuliah (CPMK)

d. Alat dan Bahan

CELLSPACING digunakan untuk melebarkan jarak antara sel di

CELLPADDING digunakan untuk melebarkan ukuran sel di tabel.

Apa yang dapat anda simpulkan mengenai colspan dan rowspan?

Main Frame (Frame 1)

Frame 2 (Halaman Satu)

Main Frame (Halaman 1 Enchanced)

Untuk bagian header saya memasangkan kode program seperti dibawah.

<th rowspan="4" bgcolor="#0066ff" width="800">

Hypertext Markup Language (HTML) adalah bahasa markah standar untuk

Elemen HTML digambarkan oleh tag, ditulis menggunakan tanda kurung

HTML dapat menyematkan program yang ditulis dalam bahasa skrip

<thead> digunakan untuk membungkus konten bagian judul atau

<tbody> digunakan untuk membungkus konten bagian isi atau tubuh

<tfoot> digunakan untuk membungkus konten bagian bawah atau

Instagram dan Facebook

Praktek Form, Praktek Table, Praktek Frame

a. Capaian Pembelajaran Mata Kuliah (CPMK)

d. Alat dan Bahan

1. Membuat Form Isian

Anda mungkin juga menyukai