Belajar HTML dan CSS Dasar :

Studi Kasus
 UU No 28 Tahun 2014 tentang Hak Cipta

Fungsi dan Sifat Hak Cipta Pasal 4

Hak Cipta sebagaimana dimaksud dalam Pasal 3 huruf a merupakan hak eksklusif yang terdiri atas
hak moral dan hak ekonomi.
Pembatasan Pelindungan Pasal 26
Ketentuan sebagaimana dimaksud dalam Pasal 23, Pasal 24, dan Pasal 25 tidak berlaku terhadap:
i. penggunaan kutipan singkat Ciptaan dan/atau produk Hak Terkait untuk pelaporan peristiwa
aktual yang ditujukan hanya untuk keperluan penyediaan informasi aktual;
ii. penggandaan Ciptaan dan/atau produk Hak Terkait hanya untuk kepentingan penelitian ilmu
pengetahuan;
iii. penggandaan Ciptaan dan/atau produk Hak Terkait hanya untuk keperluan pengajaran,
kecuali pertunjukan dan Fonogram yang telah dilakukan Pengumuman sebagai bahan ajar; dan
iv. penggunaan untuk kepentingan pendidikan dan pengembangan ilmu pengetahuan yang
memungkinkan suatu Ciptaan dan/atau produk Hak Terkait dapat digunakan tanpa izin
Pelaku Pertunjukan, Produser Fonogram, atau Lembaga Penyiaran.
Sanksi Pelanggaran Pasal 113
1. Setiap orang yang dengan tanpa hak melakukan pelanggaran hak ekonomi sebagaimana
dimaksud dalam Pasal 9 ayat (1) huruf i untuk Penggunaan Secara Komersial dipidana dengan
pidana penjara paling lama 1 (satu) tahun dan/atau pidana denda paling banyak
Rp100.000.000,00 (seratus juta rupiah).
2. Setiap orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau pemegang Hak Cipta
melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat (1)
huruf c, huruf d, huruf f, dan/atau huruf h untuk Penggunaan Secara Komersial dipidana
dengan pidana penjara paling lama 3 (tiga) tahun dan/atau pidana denda paling banyak
Rp500.000.000,00 (lima ratus juta rupiah).
Belajar HTML dan CSS Dasar :
Studi Kasus
Dahlan Fauzi
Ismet Ismatullah
 Belajar HTML dan CSS Dasar : Studi Kasus

Dahlan Fauzi
Ismet Ismatullah

Editor:
Puja Vionicca Buana

Desainer:
Widiyana

Sumber:
www.cendekiamuslim.com

Penata Letak:
Puja Vionicca Buana

Proofreader:
TIM YPCM

Ukuran:
vii,94. , 17,6x25 cm

ISBN:
978-623-5995-97-7

Cetakan Pertama:
November, 2022

Hak Cipta 2022, pada Dahlan Fauzi, Ismet Ismatullah

Hak cipta dilindungi undang-undang

Dilarang keras menerjemahkan, memfotokopi, atau
memperbanyak sebagian atau seluruh isi buku ini
tanpa izin tertulis dari Penerbit.

Anggota IKAPI: 027/Anggota Luar Biasa/SBA/2021

YAYASAN PENDIDIKAN CENDEKIA MUSLIM

Perumahan Gardena Maisa 2, Blok C.12, Koto Baru, Kecamatan Kubung,

Kabupaten Solok, Provinsi Sumatera Barat – Indonesia 27361
HP/WA: 0823-9205-6884
Website: www.cendekiamuslim.com
E-mail: [email protected]
 DAFTAR ISI

PRAKATA............................................................. viii
BAB 1 Mengenal Singkat HTML Dan CSS ..................... 1
A. Mengenal HTML ............................................ 1
B. Mengenal CSS ................................................ 2
C. Mengenal HTML Framework ............................ 3
D. Cara Penggunaan CSS Framework ...................... 4

BAB 2 Studi Kasus Pembuatan Website ......................... 5

A. Studi Kasus: Landing Page ................................ 5
B. Studi Kasus: Panel Administrator ....................... 33
PROFIL PENULIS .................................................. 93

v
vi
 PRAKATA

B
uku ini dikhususkan bagi yang sudah memahami atau
mempelajari dasar dari HTML (HyperText Markup
Language) dan CSS (Cascading Style Sheets) atau mem-
punyai buku “Belajar HTML dan CSS Dasar : Studi Kasus” yang
penulis buat.
Penulis

vii
viii
 BAB I
Mengenal Singkat HTML dan CSS

HTML (Hyper Text Markup Language) adalah sebuah bahasa

formatting yang digunakan untuk membuat sebuah halaman
website. Di dalam dunia pemrograman berbasis website (Web
Programming), HTML menjadi pondasi dasar pada halaman
website. sebuah file HTML di di simpan dengan ekstensi .html (dot
html). dan dapat di eksekusi atau diakses menggunakan web browser
(Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain). Seperti
yang sudah di jelaskan, HTML adalah dasar dari sebuah website.
Untuk membuat sebuah website tidak cukup hanya
menggunakan HTML, kita memerlukan bantuan CSS, Java Script
dan PHP untuk membuat sebuah website yang dinamis. jika
halaman website dibuat hanya menggunakan HTML saja maka
halaman website tersebut di sebut website statis karena tidak
memiliki aksi atau fungsi-fungsi yang dapat mengelola website.
tentu developer/user akan sangat di sibukkan dengan harus
mengubah lagi file HTML setiap ingin mengupdate artikel.
HTML memiliki beberapa element yang tersusun dari tag-
tag yang memiliki fungsi nya masing-masing. seperti tag heading,

1
paragraf, pembuatan form, tombol, list, membuat hyperlink atau
link yang menghubungkan antar halaman website dan banyak lagi
lainnya yang akan kita bahas pada buku ini.

CSS merupakan singkatan dari “Cascading Style Sheets“. sesuai

dengan namanya CSS memiliki sifat ”Style Sheet Language” yang
berarti bahasa pemrograman yang di gunakan untuk web design.
CSS adalah bahasa pemrograman yang di gunakan untuk men-
design sebuah halaman website. dalam mendesign halaman web-
site, CSS menggunakan penanda yang di kenal dengan id dan class.
seperti yang sudah dipelajari tentang pengenalan id dan class pada
bab sebelumnya di buku ini. Seiring berkembangnya dunia
pemrograman dan teknologi, CSS tidak cuma di gunakan di
HTML dan XHTML saja. tapi sudah bisa di gunakan untuk
mendesign tampilan aplikasi android. CSS di akses menggunakan
id atau class.
CSS dapat mengubah font, ukuran font, warna dan format
font. mengatur ukuran layout, lebar, tinggi dan warna element,
mengubah tampilan form, membuat halaman website yang
responsive dan masih banyak lagi yang dapat di lakukan oleh CSS
yang tidak akan habis dituliskan semuanya di dalam buku belajar
CSS dasar ini. Untuk menghubungkan kedalam file HTML atau
PHP yang ingin didesign dengan CSS menggunakan syntax berikut
ini.

2 Belajar HTML Dan CSS Dasar: Studi Kasus

<link rel="stylesheet" type="text/css" href="style.css" />

Dengan tag <link> seperti di atas di gunakan untuk menghu-

bungkan file HTML dengan file CSS. Syntax di atas di letakkan
pada file html. pada atribut rel dan type di tag link di atas di
gunakan untuk mendefinisikan bahwa yang di panggil atau yang di
hubungkan adalah file Style sheet atau CSS. kemudian atribut href
di gunakan untuk meletakkan letak file CSS. pada contoh di atas
file style.css terletak satu folder atau direktori dengan file html yang
di tambahkan syntax di atas.
Jika file css terletak di luar folder maka bisa menghubungkanya
dengan titik . href="../style.css"
Jika file CSS terletak dalam sebuah folder. katakan saja nama
foldernya adalah ” assets “. maka untuk menghubungkannya :
href="assets/style.css"

Sama hal nya dengan CSS yang dibahas diatas, CSS framework
adalah kerangka kerja yang fungsinya untuk memudahkan Anda
ketika membuat desain website atau aplikasi website, tepatnya di
bagian layout dan tema.
CSS framework berisi kumpulan kode CSS yang sudah siap
pakai. Anda tak perlu repot untuk membuat struktur dasar desain
dari nol. Sebab, CSS framework menyediakan berbagai macam
elemen desain. Mulai dari sistem grid, pola user interface (UI) yang

Mengenal Singkat HTML dan CSS 3

interaktif, aneka tipografi untuk website, tombol, ikon, dan lain-
lain.

Yang perlu Anda lakukan hanyalah mengcopy-paste setiap elemen

yang tersedia dan menyesuaikannya ke desain website atau aplikasi
yang Anda buat. Sisanya, Anda tinggal mengembangkan kerangka
yang ada sampai menjadi desain akhir yang diinginkan. Dengan
begitu, segala proses pembuatan front-end jadi bisa berjalan efektif
dan lebih cepat.

Untuk menggunakan CSS Framework itu sama hal nya meng-

gunakan seperti menggunakan CSS biasa.
<link rel="stylesheet" type="text/css" href="style.css" />
“style.css” diganti dengan file CSS Framework nya.
Rekomendasi CSS Framework. Supaya Anda bisa menemukan
CSS framework yang sesuai dengan kebutuhan, penulis sudah
merangkumkan 5 CSS framework terbaik untuk Anda. CSS Frame-
work ini adalah yang paling sering digunakan.
1. Bootstrap CSS
2. Foundation CSS
3. Bulma
4. Semantic UI
5. Materialize CSS

4 Belajar HTML Dan CSS Dasar: Studi Kasus

 BAB 2
Studi Kasus Pembuatan Website

Sebelum melanjutkan ke Studi Kasus, pertama–tama anda sudah

membaca atau mempelajari sturtur dasar HTML dan CSS atau
memiliki buku yang penulis buat dengan judul buku “Belajar
HTML Dan CSS Dasar Untuk Pemula”. Dengan mempelajari
HTML dan CSS dipastikan sudah mengerti apa yang dimaksud
apa itu website, mengenal struktur HTML website, pengenalan
CSS, dan mengenal Icon Font.

Setelah anda mempelajari nya, selanjutnya akan mencoba

membuat studi kasus yang berupa website ‘Landing Page’ dimana
website tersebut berupa website halaman utama yang isi website
nya mencakup tentang profil atau perusahaan website, produk –
produk nya, kontak perusahaan dan lain – lain dalam satu struktur
HTML atau dalam satu file HTML.

Sebelum memulai studi kasusnya dan mengetik sebuah kode

nya, berikut urutan cara membuat nya sehingga anda tidak bingung
dalam pembuatan website. Anda dapat mengikuti sesuai penulis
lakukan dengan nama project nya adalah “ wisata “di bawah ini :

5
Buat lah sebuah folder “wisata “ di desktop anda seperti contoh
dibawah ini :

Gambar 2.1 Lokasi project

Setelah membua folder lalu buka lah text editor anda

Gambar 2.2 Halaman Utama Text Editor

Setelah membuka text editor, selanjutnya buka lah folder wisata

tersebut dengan mengklik tulisan “open“ atau dengan menu “ file -
> open folder “ pada menu di kiri atas aplikasi text editor atau

6 Belajar HTML Dan CSS Dasar: Studi Kasus

dengan menekan “ CTRL+ K + O “ pada keyboard secara bersa-
maan. Jika saat membuka muncul pesan maka pilih saya “ yes, I
trust this author “.

Gambar 2.3 Membuka Folder

Setelah membuka folder wisata, maka akan tampil seperti ini

Studi Kasus Pembuatan Website 7

 Gambar 2.4 Struktur Folder Wisata

Lalu buat lah sebuah file index.html dan file style.css didalam
folder tersebut dengan text editor

Gambar 2.5 Cara Membuat File Dan Folder

8 Belajar HTML Dan CSS Dasar: Studi Kasus

Setelah membuat file maka akan muncul seperti ini

Gambar 2.6 Struktur Folder

Setelah membuat file index.html dan style.css, selanjutnya buka

file index.html dan isi kode berikut :

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta http-equiv="X-UA-Compatible"
content="IE=edge">
6. <meta name="viewport" content="width=device-width,
initial-scale=1.0">
7. <title>Wisata</title>
8. </head>
9. <body>

10. </body>
11. </html>

Studi Kasus Pembuatan Website 9

Jika anda buka file index.html dengan klik 2x di file exploler lalu
browser maka akan muncul dan menampilkan “ layar putih “
dikarenakan baru saja membuat struktur HTML nya saja. Setelah
itu buat lah sebuah <link> di dalam tag <head> atau dibawah tag
<title> untuk menghubungkan CSS kedalam HTML, sehingga
seperti berikut :

1. <title>Wisata</title>
2. <!--menguhubungkan CSS ke HTML-->
3. <link rel="stylesheet" href="style.css">

Setelah menguhubungkan file CSS ke dalam HTML, selanjutnya

anda akan memulai membuat website yang befokus di dalam tag
<body>. Lalu ketikan kode tag <header> didalam tag <body>
seperti berikut ini :

1. Index.html

<body>
<header>
<h2><a href="#">Wisata</a></h2>
<nav>
<li><a href="#tujuan_kami">Tujuan
Kami</a></li>
<li><a href="#paket_wisata">Paket
Wisata</a></li>
<li><a href="#testimonial">Testimonial</a></li>
<li><a href="#tentang_kami">Tentang

10 Belajar HTML Dan CSS Dasar: Studi Kasus

 Kami</a></li>
<li><a href="#kontak_kami">Kontak
Kami</a></li>
</nav>
</header>
</body>

Jika anda buka maka hasil nya :

Gambar 2.7 Header Tanpa CSS

Sebelum melanjutkan ke CSS nya, pertama buat lah sebuah ”

folder image “ sejajar dengan file index.html dan style.css untuk
menyimpan file gambar yang akan digunakan untuk website anda.
Untuk file gambar anda bisa mencari nya di google atau memakai
gambar sendiri. Setelah mendapatkan gambar nya simpan lah
gambar tersebut di dalam “ folder image “ yang tadi sudah dibuat.

Studi Kasus Pembuatan Website 11

 Gambar 2.8 Lokasi Folder Image

Selanjut nya buka file style.css di text editor , lalu style.css tersebut
isi dengan kode berikut untuk memperindah tampilan website
anda.

1. style.css

/*General Styles*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 16px;
font-family: "Raleway", sans-serif;
color: #555;
}

12 Belajar HTML Dan CSS Dasar: Studi Kasus

ul,
nav {
list-style: none;
}

a{
text-decoration: none;
opacity: 0.75;
color: #fff;
}

a:hover {
opacity: 1;
}

a.btn {
border-radius: 4px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
background-color: #e07e7b;
opacity: 1;
transition: all 400ms;
}

a.btn:hover {
background-color: #ce5856;

Studi Kasus Pembuatan Website 13

 }

section {
display: flex;
flex-direction: column;
align-items: center;
padding: 100px 80px;
}

section:not(.hero):nth-child(even) {
background-color: #f5f5f5;
}

.grid {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

hr {
width: 250px;
height: 3px;
background-color: #e07e7b;
border: 0;
margin-bottom: 50px;
}

14 Belajar HTML Dan CSS Dasar: Studi Kasus

.image-1 {
background-image: url("image/image1.jpg");
}

.image-2 {
background-image: url("image/image2.jpg");
}

.image-3 {
background-image: url("image/image3.jpg");
}

.image-4 {
background-image: url("image/image4.jpg");
}

section h3.title {
text-transform: capitalize;
font: bold 48px "Amatic SC", sans-serif;
margin-bottom: 30px;
text-align: center;
}

section p {
max-width: 775px;
line-height: 2;

Studi Kasus Pembuatan Website 15

 padding: 0 20px;
margin-bottom: 30px;
text-align: center;
}

@media (max-width: 800px) {

section {
padding: 50px 20px;
}
}

Catatan :

Untuk background-image: url("image/image3.jpg"); “image-

3.jpg” adalah gambar yang sudah disimpan di
“folder image”

Saat dijalankan maka hasil nya masih layar putih dikarenakan

<header> dan css yang dibuat itu adalah untuk style bagian menu
nya. Masih di dalam file index, selanjut nya buat lah kode berikut
dibawah tag </header> atau bikin baris baru. Berikut kode nya :

1. Index.html

</header>
<section class="hero">
<div class="background-image"></div>
<div class="hero-content-area">

16 Belajar HTML Dan CSS Dasar: Studi Kasus

 <h1>Wisata Adalah Kehidupan Kami</h1>
<h3>Petualangan yang Tidak Dapat Dilewatkan
Bersama Teman</h3>
<a href="#" class="btn">Hubungi Kami
Sekarang</a>
</div>
</section>

2. Style.css

/*Hero Styles*/
.hero {
position: relative;
justify-content: center;
text-align: center;
min-height: 100vh;
color: #fff;
}

.hero .background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("image/image5.jpg");
background-size: cover;

Studi Kasus Pembuatan Website 17

 z-index: -1;
background-color: #80a3db;
}

.hero h1 {
font: 72px "Amatic SC", sans-serif;
text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
margin-bottom: 15px;
}

.hero h3 {
font: 28px "Raleway", sans-serif;
font-weight: 300;
text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
margin-bottom: 40px;
}

.hero a.btn {
padding: 20px 46px;
}

.hero-content-area {
opacity: 0;
margin-top: 100px;
animation: 1s slidefade 1s forwards;
}

18 Belajar HTML Dan CSS Dasar: Studi Kasus

 @keyframes slidefade {
100% {
opacity: 1;
margin: 0;
}
}

Jika berhasil maka tampilan nya akan seperi ini :

Gambar 2.9 Halaman Header

Setelah membuat <header> selanjutnya adalah membuat sebuah

isi menu pertama yaitu “ tujuan “ yang masih pada file yang sama.

1. Index.html

<section class="destinations" id="tujuan_kami">

<h3 class="title">Beberapa tujuan kami:</h3>
<p>Bosan dengan pantai sendirian? Apakah

Studi Kasus Pembuatan Website 19

 datarannya terlalu polos? Ikutlah dengan kami di salah satu
petualangan kami yang tidak biasa dengan teman-teman
Anda. Berikut adalah beberapa gambar dari orang-orang
yang memiliki pengalaman tinggi dengan kami.</p>
<hr>
<ul class="grid">
<li class="small image-1"></li>
<li class="large image-2"></li>
<li class="large image-3"></li>
<li class="small image-4"></li>
</ul>
</section>

2. Style.css

/*Destinations Section*/

.destinations .grid li {
height: 350px;
padding: 20px;
background-clip: content-box;
background-size: cover;
background-position: center;
}

.destinations .grid li.small {

20 Belajar HTML Dan CSS Dasar: Studi Kasus

 flex-basis: 30%;
}

.destinations .grid li.large {

flex-basis: 70%;
}

@media (max-width: 1100px) {

.destinations .grid li.small,
.destinations .grid li.large {
flex-basis: 50%;
}
}

@media (max-width: 800px) {

.destinations .grid li.small,
.destinations .grid li.large {
flex-basis: 100%;
}
}

Studi Kasus Pembuatan Website 21

 Maka yang dihasilkan :

Gambar 2.10 Menu Tujuan

Setelah membuat menu tujuan sekarang adalah membuat

menu “ Paket Wisata “.
1. Index.html

<section class="packages" id="paket_wisata">

<h3 class="title">Paket Wisata</h3>
<p>
Kami menawarkan berbagai paket grup (minimal
5 orang). Apakah Anda menghabiskan beberapa musim
panas bersama atau ini mungkin petualangan pertama
Anda, kami memiliki liburan yang sempurna untuk
Anda.</p>
<hr>

<ul class="grid">
<li>

22 Belajar HTML Dan CSS Dasar: Studi Kasus

 <i class="fa fa-compass fa-4x"></i>
<h4>Perjalanan Terpandu</h4>
<p>
Mencari pengalaman lengkap? Ikuti tur
dengan salah satu pakar kami. Mereka akan
menunjukkan kepada Anda rahasia yang kemungkinan
besar akan Anda lewatkan.
</p>
</li>
<li>
<i class="fa fa-camera-retro fa-4x"></i>
<h4>Perjalanan Foto</h4>
<p>Ingin merasakan keindahan alam tanpa
semua olahraga yang mengganggu itu? Ikuti tur foto di
salah satu <em> Wisata Adalah Kehidupan
Kami</em>.</p>
</li>
<li>
<i class="fa fa-bicycle fa-4x"></i>
<h4>Perjalanan Bersepeda</h4>
<p>
Jika sepeda lebih mempercepat Anda,
pertimbangkan untuk mengikuti tur melalui salah satu
jalur sepeda gunung atau kota kami. Kami akan
menyediakan sepeda, dan makan siang juga!
</p>
</li>

Studi Kasus Pembuatan Website 23

 <li>
<i class="fa fa-flag-checkered fa-4x"></i>
<h4>Perjalanan Bersaing</h4>
<p>
Punya semangat bersaing? Daftar untuk
salah satu maraton berbasis tantangan kami! Cobalah
untuk mencapai puncak sebelum kelompok lain.
</p>
</li>
</ul>
</section>

2. Style.css

/*Packages Section*/
.packages .grid li {
padding: 50px;
flex-basis: 50%;
text-align: center;
}

.packages .grid li i {
color: #e07e7b;
}

.packages .grid li h4 {

24 Belajar HTML Dan CSS Dasar: Studi Kasus

 font-size: 30px;
margin: 25px 0;
}

@media (max-width: 800px) {

.packages .grid li {
flex-basis: 100%;
padding: 20px;
}
}

maka yang dihasilkan :

Gambar 2.11 Menu Paket Wisata

Selanjutnya adalah membuat menu “ Testimoni “ adalah menu

yang paling utama dan penjelajah yang daftar bisa mengomentari
tentang paket wisata yang mereka beli.

Studi Kasus Pembuatan Website 25

 1. Index.html

<section class="testimonials" id="testimonial">

<h3 class="title">Testimoni dari petualang
kami:</h3>
<hr>
<p class="quote">Wow! Tur ini membuat saya
menyadari betapa saya suka berada di luar bersama teman-
teman saya. Setelah mengikuti salah satu tur ini, saya dapat
dengan aman mengatakan bahwa beer pong adalah permai-
nan favorit saya sepanjang masa, juga program buda-yanya
sangat menarik!</p>
<p class="author">- Bambang</p>
<p class="quote">Wah, ini benar-benar membuat saya
tercengang. Kami bersenang-senang di pantai, dan juga be-
berapa rahasia tersembunyi terungkap. Ayolah, aku tinggal
di kota ini selama 5 tahun. Luar biasa!</p>
<p class="author">- Tia Lestari</p>
</section>

<section class="contact">
<h3 class="title">Pelajari Lebih Lanjut</h3>
<p>Ingin tahu tentang acara kami yang akan datang,
atau datang ke salah satu dari kami? Cukup dengan mendaf-
tar diri anda. Tidak ada spam dari kami, kami berjanji!
Kecuali spam yang kami berikan kepada Anda untuk men-
jaga energi Anda saat Anda bersenang-senang dengan

26 Belajar HTML Dan CSS Dasar: Studi Kasus

 teman-teman Anda. Semoga menyenangkan!.</p>
<hr>
<form>
<input type="email" placeholder="Email">
<a href="#" class="btn">Langganan Sekarang</a>
</form>
</section>

2. Style.css

/*Testimonials Section*/
.testimonials .quote {
font-size: 22px;
font-weight: 300;
line-height: 1.5;
margin: 40px 0 25px;
}

@media (max-width: 800px) {

.testimonials .quote {
font-size: 18px;
margin: 15px 0;
}

.testimonials .author {
font-size: 14px;
}

Studi Kasus Pembuatan Website 27

 }
Maka yang dihasilkan :

Gambar 2.12 Menu Testimoni

Sesudah membuat testimoni, sekarang membuat menu “Kontak

Kami “.

1. Index.html

<section class="contact">
<h3 class="title">Pelajari Lebih Lanjut</h3>
<p>Ingin tahu tentang acara kami yang akan
datang, atau datang ke salah satu dari kami? Cukup
dengan mendaftar diri anda. Tidak ada spam dari kami,
kami berjanji! Kecuali spam yang kami berikan kepada
Anda untuk menjaga energi Anda saat Anda bersenang-

28 Belajar HTML Dan CSS Dasar: Studi Kasus

 senang dengan teman-teman Anda. Semoga menyenang-
kan!.</p>
<hr>
<form>
<input type="email" placeholder="Email">
<a href="#" class="btn">Langganan
Sekarang</a>
</form>
</section>

2. Style.css

/*Contact Section*/

.contact form {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 60%;
}

.contact form .btn {

padding: 18px 42px;
}

Studi Kasus Pembuatan Website 29

 .contact form input {
padding: 15px;
margin-right: 30px;
font-size: 18px;
color: #555;
flex: 1;
}

@media (max-width: 1000px) {

.contact form input {
flex-basis: 100%;
margin: 0 0 20px 0;
}
}

Maka yang dihasilkan adalah :

Gambar 8.13 Menu Kontak Kami

30 Belajar HTML Dan CSS Dasar: Studi Kasus

Setelah membuat menu dari header samppai kontak kaki, sekarang
adalah bagian yang terakhir yaitu “ Footer “ .

1. Index.html

<footer>
<p>@copyright <a
href="index.html">Wisata</a></p>
<p>@2022</p>
</footer>

2. Style.css

/*Footer Section*/

footer {
display: flex;
align-items: center;
justify-content: space-around;
background-color: #555;
color: #fff;
padding: 20px 0;
}

footer ul {
display: flex;
}

Studi Kasus Pembuatan Website 31

 footer ul li {
margin-left: 16px;
}

footer p {
text-transform: uppercase;
font-size: 14px;
opacity: 0.6;
align-self: center;
}

@media (max-width: 1100px) {

footer {
flex-direction: column;
}

footer p {
text-align: center;
margin-bottom: 20px;
}

footer ul li {
margin: 0 8px;
}
}

Maka yang dihasilkan :

32 Belajar HTML Dan CSS Dasar: Studi Kasus

 Gambar 2.14 Menu Footer

Jika sebelum nya membuat “landing page” adalah bagian depan

website atau disebut dengan “frontend” maka “panel adminis-
trator” yang akan digunakan untuk bagian belakang website atau
disebut “backend” dimana backend sendiri digunakan oleh orang
tertentu saja yang diberi hak akses untuk masuk ke halaman bela-
kang website.

Backend biasanya sering dgunakan seperti membuat apli-

kasi penjualan, aplikasi toko, aplikasi keuangan dan masih ban-
yak lagi. Apalagi website seperti facebook, Instagram youtube dan
lain lain harus menggunakan backend sendiri. Backend berguna
untuk memantau seluruh akses website “frontend” apalagi website
semacam facebook yang sangat diharuskan mem-punyai sebuah
halaman belakang website atau backend.

Untuk membuat backend sendiri itu sama seperti membuat

frontend, hanya saja backend tehubung dengan sebuah server side
seperti PHP, Java, Ruby on Rails dan masih banyak lagi. Tetapi
untuk membuat tampilan atau template backend sama seperti
membuat frontend yaitu dengan HTML dan CSS.

Studi Kasus Pembuatan Website 33

 Dalam pembuatan template halaman belakang atau backend
ini menggunakan beberapa plugin yang khusus untuk website
seperti :

a. CSS Framework
CSS Framework yang digunakan untuk membuat template
website ini adalah Bootstrap versi 5. Untuk file download
nya dan dokumen cara menggunakan CSS nya untuk
aplikasi yang dibuat di :
https://getbootstrap.com/docs/5.2/getting-
started/download/

Gambar 2.15 Download File

b. Font
Font yang digunakan didalam membuat template ini meng-
gunakan font dari google bisa di check di :
https://fonts.google.com/
Untuk menggunakna font tesebut hanya menggunakan tag
<link> seperti dibawah ini :

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Uchen:b
old,bolditalic|Inconsolata:italic">

34 Belajar HTML Dan CSS Dasar: Studi Kasus

 ?family=Uchen adalah tipe font yang ada di google font.
Setelah memasukan tag <link> font tersebut. Buat lah
sebuah class dengan tag <style> didalam tag <head> atau
sebelom </head> untuk menggunakan nya :

<style>
.font{
font-family: 'Uchen', serif;
}
</style>

Jika class nya sudah dibuat, maka font tersebut sudah siap
digunakan.
Catatan:
Jika disaat menggunakan font harus terhubung ke internet,
jika tidak maka font tersebut tidak bakalan aktif atau tulisan
di aplikasi yang dibuat akan menggunakan font default.

c. Icon Font
Icon Font yang digunakan dalam pembuatan template
website ini menggunakan FontAwesome versi 6 bisa di
download di :
https://fontawesome.com/download

Studi Kasus Pembuatan Website 35

 Gambar 2.16 Download FontAwesome
Untuk menggunakan icon nya yaitu dengan tag <link>
seperti dibawah ini jika file css nya berada didalam folder “
/assets/vendor/fontawesome-free-6.1.2-web/css/“ lalu
menggagil file css nya yang Bernama “ all.css “.

<link rel="stylesheet"
href="/assets/vendor/fontawesome-free-6.1.2-
web/css/all.css">

Untuk memanggil icon nya dengan cara :

<i class="fa-solid fa-house"></i>

36 Belajar HTML Dan CSS Dasar: Studi Kasus

 fa-solid adalah class untuk mengambil tipe icon nya,
sedangkan fa-house adalah icon yang akan dipanggil atau
yang akan ditampilkan kedalam website.

Gambar 2.17 Icon Home

Untuk dokumen Icon lengkap nya di :
https://fontawesome.com/search?m=free

d. Javascript
Javascript atau JS adalah bahasa pemrograman yang di-
gunakan dalam pengembangan website agar lebih dinamis
dan interaktif. Kalau sebelumnya hanya mengenal HTML
dan CSS, nah sekarang kamu jadi tahu bahwa JavaScript
dapat meningkatkan fungsionalitas pada halaman web.
Bahkan dengan JavaScript ini kamu bisa membuat aplikasi,
tools, atau bahkan game pada web.
Hanya saja javascript yang digunakan dalam
membuat template website hanya menggunakan bawwan
dari bootstrap nya sendiri. Walaupun dalam pembuatan
template website ini tidak menggunakan selain yang dari
bootstrap, website yang dibuat masih bisa menampilkan
website yang bagus. Jika ingin website ingin ada animasi
nya atau membuat grafik maka diharuskan menggunakan
javascript.

Studi Kasus Pembuatan Website 37

 e. Plugin
Plugin adalah kumpulan code yang dibuat oleh orang lain,
lalu dipakai oleh anda. biasanya plugin ada yang gratis atau
berbayar. Contoh nya fontawesome, DataTables, Animate dan
masih banyak lagi.

Untuk membuat tampilan template panel administrator atau

backend, pertama buat lah sebuh struktur html nya.

1. Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<!--merubah judul di tab browser-->
<title>Panel Administrator</title>

<!--menampilkan icon/gambar di yang sejajar dengan

<title> diatas-->
<link rel="shortcut icon"
href="assets/image/favicon.png" type="image/x-icon">

<!-- Bootstrap CSS -->

<link href="/assets/css/bootstrap.min.css"
rel="stylesheet">

38 Belajar HTML Dan CSS Dasar: Studi Kasus

 <!--mengubah font/tulisan website secara online asal
terhubung ke internet-->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Uchen:bold
,bolditalic|Inconsolata:italic">

<!-- memasang Icon Font Awesome-->

<link rel="stylesheet"
href="/assets/vendor/fontawesome-free-6.1.2-
web/css/all.css">

<!-- Styles buatan sendiri sisini -->

<link rel="stylesheet" href="assets/css/style.css">
<style>
.font{
font-family: 'Uchen', serif;
}
</style>

</head>
<body class="font">
<!--membuat body-->
<div class="wrapper">
<!--membuat body tidak benturan-->

Studi Kasus Pembuatan Website 39

 <div class="body-overlay"></div>
<!--akhir dari body tidak benturan-->

<!--membuar menu di kiri-->

<nav id="sidebar">
<div class="sidebar-header">
<h3><img src="" class="img-
fluid"/><span>Panel Admin</span></h3>
</div>
<ul class="list-unstyled components">
<li>
<a href="index.html" ><i class="fa-solid fa-
display fa-lg"></i>Dashboard</a>
</li>
<li>
<a href="daftar_harga.html"><i class="fa-solid
fa-money-check-dollar fa-lg"></i><span>Daftar
Harga</span></a>
</li>
<hr>
<li>
<a href="check_in.html"><i class="fa-solid fa-
user-check fa-lg"></i><span>Check In</span></a>
</li>
<li>
<a href="data_pengunjung.html"><i class="fa-
solid fa-user fa-lg"></i><span>Data

40 Belajar HTML Dan CSS Dasar: Studi Kasus

Pengunjung</span></a>
</li>
<li>
<a href="pemandu.html"><i class="fa-solid fa-
user-nurse fa-lg"></i><span>Pemandu</span></a>
</li>
<hr>
<li>
<a href="pengaturan.html"><i class="fa-solid
fa-gear fa-lg"></i><span>Pengaturan
website</span></a>
</li>
</ul>
</nav>
<!--akhir menu dikiri-->

<!--membuat konten-->
<div id="content">
<!--membuat navbar-->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<p class="navbar-brand">Selamat Datang Di
Aplikasi Wisata</p>
<a class="navbar-brand" href="#">
<i class="fa-solid fa-arrow-right-from-
bracket"></i> Keluar
</a>

Studi Kasus Pembuatan Website 41

 </div>
</nav>
<!--akhir navbar-->
<!--disini konten yang diisi sesuai aplikasi yang akan
dibuat-->
<div class="main-content">
<!---isi data/konten nya disini-->

</div>
<!--akhir konten yang dibuat-->

<!--membuat footer/bagian bawah-->

<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12">
<p class="copyright d-flex justify-content-
end"> Copyright &copy 2022. Dibuat dengan &#10084;
Panel Admin
</p>
</div>
</div>
</div>
</footer>
<!--akhir footer-->
</div>
<!--akhir konten-->

42 Belajar HTML Dan CSS Dasar: Studi Kasus

 </div>
<!--akhir body-->

<!--javascript simpan disini-->

<script
src="/assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Hasil nya :

Gambar 2.18 Struktur Website

Catatan :
Selain struktur disimpan index.html, buatlah file struk-
tur.html dan copy-paste kan struktur di atas kedalam file
struktur.html lalu simpan. mengapa? Karena untuk mem-
buat template ini akan digunakan berkali2 di setiap file
HTML. Terkecuali jika memakai PHP, Java, Ruby on Rails
dan lain lain , struktur ini hanya dibuat sekali saja.

Studi Kasus Pembuatan Website 43

 2. CSS
Untuk disini tidak akan membuat karena akan mengmbil dari
Bootstrap akan tetapi jika pakai Boostrap saja nanti tampiilan
nya sudah bagus hanya sajai terlihat tidak berwarna. Maka
dari itu akan dibuatlah Costum CSS yang natinya akan
digabungkan dengan Bootstrap.
Berikut contoh hanya boostrap saja:

Gambar 2.19 Template Bootstrap

Berikut contoh bootstrap dengan Costum CSS :

Gambar 2.20 Template Bootstrap dan Costume CSS

44 Belajar HTML Dan CSS Dasar: Studi Kasus

3. Costum CSS atau style.css
Untuk membuat tampilan seperti gambar 2.20, maka
diperlukan sebuah costum CSS atau membuat CSS Sendiri.
Berikut isi kose costum CSS, yang filenya bernama style.css

body, html {
line-height: 1.8;
font-family: 'Roboto', sans-serif;
color: #555e58;
background-color: #eeeeee;
text-transform:capitalize;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-weight: 400;
margin:0px;
padding:0px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
font-weight: 400;
line-height: 1.5em;
}

p{
font-size: 15px;
margin: 12px 0 0;
line-height: 24px;

Studi Kasus Pembuatan Website 45

 }

a{
color: #333;
font-weight: 400;
}

button:focus{
box-shadow:none;
outline:none;
border:none;
}

button{
cursor:pointer;
}

ul, ol {
padding: 0;
margin:0px;
list-style: none;
}

a,
a:hover,
a:focus {
color: #333;

46 Belajar HTML Dan CSS Dasar: Studi Kasus

 text-decoration: none;
transition: all 0.3s;
}

/*====================================
===================
material-icons copy & paste form site google material-
icons
=====================================
=============*/
.wrapper {
position: relative;
width:100%;
overflow:auto;
}

/* ---------------------------------------------------
SIDEBAR STYLE start
----------------------------------------------------- */
#sidebar {
position:fixed;
height:100vh!important;
top: 0;
bottom: 0;
left: 0;
z-index:11;
width: 260px;

Studi Kasus Pembuatan Website 47

 overflow:auto;
transition:all 0.3s ;
background: #FFFFFF;
box-shadow: 0 10px 30px -12px rgb(0 0 0 / 42%), 0 4px
25px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 /
20%);
}

#sidebar::-webkit-scrollbar{
width:5px;
border-radius:10px;
background-color:#eee;
display:none;
}
#sidebar::-webkit-scrollbar-thumbs{
width:5px;
border-radius:10px;
background-color:#333;
display:none;
}

#sidebar:hover::-webkit-scrollbar{
display:block;
}
#sidebar:hover::-webkit-scrollbar-thumbs{
display:block;
}

48 Belajar HTML Dan CSS Dasar: Studi Kasus

#sidebar .sidebar-header {
padding:20px;
background-color:#ffffff;
border-bottom:1px solid #eee;
}

.sidebar-header h3{
color:#333;
font-size:17px;
margin:0px;
text-transform:uppercase;
transition:all 0.5s ease;
font-weight:600;
}

.sidebar-header h3 img{
width:45px;
margin-right:10px;
}

#sidebar ul li{
padding:2px 7px;
}

#sidebar ul li.active>a{
color: #333;

Studi Kasus Pembuatan Website 49

 background-color: rgba(200, 200, 200, 0.2);
}

#sidebar ul li a:hover{
color: #333;
background-color: rgba(200, 200, 200, 0.2);
}

.dropdown-toggle::after {
position: absolute;
right: 10px;
top: 23px;
}

#sidebar ul li.drodown{
position:sticky;
}

#sidebar ul.components {
padding: 20px 0;
}

#sidebar ul li a {
padding: 10px;
line-height: 30px;
border-radius:5px;
font-size: 15px;

50 Belajar HTML Dan CSS Dasar: Studi Kasus

 position:relative;'
font-weight: 400;
display: block;
}

#sidebar ul li a span{
text-transform:capitalize;
display:inline-block;
}

#sidebar ul li a i {
position: relative;
margin-right: 10px;
top: 5px;
color: #555555;
margin-left: 10px;
}

/* ---------------------------------------------------
sidebar end
----------------------------------------------------- */

/*====================================
===================
main-content navbar-design start
=====================================
==========*/

Studi Kasus Pembuatan Website 51

 #content {
position: relative;
transition: all 0.3s;
background-color: #EEEEEE;
}

.top-navbar{
width:100%;
z-index:9;
position:relative;
}

.main-content{
padding:10px 20px 0px 20px;
position: relative;
width: 100%;
}

.navbar{
background-color: #2196F3;
color: #FFFFFF;
}

.navbar-brand {
color: #FFFFFF;
}

52 Belajar HTML Dan CSS Dasar: Studi Kasus

.navbar button{
background-color:transparent;
border:none;
}
.navbar button span{
color:#fff;
}

#sidebarCollapse{
border-radius:50%;
width:45px;
height:45px;
text-align:center;
line-height:45px;
margin-right:20px;
border:none;
color: #FFFFFF;
background-color: rgba(0, 0, 0, 0.09);
}

#sidebarCollapse span {
margin: 9px;
padding: 0px;
}

.navbar-nav > li.active{

color: #FFFFFF;

Studi Kasus Pembuatan Website 53

 border-radius:4px;
background-color: rgba(0, 0, 0, 0.08);
}

.navbar-nav > li > a {

color: #FFFFFF;
}

.navbar .notification {
position: absolute;
top: 5px;
right: 10px;
display: block;
font-size: 9px;
border: 0px;
font-size: 10px;
background: #d9534f;
min-width: 15px;
text-align: center;
padding: 1px 5px;
height: 15px;
border-radius: 2px;
line-height: 14px;
}

.navbar-nav > li.show .dropdown-menu {

transform: translate3d(0, 0, 0);

54 Belajar HTML Dan CSS Dasar: Studi Kasus

 opacity:1;
visibility:visible;
}

.dropdown-menu li > a {
font-size: 13px;
padding: 10px 20px;
margin: 0 5px;
border-radius: 2px;
font-weight: 400;
transition: all 150ms linear;
}

.navbar-nav > .active > a:focus {

color: #FFFFFF;
background-color: rgba(0, 0, 0, 0.08);
}

.navbar-nav li a {
position: relative;
display: block;
padding: 10px 15px!important;
}

/*====================================
===================
main-content navbar-design end

Studi Kasus Pembuatan Website 55

 =====================================
==========*/

/*====================================
===================
main-content inner design like card start
=====================================
==========*/

.card {
margin: 10px 0;
}

.card {
border-radius: 0px!important;
}

.card {
display: inline-block;
position: relative;
border:none!important;
width: 100%;
margin:15px 0;
box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
border-radius: 6px;
color: rgba(0,0,0, 0.87);

56 Belajar HTML Dan CSS Dasar: Studi Kasus

 background: #fff;
}

.card-stats .card-header {
float: left;
text-align: center;
}

.card .card-header {
padding: 15px 20px 0;
z-index: 3;
background-color:#fff!important;
border-bottom:none;
}

.card .card-footer .stats .material-icons {

position: relative;
top: 4px;
font-size: 16px;
}

.card-stats .card-header span {

font-size: 36px;
line-height: 56px;
width: 56px;
height: 56px;
}

Studi Kasus Pembuatan Website 57

 .icon.icon-warning {
color: #ff9800;
}

.icon.icon-rose {
color: #e91e63;
}
.icon.icon-success {
color: #4caf50;
}
.icon.icon-info {
color: #00bcd4;
}
.card .card-footer {
margin: 0 7px 0px;
padding-top: 10px;
background-color:#fff;
border-top: 1px solid #eeeeee;
}

.text-info {
color: #03A9F4!important;
}

.card-stats .card-content {
text-align: right;

58 Belajar HTML Dan CSS Dasar: Studi Kasus

 padding-top: 10px;
}

.card .card-content {
padding: 15px 20px;
position: relative;
}

.card .card-content .category {

margin-bottom: 0;
}
.card .category:not([class*="text-"]) {
color: #555555;
font-size: 14px;
font-weight: 400;
}

.card .card-title:not(.card-calendar .card-title) {

margin-top: 0;
margin-bottom: 5px;
}

.card-stats .card-title {
margin: 0;
}

.card .card-footer .stats {

Studi Kasus Pembuatan Website 59

 line-height: 22px;
color: #555555;
font-size: 15px;
}

.card .card-footer div {

display: inline-block;
}

.card .card-header-text h4{

margin-top: 0;
margin-bottom: 3px;
font-size:19px;
font-weight: 400;
color: #222222;
text-decoration: none;

.table > thead > tr > th {

border-bottom-width: 1px;
font-size: 16px;
font-weight: 400;
}

.card .card-content {

60 Belajar HTML Dan CSS Dasar: Studi Kasus

 padding: 15px 20px;
position: relative;
}

.streamline .sl-primary {
border-left-color: #188ae2;
}

.streamline .sl-item {
position: relative;
padding-bottom: 12px;
border-left: 1px solid #ccc;
}

.streamline .sl-item:before {
content: '';
position: absolute;
left: -6px;
top: 0;
background-color: #ccc;
width: 12px;
height: 12px;
border-radius: 100%;
}
.streamline .sl-primary:before, .streamline .sl-primary:last-
child:after {
background-color: #188ae2;

Studi Kasus Pembuatan Website 61

 }

.streamline .sl-danger:before, .streamline .sl-danger:last-

child:after {
background-color: #ff5b5b;
}

.streamline .sl-success {
border-left-color: #10c469;
}

.streamline .sl-success:before, .streamline .sl-success:last-

child:after {
background-color: #10c469;
}

.streamline .sl-warning {
border-left-color: #f9c851;
}

.streamline .sl-warning:before, .streamline .sl-warning:last-

child:after {
background-color: #f9c851;
}

.streamline .sl-danger {
border-left-color: #ff5b5b;

62 Belajar HTML Dan CSS Dasar: Studi Kasus

}
.streamline .sl-item .sl-content {
margin-left: 24px;
}

.streamline .sl-item .text-muted {

color: inherit;
opacity: .6;
font-size:12px;
}

.streamline .sl-item p {
font-size:14px;
color:#333;
}

/*====================================
===================
main-content inner design like card end
=====================================
==========*/

/*====================================
=========
footer design start
=====================================
====*/

Studi Kasus Pembuatan Website 63

 .footer {
border-top: 1px solid #e7e7e7;
}

footer {
padding: 10px 0;
position:relative;
width:100%;
}

footer ul li {
display: inline-block;
}

footer ul li a {
color: inherit;
padding: 15px;
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
border-radius: 3px;
text-decoration: none;
position: relative;
display: block;
}

footer .copyright {

64 Belajar HTML Dan CSS Dasar: Studi Kasus

 padding: 15px;
font-size:14px;
margin: 0;
}

/*====================================
=========
footer design end
=====================================
====*/
#sidebar.show-nav,.body-overlay.show-nav{
transform:translatex(0%);
opacity:1;
display:block;
visibility:visible;
z-index:15;
}

/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
@media only screen and (min-width:992px){
#sidebar.active {
width:80px;
height:100%!important;
position:absolute!important;
overflow:visible!important;

Studi Kasus Pembuatan Website 65

 top:0!important;
z-index:666;
float:left!important;
bottom: 0!important;
}

#sidebar.active .sidebar-header h3 span {

display:none;
transition:all 0.5s ease;
}

#sidebar.active ul li a span{
display:none;
transition:all 0.5s ease;
}

#sidebar.active .dropdown-toggle::after {
display:none;
transition:all 0.5s ease;
}

#content {
width: calc(100% - 260px);
position: relative;
float: right;
transition: all 0.3s;
background-color: #EEEEEE;

66 Belajar HTML Dan CSS Dasar: Studi Kasus

}

#content.active {
width: calc(100% - 80px);
}

#sidebar.active .menu {
position: absolute;
left: 81px;
background-color: white;
width: 180px;
height: auto;
margin: 5px 0;
top: 0;
border: 1px solid #dcd9d9;
z-index: 4;
}
} /* menutup media*/

@media only screen and (min-width:992px){

.dropdown-menu {
border: 0;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%);
transform: translate3d(0, -20px, 0);
visibility: hidden;
transition: all 150ms linear;
display: block;

Studi Kasus Pembuatan Website 67

 min-width:15rem;
right: 0;
left: auto;
opacity: 0;
}

/*===============small-screen overlay sidebar

design media queries==============*/

@media only screen and (max-width:992px){

#sidebar {
position:fixed;
top: 0;
bottom:0;
z-index: 10;
width: 260px;
transform:translatex(-100%);
transition: all 150ms linear;
box-shadow:none!important;
}

.body-overlay{
position:fixed;
top:0;
left:0;

68 Belajar HTML Dan CSS Dasar: Studi Kasus

 width:100%;
height:100%;
display:none;
visibility:hidden;
opacity:0;
z-index:3;
transition: all 150ms linear;
background-color:rgba(0,0,0,0.5);
}
}
/*===============small-screen overlay sidebar
design media queries==============*/

/* --------------------------------------------------- MEDIAQUERIES
----------------------------------------------------- */

Catatan :
CSS diatas hanya sekedar contoh, selanjutnya jika ingin
menambahkan pada bagian–bagian tertentu silahkan di
tambahkan atau anda bisa menggunakan hanya CSS dari
Bootstrap nya langsung.

Setelah dari semua index.html dan style.css berikutnya adalah

memasukan isi atau data, membuat tabel dan lain lain yang akan di

Studi Kasus Pembuatan Website 69

buat sesuai dengan aplikasi yang akan dibuat dan masukan kode
nya didalam tag berikut :

<div class="main-content">
<!---isi data/konten nya disini-->
</div>

Setelah persiapan dari struktur html dan css sudah disiapkan

selanjutnya membuat isian atau data aplikasi nya sesuai anda
inginkan. Dalam kasus ini penulis membuat sebuah contoh yang
akan dimasukan kedalam template panel admin ini berupa aplikasi
untuk wisata berikut isi atau data yang dimasukan di dalamnya :

1. Dashboard
Dashboard adalah halaman paling utama dimana halaman nya
berisi data singkat dari setiap menu – menu. Dashboard sendiri
biasanya dibuat didalam file index.html karena index.html
sama seperti dashboard.html. Jadi disini penulis menggunakan
index.html sebagai dashboard. Lalu buat kode berikut didalam
tag <div class="main-content">.

<!--
membuat tabel untuk data pengunjung
-->
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="card">

70 Belajar HTML Dan CSS Dasar: Studi Kasus

 <div class="card-header card-header-text">
<h4 class="card-title">Data Check In</h4>
<p class="category">Pengunjung yang baru saja
check in untuk menjalankan program wisata</p>
</div>
<div class="card-content table-responsive">
<table class="table table-hover">
<thead class="text-primary">
<tr><th>No</th>
<th>Nama</th>
<th>Pemandu</th>
<th>Tanggal Berangkat</th>
</tr></thead>
<tbody>
<tr>
<td>1</td>
<td>Ayu</td>
<td>Ujang</td>
<td>12 Maret 2022</td>
</tr>
<tr>
<td>2</td>
<td>Fadli</td>
<td>Ujang</td>
<td>15 Januari 2022</td>
</tr>
<tr>

Studi Kasus Pembuatan Website 71

 <td>3</td>
<td>Rahmat</td>
<td>Hendra</td>
<td>24 Desember 2021</td>
</tr>
<tr>
<td>4</td>
<td>Dedi</td>
<td>Fia</td>
<td>2 Oktober 2021</td>
</tr>
<tr>
<td>5</td>
<td>Mami</td>
<td>Hendra</td>
<td>28 Agustus 2021</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="card" style="min-height: 485px">
<div class="card-header card-header-text">
<h4 class="card-title">Aktifitas</h4>
</div>

72 Belajar HTML Dan CSS Dasar: Studi Kasus

 <div class="card-content">
<div class="streamline">
<div class="sl-item sl-primary">
<div class="sl-content">
<small class="text-muted">5 menit
lalu</small>
<p>Winda Baru Saja Bergabung</p>
</div>
</div>
<div class="sl-item sl-danger">
<div class="sl-content">
<small class="text-muted">25 menit
lalu</small>
<p>Ahmad Baru Saja Bergabung</p>
</div>
</div>
<div class="sl-item sl-success">
<div class="sl-content">
<small class="text-muted">40 menit
lalu</small>
<p>Farhan Baru Saja Mengirim
Pesan</p>
</div>
</div>
<div class="sl-item">
<div class="sl-content">
<small class="text-muted">45 menit

Studi Kasus Pembuatan Website 73

 lalu</small>
<p>Tia Baru Saja Bergabung</p>
</div>
</div>
<div class="sl-item sl-warning">
<div class="sl-content">
<small class="text-muted">55 menit
lalu</small>
<p>Hilda Baru Saja Mendaftar</p>
</div>
</div>
<div class="sl-item">
<div class="sl-content">
<small class="text-muted">60 minutes
lalu</small>
<p>Putra Baru Saja Bergabung</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

74 Belajar HTML Dan CSS Dasar: Studi Kasus

 Hasilnya :

Gambar 2.21 Halaman Dashboard

2. Daftar Harga
Halaman daftar harag dimana halaman tersebut menam-pilkan
daftar harga yang bisa diambil oleh pengunjung. Untuk tampi-
lannya bisa memakai tabel atau pun bentuk kotak ter-gantung
anda yang membuat nya.
Untuk Langkah nya buatlah file daftar_harga.html lalu
copy-paste kan struktur HTML yang sudah dibuat diatas
(index-.html atau struktur.html) kedalam file daftar-haga-
.html yang tadi sudah dibuat. Lalu isikan kode berikut didalam
tag <div class="main-content">.

<!---isi data/konten nya disini-->

<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="card">
<div class="card-header card-header-text">
<h4 class="card-title">Data Check In</h4>

Studi Kasus Pembuatan Website 75

 <p class="category">Pengunjung yang baru saja
check in untuk menjalankan program wisata</p>
</div>
<div class="card-content table-responsive">
<table class="table table-hover">
<thead class="text-primary">
<tr>
<th>No</th>
<th>Jenis</th>
<th>Pemandu</th>
<th>Jumlag Orang</th>
<th>Harga Paket</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Camping</td>
<td>Ujang</td>
<td>5</td>
<td>Rp. 450,000</td>
</tr>
<tr>
<td>2</td>
<td>Wisata Alam</td>
<td>Abang</td>
<td>10</td>

76 Belajar HTML Dan CSS Dasar: Studi Kasus

 <td>Rp. 250,000</td>
</tr>
<tr>
<td>3</td>
<td>Pendaki Gunung</td>
<td>Rahmat</td>
<td>10</td>
<td>Rp. 1,100,000</td>
</tr>
<tr>
<td>4</td>
<td>Travel Sepeda</td>
<td>Tia</td>
<td>25</td>
<td>Rp. 1,700,000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm">
<div class="card">
<div class="card-header card-headertext">
<h4 class="card-title">Buat Baru</h4>
<p class="category">Silahkan Isi Form dibawah
ini untuk menambahkan daftar harga baru</p>

Studi Kasus Pembuatan Website 77

 </div>
<div class="card-body">
<div class="mb-3">
<label class="form-label">Jenis</label>
<input type="text" class="form-control"
placeholder="Jenis Paket">
</div>
<div class="mb-3">
<label class="form-label">Pemandu</label>
<input type="text" class="form-control"
placeholder="Pemandu">
</div>
<div class="mb-3">
<label class="form-label">Jumlah
Orang</label>
<input type="text" class="form-control"
placeholder="Jumlah Orang">
</div>
<div class="mb-3">
<label class="form-label">Harga
Paket</label>
<input type="text" class="form-control"
placeholder="Harga Paket">
</div>
<div class="mb-3">
<button class="btn btn-primary">Tambah
Paket Baru</button>

78 Belajar HTML Dan CSS Dasar: Studi Kasus

 <a href="/index.html" class="btn btn-
secondary">Kembali</a>
</div>
</div>
</div>
</div>
</div>

Hasilnya :

Gambar 2.22 Halaman Daftar Harga

3. Check In
Halaman untuk pengunjung yang sudah memesan jasa wisata.
Untuk langkah nya sama sepeti file daftar_harga.html. buatlah
file check_in.html lalu isikan kode berikut :

<!---isi data/konten nya disini-->

<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12">

Studi Kasus Pembuatan Website 79

 <div class="card">
<div class="card-header card-header-text">
<h4 class="card-title">Data Check In</h4>
<p class="category">Pengunjung yang baru saja
check in untuk menjalankan program wisata</p>
</div>
<div class="card-content table-responsive">
<table class="table table-hover">
<thead class="text-primary">
<tr><th>No</th>
<th>Nama</th>
<th>Pemandu</th>
<th>Tanggal</th>
<th>Jam</th>
</tr></thead>
<tbody>
<tr>
<td>1</td>
<td>Ayu</td>
<td>Ujang</td>
<td>12 Maret 2022</td>
<td>14.00</td>
</tr>
<tr>
<td>2</td>
<td>Fadli</td>
<td>Ujang</td>

80 Belajar HTML Dan CSS Dasar: Studi Kasus

 <td>15 Januari 2022</td>
<td>11.00</td>
</tr>
<tr>
<td>3</td>
<td>Rahmat</td>
<td>Hendra</td>
<td>24 Desember 2021</td>
<td>07.12</td>
</tr>
<tr>
<td>4</td>
<td>Dedi</td>
<td>Fia</td>
<td>2 Oktober 2021</td>
<td>16.00</td>
</tr>
<tr>
<td>5</td>
<td>Mami</td>
<td>Hendra</td>
<td>28 Agustus 2021</td>
<td>10.00</td>
</tr>
<!--tinggal copy paste dari data atas-->
<tr>
<td>6</td>

Studi Kasus Pembuatan Website 81

 <td>Ayu</td>
<td>Ujang</td>
<td>12 Maret 2022</td>
<td>14.00</td>
</tr>
<tr>
<td>7</td>
<td>Fadli</td>
<td>Ujang</td>
<td>15 Januari 2022</td>
<td>11.00</td>
</tr>
<tr>
<td>8</td>
<td>Rahmat</td>
<td>Hendra</td>
<td>24 Desember 2021</td>
<td>07.12</td>
</tr>
<tr>
<td>9</td>
<td>Dedi</td>
<td>Fia</td>
<td>2 Oktober 2021</td>
<td>16.00</td>
</tr>
<tr>

82 Belajar HTML Dan CSS Dasar: Studi Kasus

 <td>10</td>
<td>Mami</td>
<td>Hendra</td>
<td>28 Agustus 2021</td>
<td>10.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

Hasilnya :

Gambar 2.23 Halaman Check-In

Studi Kasus Pembuatan Website 83

 4. Data Pengunjung
Halaman untuk pengunjuang yang baru tiba di tempat wisata.
Untuk langkah nya sama sepeti file daftar_harga.html. buatlah
file data_pengunjung.html lalu isikan kode berikut :

<!---isi data/konten nya disini-->

<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="card">
<div class="card-header card-header-text">
<h4 class="card-title">Data Pengunjung</h4>
<p class="category">Pengunjung yang baru saja
datang</p>
</div>
<div class="card-content table-responsive">
<table class="table table-hover">
<thead class="text-primary">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>No. Telepon</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>

84 Belajar HTML Dan CSS Dasar: Studi Kasus

 <td>Ami</td>
<td>Jl. Bangka No 21</td>
<td>0857112233445</td>
</tr>
<tr>
<td>2</td>
<td>Mia</td>
<td>Jl. Bangka No 11</td>
<td>0857112233445</td>
</tr>
<tr>
<td>3</td>
<td>Ayu</td>
<td>Jl. Bangka No 22</td>
<td>0857112233445</td>
</tr>
<tr>
<td>4</td>
<td>Ujang</td>
<td>Jl. Bangka No 14</td>
<td>0857112233445</td>
</tr>
<tr>
<td>5</td>
<td>Tia</td>
<td>Jl. Bangka No 7</td>
<td>0857112233445</td>

Studi Kasus Pembuatan Website 85

 </tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

Hasilnya :

Gambar 2.24 Halaman Pengunjung

5. Pemandu
Halaman untuk pemandu yang bekerja di tempat wisata.
Untuk langkah nya sama sepeti file daftar_harga.html. buatlah
file pemandu.html lalu isikan kode berikut :

<!---isi data/konten nya disini-->

<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="card">
<div class="card-header card-header-text">

86 Belajar HTML Dan CSS Dasar: Studi Kasus

 <h4 class="card-title">Data Pemandu</h4>
<p class="category">Pemandu Wisata</p>
</div>
<div class="card-content table-responsive">
<table class="table table-hover">
<thead class="text-primary">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>No. Telepon</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ami</td>
<td>Jl. Bangka No 21</td>
<td>0857112233445</td>
</tr>
<tr>
<td>2</td>
<td>Mia</td>
<td>Jl. Bangka No 11</td>
<td>0857112233445</td>
</tr>
<tr>

Studi Kasus Pembuatan Website 87

 <td>3</td>
<td>Ayu</td>
<td>Jl. Bangka No 22</td>
<td>0857112233445</td>
</tr>
<tr>
<td>4</td>
<td>Ujang</td>
<td>Jl. Bangka No 14</td>
<td>0857112233445</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

Hasilnya :

Gambar 2.25 Halaman Pemandu

88 Belajar HTML Dan CSS Dasar: Studi Kasus

6. Pengaturan Website/Aplikasi
Halaman untuk pengaturan website atau aplikasi. Untuk lang-
kah nya sama sepeti file daftar_harga.html. buatlah file
pengaturan.html lalu isikan kode berikut :

<!---isi data/konten nya disini-->

<div class="row">
<div class="col-lg-6 col-md-12 col-sm">
<div class="card">
<div class="card-header card-headertext">
<h4 class="card-title">Pengaturan Aplikasi</h4>
<p class="category">Silahkan Isi Form dibawah
ini untuk mengubah aplikasi</p>
</div>
<div class="card-body">
<div class="mb-3">
<label class="form-label">Title
Aplikasi</label>
<input type="text" class="form-control"
placeholder="Title Aplikasi">
</div>
<div class="mb-3">
<label class="form-label">Judul
Aplikasi</label>
<input type="text" class="form-control"
placeholder="Judul Aplikasi">

Studi Kasus Pembuatan Website 89

 </div>
<div class="mb-3">
<label class="form-label">Kontak Kami
</label>
<input type="text" class="form-control"
placeholder="No. Hp 08571122334455 ">
</div>
<div class="mb-3">
<label class="form-label">Alamat</label>
<textarea class="form-control" cols="30"
rows="10">Alamat Wisata : Jln. Suka Wisata No.
77</textarea>
</div>
<div class="mb-3">
<button class="btn btn-
primary">Simpan</button>
<a href="/index.html" class="btn btn-
secondary">Kembali</a>
</div>

</div>
</div>
</div>
</div>

90 Belajar HTML Dan CSS Dasar: Studi Kasus

 Hasilnya :

Gambar 2.26 hHalaman Pengaturan

Setelah selesai dari awal sampai terakhir, selamat anda telah ber-
hasil membuat template website baik untuk halaman depan website
(Frontend) maupun halaman belakang website (Backend). Untuk
menjalan sebuah aplikasi atau halaman belakang website (Bac-
kend) diharuskan untuk menggabungkan nya dengan server side
seperti PHP (Hypertext Preprocessor), Ruby on Rails, Java dan
masih banyak lagi.

Untuk Source Code “Studi Kasus” ini, anda bisa

mendownloadnya di

https://1drv.ms/u/s!AtR1efECjH6UhDLHE177xUW5w1Ka

Studi Kasus Pembuatan Website 91

92
 PROFIL PENULIS

Dahlan Fauzi, Lulusan STMIK Nusa

Mandiri tahun 2014 yang sebelumnya berprofesi sebagai prog-
rammer game pada tahun 201–2016 beralih ke website deve-
lopment pada tahun 2017 sampai sekarang dan masih mendalami
sebagai website development baik sebagai website front end
maupun back end (Full Stack Development). Telah membuat
beberapa webite dan aplikasi website, seperti Website Profil
Sekolah, Website Profil Program Studi Universitas, Aplikasi Sistem
Informasi Sekolah, Aplikasi Management Dosen, Aplikasi Pen-
jualan Berbasis Web dan masih banyak lagi.

93
 Ismet Ismatullah, Merupakan salah satu
dosen di Universitas Swasta di Sukabumi. Lulus S-2 dari Magister
Akuntansi Universitas Pancasila. Selain sebagai tim pengajar,
penulis juga merupakan Tim Pengembangan Ekonomi Kreatif
disalah satu perusahaan Kreatif di Sukabumi. Penulis juga aktif
menulis buku di bidang Perpajakan dan Akuntansi.

94