LAPORAN PRAKTIKUM

MATA KULIAH PRAKTIK WEB PROGRAMMING

Semester Gasal 2019/2020

Dosen Pengampu:
Anggyi Trisnawan Putra, S.Si., M.Si

Nama : Ulil Khafabi

NIM : 4611417076
Jurusan : Ilmu Komputer

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN ILMU KOMPUTER
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS NEGERI SEMARANG
2019
 PRAKTIKUM PERTEMUAN KE-1

I. Judul Praktikum
HTML

II. Kompetensi Dasar

Mampu memahami dan membuat layout halaman web menggunakan HTML.

III. Tujuan Praktikum

Tujuan dari praktikum ini adalah memahami tag-tag HTML.

IV. Dasar Teori

Hypertext Markup Language (HTML) adalah suatu bahasa yang menggunakan tanda-
tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser
agar halaman tersebut dapat ditampilkan secara benar.

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi
sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.

Fungsi HTML yang lebih spesifik yaitu :

1. Membuat halaman web.

2. Menampilkan berbagai informasi di dalam sebuah browser Internet.

V. Peralatan yang Diperlukan

1. Laptop HP 1000
2. Browser (Google Chrome/Mozilla Firefox)
3. Teks Editor (SublimeText)
4. (Opsional) Komputer terinstall XAMPP/LAMPP/MAMP

VI. Langkah-langkah Praktikum

Untuk membuat tabel di HTML, kita membutuhkan tag-tag HTML, dibawah ini;

▪ Tag <title> mendefinisikan judul halaman.

▪ Tag <table> digunakan untuk memulai tabel.
▪ Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari
tabel.
▪ Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke
tabel.
▪ Tag <th> untuk membuat table head atau bagian kepala pada table.
▪ Tag <fieldset> berfungsi untuk mengelompokkan beberapa objek form menjadi
sebuah kelompok.
▪ Tag <legend> berfungsi untuk menampilkan judul dari kelompok objek form
tersebut.
Saya membuat lima buah filed; lihat gambar1

1. Input nama dengan tipe text;

2. Input kategori dengan tipe radio;
3. Input angka dengan tipe number;
4. Input option dengan tipe select;
5. Input submit dengan tipe submit;

Lalu kelima filed ini dibungkus ke dalam tag <fieldset>.

Nanti tag <fieldset> ini akan membuat sebuah garis.

Di dalam tag <fieldset>, kita membuat tag <legend> untuk memberikan teks
pada fieldset.

Lalu, perhatikan juga atirbut yang digunakan pada setiap field.

• Atribut placeholder untuk menampilkan teks sementara (placeholder);

• Atribut value untuk membreikan nilai default pada field.

Setiap field kita bungkus dalam tag <p> agar terlihat rapi dan juga kita berikan sebuah
label dengan tag <label>.
Kemudian saya membuat tabel sederhana menggunakan tag-tag HTML seperti diatas,
dengan kode dibawah ini; lihat gambar2

Kode diatas terdapat atribut yang digunakan untuk menggabungkan sel tabel
adalah rowspan dan colspan:

• rowspan untuk menggbungkan baris;

• colspan untuk mebggabungkan kolom.

Atribut ini bisa kita berikan kepada tag <td> atau <th>.
VII. Hasil Praktikum