LAPORAN

WORKSHOP PEMROGRAMAN WEB

MINGGU KE 1

TKK120707
SEMESTER 2

OLEH :

IQBAL FIKHRIANSYAH ROMADHONA

E32222748
GOLONGAN D

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. Setiap IDE juga memiliki kelebihan dan
kekurangan masing masing, sehingga kita harus pintar pintar memilih IDE
untuk mengerjakan pemrograman berbahasa HTML. 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.
Elemen

Elemen merupakan komponen HTML yang berupa keseluruhan kode dari

tag pembuka hingga tag penutup. Elemen terdiri dari teks dan simbol yang
berupa tag pembuka, isi tag atau konten, dan tag penutup.

Contohnya : <bold>Belajar HTML</bold>.

Pada sebuah elemen juga bisa berisi elemen lainnya. Jadi elemen tersebut
tak hanya berisi satu tag saja, tetapi banyak tag. Elemen itu
disebut nested elements. Sebagai contoh, simak kode berikut:

<html>
<body>
<h2>Judul Heading</h2>
<p>Paragraf pertama artikel.</p>
</body>
</html>

Jika diperhatikan elemen HTML tersebut, dari tag pembuka <html> lalu tag
<body> yang berisi elemen tag heading dan elemen tag paragraf.

Atribut

Atribut adalah informasi atau perintah tambahan yang berada dalam

elemen. Atribut ini berfungsi sebagai penjelas perintah tag pada elemen.

Misalnya, <img src=”gambar.jpg” alt “Bunga Matahari.”>.

Tag <img> memiliki atribut khusus yaitu (scr) dan (alt) yang artinya
browser harus menampilkan gambar.jpg dengan alt text “Bunga
Matahari”. Dari contoh di atas, dapat diketahui juga kalau jumlah atribut
dalam sebuah tag bisa lebih dari satu. Meski demikian, tidak semua atribut
bisa digunakan dalam sebuah tag. Berikut ini jenis atribut
khusus beberapa tag:

Sumber : https://www.niagahoster.co.id/blog/html-adalah/
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.
<!DOCTYPE html>
<html lang="en">
<head> <!--INI ADALAH BAGIAN HEAD-->
<title>Workshop Pemograman WEB</title> <!--DIDALAM HEAD ADA TITLE UNTUK
JUDUL HALAMANNYA-->
</head>

<body><!--INI ADALAH BAGIAN BODY-->

<h1>Ini adalah HTML kesekian saya</h1>
</body>
</html>

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

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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>PREFORMATTED TEXT</title>
</head>

<body>
-----------------------------------------------------
NO | Nama | Alamat
-----------------------------------------------------
1 | Iqbal | Banyuwangi
2 | Bimo | Jember
3 | Ivan | Mojokerto
4 | Alfian | Lumajang
5 | Nana | Sumenep
-----------------------------------------------------
</body>
</html>

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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>PREFORMATTED TEXT</title>
</head>

<body>
<pre>
-----------------------------------------------------
NO | Nama | Alamat
-----------------------------------------------------
1 | Iqbal | Banyuwangi
2 | Bimo | Jember
3 | Ivan | Mojokerto
4 | Alfian | Lumajang
5 | Nana | Sumenep
-----------------------------------------------------
</pre>
</body>
</html>

Maka hasilnya akan seperti gambar dibawah.

D. 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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tag List Pada HTML</title>
</head>

<body>
<h2>Ordered List / List Berurut</h2>
<ol>
<li>Minyak</li>
<li>Gas</li>
<li>Tahu</li>
<li>Tempe</li>
</ol>
<br>
<h2>Unordered List / List Menggunakan Bullet</h2>
<h4>Daftar Mahasiswa Kelas E</h4>
<ul>
<li>Fanny</li>
<li>Aldous</li>
<li>Fredrin</li>
<li>Hilda</li>
</ul>
<h2>Definition List</h2>
<h4>Glosarium</h4>
<dl>
<dt>Alergi</dt>
<dd>Sebuah Penyakit</dd>
<dt>Batuk</dua>
<dd>yaa batuk</dd>
</dl>
</body>
</html>

Tuliskan kode programnya lalu jalankan dan lihat hasilnya di browser

seperti apa.
 E. 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. Seperti
contoh dibawah, disini saya akan Kembali membuat file ke 2 yaitu
performatted file. Ketikan kode seperti dibawah lalu jalankan di browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title>href HTML</title>
</head>
<body background="IMG/bg_putih1.jpg">

<h1>Bagian FILE</h1>

<a href="1_index.html"> <h2>FILE 1</h2></a>

<a href="2_PreformattedText.html"> <h2>FILE 2</h2></a>
<a href="3_list.html"> <h2>FILE 3</h2></a>

<font color="red"><b>INI TESK BOLD MERAH</b></font>

</body>
</html>
Hasilnya berupa seperti text yang bisa di klik, Ketika text file 1, file 2, file
3, di klik akan mengarah ke halaman yang dituju, kita ambil contoh file 2.

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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>href HTML</title>
</head>
<body background="IMG/bg_putih1.jpg">

<h1>Bagian FILE</h1>

<a href="1_index.html"> <h2>FILE 1</h2></a>

<a href="2_PreformattedText.html"> <h2>FILE 2</h2></a>
<a href="3_list.html"> <h2>FILE 3</h2></a>

<br>

<a href="1_index.html" target="_blank" title="New Tab File 1"><h2>NEW

PAGE 1</h2></a>
<a href="2_PreformattedText.html" target="_blank" title="New Tab File
2"><h2>NEW PAGE 2</h2></a>
<a href="3_list.html" target="_blank" title="New Tab File 3"><h2>NEW
PAGE 3</h2></a>
<a target="_blank" href="https://www.instagram.com/iqbalf874/"><h2>My
Instagram</h2></a><br><br>
<font color="red"><b>INI TESK BOLD MERAH</b></font>
</body>
</html>
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.

Kode Program
Berikut adalah kode program versi saya.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu Dashboard Iqbal</title>
<style>
.centerbox {
text-align: center;
margin: auto;
width: 50%;
border: 5px solid #4a4a4a;
padding: 1px;
}
.outline {
font-size: 50px;
font-weight: 100px;
font-family: Verdana;
color: white;
-webkit-text-stroke: 2px rgb(0, 0, 0);
}
.dotcolor1 {
color:rgb(255, 0, 0);
}
.dotcolor2 {
color:rgb(255, 247, 0);
}
.textmenu {
font-size: 22px;
font-weight: 100px;
font-family: 'Times New Roman';
}
</style>
</head>
<body background="IMG/bg_putih1.jpg">
 <div class="centerbox">
<div class="outline">
<b>MENU UTAMA</b>
</div>
</div>
<ul>
<div class="dotcolor1">
<li><div class="textmenu"><a href="1_index.html">HTML Kesekian
Saya</a></div></li>
<li><div class="textmenu"><a
href="2_PreformattedText.html">Preformatted Text</a></div></li>
<li><div class="textmenu"><a href="3_list.html">Listing
HTML</a></div></li>
</div>
</ul>
<div class="centerbox">
<div class="outline">
<b>MENU BAGIAN</b>
</div>
</div>
<ul>
<div class="dotcolor2">
<li><div class="textmenu"><a href="#Bagian1">Bagian
1</a></div></li>
<li><div class="textmenu"><a href="#Bagian2">Bagian
2</a></div></li>
<li><div class="textmenu"><a href="#Bagian3">Bagian
3</a></div></li>
</div>
</ul>
<h1 id="Bagian1">Bagian 1</h1>
<font color="red">
<h4>Mengubah warna font menggunakan tag font</h4>
</font>
<br>
<h2 id="Bagian2">Bagian 2</h2>
<font color ="navy" size="5" face="comic sans ms">
<b>Belajar Mengubah font menjadi tebal/bold</b>
<br>
<u>Belajar Mengubah font menjadi underline</u>
<br>
<i>Belajar Mengubah font menjadi italic</i>
</font>
<br>
<h3 align="center" id="Bagian3">Bagian 3 - Paragraf</h3>
<p align="left">
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).
</p>
</body>
</html>

Penjelasan
Di program saya terdapat banyak sekali variasi yang saya gunakan
seperti <style> <div> dll. Saya akan jelaskan satu persatu.

<Style> </Style>
Style sendiri merupakan tag program yang digunakan untuk
menyisipkan kode CSS kedalam dokumen HTML. Fungsi style sendiri
digunakan untuk memodifikasi tampilan pada HTML.

<div> </div>
Div atau Division adalah sebuah tag HTML yang berfungsi
mendeskripsikan bagian atau divisi tertentu yang sifatnya fleksibel.
Penempatan tag ini dapat anda gunakan sesuai dengan kebutuhan
program, sebagai contoh simpelnya adalah Fungsi pada bahasa
pemograman Python.
Hasil run program.

Lalu apa yang dimaksud dengan link internal, dan gimana cara
kerjanya?. Link internal sendiri layaknya borkmark, link internal sendiri
pada HTML ditandai menggunakan atribut id. Di dalam atribut id berisikan
value yang sama pada href, jadi Ketika text yang memiliki link dengan id
yang sama maka Ketika kita tekan, kita akan di arahkan pada bagian
dengan id tersebut.

Ketika kita menekan bagian 1 maka kita akan di arahkan ke bagian 1

Dan jika kita menekan bagian 2 maka kita akan di arahkan ke bagian 2
F. Hasil dan Pembahasan
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.
Pada acara kedua kita telah belajar memahami HTML, HTML sendiri
merupakan bahasa pemrograman dasar untuk web programming, bahasa
HTML sendiri sangat unik karena memiliki tag, atribut, dan elemen. HTML
juga bisa stand alone, alias bisa berjalan sendiri tanpa harus ada bahasa
pemrograman lain, tetapi HTML juga bisa di kombinasikan dengan bahasa
bahasa lain layaknya CSS untuk Style, JavaScript untuk dabase dan masih
banyak lain.
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.