BKPM – WORKSHOP PEMROGRAMAN WEB

BUKU KERJA PRAKTIK MAHASISWA(BKPM)

WORKSHOP PEMROGRAMAN
WEBTKK20707

SEMESTER 2

PENGAMPU :
LUKIE PERDANASARI, S.Kom., M.T.
LUKMAN HAKIM, S.Kom., M.Kom.
YOGISWARA, ST, MT

PROGRAM STUDI D3 TEKNIK KOMPUTER

JURUSAN TEKNOLOGI INFORMASI
POLITEKNIK NEGERI JEMBER
TAHUN 2023
 BKPM – WORKSHOP PEMROGRAMAN WEB

Acara 1. Instalasi XAMPP

Pokok Bahasan : Persiapan Workshop dan Pengenalan HTML

Acara Praktikum/Praktik : Acara 1 / Minggu 1
Tempat : Politeknik Negeri Jember
Alokasi Waktu : 120 Menit

a. Capaian Pembelajaran Mata Kuliah (CPMK)

1. Mahasiswa mampu memahami dasar HTML

2. Mahasiswa mampu melakukan instalasi xampp

b. Indikator

Kemampuan bekerja individu terkait dasar pembuatan dan aturan HTML

c. Dasar Teori
Definisi
HTML
HTML adalah singkatan dari Hyper Text Markup Language. Hyper Text berarti teks
aktif. maksudnya adalah sebuah teks yang memiliki kemampuan dapat terhubung
antara teks suatu halaman dengan halaman yang lain. Walaupun pada
implementasinya tidak hanya text saja yang bisa mengarahkan untuk berpindah dari
suatu halaman ke halaman lainnya. Sementara Markup Language menjelaskan bahwa
dokumen HTML ini disusun oleh tag- tag markup dan setiap tag pada HTML
menjelaskan perintah isi dokumen yang berbeda- beda.
HTML adalah bahasa dasar untuk membuat web. Disebut dasar karena HTML
dapat digunakan untuk membangun website yang sangat sederhana. Sementara
ketika kita ingin membuat website yang menarik, kita dapat memanipulasi kode HTML
misalnya menggunakan JavaScript dan PHP. Dokumen HTML dapat diedit oleh editor
teks apapun.Lalu disimpan dengan file berekstensi .html.

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

 BKPM – WORKSHOP PEMROGRAMAN WEB

5. Instaler IDE (tidak mengikat)

▪ notepad++ (https://notepad-plus-plus.org/downloads/)

▪ visual studio (https://code.visualstudio.com/download)

e. Prosedur Kerja

1. Instalasi Xampp

Instal xampp pada komputer kerja anda. File instaler dapat di download
pada linkberikut :
https://www.apachefriends.org/download.html

Berikut ini adalah tampilan link tersebut. Klik download pada driver yang sesuai
dengan spesifikasi komputer anda.

Setelah file berhasil terdownload, jalankan instaler xampp. Tampilannya akan

seperti dibawah ini. kemudian klik next untuk melanjutkan proses instalasi.
 BKPM – WORKSHOP PEMROGRAMAN WEB

Setelah itu, pilih komponen yang akan diinstal, kemudian klik next.

Pilih folder untuk menginstal xampp pada komputer kerja anda.

 BKPM – WORKSHOP PEMROGRAMAN WEB

Pilih bahasa yang akan digunakan, lalu klik next

Klik check jika anda ingin mengetahui lebih banyak tentang bitnami, atauuncheck jika belum
tertarik. Kemudian klik next

Klik next jika anda sudah siap menginstal xampp

 BKPM – WORKSHOP PEMROGRAMAN WEB

Tunggu proses instalasi hingga selesai, kemudian klik next

 BKPM – WORKSHOP PEMROGRAMAN WEB

Tampilan dibawah ini, menandakan xampp anda siap digunakan.

2. Instalasi IDE
Langkah berikutnya adalah instalasi IDE. IDE adalah Integrated Develompent
Environtment atau tools yang bisa anda gunakan untuk menuliskan kode program.
IDE yang digunakan tidak terikat. Anda bisa menggunakan notepad++, visual
studio, atau apa saja yang biasanya anda gunakan.

f. Hasil dan Pembahasan

1. Buat laporan mengenai salah satu aplikasi tersebut dalam penerapanya dan
tuliskansumbernya!
2. Kriteria penilaian : keunikan isi, kelengkapan penjelasan.
3. Dikumpulkan di elearning, dengan format PDF gol_nim_nama

g. Rubrik Penilaian

Bobot Penilai Nilai

No. Indikator Kinerja
Penilaian an Akhir
Ketepatan pemahaman mengenai
1 50%
HTML
2 Keberhasilan dalam instalasi xampp 50%
Total 100%
 BKPM – WORKSHOP PEMROGRAMAN WEB

Acara 2. Pengenalan HTML

Pokok Bahasan : Persiapan Workshop dan Pengenalan HTML

Acara Praktikum/Praktik : Acara 2 / Minggu 1
Tempat : Politeknik Negeri Jember
Alokasi Waktu : 120 Menit

a. Capaian Pembelajaran Mata Kuliah (CPMK)

1. Mahasiswa mampu memahami struktur dasar HTML

2. Mahasiswa mampu mengoperasikan xampp
3. Mahasiswa mampu membuat file html dan menjalankan di browser

b. Indikator
Kemampuan bekerja individu terkait dasar pembuatan dan aturan HTML

c. Dasar Teori
HTML memiliki struktur dasar yang terdiri dari 4 bagian utama yaitu DOCTYPE,
tag HTML, tag Head, tag body. Keempat bagian tersebut adalah syarat minimal
yang menjadi standar pada struktur global dokumen HTML dari W3C (World Wide
Web Concortium). Struktur dasar HTML seperti dibawah ini :

1. Tag HTML diawali dengan <html> dan diakhiri dengan </html>

2. Tag head yaitu <head> lalu ditutup dengan </head> adalah “kepala” website,
yangakan dieksekusi pertama kali sebelum badan website. Di dalam tag Head,
berisi tagtitle.
3. Tag title yaitu <title> lalu ditutup dengan </title> adalah judul website yang
akanmuncul pada tittle bar pada browser anda
4. Tag body yaitu <body? Dan ditutup dengan </body> berisi konten dari
halaman website.
 BKPM – WORKSHOP PEMROGRAMAN WEB

Untuk menjalankan hasil pembuatan html, simpan file terlebih dahulu pada folder
xampp (sesuai lokasi ketika anda menginstal xampp).
1. Jika menggunakan notepad++ klik file, kemudian save as.
2. Arahkan file ke folder htdocs.
3. Buat folder baru.
4. Pada contoh berikut ini, nama foldernya adalah Praktikum1.
5. Pada contoh berikut ini, file berada pada : C:\xampp\htdocs\Praktikum1
6. Beri nama file, kemudian jangan lupa memberi ekstensi .html (jika
menggunakan IDE lain bisa jadi otomatis berekstensi .html)
7. kemudian klik save.

Jika file sudah tersimpan. Warna tulisan akan berubah seperti di bawah ini :
 BKPM – WORKSHOP PEMROGRAMAN WEB

Lalu, buka browser. Ketikkan localhost/(nama folder anda)/(namafile).html

kemudian tekan enter. contohnya sebagai berikut :

Jika terjadi pesan eror pada browser sebagai berikut :

Cek kembali xampp. Caranya :

1. Klik start button kemudian cari xampp
2. Melalui icon yang berada di ujung kanan bawah. Klik panah, kemudian klik 2x
padaicon xampp
 BKPM – WORKSHOP PEMROGRAMAN WEB

Gambar diatas adalah contoh membuka xampp melalui start button

Gambar di atas adalah contoh membuka xampp melalui icon bar.

Setelah diklik start, maka tampilannya akan seperti dibawah ini.

Langkah berikutnya, adalah refresh/reload browser.

MEMBUAT KOMENTAR
 BKPM – WORKSHOP PEMROGRAMAN WEB

Modifikasi kode program menjadi seperti di bawah ini. lalu simpan

Setelah disimpan, reload/refresh/buka kembali file lat1.html.

Macam-macam tag pada html

Kumpulan tag pada html dapat kita lihat pada tabel di bawah ini.

Atribut pada HTML

Atribut pada HTML adalah informasi atau properti tambahan suatu tag atau elemen
HTML. Satu tag dapat memiliki satu atau beberapa atribut sekaligus. Beberapa
contoh atribut yang akan digunakan berada pada tabel dibawah ini.
 BKPM – WORKSHOP PEMROGRAMAN WEB

ATRIBUT KEGUNAAN
color Warna
align Mengatur posisi paragraf/gambar
size Ukuran dalam px
face Jenis font
Width dan height Lebar dan tinggi
border Tebal border

Tag Preformatted, List, Hyperlink

1. <pre>…</pre>
Digunakan untuk preformatted text. Bertujuan untuk menampilkan text sesuai
denganapa yang diketikkan.
2. <ol>…</ol>
Ordered list. Atau list berurut. List ini menampilkan isi dengan
menggunakan angka3. <ul>…</ul>
Unordered list. Atau list tidak berurut. List ini menampilkan isi list dengan
menggunakanbullet
3. <dl>…</dl>
Definition list digunakan untuk mendefinisikan daftar. Contoh penggunaannya
adalahuntuk glosarium.
4. <li>…</li>
Digunakan untuk mengisi list yang berada di dalam ul, ol, dan dl.
5. A
Anchor, untuk membuat link, baik berada di luar, maupun internal halaman
6. <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
7. <frameset>…</frameset>
menujukkan elemen kelompok pengisi sebuah frame
8. <frame>…</frame>
menentukan properti dari setuap frame yang berada pada frameset
 BKPM – WORKSHOP PEMROGRAMAN WEB

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

Buka notepad++ atau IDE yang anda gunakan, kemudian ketikkan kode
dibawah ini, simpan, kemudian jalankan pada browser anda. Jangan lupa
screenshot kode danhasilnya untuk digunakan sebagai laporan
1. PREFORMATTED TEXT
Tag <pre> merupakan suatu elemen HTML yang digunakan untuk
mengidentifikasikumpulan teks yang harus ditampilkan utuh apa adanya. Elemen ini
akan menampilkan kumpulan teks lengkap dengan line break, indentasi dan juga
spasi secara utuh.
Pertama, ketikkan kode dibawah ini, kemudian jalankan

Gambar di atas adalah hasil yang akan ditampilkan oleh browser, kemudian,
tambahkantag <pre> seperti gambar di bawah ini. kemudian jalankan kembali di
browser. Apa yang dapat anda simpulkan dari tag <pre>?
 BKPM – WORKSHOP PEMROGRAMAN WEB

2. OL, UL, DL
▪ Tag OL adalah Ordered List atau list berurut (memiliki nomor)
▪ Tag UL adalah unordered list (seperti bullet pada ms word)
▪ Tag DL adalah definition list
▪ Tag Li adalah list yang berada di dalam OL, UL, dan DL
 BKPM – WORKSHOP PEMROGRAMAN WEB

3. Belajar menggunakan tag a

A dalam html berarti anchor atau jangkar yang didalamnya terdapat atribut
href. href adalah singkatan dari hypertext reference. Value dari atribut href
adalah sebuah alamatyang dituju.
Buka kembali file html yang kalian kerjakan pada BKPM 2. Ketik kode
berikut diatasheading 1/ Bagian 1.
 BKPM – WORKSHOP PEMROGRAMAN WEB

Klik link di atas, bagaimana hasilnya?

Kemudian, tambahkan atribut target seperti pada kode di bawah ini.

Apa perbedaan sebelum dan setelah diberi atribut target?

Selanjutnya, kita akan mencoba link internal. Link internal biasanya

digunakan sebagai bookmark pada sebuah halaman. Jadi tidak
membuka halaman baru. Dengan memanfaatkan file html yang telah
dikerjakan pada BKPM 2, kita akan belajar link internal.

Buat sebuah menu pada bagian atas, berupa pilihan dari bagian yang
diinginkan, jangan lupa berikan tag a dan atribut href. value dari href
berisi tujuan yang akan dipilih.
 BKPM – WORKSHOP PEMROGRAMAN WEB

Jangan lupa beri atribut id pada tag heading yang akan dituju.
Ketikkan kode berikut,kemudian jalankan pada browser anda. Uji coba
dengan cara klik masing2 link yang berada pada menu. Setelah
menganalisa kode program, Apa yang dapat anda simpulkan
mengenai link internal?
 BKPM – WORKSHOP PEMROGRAMAN WEB

e. Hasil dan Pembahasan

1. Kerjakan laporan sesuai dengan format yang sudah diberikan

2. Tambahkan dasar teori yang menunjang kegiatan workshop
3. Screenshot kode program dan hasil
4. Analisa program dan Jawab jika ada pertanyaan pada BKPM
5. Beri kesimpulan
6. Kumpulkan tepat waktu disertai kode program/source coude (filehtml) yang sudah
dibuat (berupa archive bisa rar/zip)
7. Dasar teori, proses pengerjaan, hasil dan pembahasan, penulisan
kesimpulan,referensi, keunikan laporan memperoleh apresiasi.

f. Rubrik Penilaian

No. Indikator Kinerja Bobot Penilaian Nilai

Penilaian Akhir
1. Keberhasilan dalam menggunakan 20%
tag preformattted text
2. Keberhasilan dalam menggunakan 40%
list pada html
3. Keberhasilan dalam menggunakan 40%
hyperlink pada html
Total 100%