MODUL PRAKTIKUM

DESAIN DAN PEMROGRAMAN WEB

PRAKTIKUM KE-3
HTML

Tim Penulis:
Kunti Eliyen, M.T.

Teknik Informatika
Politeknik Kediri
2019
 PRAKTIKUM 1
DASAR HTML

A. TUJUAN
Setelah melakukan praktikum bab ini, mahasiswa diharapakan mampu :
1. Memahami tag div
2. Memahami perbedaan ID dan Class
3. Membuat tabel

B. DASAR TEORI
1. Tag Div (Division)
HTML <div> element dapat dijadikan "wadah" untuk menempatkan beberapa
elemen menjadi satu bagian yang penggunaannya ditujukan untuk mempermudah
aplikasi style dengan CSS dan perlakuan khusus lainnya yang kemudian dapat diberi
atribut class, id, title dan lain sebagainya.
Kita dapat membuat suatu group dari tag-tag HTML yang kita buat dengan
menggunakan tag <div>. Seperti pada contoh berikut :
Setiap website/weblog yang kita buka, jika diperhatikan pasti memiliki empat
bagian/group. Keempat bagian/group ini antara lain :
a. Header
Bagian kepala website yang berisi logo website, nama website, slogan website,
menu website dan lainnya.
b. Content
Berisi isi dari website itu sendiri, jika website berupa weblog, maka contentnya
berisi postingan terbaru atau informasi lainnya.
c. Sidebar
Berada di samping Content dan biasanya berisi iklan, kategori artikel dan widget
atau hiasan situs lainnya.
d. Footer
Bagian kaki dari website yang pada umumnya diisi dengan tag website tersebut,

POLITEKNIK KEDIRI
 misalnya copyright © 2019 by anaksholeh.

Untuk penerapan pembagian tersebut kita dapat membagi bagian-bagian tersebut

dengan menggunakan tag <div> dan dapat memberi nama pada tag <div> tersebut
dengan menggunakan atribut id atau class. Contoh:

<div id=”header”>
</div>
<div id=”content”>
</div>
<div id=”sidebar”>
</div>
<div id=”footer”>
</div>

Fungsi dari penggunaan tag <div> ini hanya digunakan untuk membuat dokumen HTML
lebih terstruktur dengan membagi-bagi dokumen ke dalam bagian- bagian yang lebih
spesifik.

2. Attribut ID dan CLASS

Tag HTML mempunyai atribut ID dan CLASS, yang digunakan untuk memberi
nama tag HTML. Berikut perbedaan antara ID dan CLASS:
ID
Atribut ID digunakan untuk penamaan elemen HTML yang memiliki karakteristik
unik/berbeda. Tidak boleh ada dua atau lebih elemen yang mempunyai ID yang sama.
Perhatikan contoh berikut :
<div id= “menu”>
<ul id= ”menu”>
<li>Beranda</li>
<li>Tutorial</li>
</ul>
</div>

Penggunaan atribut ID pada contoh di atas adalah SALAH, karena terdapat dua ID yang
sama, yaitu “menu” pada tag <div> dan <ul>.

POLITEKNIK KEDIRI
 CLASS

Class digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama

dan dapat digunakan berulang kali dalam markup (kode HTML). Sebagai contoh,
perhatikan kode HTML berikut :

1. <ul id=”menu”>
2. <li class=”hijau”>Beranda</li>
3. <li>Tutorial</li>
4. <li class=”hijau”>Profil</li>

5. <li>Tutorial</li>
6. <li class=”merah”>Berita</li>
7. <li>Video</li>
8. </ul>

Pada kode HTML di atas, terdapat lebih dari satu class = “hijau”, hal seperti ini
diperbolehkan dalam penggunaan class pada html.
Kesimpulannya, ketika memiliki beberapa elemen dengan karakter/format yang sama,
gunakan class sebagai penamaannya dan gunakan ID untuk elemen yang berbeda dan
membutuhkan tanda pengenal lebih spesifik.

2. Membuat Tabel
Untuk membuat table pada html menggunakan tag <table> … </table>. Beberapa
tag dan atribut html yang dibutuhkan dalam pembuatan table dalam html adalah
sebagai berikut:
Tag dan Atribut Kegunaan
<table> … </table> Membuat table
<tr> … </tr> Membuat baris tabel (table row)
<td> … </td> Menentukan banyaknya kolom (table
data)
Atribut colspan Untuk menyatukan kolom secara
horizontal
Atribut rowspan Untuk menyatukan kolom secara vertikal

POLITEKNIK KEDIRI
Contoh:

<table>
<tr>

</tr>
</table>

Latihan1.html

Latihan2.html
Membuat tampilan table seperti berikut:

Maka kode html yang dibutuhkan adalah sebagai berikut:

POLITEKNIK KEDIRI
 Tambahkan minimal 3 data pada table di atas!

3. Struktur Tabel Yang Baik

Ketentuan dalam pembuatan table yang baik adalah dengan menggunakan tag
<thead> untuk baris yang menjadi judul table, <tbody> untuk data yang disimpan dalam
table dan <tfoot> untuk bagian paling bawah tabel.
Latihan3.html

4. CSS Dalam Tabel

CSS merupakan cara untuk mengatur tampilan pada halaman web. CSS juga
dapat diterapkan pada pengaturan tampilan sebuah table. Berikut contoh sederhana
pengaturan CSS untuk table.

POLITEKNIK KEDIRI
Latihan4.html

POLITEKNIK KEDIRI
Jelaskan efek yang ditimbulkan dari styling CSS pada table!

C. TUGAS PENDAHULUAN
Jawablah pertanyaan berikut ini:
1. Apa yang Anda ketahui tentang tag <div> dan fungsinya?
2. Apa perbedaan tag <thead>, <td>, <tr> dan <tbody>?

D. PERALATAN DAN KOMPONEN

1. Komputer / Laptop sebagai hardware
2. Notepad++/Atom/Sublime/Dreamwaver sebagai editor source code
3. Web Browser sebagai media untuk menjalankan hasil kode

E. LANGKAH PRAKTIKUM
1. Ketik ulang semua latihan pada modul dan simpan dengan nama yang sesuai
2. Jalankan hasil latihan yang telah disimpan pada web browser
3. Buat laporan praktikum sesuai dengan contoh laporan
4. Simpan laporan dengan format pdf
5. Kirim laporan ke email [email protected], dengan subject P3_KELAS_NIM_NAMA
6. Laporan dikirim paling lambat 1 jam setelah perkuliahan selesai

POLITEKNIK KEDIRI
F. TUGAS
1. Tulis kode berikut dan simpan dengan nama frame.html

POLITEKNIK KEDIRI
2. Tulis kode berikut dan simpan dengan nama home.html

POLITEKNIK KEDIRI
4. Tulis kode berikut dan simpan dengan nama profil.html

5. Lengkapi halaman profil pada desain di atas dengan biodata kalian masing-masing!
6. Analisis semua kode html pada desain di atas!

G. PENUTUP
Pastikan hal-hal berikut sebelum Anda keluar dari laboratorium :
1. Meja dan kursi tertata kembali dalam keadaan rapi.
2. Komputer dan Monitor dalam keadaan mati.
3. Peralatan dan komponen dikembaikan ke tempat asalnya.
4. Laboratorium dalam keadaan bersih dan rapi.
5. Jangan meninggalkan barang pribadi di laboratorium.

POLITEKNIK KEDIRI