LAPORAN

WORKSHOP PEMROGRAMAN WEB

MINGGU KE 1

TKK120707
SEMESTER 2

OLEH :

IVAN WAHYU HADI PRATAMA

E32221239
GOLONGAN A

PROGRAM STUDI TEKNIK KOMPUTER

JURUSAN TEKNOLOGI INFORMASI
POLITEKNIK NEGERI JEMBER
TAHUN 2023
 Acara 1. Instalasi XAMPP
Pokok Bahasan : Persiapan Workshop dan Pengenalan HTML
Acara Praktik : Acara 1 / Minggu 1
Tempat : Politeknik Negeri Jember
Alokasi Waktu : 120 Menit (07.00 – 11.00)

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
XAMPP
XAMPP merupakan media atau web server localhost yang bisa
digunakan secara offline. Melalui XAMPP, pengguna dapat mengola
database yang berdara di localhost tanpa memerlukan akses internet
sehingga jika koneksi internet terganggu dan tidak dapat mengakses web
server.
XAMPP merupakan software yang dikembangkan oleh sekelompok
tim Apache Friend pada 2002 dan bisa didapatkan secara gratis dengan
label General Public License (GNU). Sebagai software open source
berbasis web server, XAMPP ini memiliki berbagai program dan
mendukung berbagai sistem operasi yang umum digunakan, seperti
Linux, Windows, MacOS, dan Solaris. Aplikasi ini berfungsi sebagai server
lokal yang sudah mencakup program Apache, MySQL, dan PHP.

Sumber : https://www.biznetgio.com/news/apa-itu-
xampp#:~:text=XAMPP%20merupakan%20media%20atau%20web,peng
guna%20tidak%20lagi%20perlu%20khawatir.
 HTML
HTML (HyperText Markup Language) adalah suatu bahasa yang
menggunakan tanda-tanda tertentu 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.
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 missal menggunakan JavaScript dan
PHP, Dokumen HTML dapat di edit oleh editor test apapun. Lalu disimpan
dengan file berekstensi (dot) .html.
Fungsi Lain HTML yang lebih spesifik yaitu :
1. Membuat halaman web.
2. Menampilkan berbagai informasi di dalam sebuah browser
internet.
3. Membuat link menuju halaman web lain dengan kode
tertentu (Hypertext).

Sumber : https://www.niagahoster.co.id/blog/html-adalah/

D. Alat dan Bahan

1. Komputer Kerja
2. Ms. Word
3. Browser
4. XAMPP bisa download di :
https://www.apachefriends.org/download.html

E. Prosedur Kerja
A. Instalasi XAMPP
 Instal XAMPP pada komputer kerja anda. File installer dapat di
download pada halaman resmi apachefriends.
https://www.apachefriends.rog/download.html

Download XAMPP sesuai dengan versi yang kalian inginkan, setelah

download selesai, buka installer nya lalu lakukan proses install.
Setelah itu pilih komponen yang akan diinstal, kemudian klik next

Silahkan pilih lokasi file instalasi XAMPPnya.

Pilih bahasa yang ingin digunakan pada XAMPP

Langkah terakhir akan muncul Ready to install, pastikan semua sudah
benar lalu klik next.
Lalu tunggu proses install selesai.

Apabila instalasi telah selesai, kalian bisa klik finish untuk mengakhiri
proses.

Proses instalasi telah selesai, berikut adalah tampilan awak dari software
XAMPP
 XAMPP memiliki berbagai modul, mulai dari Apache, MySQL,
FileZila, Mercury, Tomcat. Dikarenakan kita akan mengerjakan HTML
maka kita cukup akan menggunakan modul Apache saja, karena modul
lainnya kegunaannya berbeda, seperti MySQL ini untuk databases, dan
FileZila untuk FTP (File Transfer Protocol).

B. Instalasi IDE
IDE adalah program komputer yang memiliki beberapa fasilitas
yang diperlukan dalam pembangunan perangkat lunak atau software.
Tujuan IDE adalah untuk menyediakan semua utilitas yang diperlukan
dalam membangun perangkat lunak. Berikut adalah rekomendasi IDE
yang sangat cocok untuk pengerjaan HTML menurut saya berserta link
downloadnya.
1. Visual Studio Code (VSC) : https://code.visualstudio.com/download
2. Atom By Github : https://www.gitkraken.com/download/windows64
3. Sublime Text 3 : https://www.sublimetext.com/3
4. Notepad ++ : https://notepad-plus-plus.org/downloads/
5. NetBeans : https://netbeans.apache.org/download/index.html
 Acara 2. Pengenalan HTML
Pokok Bahasan : Persiapan Workshop dan Pengenalan HTML
Acara Praktikum : Acara 2 / Minggu 1
Tempat : Politeknik negeri Jember
Alokasi Waktu : 120 Menit (07.00 – 11.00)

A. Capaian Pembelajaran Mata Kuliah (CPMK)

A. Mahasiswa mampu memahami struktur dasar HTML
B. Mahasiswa mampu mengoperasikan XAMPP
C. Mahasiswa mampu membuat file HTML dan menjalakan di browser

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

C. Dasar Teori
HTML sendiri adalah sebuah singkatan dari HyperText Markup
Language. HTML sendiri adalah bahasa markup yang digunakan untuk
membuat halaman website. Isinya terdiri dari berbagai kode yang dapat
menyususn struktur suatu website. HTML terdiri dari kombinasi teks dan
symbol yang disimpan dalam sebuah file. Dalam membuat file HTML,
terdapat stndar atau format khusus yang harus diikuti. Format tersebut
telah tertuang dalam standar kode internasional atau ASCII (American
Standard Code for Information Interchange).

Dengan adanya HTML pengguna dapat membuat atau menyususn

heading, paragraph, gambar, link, dan lainnya supaya dapat dilihat
banyak orang melalui halaman website.
Cara Kerja HTML
Dokumen HTML anda buat di IDE editor text dan menyimpannya
dengan extensi file .html. dokumen HTML yang dibuat bisa sajah lebih
dari satu. Sebab dalam sebuah website biasanya terdiri dari banyak
halaman. Missal aja, halaman utama, kontak, blog, dan lainnya. Masing
masing dokumen berisi komponen HTML yang akan Menyusun bagian
heading, paragraph, isi konten, dan lainnya. Ekstensi file ini dapat dibuka
dengan menggunakan web browser seperti Google Chrome, Safari, atau
Mozilla Firefox. Jika sudah, selanjutnya browser akan membaca dan me-
render file HTML menjadi tampilan halaman website. Sehingga ketika
orang mengakses website, mereka dapat mudah membaca informasi
yang ditampilkan.

Mengenal Tag, Elemen, dan Atribut pada HTML

Tag
Tag adalah tanda awalan dan akhiran dalam perintah HTML yang
akan dibaca oleh web browser. Tag dibuat dengan menggunakan kurung
siku <…>, dimana didalamnya berisi nama tag. Setiap tag memiliki fungsi
perintah yang berbeda-beda. Mulai dari membuat judul, paragraph,
heading, pengaturan font, dan lainnya
D. Alat dan Bahan
1. Komputer kerja
2. Ms. Word
3. Browser
4. XAMPP
5. IDE code

E. Prosedur Kerja
1. Menyalakan Modul di XAMPP
Cara kerja XAMPP adalah seperti server Ketika ingin
menggunakannya hal yang pertama yang perlu dilakukan adalah
mengaktifkannya terlebih dahulu. Kita akan menggunakan XAMPP sebagai
server HTML alhasil kita perlu mengaktifkan Apache nya terlebih dahulu.

Ketika Apache nya sudah menyala, maka buka browser lalu coba ketikan
di url pencarian localhost/dashboard/ Ketika di cari url tersebut maka
akan muncul sebuah halaman utama dari XAMPP localhost.
Munculnya halaman utama XAMPP ini menunjukan bahwa XAMPP module
Apache siap untuk digunakan.

2. Membuat File HTML

Pertama buka IDE Code yang ingin kalian gunakan, disini saya akan
menggunakan VSC (Visual Studio Code). Ketika sudah kebuka silahkan
buat folder atau file di dalam file utama XAMPP. Di dalam file XAMPP kita
membuat file atau folder wajib di dalam folder htdocs. Kemudian buat file
index.html sebagai percobaan
Buat program HTML dasar seperti contoh dibawah. Dibawah adalah
contoh program HTML sederhana beserta memberikan komentara pada
blok code.

Maka Ketika di buka di browser hasil code nya akan seperti gambar
dibawah

C. Membuat Komentar
Modifikasi kode program menjadi seperti ini
Setelah disimpan, reload/refresh/buka kembali file lat1.html, lalu akan menjadi seperti ini

C. PREFORMATTED TEXT
Tag <pre> merupakan suatu elemen HTML yang digunakan untuk
mengidentifikasikumpulan teks yang harus ditampilkan utuh apa adanya.
Elemen ini akan menampilkankumpulan teks lengkap dengan line break,
indentasi dan juga spasi secara utuh. Pertama, ketikkan kode dibawah ini,
kemudian jalankan.
Ketika program dijalankan maka hasilnya akan aneh tidak sesuai dengan
kita inginkan.

Kenapa hasilnya tidak berbentuk tabel seperti yang kita inginkan, karena
tidak ada tag pre didalam htmlnya. Coba kita tambahkan tag <pre> dan
lihat perbedaannya.
Maka hasilnya akan seperti gambar dibawah.

C. OL, UL, DL
 Tag OL adalah Ordered List atau list berurut (Nomor)
 Tag UL adalah unordered list (seperti symbol)
 Tag DL adalah definition list
 Tag Li adalah list yang berada di dalam OL, UL, dan DL
Untuk Tag tag tersebut, kita akan coba dengan cara seperti kode program
dibawah.

Tuliskan kode programnya lalu jalankan dan lihat hasilnya di browser

seperti apa.
 D. Belajar Menggunakan tag A
A dalam HTML berarti anchor atau jangkar yang didalamnya
terdapat atribut href. Href sendiri adalah singkatan dari hypertext
reference. Value dari atribut href adalah sebuah alamat yang dituju.
Kemudian, tambahkan atribut target seperti pada kode di bawah ini.
Atribut yang kita tambahkan ini merupakan atribut target, target ini
apabila di isi dengan _blank maka halaman yang dibuka akan menjadi
halaman baru.

Apabila kode program diatas di jalankan, saat kita coba Ketika text yang
memiliki href yang memiliki atribut taget, Ketika kita klik dia akan
membuat halaman baru untuk membuka halaman yang dituju.
 Studi Kasus Link Internal Pada HTML
Link internal biasanya digunakan sebagai bookmark pada sebuah
halaman. Jadi tidak membuka halaman baru. Dengan memanfaatkan file
html yang telah dikerjakan. Buat sebuah menu pada bagian atas, berupa
pilihan dari bagian yang diinginkan, jangan lupa berikan tag a dan atribut
href. Value dari hrev berisi tujuan yang akan dipilih. Jangan lupa beri
atribut id pada tag heading yang akan dituju.

Hasil dari pemrograman tersebut adalah seperti ini

KESIMPULAN
Dari kedua acara yang telah saya kerjakan, saya dapat menarik
sebuah kesimpulan dari pembelajaran ini. Pada acara pertama kita telah
melakukan Instalasi XAMPP, XAMPP sendiri adalah software penunjang
localhost yang memiliki berbagai modul, salah satunya adalah Apache,
Apache sendiri merupakan package atau mesin penunjang web yang
biasanya digunakan untuk menyalakan atau menjalankan program HTML.
Dan di bagian akhir kita telah mencoba studi kasus mengenai Link
Internal yang dimana link internal sendiri merupakan borkmark yang
menghubungkan halaman yang satu dengan yang lainnya dalam satu
website atau domain.