LAPORAN PRAKTIKUM KE – 1

PROYEK PEMROGRAMAN WEB

Disusun Oleh:
Nama : Akbar Agpranata
NPM : G1A022062
Kelas : B2

Nama Asisten Dosen:

1. Gita Dwi Putriani (G1A019043)
2. Valleryan Virgil Zuliuskandar (G1A020021)
3. Syafrizza Aulia Marizky (G1A020029)
4. Muhadzib Nursaid (G1A020035)
5. Dwinta Septiana (G1A020041)
6. Muhammad Willdhan Arya Putra (G1A020095)
7. Ilham Dio Putra (G1A021024)
8. Kahfi Zairan (G1A021041)
9. Esti Asmareta Ayu (G1A021042)
10. Arief Satrio Budi Prasojo (G1A021076)

Dosen Pengampu:
1. Mochammad Yusa, S.Kom.,M.Kom
2. Endina Putri Purwandari, S.T., M.Kom.

PROGRAM STUDI INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS BENGKULU
2024
 LANDASAN TEORI

Pemrograman web adalah proses pembuatan instruksi-instruksi untuk menciptakan

program/aplikasi berbasis internet yang dapat diakses melalui browser. Contoh dari
pemrograman web itu sendiri yakni: gmail, facebook, tumblr, dll.
Dapat dikatakan bahwa pemrograman web berkaitan dengan pembuatan situs, namun
levelnya berada di atas sekedar menyusun kode-kode HTML sederhana. Pemrograman web
mencakup perencanaan, konseptualisasi, pemodelan pengiriman media elektronik melalui
internet.
Bahkan pemrograman web yang baik mencakup pembuatan panel kontrol yang efektif
sehingga pemilik situs web dapat memilki kontrol terhadap situsnya, terkait konten, aplikasi,
dan aspek pendukung lainnya. Untuk mengenal pemrograman web lebih dalam, kita perlu
memahami jenis-jenis website.
Ada beberapa jenis-jenis website seperti Website Statis. Website statis merupakan
halaman web yang jarang atau bahkan tidak diperbaharui oleh pemilik situs dalam kurun
waktu tertentu. Dapat dikatakan, konten yang berada pada website statis akan tetap sama
sejak website tersebut dibuat.
Contoh dari web statis seperti: profil perusahaan. Dalam laman ini tidak ada interaksi
antara pengelola web dengan pengguna web. Oleh karena itu, jika memang dibutuhkan
perubahan pada laman web ini, pengelola website akan menghubungi web designer atau web
programmer.
Lalu Website Dinamis. konten pada website dinamis dapat diperbaharui dalam kurun
waktu tertentu. Dalam website dinamis, pengelola atau pemilik website menyediakan ruang
interaksi antara pengelola dan pengguna website, bisa dalam bentuk kolom komentar, tombol
reaksi, dan tombol share.

Sehingga, laman pada website dapat diperbaharui baik oleh pemilik website maupun
oleh pengguna website. Contoh platform website dinamis ini diantaranya, Blogger, Tumblr,
dan website-website berita. Meskipun platform tersebut sebenarnya juga bisa digunakan untuk
membuat website statis.

Ada juga Website Interaktif. Website interaktif juga merupakan website yang
lamannya dapat diperbaharui, baik oleh pengelola website atau oleh pengguna website. Hal
yang membedakannya dengan website dinamis ialah intensitas pembaharuan laman, yang
mana website interaktif sangat sering mengalami pembaharuan. Hal ini juga diakibatkan
oleh tingginya intensitas penggunaan website, sehingga interaksi yang terjadi dalam website

AKBAR AGPRANATA 2 G1A022062

semakin tinggi. Contoh website interaktif diantaranya: Facebook, Youtube, Twitter, Shopee,
dan masih banyak lagi.
Untuk membuat website kita tidak lepas dari yang namanya Bahasa Pemrograman.
Bahasa pemrograman ialah kata-kata yang berperan sebagai instruksi yang dimengerti oleh
komputer. Bahasa pemrograman merupakan ilmu yang wajib dikuasai oleh web designer
untuk membuat sebuah website atau aplikasi. Berikut ini merupakan beberapa contoh bahasa
pemrograman yang lazim digunakan dalam pemrograman web:

 HTML: HTML merupakan dasar pembuatan setiap website. Untuk membentuk

sebuah website, HTML berperan dalam pembentukan struktur halaman website.
 CSS: CSS merupakan kunci yang membedakan sebuah website dengan website yang
lain, karena CSS berfungsi untuk membuat tampilan laman menjad lebih menarik.
 PHP: PHP merupakan server side scripting yang digunakan untuk memprogram dan
mengembangkan sebuah situs, biasanya digunakan bersama HTML. PHP dirancang
untuk pembuatan website dinamis.
 JAVA SCRIPT: Java script berguna bagi kalian yang membutuhkan fitur interaksi
pada website kalian, sehingga website dapat secara aktif menjadi media interaktif.
 Bahasa Pemrograman yang juga populer digunakan dalam dunia programming yaitu
PYTHON, JAVA, C, RUBY, dan PERL.

Pada praktikum kali ini kita memakai HTML dan CSS. HTML (Hyper Text Markup
Language) yang merupakan bahasa standar yang paling umum atau yang paling sering
digunakan oleh para web programmer dalam membangun sebuah aplikasi web. HTML yang
umum digunakan saat ini adalah HTML versi 4.01. HTML versi 5 atau HTML5 menjadi
bahasa HTML baru yang hadir dengan tambahan fitur-fitur baru yang berbeda dengan
HTML4.01.
CSS adalah singkatan dari Cascading Style Sheet yaitu dokumen web yang berfungsi
mengatur elemen HTML dengan berbagai property yang tersedia sehingga dapat tampil
dengan berbagai gaya yang diinginkan. Sebagian orang menganggap CSS bukan termasuk
salah satu bahasa pemrograman karena memang strukturnya yang sederhana, hanya berupa
kumpulan-kumpulan aturan yang mengatur style elemen HTML. Cara kerja CSS dalam
memodifikasi HTML dengan memilih elemen HTML yang akan diatur kemudian
memberikan property yang sesuai dengan tampilan yang diinginkan . Dalam memberikan
aturan pada elemen HTML, skrip CSS terdiri atas 3 bagian yaitu Selector untuk memilih
elemen yang akan diberi aturan, property yang merupakan aturan yang diberikan dan value
sebagai nilai dari aturan yang diberikan.

AKBAR AGPRANATA 3 G1A022062

 SOAL DAN PEMBAHASAN

1. Belajar HTML membuat aplikasi foto kucing (Learn HTML by Building a Cat
Photo App)
Jawab:

G1A022062

Gambar 1. Source Code Kepala

SOURCE CODE :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>"
<title>CatPhotoApp</title>
</head>

PENJELASAN SOURCE CODE :

<!DOCTYPE html>: Deklarasi tipe dokumen (Document Type Declaration) yang
memberitahu browser bahwa dokumen ini adalah dokumen HTML5. <html lang="en">:
Elemen root dari dokumen HTML dan menandakan dimulainya bagian HTML. Attribute
lang="en" menunjukkan bahwa dokumen ini menggunakan bahasa Inggris (English).
<head>: Elemen kepala dokumen HTML. Elemen ini berisi informasi-informasi terkait
dengan dokumen, seperti meta informasi, tautan ke stylesheet, skrip JavaScript, dan
lainnya. <meta charset="utf-8">:Elemen meta yang menentukan pengaturan karakter
dokumen. charset="utf-8" menunjukkan bahwa dokumen menggunakan encoding UTF-8,
yang mendukung karakter internasional. <title>CaPhotoApp</title>: Elemen judul
dokumen. Judul ini akan ditampilkan pada tab browser dan merupakan informasi penting
untuk mesin pencari. Dalam hal ini, judul dokumen adalah "CatPhotoApp".

AKBAR AGPRANATA 4 G1A022062

 G1A022062

Gambar 2. Output Title

Gambar 2 adalah outpu dari source code di atas yang dimana di source code atas terdapat
syntax <title>CaPhotoApp</title>.

G1A022062

Gambar 3. Isi Body Awal

SOURCE CODE :
<body>
<main>
<h1>CatPhotoApp</h1>
<section>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</
a> in our gallery.</p>

AKBAR AGPRANATA 5 G1A022062

 <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/
curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></
a>
</section>
<section>
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<figure>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt
="A slice of lasagna on a plate.">
<figcaption>Cats <em>love</em> lasagna.</figcaption>
</figure>

PENJELASAN SOURCE CODE :

<body>: Elemen tubuh (body) dokumen HTML. Elemen ini berisi semua konten utama
yang akan ditampilkan pada halaman web. <main>: Ini adalah elemen utama (main)
yang umumnya berisi konten utama dari halaman web. Biasanya, elemen ini berisi judul
halaman dan bagian-bagian utama dari konten. <h1>CatPhotoApp</h1>: Elemen judul
level 1 (h1) yang menampilkan judul utama halaman web, yaitu "CatPhotoApp".
<section>: Elemen bagian (section) yang digunakan untuk mengelompokkan konten
menjadi bagian-bagian terpisah. <h2>Cat Photos</h2>: Elemen judul level 2 (h2) dalam
bagian pertama yang menyatakan judul untuk bagian tersebut, yaitu "Cat Photos". <!--
TODO: Add link to cat photos -->: komentar HTML yang menunjukkan bahwa ada
pekerjaan yang belum selesai, yaitu menambahkan tautan ke foto-foto kucing. <p>See
more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our
gallery.</p>: Paragraf yang berisi tautan ke situs web dengan foto-foto kucing. Tautan
tersebut akan membuka situs web dalam tab atau jendela baru (target="_blank"). <a
href="https://freecatphotoapp.com"><imgsrc="https://cdn.freecodecamp.org/
curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its
back."></a>: Ini adalah tautan gambar (hyperlink) yang menampilkan gambar kucing

AKBAR AGPRANATA 6 G1A022062

 yang menggambarkan kucing berwarna oranye yang sedang bersantai. Bagian selanjutnya
(<section> sampai <figcaption>) berisi informasi tentang daftar hal-hal yang disukai
kucing dan sebuah gambar lasagna yang disukai kucing.

G1A022062
Gambar 4. Output Body Awal
Gambar 4 adalah output dari source code gambar 3. Dimana terdapat heading 1(h1)
dengan title CatPhotoApp. Lalu, terdapat juga judul dengan heading 2(h2) yaitu Cat
Photos dan Cat Lists, juga ada 2 gambar yang diambil dari browser. Juga terdapat 3
Unordered List (ul). Dan bermacam-macam format-format lainnya.

G1A022062

Gambar 5. Lanjutan Code

AKBAR AGPRANATA 7 G1A022062

 SOURCE CODE :
<h3>Top 3 things cats hate:</h3>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<figure>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Fi
ve cats looking around a field.">
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
</figure>
</section>
<section>
<h2>Cat Form</h2>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<fieldset>
<legend>Is your cat an indoor or outdoor cat?</legend>
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"
checked> Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor
"> Outdoor</label>
</fieldset>

PENJELASAN SOURCE CODE:

<h3>Top 3 things cats hate:</h3>: Ini adalah elemen judul level 3 (h3) yang menyatakan
judul untuk bagian ini, yaitu "Top 3 things cats hate". <ol>: Ini adalah elemen daftar
terurut (ordered list) yang berisi tiga elemen <li> (list items) yang mewakili tiga hal yang
tidak disukai oleh kucing. <li>flea treatment</li>: Ini adalah elemen list item yang
menyatakan bahwa salah satu hal yang tidak disukai oleh kucing adalah pengobatan kutu.
<li>thunder</li>: Ini adalah elemen list item yang menyatakan bahwa kucing tidak
menyukai petir (thunder). <li>other cats</li>: Ini adalah elemen list item yang
menyatakan bahwa kucing tidak menyukai kucing lain. <figure>: Ini adalah elemen figur
yang digunakan untuk mengelompokkan gambar bersama dengan elemen <figcaption>
yang terkait. <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"

AKBAR AGPRANATA 8 G1A022062

 alt="Five cats looking around a field.">: Ini adalah elemen gambar yang menampilkan
gambar lima kucing yang sedang melihat sekitar di lapangan. <figcaption>Cats
<strong>hate</strong> other cats.</figcaption>: Ini adalah elemen caption (keterangan)
yang menyertakan teks tambahan untuk gambar kucing. Dalam hal ini, teks menyatakan
bahwa kucing "membenci" kucing lain, dan kata "hate" ditebalkan menggunakan elemen
<strong>. <form action="https://freecatphotoapp.com/submit-cat-photo">: Ini adalah
elemen formulir yang menentukan action (tindakan) yang akan diambil saat formulir
dikirimkan. Dalam hal ini, formulir akan mengirimkan data ke URL
"https://freecatphotoapp.com/submit-cat-photo". <fieldset>: Ini adalah elemen fieldset
yang digunakan untuk mengelompokkan elemen formulir bersama-sama. <legend>Is
your cat an indoor or outdoor cat?</legend>: Ini adalah elemen legend yang memberikan
keterangan atau judul untuk fieldset, yaitu "Is your cat an indoor or outdoor cat?".
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"
checked> Indoor</label>: Ini adalah elemen label yang berisi elemen radio button. Ini
memberikan opsi untuk memilih apakah kucing adalah kucing dalam ruangan atau kucing
di luar ruangan. Checked menandakan bahwa opsi ini dipilih secara default.
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor">
Outdoor</label>: Ini adalah elemen label yang berisi elemen radio button kedua,
memberikan opsi lain untuk memilih kucing di luar ruangan.

G1A022062
Gambar 6. Source Code Lanjutan

AKBAR AGPRANATA 9 G1A022062

 Gambar 6 adalah hasil dari kodingan sebelumnya, dimana output nya mengeluarkan foto
dan form. Terdapat ke3 hal yang kucing benci atau tidak suka. Di form kita dapat
memilih Indoor atau Outdoor.

G1A022062

Gambar 7. Isi Akhir dan Finishing

SOURCE CODE :
<fieldset>
<legend>What's your cat's personality?</legend>
<input id="loving" type="checkbox" name="personality" value="loving"
checked> <label for="loving">Loving</label>
<input id="lazy" type="checkbox" name="personality" value="lazy"> <label
for="lazy">Lazy</label>
<input id="energetic" type="checkbox" name="personality" value="energetic">
<label for="energetic">Energetic</label>
</fieldset>
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</section>
</main>
<footer>
<p>
No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>

AKBAR AGPRANATA 10 G1A022062

 </p>
</footer>
</body>
</html>

PENJELASAN SOURCE CODE :

<fieldset>: Ini adalah elemen fieldset baru yang digunakan untuk mengelompokkan
elemen formulir bersama-sama. <legend>What's your cat's personality?</legend>: Ini
adalah elemen legend yang memberikan keterangan atau judul untuk fieldset ini, yaitu
"What's your cat's personality?". <input id="loving" type="checkbox" name="personality"
value="loving" checked> <label for="loving">Loving</label>: Ini adalah elemen
checkbox yang memberikan opsi bahwa kucing bisa memiliki kepribadian "Loving".
<input id="lazy" type="checkbox" name="personality" value="lazy"> <label
for="lazy">Lazy</label>: Ini adalah elemen checkbox kedua untuk kepribadian "Lazy".
<input id="energetic" type="checkbox" name="personality" value="energetic"> <label
for="energetic">Energetic</label>: Ini adalah elemen checkbox ketiga untuk kepribadian
"Energetic". <input type="text" name="catphotourl" placeholder="cat photo URL"
required>: Ini adalah elemen input teks yang memungkinkan pengguna memasukkan URL
foto kucing. Atribut required menunjukkan bahwa input ini harus diisi sebelum formulir
dapat dikirimkan. <button type="submit">Submit</button>: Ini adalah elemen tombol
submit yang, ketika ditekan, akan mengirimkan formulir ke URL yang ditentukan dalam
atribut action pada elemen <form>. <footer>: Ini adalah elemen footer yang umumnya
berisi informasi tambahan seperti hak cipta, tautan-tautan, atau kredit lainnya. <p>No
Copyright a Href="https://www.freecodecamp.org">freeCodeCamp.org</a></p>: Ini
adalah elemen paragraf dalam footer yang menyatakan bahwa tidak ada hak cipta dan
memberikan tautan ke situs web freeCodeCamp.org.

G1A022062

Gambar 8. Cat Form

AKBAR AGPRANATA 11 G1A022062

 Gambar 8 adalah output bagian bawah website, dimana terdapat beberapa checkbox
dimana user nantinya dapat memilih format yang telah disediakan, dan juga terdapat juga
inputan untuk memasukkan link atau URL beserta button submit. Terakhir, ada footer atau
kaki bertuliskan No-copyright.

G1A022062

Gambar 9. Gambar Akhir (Jadi)

AKBAR AGPRANATA 12 G1A022062

2. Belajar Dasar CSS dengan Membuat Sebuah Menu Cafe (Learn Basic CSS by
Building a Cafe Menu)
Jawab :

G1A022062

Gambar 10. Source Code Pembuka HTML

SOURCE CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet"/>

PENJELASAN SOURCE CODE :

Untuk pembuka atau awalan HTML sama saja seperti pada penjelasan source code soal 1
namun di sini hanya ada perbedaan dimaan ada syntaxn <link href="styles.css"
rel="stylesheet"/>: Ini adalah elemen tautan (link) yang menautkan dokumen ke file
stylesheet eksternal dengan nama "styles.css". File stylesheet ini berisi aturan gaya (CSS)
untuk mempercantik tampilan halaman web.

AKBAR AGPRANATA 13 G1A022062

 G1A022062

Gambar 11. Code HTML Membuat Judul dan Isi Menu

SOURCE CODE :
<body>
<div class="menu">
<main>
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
<hr>
<section>
<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee
icon"/>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
</article>
<article class="item">

AKBAR AGPRANATA 14 G1A022062

 <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p><p class="price">4.50</p>
</article>
</section>
<section>

PENJELASAN SOURCE CODE :

<body>: Elemen tubuh dokumen HTML yang memuat semua konten halaman web. <div
class="menu">: Elemen div yang mengelompokkan dan memformat elemen-elemen yang
membentuk bagian menu kopi. <main>: Elemen utama yang menyelipkan konten utama
halaman, membantu dalam struktur dan organisasi. <h1>CAMPER CAFE</h1>: Judul
utama halaman yang menampilkan nama kafe. <p class="established">Est. 2020</p>:
Informasi tentang tahun pendirian kafe dengan kelas "established". <hr>: Garis horizontal
sebagai pemisah visual pada halaman. <section>: Elemen bagian yang mengelompokkan
konten terkait, di sini digunakan untuk menu kopi. <h2>Coffee</h2>: Judul bagian menu
kopi. <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee
icon"/>: Gambar ikon kopi. <article class="item">: Elemen artikel yang membungkus
informasi tentang satu item di menu. <p class="flavor">French Vanilla</p><p
class="price">3.00</p>: Informasi rasa kopi dan harganya. Setiap <article class="item">
berisi informasi serupa untuk jenis kopi lainnya dengan rasa dan harga yang berbeda.

G1A022062
Gambar 12. Code HTML Menu Dessert

AKBAR AGPRANATA 15 G1A022062

SOURCE CODE :
<h2>Desserts</h2>
<article class="item">
<p class="dessert">Donut</p><p class="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
</article>

PENJELASAN SOURCE CODE :

Kode program ini memperluas menu "CAMPER CAFE" dengan menambahkan
informasi tentang beberapa jenis makanan penutup. Setiap <article class="item"> mewakili
satu jenis makanan penutup dan memiliki dua elemen paragraf di dalamnya. Elemen
pertama (<p class="dessert">) berisi nama makanan penutup seperti Donut, Cherry Pie,
Cheesecake, dan Cinnamon Roll. Sementara itu, elemen kedua (<p class="price">)
memberikan informasi tentang harga makanan penutup tersebut.

G1A022062
Gambar 13. Code HTML Membuat Bottom Line dan Footer

SOURCE CODE :
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>

AKBAR AGPRANATA 16 G1A022062

 <p class="address">123 Free Code Camp Drive</p>
</footer>

PENJELASAN SOURCE CODE :

<hr class="bottom-line">: Elemen garis horizontal dengan kelas "bottom-line", mungkin
berfungsi sebagai pemisah visual antara konten utama dan bagian footer pada halaman
web. <footer>: Elemen ini menandai bagian akhir halaman dan menyediakan informasi
tambahan. Terdapat dua elemen paragraf di dalamnya, <p>: Tautan yang mengarah ke situs
web "https://www.freecodecamp.org" dengan atribut target="_blank" untuk membuka
tautan dalam tab atau jendela baru. Ini memberikan opsi kepada pengguna untuk
mengunjungi situs FreeCodeCamp. <p class="address">123 Free Code Camp Drive</p>:
Elemen paragraf kedua dengan kelas "address" yang berisi alamat fiktif "123 Free Code
Camp Drive". Ini mungkin memberikan informasi kontak atau lokasi "CAMPER CAFE".

G1A022062
Gambar 14. Code CSS Background

SOURCE CODE :
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}

PENJELASAN SOURCE CODE :

Kode CSS di atas adalah kode untuk mengedit background dari halaman yang telah kita
buat dengan HTML di atas. Untuk penjelasannya, body adalah kelas dan untuk isinya
background halaman akan diambil dari url (https://cdn.freecodecamp.org/curriculum/css-
cafe/beans.jpg) dan untuk pengaturan font adalah sans-serif dan padding berukuran 20px.

G1A022062

Gambar 15. Output CSS Background

AKBAR AGPRANATA 17 G1A022062

Gambar 15 adalah output CSS dari latar belakang yang telah kita masukkan (Dalam
lingkaran hijau bergambar kopi).

G1A022062
Gambar 16. Source Code Judul H1 (CAMPER CAFE)

SOURCE CODE :
h1 {
font-size: 40px;
margin-top: 0;
margin-bottom: 15px;
}

PENJELASAN SOURCE CODE :

Source code di atas adalah kode untuk mengatur judul besar menu “CAMPER CAFE”
dimana diatur ukuran tulisan dengan 40px, batas atas 0, dan batas bawah 15px.

G1A022062
Gambar 17. Output Kode H1

PENJELASAN SOURCE CODE :

Gambar 17 adalah output atau luaran dari kode di atas yang mana h1 atau judul dengan
“CAMPER CAFE” telah berhasil dibuat sesuai kode.

G1A022062
Gambar 18. Kode CSS h2,established, posisi h1,h2,p dan menu

AKBAR AGPRANATA 18 G1A022062

SOURCE CODE :
h2 {
font-size: 30px;
}
.established {
font-style: italic;
}
h1, h2, p {
text-align: center;
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}

PENJELASAN SOURCE CODE :

Kelas h2 adalah aturan untuk mengatur heading 2 dengan ukuran tulisan 30px,
lalu .established adalah mengatur seluruh tulisan menjadi gaya italic, lalu kelas h1,h2,p
adalah untuk mengatur posisi teks heading 1, heading 2, dan paragraf ke tengah. Terakhir,
kelas .menu adalah untuk mengatur latar belakang tulisan; lebar 80%, warna background
burlywood, margin kiri dan kanan auto, padding 20px, dan lebar maksimal 500px.

G1A022062
Gambar 19. Output Kode CSS h2,established, posisi h1,h2,p dan menu

AKBAR AGPRANATA 19 G1A022062

Gambar 19 adalah output dari source code 18 dimana terdapat h1 (pena biru), h2(pena
hijau), p(pena kuning), dan kelas .menu/background menu(pena merah).

G1A022062

Gambar 20. Kode CSS Kelas img,hr,bottom-line,h1 dan h2, Serta item p

SOURCE CODE :
img {
display: block;
margin-left: auto;
margin-right: auto;
}
hr {
height: 2px;
background-color: brown;
border-color: brown;
}
.bottom-line {
margin-top: 25px;
}
h1, h2 {

AKBAR AGPRANATA 20 G1A022062

 font-family: Impact, serif;
}
.item p {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}

PENJELASAN SOURCE CODE :

Styling Gambar (img):

o display: block;: Mengubah gambar menjadi elemen blok, membuatnya berdiri sendiri.

o margin-left: auto; margin-right: auto;: Memusatkan gambar dengan memberikan

margin otomatis di sisi kiri dan kanan.

Styling Garis Horizontal (hr):

o height: 2px;: Menentukan tinggi garis horizontal menjadi 2 piksel.

o background-color: brown; border-color: brown;: Memberikan warna latar belakang

dan warna batas (border) berwarna coklat pada garis horizontal.

Styling Kelas "bottom-line" (bottom-line):

o .bottom-line { margin-top: 25px; }: Memberikan margin atas sebesar 25 piksel pada

elemen dengan kelas "bottom-line", kemungkinan digunakan sebagai pemisah visual.

Styling Heading (h1, h2):

o font-family: Impact, serif;: Menetapkan jenis font untuk elemen heading h1 dan h2.
Jika Impact tidak tersedia, font serif cadangan akan digunakan.

Styling Paragraf di dalam Kelas "item" (item p):

o .item p { display: inline-block; margin-top: 5px; margin-bottom: 5px; font-size:

18px; }: Mengubah paragraf yang berada di dalam elemen dengan kelas "item".

 display: inline-block;: Menjadikan paragraf tampil secara inline-block.

AKBAR AGPRANATA 21 G1A022062

  margin-top: 5px; margin-bottom: 5px;: Memberikan margin atas dan bawah sebesar 5
piksel.

 font-size: 18px;: Menetapkan ukuran font sebesar 18 piksel.

G1A022062

Gambar 21. Kode CSS Kelas .flavor dan .desert, dan .price

SOURCE CODE :
.flavor, .dessert {
text-align: left;
width: 75%; }
.price {
text-align: right;
width: 25%;
}

PENJELASAN SOURCE CODE :

Source code di atas adalah untuk mengatur kelas .flavor dan .dessert, serta .price. Dimana
untuk flavor dan dessert diatur posisi teks di kiri dan lebar 75% sedangkan price diatur
posisi teks di kanan dan lebar 25%.

G1A022062

Gambar 22. Kode CSS Untu Footer

AKBAR AGPRANATA 22 G1A022062

SOURCE CODE :
footer {
font-size: 14px;
}
.address {
margin-bottom: 5px;
}
a{
color: black;
}
a:visited {
color: black;
}
a:hover {
color: brown;
}
a:active {
color: brown;
}

PENJELASAN SOURCE CODE :

Styling Footer (footer):
font-size: 14px;: Menetapkan ukuran font untuk teks di dalam elemen footer sebesar 14
piksel.
Styling Kelas "address" (address):
.address { margin-bottom: 5px; }: Memberikan margin bawah sebesar 5 piksel pada
elemen dengan kelas "address".
Styling Tautan (a):
color: black;: Menetapkan warna teks tautan menjadi hitam.
Styling Tautan yang Sudah Dikunjungi (a:visited):
color: black;: Menetapkan warna teks tautan yang sudah dikunjungi menjadi hitam.
Styling Tautan Saat Diarahkan (a:hover):
color: brown;: Menetapkan warna teks tautan menjadi coklat saat tautan diarahkan
(hover).
Styling Tautan Saat Ditekan (a:active):

AKBAR AGPRANATA 23 G1A022062

 color: brown;: Menetapkan warna teks tautan menjadi coklat saat tautan ditekan (active).

G1A022062
Gambar 23. Outpur Akhir (Jadi) dari Menu Cafe

Gambar 23 adalah output akhir yang telah jadi dari Menu Cafe yang telah kita buat melalui
HTML dan kita Styling lewat CSS.

AKBAR AGPRANATA 24 G1A022062

 DAFTAR PUSTAKA

Amikom H. (2022). Dasar-Dasar Pemrograman Web. Kampus Teknologi dan Bisnis

Universitas Purwokerto

Faisol A., Orisa M. (2023). PERANCANGAN WEBSITE COMPANY PROFILE

MENGGUNAKAN DESIGN SCIENCE RESEARCH METHODOLOGY (DSRM).
JINTEKS (Jurnal Informatika Teknologi dan Sains) Vol. 5(1) 160 – 164

Gumolung S. G. Mulia. (2019). ANALISA TEKNOLOGI Hyper Text Markup Language

(HTML) VERSI 5 (1).

Permata A. (2020). RANCANG BANGUN SISTEM INFORMASI PENGELOLAAN

TALENT FILM BERBASIS APLIKASI WEB. Jurnal Informatika Terpadu Vol. 6
No. 1 (31).

AKBAR AGPRANATA 25 G1A022062

 KEMENTERIAN RISET, TEKNOLOGI DAN PENDIDIKAN
UNIVERSITAS BENGKULU
FAKULTAS TEKNIK
PROGRAM STUDI INFORMATIKA
Jl. Wr. Supratman Kandang Limun, Bengkulu
Bengkulu 38371 A Telp: (0736) 344087, 22105-227

LEMBAR ASISTENSI PRAKTIKUM

PROYEK BASIS DATA LANJUT

Nama Mahasiswa : Akbar Agpranata

NPM : G1A022062

Dosen : 1. Mochammad Yusa, S.Kom.,M.Kom

2. Endina Putri Purwandari, S.T., M.Kom.

Asisten Praktikum : 1. Gita Dwi Putriani (G1A019043)

2. Valleryan Virgil Zuliuskandar (G1A020021)
3. Syafrizza Aulia Marizky (G1A020029)
4. Muhadzib Nursaid (G1A020035)
5. Dwinta Septiana (G1A020041)
6. Muhammad Willdhan Arya Putra (G1A020095)
7. Ilham Dio Putra (G1A021024)
8. Kahfi Zairan (G1A021041)
9. Esti Asmareta Ayu (G1A021042)
10. Arief Satrio Budi Prasojo (G1A021076)

Laporan Praktikum Catatan dan Tanda Tangan

Laporan Praktikum ke - 1

AKBAR AGPRANATA 26 G1A022062