PEMROGRAMAN WEB I

NAIYA SALSABILA
222406042
KOM B’22

PROGRAM STUDI D-3 TEKNIK INFORMATIKA

FAKULTAS VOKASI
UNIVERSITAS SUMATERA UTARA
MEDAN
2023
 KATA PENGANTAR

Puji dan syukur penulis panjatkan kepada Allah SWT, dengan limpah karunia-
Nya penulis dapat menyelesaikan penyusunan makalah ini dengan judul Pemrograman
Web I.
Terima kasih penulis sampaikan kepada setiap pihak yang sudah mendukung
selama belangsungnya pembuatan makalah ini. Terkhusus lagi penulis sampaikan
terima kasih kepada Bapak Niskarto Zendrato S.Kom.,M.Kom selaku dosen pengajar
dan asisten laboratorium M. Alif Farham yang telah membimbing. Penulis sekaligus
juga berharap semoga makalah ini bisa bermanfaat bagi setiap pembaca.
Disertai keseluruhan rasa rendah hati, kritik dan saran yang membangun amat
penulis nantikan, agar nantinya penulis dapat meningkatkan dan merevisi kembali
pembuatan makalah di tugas lainnya dan diwaktu berikutnya.

Medan, 08 Desember 2023

Naiya Salsabila

i
 DAFTAR ISI

Halaman
KATA PENGANTAR i
DAFTAR ISI ii

BAB 1 PENDAHULUAN
1.1 Latar Belakang 1
1.2 Rumusan Masalah 2
1.3 Tujuan 2

BAB 2 WEBSITE DAN HTML

2.1 Pengenalan Website 3
2.2 Unsur - Unsur Website 4
2.3 Jenis – Jenis Website 5
2.4 Pengenalan HTML 5
2.5 Ciri – Ciri Dokumen HTML 6
2.6 Penggunaan HTML 7

BAB 3 TAG, ATRIBUT, DAN ELEMENT PADA HTML

3.1 Tag pada HTML 9
3.1.1 Aturan Dasar Penulisan Tag 9
3.1.2 Macam – Macam Tag HTML 10
3.2 Atribut Pada HTML 11
3.2.1 Jenis – Jenis Atribut HTML 11
3.3 Element Pada HTML 12
3.3.1 Jenis – Jenis Element 12

BAB 4 LIST DAN TABEL

4.1 List pada HTML 14
4.1.1 Ordered List 14
4.1.2 Unordered List 15
4.1.3 Description List 16
4.2 Tabel pada HTML 16
4.2.1 Atribut pada Tabel 17
4.2.2 Menambahkan Warna dan Menggabungkan Sel dan Baris 18

BAB 5 HYPERLINK
5.1 Pengenalan Hyperlink 20
5.2 Fungsi Hyperlink 20
5.3 Jenis – Jenis Hyperlink 21
5.4 Cara Membuat Hyperlink 22
5.5 Atribut – Atribut untuk Link 22

BAB 6 CSS ( CASCADING STYLE SHEET )

6.1 Pengenalan CSS 23

ii
 6.2 Penulisan CSS Pada HTML 24
6.2.1 Inline CSS 24
6.2.2 Internal CSS 24
6.2.3 Eksternal CSS 25
6.3 Selector Pada CSS 25
6.3.1 Universal Selector 26
6.3.2 Tag Selector 26
6.3.4 Class Selector 26
6.3.5 ID Selector 27
6.3.6 Attribute Selector 27
6.4 Style pada Teks 27
6.5 Kelebihan dan Kekurangan CSS 28

BAB 7 BOOTSTRAP
7.1 Pengenalan BootStrap 29
7.2 Struktur dan Fungsi BootStrap 30
7.3 Fitur – Fitur Pada BootStrap 31
7.4 Kelebihan dan Kekurangan BootStrap 31

BAB 8 UI DESIGN
8.1 Pengenalan UI Design 32
8.2 Jenis – Jenis UI Design 32
8.2.1 Command Line Interface 33
8.2.2 Graphical User Interface (GUI) 33
8.2.3 Menu-Driven Interface 34
8.2.4 Form-Based Interface 34
8.2.5 Touch User Interface 34
8.2.6 Conversational User Interface 35
8.2.7 Mobile User Interface 35
8.3 Karakteristik UI Design 35
8.4 Manfaat UI Design 37

BAB 9 PROJECT
9.1 Penjelasan Project 39
9.2 Fitur Fitur Pada Projek Web 40
9.3 Tampilan Projek 41

BAB 10 PENUTUP
10.1 Kesimpulan 44
10.2 Saran 44

DAFTAR PUSTAKA

iii
 BAB 1
PENDAHULUAN

1.1 Latar Belakang

Tidak bisa dipungkiri pada sekarang ini yang namanya internet itu tidak dapat
lepas dalam kehidupan sehari-hari. Internet mempunyai banyak manfaat untuk
berbagai hal. Dalam internet, ada yang namanya website (situs web). Website dapat
diartikan sebagai kumpulan halaman yang menampilkan informasi data berupa teks,
gambar, suara, video dan lain-lain. Informasi tersebut dapat bersifat statis maupun
dinamis yang membentuk satu rangkaian bangunan, saling terkait dimana masing-
masing dihubungkan dengan jaringan halaman (hyperlink). Website adalah media
yang digunakan untuk menampung data teks, gambar, suara, dan animasi yang dapat
ditampilkan di internet dan dapat diakses oleh komputer yang terhubung dengan
internet secara global. Website merupakan media informasi berbasis jaringan
komputer yang dapat diakses dimana saja dengan biaya relatif murah. Website
merupakan bentuk implementasi dari bahasa pemograman web (web programming).
Dalam perkembangan pemrograman internet terdapat banyak jenis bahasa
pemrograman yang pembuat aplikasi kenal baik pemrograman di sisi server maupun
pemrograman di sisi klien. Sebut saja bahasa pemrograman PHP, JSP, ASP, HTML,
XHTML, dan lain sebagainya. Namun tetap saja kode yang diterjemahkan oleh
browser itu berupa halaman HTML (HyperText Markup Language).
HTML merupakan sebuah dasar ataupun pondasi bahasa pemograman sebuah
web page, HTML muncul sebagai standar baru dari kemajuan dan berkembangnnya
internet, pada pertama kali muncul internet masih dalam keadaan berbasis text dimana
tampilan sebuah halaman webhanya berisikan sebuah text yang monotone tanpa
sebuah format dokumen secara visual, bayangkan saja sebuah dokument text yang
dikemas dalam bungkus format seperti tipe file .txt atau sering disebut notepad, tanpa
paragraph, satu warna, satu ukuran huruf tanpa gambar sertatidak adanya visual format
dokumen seperti halnya Ms. Word, hal ini akan sangat membosankan dalam membaca.
dan selain itu pertamakali muncul internet user mengakses masih menggunakan
 2

sebuah terminal, hal itu jelas sangatlah tidak friendly. Pemograman HTML muncul
seiring perkembangan teknologi dan informasi.

1.2 Rumusan Masalah

Adapun rumusan masalah dalam makalah ini ialah
1. Apa yang dimaksud dengan website dan html ?
2. Bagaimana menggunakan Atribut, tag, dan value pada html ?
3. Bagaimana cara membuat tabel dalam web ?
4. Bagaimana cara menambah halaman Web ?
5. Apa itu CSS dan bagaimana penggunaannya ?

1.3 Tujuan
Adapun tujuan dari pembuatan makalah ini adalah
1. Untuk menambah pengetahuan pembaca termasuk saya sendiri tentang bagaimana
cara penggunaan maupun pembuatan website yang baik dan benar
2. Untuk mengetahui cara membuat website dengan menggunakan Bahasa
pemrograman html, yang dirangkai dan disusun sebaik mungkin hingga
menghasilkan suatu web yang baik dan berkualitas pula.
3. Untuk memenuhi tugas akhir pada praktikum Pemrograman Web I sebagai syarat
untuk mengikuti UAS praktikum Pemrograman Web I.
4. Untuk mengetahui cara membuat website dengan menggunakan CSS.
5. Untuk mempelajari bagaimana membuat website lebih mudah dengan
menggunakan BootStrap.
 BAB 2
WEBSITE DAN HTML

2.1 Pengenalan Website

Website adalah sebuah halaman atau sekumpulan halaman web yang saling
terhubung dan dapat diakses dari seluruh dunia, selama terkoneksi ke jaringan internet.
Setiap halaman website memiliki alamat unik yang dikenal sebagai URL (Uniform
Resource Locator). Situs web dapat berisi berbagai jenis informasi, misalnya teks,
gambar, video, dan audio. Selain itu, website juga bisa memuat fitur interaktif seperti
form kontak, komentar, atau chatting.
Website terdiri dari dua elemen utama, yakni client-side dan server-side.
Client-side website adalah bagian situs yang terlihat oleh pengguna melalui browser,
seperti Google Chrome atau Internet Explorer. Bagian ini tersusun atas HTML, CSS,
dan JavaScript untuk merancang dan menampilkan halaman web. Sebaliknya, server-
side website adalah bagian website yang tersembunyi oleh pengguna, dan berisi file
dan data yang diolah oleh web server. Bagian server-side ini terdiri dari bahasa
pemrograman, seperti PHP, Python, atau Ruby on Rails.
Ada banyak fungsi dan kegunaan website dalam kehidupan kita, diantaranya seperti,
1. Menjual Produk atau Jasa secara Online
2. Menyediakan Informasi
3. Branding sebuah Perusahaan
4. Berbagi Cerita dan Informasi
5. Menggalang Dana Sosial
6. Portfolio

Gambar 2.1 Contoh Tampilan Website

 4

2.2 Unsur - Unsur Website

Terbentuknya sebuah website, pasti ada unsur – unsur didalamnya yang harus
dipenuhi dan disatukan hingga tercipta sebuah website, unsur – unsur tersebut
diantaranya ialah,
1. Domain
Domain adalah alamat unik yang digunakan untuk mengakses situs web.
Sederhananya, pengertian domain adalah bagian dari URL yang menunjukkan asal
dan jenis website. Contoh domain seperti “.com”, “.id”, atau “.co.id” memberikan
identitas dan tujuan situs tersebut.
2. Hosting
Hosting adalah layanan penyimpanan data dan website di server internet. Ada
beberapa jenis hosting yang dapat dipilih, seperti shared hosting, VPS hosting,
dan dedicated hosting.
3. Bahasa Pemrograman
Bahasa pemrograman adalah instruksi yang digunakan untuk membuat dan
mengatur tampilan serta fungsi-fungsi sebuah situs web. Contoh bahasa
pemrograman yang umum digunakan antara lain HTML, CSS, JavaScript,
dan PHP.
4. Konten
Konten termasuk ke dalam unsur website, yang meliputi teks, gambar, video, dan
foto. Dengan adanya konten di dalamnya, secara tidak langsung website dapat
menyediakan informasi yang lengkap dan dibutuhkan oleh pembaca.
5. Tampilan
Tanpa disadari, tampilan website yang unik dapat menarik perhatian pengguna dan
menciptakan pengalaman pengguna yang positif. Selain itu, kecepatan loading
website juga sangat penting untuk menjaga minat pengguna dan menghindari
kemungkinan mereka meninggalkan website karena proses loading yang terlalu
lama. Itulah mengapa desain tampilan sangat penting bagi keberhasilan sebuah
website.
 5

2.3 Jenis – Jenis Website

Ada beberapa jenis website yang bisa ditemui di internet. Salah satunya
adalah website toko online, yang digunakan untuk menjual produk secara online.
Selain itu, terdapat juga website pribadi yang bisa digunakan sebagai media untuk
berbagi informasi pribadi atau karya-karya seni, Atau lebih lengkapnya seperti berikut,
1. Website Pribadi
Website pribadi adalah jenis website yang dibuat oleh seorang individu untuk
kepentingan pribadi. Contoh website pribadi bisa berupa blog pribadi, portofolio
pribadi, atau halaman web yang berisikan informasi pribadi tentang seseorang.
2. Website Toko Online
Website ini biasanya digunakan oleh para pelaku bisnis untuk menjual produknya
secara online. Contoh toko online seperti Lazada, Tokopedia, atau Shopee telah
menjadi platform terbaik untuk membeli barang dengan mudah dan praktis.
3. Website Company Profile
Website company profile berfungsi untuk memperkenalkan dan mempromosikan
perusahaan atau organisasi. Contoh dari jenis website company profile ialah
halaman web yang berisi informasi tentang sejarah, visi, misi, dan produk
Perusahaan.
4. Website Organisasi
Website organisasi adalah situs web yang dibuat untuk tujuan tertentu oleh suatu
organisasi atau lembaga tertentu. Contoh website organisasi meliputi situs web
perusahaan, situs web pemerintah, situs web amal, dan situs web yayasan. Melalui
website organisasi, informasi, layanan, dan kegiatan organisasi dapat diakses
secara mudah oleh pengguna internet.
5. Website Berita
Website berita adalah platform yang menyediakan informasi terkini dan aktual.
Contoh website berita di Indonesia antara lain adalah Detik, Kompas, dan Tempo.

2.4 Pengenalan HTML

HTML (HyperText Markup Language) sebuah bahasa standar yang digunakan
oleh browser Internet untuk membuat halaman dan dokumen pada sebuah Web yang
kemudian dapat diakses dan dibaca layaknya sebuah artikel. HTML juga dapat
 6

digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan
menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia
internet. HyperText Markup Language (HTML) adalah sebuah bahasa markup yang
digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di
dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis
kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang
terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah
kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan
perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak
digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard
Generalized Markup Language), HTMLadalah sebuah standar yang digunakan secara
luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet
yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web
Consortium(W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-
leerobert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga
penelitian fisika energi tinggi di Jenewa).
Eksetensi dari file HTML umumnya *.htm atau *.html. HTML juga bersifat
Multi Platform (dapat berjalan pada sistem operasi apapun). HTML disebut sebagai
Markup Language karena dalam text HTML mengandung tag tertentu yang digunakan
untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut
dalam suatu dokumen. Tag adalah kode yang digunakan untuk memark up teks ASCII
menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing. Ada tag pembuka
yaitu dan ada tag penutup yang ditandai dengan tanda slash (garis miring) di depan
awal tulisannya. Tag tersebut memberikan kaidah bahwa yang ditulis di antara kedua
tag tersebut adalah isi dari dokumen HTML.

2.5 Ciri – Ciri Dokumen HTML

Untuk mengetahui dokumen tersebut menggunakan html atau tidak, kitab isa
menentukannya dengan memahami ciri – ciri dokumen html seperti,
1. Terdapat Tag HTML
a. Tag ditandai dengan “<” dan “>”.
 7

b. Dalam penulisan kode HTML harus diawali dengan <tag_pembuka> dan

diakhiri dengan </tag_penutup> .
c. Tag HTML tidak ‘case sensitive’, <b> sama dengan <B> .
d. Jika dalam suatu tag ada tag lagi maka penulisan tag akhir harus berurutan,
missal <b><i> ... Huruf Tebal Miring </i><b> .
2. Terdapat element html, yang terdiri dari 2 bagian :
a. Head merupakan kepala dokumen dari HTML, yang berfungsi untuk
memberikan informasi tentang dokumen.
b. Body merupakan tubuh dari HTML, yang berfungsi untuk menentukan
bagaimana isi suatu dokumen yang akan ditampilkan pada web browser

Berikut ini merupakan contoh dasar dari susunan html, yaitu

<div>
<h1>The Main Heading</h1>
<h2>A catchy subheading</h2>
<p>Paragraph one</p>
<img src="/" alt="Image">
<p>Paragraph two with a <a
href="https://example.com">hyperlink</a></p>
</div>

a. Elemen teratas dan terbawah adalah division sederhana (<div></div>) yang

bisa Anda gunakan untuk mark up bagian konten yang lebih besar.
b. Susunan di atas terdiri atas heading (<h1></h1>), subheading (<h2></h2), dua
paragraf (<p></p>), dan satu gambar (<img>).
c. Paragraf kedua meliputi sebuah link (<a></a>) dengan attribute href yang
terdiri atas URL tujuan.
d. Tag gambar memiliki dua attribute, src untuk path gambar dan alt untuk
deskripsi gambar.

2.6 Penggunaan HTML

Adanya dan berkembangnya HTML di internet, sudah pasti memiliki kegunaan
yang besar bagi Sebagian orang, diantaranya
 8

1. Pengembangan web. Developer menggunakan kode HTML untuk mendesain

tampilan elemen halaman web di browser, seperti teks, hyperlink, dan file media.
2. Navigasi internet. Pengguna bisa menelusuri dan menyisipkan link antara halaman
dan website terkait karena HTML banyak digunakan untuk menyematkan
hyperlink.
3. Dokumentasi web. HTML bisa digunakan untuk mengatur dan memformat
dokumen, mirip dengan Microsoft Word.
 BAB 3
TAG , ATRIBUT, DAN ELEMENT PADA HTML

3.1 Tag pada HTML

Tag adalah sebuah penanda awalan dan akhiran dari sebuah elemen di HTML.
Tag dibuat dengan kurung siku (<...>), lalu di dalamnya berisi nama tag dan kadang
juga ditambahkan dengan atribut. Contoh: <p>, <a>, <body>, <head>, dan sebagainya.
Tag selalu ditulis berpasangan. Ada tag pembuka dan ada tag penutupnya. Namun, ada
juga beberapa tag yang tidak memiliki pasangan penutup. Tag penutup ditulis dengan
menambahkan garis miring (/) di depan nama tag.

Gambar 3.1 Contoh Tag pada HTML

3.1.1 Aturan Dasar Penulisan Tag

Berikut ini beberapa saran yang perlu diikuti agar bisa menulis tag dengan
benar:
1. Tag-tag wajib
Ada beberapa tag yang wajib ada di HTML. Tag ini harus ditulis. kalau tidak, bisa
jadi kode HTML akan error menurut validator W3C.
Berikut ini daftar tag yang wajib ada di HTML:
1. <!DOCTYPE html>, untuk deklarasi type dokumen;
2. <html>, tag utama dalam HTML;
3. <head>, untuk bagian kepala dari dokumen;
4. <title>, untuk judul web;
5. <body>, untuk bagian body dari dokumen.
 10

2. Gunakan huruf kecil karena huruf kecil lebih gampang diketik dan juga akan
membuat kode HTML terlihat lebih bersih dan rapi.
3. Pastikan menutup tag dengan Benar karna tag HTML nantinya akan ditulis
bertumpuk-tumpuk. Artinya, di dalam tag ada tag lagi. Kadang kita sering salah
dalam menutup tag yang bertumpuk ini. Akibatnya, kode HTML kita tidak valid.

3.1.2 Macam – Macam Tag HTML

Selain tag dasar yang sudah disebutkan diatas, terdapat beberapa tag lainnya
yang memiliki fungsi dan kegunaannya sendiri, yaitu :
1. <!DOCTYPE>, Tag untuk menentukan tipe dokumen
2. <html>, Tag untuk membuat sebuah dokumen HTML
3. <title>, Tag untuk membuat judul dari sebuah halaman
4. <body>, Tag untuk membuat tubuh dari sebuah halaman
5. <h1> to <h6>, Tag untuk membuat heading
6. <p>, Tag untuk membuat paragraf
7. <br>, Memasukan satu baris putus
8. <hr>, Tag untuk membuat perubahan dasar kata didalam isi
9. <!--...-->, Tag untuk membuat komentar
10. <b>, Tag untuk membuat huruf bercetak tebal
11. <center>, Tag untuk membuat jajaran teks menjadi ditengah (tidak disupport lagi
di HTML5)
12. <sub>, Tag untuk membuat teks subskrip (seperti dalam penulisan Jat Kimia)
13. <sup>, Tag untuk membuat teks superscripted (seperti dalam penulisan akar
kuadrat)
14. <button>, Tag untuk membuat sebuah tombol yang dapat diklik
15. <select>, Tag untuk membuat sebuah daftar drop-down
16. <img>, Tag untuk membuat gambar
17. <a>, Tag untuk membuat hyperlink
18. <link>, Tag untuk membuat hubungan antara dokumen dan sumber daya eksternal
(paling sering digunakan untuk link ke style sheet)
19. <nav>, Tag untuk membuat navigasi link (tag baru HTML5)
 11

20. <style>, Tag untuk membuat informasi style untuk dokumen

21. <div>, Tag untuk membuat sebuah bagian dalam dokumen
22. <section>, Tag untuk membuat bagian dalam dokumen (tag baru HTML5). Dan
masih banyak tag- tag lainnya.

3.2 Atribut Pada HTML

Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini
bisa berupa instruksi untuk warna dari teks, besar huruf, dan lain-lain. Setiap atribut
memiliki pasangan nama dan nilai (value), dan ditulis dengan name_atribut=”value”.
Value diapit tanda kutip, boleh menggunakan tanda kutip satu (‘) atau dua (“).
1. Format penulisan atribut :

<Tag_pembuka nama_atribut="value"> Objek </Tag_penutup>

2. Format penulisan atribut lebih dari dua :

<Tag_pembuka nama_atribut1="value1" nama_atribut2="value2"
> Objek </Tag_penutup>
contoh : <body bgcolor="blue" text="white">

Gambar 3.2 Atribut pada HTML

3.2.1 Jenis – Jenis Atribut HTML

Tidak semua atribut dapat ditulis di semua tag HTML, ada beberapa atribut
yang hanya bisa digunakan pada tag-tag tertentu saja. Ada juga yang bisa digunakan
di semua tag. Berikut beberapa jenis atribut,
 12

1. Atribut Global, adalah atribut yang bisa digunakan di semua tag HTML.
Contohnya yaitu id unutk id unik elemen, class untuk memungkinkan CSS dan
JavaScript mengakses elemen, style untuk menambahkan gaya CSS, dan title
untuk judul elemen terkait.
2. Atribut Event, adalah atribut global yang bisa digunakan di semua tag HTML, tapi
nilainya berupa kode JavaScript. Contohnya yaitu onclick untuk elemen diklik,
onchange untuk nilai elemen berubah, onkeypress untuk tombol ditekan, onkeyu
untuk tombol dilepas setelah ditekan, onload untuk elemen dimuat, onscroll untuk
ketika scrolling dan masih banyak lainnya.
3. Atribut khusus, adalah atribut yang hanya bisa digunakan pada tag-tag tertentu
saja. Contohnya yaitu src ( <audio>, <img>, <video>, <source>, <track>) untuk
URL media, Alt ( <img>, <input> ) untuk teks alternatif jika elemen gagal dimuat,
colspan( <td>, <th> ) untuk jumlah kolom sel tabel yang harus diisi, href ( <a>,
<link> ) untuk URL halaman yang dituju, rel ( <a>, <link> ) untuk menentukan
hubungan antar dokumen, dan lainnya.

3.3 Element Pada HTML

Element adalah isi dari tag yang berada diantara tag pembuka dan tag penutup.
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Element tidak
hanya berisi text, namun juga bisa tag lain.

Gambar 3.3 Element pada HTML

3.3.1 Jenis – Jenis Element

Element pada HTML juga dibedakan menjadi beberapa jenis, diantaranya
1. Jenis Element berdasarkan cara penulisan
 13

a. Elemen Normal, cara penulisan untuk elemen normal adalah dimulai dari tag
pembuka dan diakhiri dengan tag penutup.
Contoh : <nama_tag>isi konten</nama_tag>
b. Elemen tunggal/elemen kosong, yang biasa disebut dengan void element
memiliki cara penulisan yang berbeda. Pada jenis elemen ini tidak ada tag
penutup. Sebagai gantinya, ditambahkan slash pada akhir tag pembuka.
Contoh: <img src="/wp-content/themes/itk/img/header.png" />
2. Jenis Element berdasarkan Tampilannya
a. Block-level elemen, tampilannya selalu dimulai dari baris baru. Secara default,
elemen ini tidak akan berada disamping elemen sebelumnya tapi akan berada di
bawah elemen sebelumnya. Contohnya elemen <h1> dan <p>.
b. Inline elemen artinya elemen sebaris. Elemen ini tidak dimulai dengan baris
baru tetapi akan melanjutkan disamping elemen lain yang juga inline elemen.
Contohnya adalah elemen <b> dan <i>.
3. Elemen Bersarang atau Nested Element
Elemen bersarang atau biasa juga disebut dengan nested element adalah elemen
yang didalamnya terdapat elemen lain. Dimana penulisannya harus terstruktur dan
tidak boleh tumpang tindih.
Contoh :

<nama_tag_1>
<nama_tag_2>konten</nama_tag_2>
</nama_tag_1>
 BAB 4
LIST DAN TABEL

4.1 List pada HTML

List atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam
HTML yang digunakan untuk menampilkan data secara berurutan ke bawah. Dalam
HTML penilisan list menggunakan tag <li>. dalam membuat list pada HTML ini
terdapat tiga jenis tampilan list yang bisa di gunakan yaitu ordered list, unordered list,
dan description list.

4.1.1 Ordered List

Daftar yang berurutan umumnya dipakai untuk item-item yang saling
berhubungan satu sama lain, atau untuk menuliskan langkah-langkah atau prosedur
dari kegiatan terntentu yang tidak dapat dilakukan secara acak. Untuk membuat suatu
daftar yang berurutan dalam dokumen HTML, digunakan tag <ol> (ordered list), yang
berpasangan dengan tag </ol>.

Gambar 4.1 Ordered List

Tag <ol> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan
</ol> berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir. Masing-
masing item di dalam daftar harus dibuat menggunakan tag <li> (list item, yang
kemudian perlu ditutup dengan tag </li>. Adapun atribut untuk tag <ol> adalah “type”
yang menunjukan jenis penomorannnya. Secara standart, tipenya adalah menggunakan
penomoran 1, 2, 3, 4 dst. Selain tipe default, tipe lain yang dapat digunakan untuk
keperluan penomoran dalam suatu list adalah ,
 15

Tabel 4.1 Tipe penomoran ordered list

Tipe Keterangan
A Membuat list dengan penomoran berupa karakter A, B, C, dst
A Membuat list dengan penomoran berupa karakter a, b, c, dst
I Membuat list dengan penomoran berupa karakter I, II, III, dst
I Membuat list dengan penomoran berupa karakter i, ii, iii, dst

4.1.2 Unordered List

Daftar yang tidak berurutan adalah daftar yang item-itemnya dapat diubah
posisinya secara acak. Daftar seperti ni tidak menggunakan penomoran seperti di atas,
melainkan hanya dengan menggunakan tanda atau symbol tertentu, misalnya gambar
kotak atau bulat (bullet). Untuk membuat suatu daftar yang tidak berurutan dalam
dokumen HTML, digunakan tag <ul> (unordered list), yang berpasangan dengan tag
</ul>.

Gambar 4.2 Unordered List

Tag <ul> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan
</ul> berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir. Adapun
atribut untuk tag <ul> adalah “type” yang menunjukan jenis tanda untuk setiap item
berupa tanda bulatan untuk defaultnya..
Selain tipe default, tipe lain yang dapat digunakan untuk keperluan unordered list
adalah :

Tabel 4.2 Penomoran Unordered List

Tipe Keterangan Contoh Penulisan
Disk Tanda bulatan hitam <ul type=”disk”>
 16

Circle Tanda bulatan putih <ul type=”circle”>

Square Tanda kotak <ul type=”square”>

4.1.3 Description List

Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu.
Ada tiga tag yang digunakan untuk membuat description list:
1. <dl> Definition List yang artinya daftar definisi.
Elemen <dl> harus digunakan ketika ingin memasukan definisi istilah dalam
dokumen, sering digunakan dalam glosarium untuk mendefinisikan banyak istilah
dan juga digunakan dalam dokumen ketika penulis ingin menjelaskan suatu istilah
lebih detail.
2. <dt> Definition Term yang artinya istilah definisi.
Elemen <dt> digunakan ketika ingin memberikan nama dalam daftar definisi,
elemen ini mengandung data satu baris
3. <dd> Definition Description yang artinya definisi deskripsi.
Elemen <dd> berisi data yang menjelaskan istilah definisi, Data ini dapat berupa
satu baris atau bisa lebih dari satu baris.

Gambar 4.3 Description List

4.2 Tabel pada HTML

Tabel merupakan struktur yang digunakan untuk menampilkan informasi
dalam bentuk baris dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag
<table> untuk membuat table, <tr> untuk membuat baris dan <td> untuk membuat
kolom. Tabel terdiri dari 4 unsur utama yaitu baris, kolom, sel, dan garis.
 17

Gambar 4.4 Susunan Tabel

Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:
1. Tag <table> untuk membungkus tabelnya
2. Tag <thead> untuk membungkus bagian kepala tabel
3. Tag <tbody> untuk membungkus bagian body dari tabel
4. Tag <tr> (tabel row) untuk membuat baris
5. Tag <td> (table data) untuk membuat sel
6. Tag <th> (table head) untuk membuat judul pada header
Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td>.
Sementara tag yang lain adalah tambahan (opsional), boleh digunakan boleh tidak.

4.2.1 Atribut pada Tabel

Atribut dalam konteks tabel HTML mengacu pada properti atau nilai yang
dapat diberikan kepada elemen-elemen dalam tabel untuk mengatur atau menyediakan
informasi tambahan. Berikut beberapa atribut
1. Atribut Elemen Tabel
a. Width =panjang(lebar table, pixel atau persen)
b. Height =panjang(tinggi table, pixel atau persen)
c. Border =pixel(tebal garis tepi)
d. Cellspacing =pixel(spasi antar sel)
e. Cellpadding =pixel(spasi di dalam sel)
f. Align =[left|center|right](perataan table)
g. Bgcolor =warna(warna latar belakang table)
2. Atribut Table Row
a. Align =[left|center|right](perataan sebaris sel secara horizontal)
b. Valign =[top|middle|bottom](perataaan sebaris sel secara vertical)
c. Bgcolor =warna(warna latar belakang baris)
 18

3. Atribut Tabel Data

a. Align =[left|center|right](perataan horizontal)
b. Width =[top|middle|bottom](perataan vertical)
c. Height =pixel(tinggi sel, pixel atau persen)
d. Bgcolor =warna(warna latar belakang sel)

4.2.2 Menambahkan Warna dan Menggabungkan Sel dan Baris

Dalam pembuatan tabel di HTML, kita dapat menambahkan warna maupun
mengatur sel dan baris nya. Lebih jelasnya seperti berikut
1. Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut
bgcolor di dalam tag <td> (untuk sel) atau <tr> (untuk baris).

Gambar 4.5 Contoh menambahkan warna pada sel dan baris

Gambar 4.6 Hasil pewarnaan

2. Menggabungkan sel dan baris
Ada kalanya kita membuat table dengan menggabungkan baris, ataupun kolom.
Berikut ini contoh tabel yang menggabungkan baris :
 19

Tabel 4.3 Contoh menggabungkan baris

Negara
Benua
Arab Saudi

India
Indonesia

Singapura
ASIA

Berikut ini contoh tabel yang menggabungkan kolom :

Tabel 4.4 Contoh menggabungkan kolom

Benua EROPA
Negara Belanda Italia Inggris Jerman

Untuk membuat table seperti di atas, maka Tabel Atribut Data yang digunakan
adalah sebagai berikut, Rowspan =angka(baris yang di span oleh sel) dan Colspan
=angka(kolom yang di span oleh sel) Jadi untuk menggabungkan 4 baris seperti table
di atas adalah , <td rowspan=4> …….</td>, Sedangkan untuk menggabungkan 4
kolom seperti table di atas adalah , <th colspan=4> …….</th>.
 BAB 5
HYPERLINK

5.1 Pengenalan Hyperlink

Hyperlink adalah metode yang digunakan untuk menghubungkan halaman satu
dengan halaman lainnya yang bisa ditemukan dalam artikel, presentasi, Word, dan
sejenisnya. Biasanya, Hyperlink dibuat dalam bentuk teks atau kata kemudian
ditautkan dengan suatu link atau lokasi halaman yang dituju. Selain berbentuk teks
atau kata, hyperlink bisa juga berupa gambar, video, dan lain sebagainya yang
ditautkan dengan link atau lokasi halaman yang dituju. Saat ini, hyperlink juga dapat
dikreasikan menjadi berbagai bentuk, misalnya tombol call to action hingga animasi
agar semakin menarik.
Jadi pada intinya, hyperlink merupakan penghubung antara halaman, baik
halaman online atau offline internal maupun eksternal ke halaman lain. Hyperlink juga
menjadi cara untuk melakukan shortcut ke halaman lain dengan menyimpannya
pada network server. Kehadiran hyperlink ini juga dapat membantu untuk menaikkan
nilai search engine optimization pada web agar menambah traffic.

Gambar 5.1 Penggunaan Hyperlink di HTML

5.2 Fungsi Hyperlink

Hyperlink berfungsi untuk memudahkan pengunjung untuk membuka hal lain
yang masih berkaitan pada halaman tersebut. Singkatnya, hyperlink merupakan
semacam shortcut yang memudahkan mobilitas pembaca dalam mengeksplor
 21

informasi. Biasanya, sebuah teks yang menggunakan hyperlink akan berwarna biru
terang dengan underline pada kata yang disisipkan link. Namun, warna teks yang
diberi hyperlink tersebut juga masih dapat diubah atau disesuaikan oleh
pemiliki website. Bila pembaca mengarahkan kursor pada teks hyperlink dan
mengkliknya, maka akan langsung diarahkan ke halaman baru.
Seiring perkembangan zaman, hyperlink juga kini berfungsi untuk
meningkatkan SEO pada web dan artikel. Karena penggunaan hyperlink di web bisa
menjadi internal atau external link.
1. Internal Link adalah link yang menuju ke domain atau halaman web itu sendiri.
Biasanya digunakan untuk menggabungkan halaman yang satu dengan yang
lainnya dalam satu website atau domain.
2. External Link adalah link yang menuju domain lain. Digunakan untuk membuka
web atau domain lain. Misalnya seperti: membuka halaman Instagram, membuka
chat WhatsApp, membuka youtube, dan sebagainya.

5.3 Jenis – Jenis Hyperlink

Terdapat 3 jenis hyperlink yang bisa ditemukan dalam website, antara lain
1. Absolute address
Absolute address adalah shortcut yang digunakan untuk menghubungkan halaman
dan hanya bisa dibuka bila perangkat memiliki koneksi internet.
Pada hyperlink jenis ini, hyperlink ditulis berupa full internet address URL yang
meliputi protocol, network location, path, dan nama file. Hyperlink ini dapat
ditemukan pada situs web yang mencantumkan link pada dokumen atau tulisannya.
2. Relative address
Hampir sama dengan yang sebelumnya, relative address merupakan penghubung
antara sebuah halaman pada alamat URL, namun tanpa menyebutkan network
location atau protokolnya. Jadi, jenis hyperlink ini hanya menampilkan
nama file dan path yang dituju. Biasanya sering digunakan pada jurnal daring atau
makalah yang ada di internet.
3. Link to section
Jenis hyperlink ini biasa digunakan untuk menghubungkan file satu
dengan file lainnya dalam bentuk offline atau tidak terkoneksi dengan internet.
 22

Biasanya, link to section seringkali ditemukan dalam Ms. Excel, Ms. Powerpoint,
dan Ms. Word.

5.4 Cara Membuat Hyperlink

Berikut adalah cara membuat hyperlink. Dalam suatu halaman web,
membuat hyperlink dapat dilakukan dengan cara membuat kode HTML dengan rumus
sebagai berikut:
"<a href=”URL situs”>Text yang diinginkan</a>"
Sebagai contoh:
<a href=”https://www.instagram.com/naiyaaslsbila”>Instagram Naiya
</a>
Maka, hyperlink itu akan membawa pengunjung menuju ke halaman profil
Instagram naiya di web Instagram.com

5.5 Atribut – Atribut untuk Link

Selain atribut href terdapat juga beberapa atribut yang sering ditambahkan
pada link, seperti: target, title, rel, style, dan lain-lain.
1. Atribut target
Atribut ini berfungsi untuk menentukan target dari pembukaan link. Ada beberapa
target yang biasanya digunakan seperti, _blank akan membuka link pada jendela
atau tab baru, self akan membuka link pada halaman itu sendiri (default target),
_top menuju bagian paling atas pada halaman, _parent membuka link pada frame
induk, dan nama-frame akan membuka link pada <iframe> dengan nama tertentu.
2. Atribut title
Atribut ini berfungsi untuk membuat tooltips. Tooltips adalah informasi tambahan
yang akan tampil saat link disentuh pointer atau saat kita menahan tap di hp.
3. Atribut style
Warna default link adalah biru, ini bisa kita ubah menggunakan atribut style dan
dengan style CSS. Warna bisa kita berikan untuk teks dan latar belakang
(background). Caranya tambahkan atribut style kemudian isi dengan style css
untuk mengubah warna, yakni color (untuk teks) dan background-color (untuk
latar).
 BAB 6
CSS ( CASCADING STYLE SHEET )

6.1 Pengenalan CSS

CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus,
cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari
suatu kode ke kode lain yang saling berhubungan. Jadi kalau di tulis lengkap dalam
bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan
saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.
CSS biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam
bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari
tampilan visualnya di situs. CSS dibuat dan dikembangkan oleh W3C (World Wide
Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak
dilengkapi dengan tags yang berfungsi untuk memformat halaman. Anda hanya perlu
menulis markup untuk situs.
Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu
menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font,
warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan
proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk
menyelesaikan masalah ini. HTML dan CSS memiliki keterikatan yang erat. Karena
HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua
aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini
harus berjalan beriringan.

Gambar 6.1 Cascading Style Sheet

 24

6.2 Penulisan CSS Pada HTML

Ada tiga cara yang bisa diterapkan untuk menggunakan CSS pada web. Cara
yang pertama adalah dengan membuat CSS langsung didalam satu file HTML kita
internal dan inline style sheet. Cara yang ketiga adalah dengan cara memanggil CSS
tersebut dari file CSS tersendiri (external style sheet). Cara pemakaian CSS ada 2 cara.
Cara yang pertama adalah dengan menggabungkan CSS langsung ke dalam satu file
markup (internal), cara yang kedua adalah dengan cara memanggil CSS tersebut
(eksternal)

6.2.1 Inline CSS

Inline CSS adalah kode CSS yang ditulis pada elemen HTML menggunakan
atribut style. Contoh berikut ini kita akan memberikan warna background pada body,
h2 (heading) dan p (paragraf).

<html>
<head>
<title>Contoh Inline CSS</title>
</head>
<body style="background-color:yellow;">
<h2 style="background-color:red;">Ini adalah Judul</h2>
<p style="background-color:green;">Ini sebuah paragraf.</p>
</body>
</html>

6.2.2 Internal CSS

Internal CSS adalah kode CSS yang ditulis pada bagian <head> menggunakan
tag <style>. Internal CSS sering disebut juga dengan Embeded CSS. Internal CSS
dalam HTML memungkinkan kita untuk mendefinisikan gaya secara langsung di
dalam dokumen HTML menggunakan tag <style> di dalam bagian <head>. Metode
ini memungkinkan penentuan gaya khusus untuk elemen-elemen di dalam file HTML
tersebut tanpa menggunakan file CSS eksternal. Contohnya

<html>
<head>
 25

<title>Internal CSS</title>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<body>
<h1>Ini adalah judul</h1>
<p>Ini contoh paragraf</p>
</body>
</html>

6.2.3 Eksternal CSS

Eksternal CSS adalah kode CSS yang ditulis terpisah (file berbeda) dengan
kode HTML. Dengan ekternal CSS, file CSS ditulis terpisah dan disimpan dalam
ektensi .css. Nantinya file CSS tersebut di import dibagian <head> dalam HTML.
Sebagai contoh, buatlah sebuah file style.css kemudian tuliskan kode CSS berikut

body {
background-color:yellow;
}
h1 {
color:red;
}
p {
color:blue;
}

Selanjutnya, file CSS diatas harus diimport ke dalam HTML. Terdapat 2 cara
untuk meng-import file kode CSS ke dalam HTML. Pertama menggunakan tag <link>
<link rel="stylesheet" type="text/css" href="style.css">. Kedua menggunakan
@import seperti <style type="text/css"> @import "style.css";</style>.

6.3 Selector Pada CSS

CSS selectors adalah mekanisme dalam memilih dan menargetkan elemen-
elemen HTML tertentu dalam dokumen web untuk diberi style menggunakan CSS.
 26

Dengan kata lain, selectors memungkinkan kita berkomunikasi langsung dengan

elemen-elemen HTML, memberi tahu browser bagian mana yang harus diberi style
khusus.

6.3.1 Universal Selector

Dalam CSS, universal selector direpresentasikan dengan tanda bintang (*) dan
digunakan untuk menargetkan semua elemen yang ada dalam dokumen HTML.
Meskipun tampak berguna, layaknya element selector, penggunaan universal
selector sangat tidak disarankan karena akan memberikan style pada semua elemen di
halaman web yang bisa mengakibatkan tampilan tidak diinginkan. Contoh
* {
border: 1px solid grey;
}

6.3.2 Tag Selector

Jenis penyeleksi ini menggunakan nama-nama tag HTML. Pada dasarnya
seluruh element tag visual HTML dapat digunakan sebagai selector. Artinya, pada
setiap halaman HTML, terbuat dari konten yang ditempatkan di dalam tag HTML dan
setiap set tag tersebut mewakili elemen pada halaman. Selektor Tag disbut juga Type
Selector. Selektor ini akan memilih elemen berdasarkan nama tag. Contoh
p {
color: blue;
}

6.3.4 Class Selector

Dalam HTML nantinya akan ada tag-tag html pada umurnya memiliki atribut
class. Saat memilih elemen dengan class tertentu, maka kamu bisa menuliskan karakter
titik (.) kemudian diikuti dengan nama class. Selektor class adalah selektor yang
memilih elemen berdasarkan nama class yang diberikan. Selektor class dibuat dengan
tanda titik di depannya. Contohnya

pink {
color: white;
 27

background: pink;
padding: 5px; }

6.3.5 ID Selector
Salah satu atribut dalam HTML yang dapat digunakan sebagai selector adalah
atribut 'id'. Nantinya, id dari elemen tersebut memiliki sifat yang unik dalam suatu
laman, jadi jenis penyeleksi ini sering digunakan untuk memilih satu elemen unik.
Biasanya, saat memilih elemen dengan id tertentu, maka ditulis dengan karakter hash
(#), kemudian diikuti dengan id elemen. Contoh
#header {
background: teal;
color: white;
height: 100px;
padding: 50px;

6.3.6 Attribute Selector

Selektor atribut adalah selektor yang memilik elemen berdasarkan atribut.
Selektor ini hampir sama seperti selektor Tag. Contoh selektor Atribut
input[type=text] {
background: none;
color: cyan;
padding: 10px;
border: 1px solid cyan;
}
Artinya kita akan memilih semua elemen <input> yang memiliki atribut type='text'.

6.4 Style pada Teks

Properti CSS untuk Text dan nilai dari masing-masing properti CSS untuk
text adalah sebagai berikut

Tabel 6.1 Style pada Teks

Deskripsi / Kegunaan Properti Nilai Properti
Color Mengatur warna dari text Nilai untuk properti ini adalah warna
Direction Mengatur arah dari Text Ltr, rtl
 28

line-height Mengatur jarak baris text Normal, number, length, %

Untuk menambah atau mengurangi
letter-spacing Normal, length
jarak spasi dari karakter text
Mengatur alignment text dalam sebuah
text-align Left, right, center, justify
elemen HTML
text- None, underline, overline,
Menambah dekorasi/hiasan text
decoration line-through, blink
Memberi jarak untuk baris kalimat
text-indent pertama dari text yang ada dalam Length, %
elemen HTML
Digunakan untuk memberi bayangan
text-shadow None, color, length
pada text

6.5 Kelebihan dan Kekurangan CSS

Kelebihan dari penggunaan CSS ini adalah ketika anda memiliki beberapa
halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari
anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu
per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda
cukup merubah satu baris kode css untuk merubah font di semua halaman web dari
arial ke trebuchet. Jadi, keuntungan menggunakan CSS, lebih praktis.
Sedangkan, kekurangan Penggunaan CSS adalah Tidak semua browser
mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web
dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain.
 BAB 7
BOOTSTRAP

7.1 Pengenalan BootStrap

Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton sebagai kerangka
untuk mendorong konsistensi di alat internal. Sebelum Bootstrap, berbagai
perpustakaan yang digunakan untuk pengembangan antarmuka, yang menyebabkan
inkonsistensi dan beban pemeliharaan tinggi.
Bootstrap adalah platform baru yang dikembangkan tim twitter. Pertama kali
muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini
hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa membuat
website yang powerfull mengikuti perkembangan browser. Website yang
menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja
cepat.
Bootstrap juga memudahkan pengaturan website bagi yang kurang mahir
coding atau tidak punya waktu banyak. Sekumpulan javascript dan CSS yang
dibutuhkan untuk banyak sekali widget ada dalam satu file yang terus di update oleh
pengembang. Pemilik website tidak akan lagi disibukkan dengan pengaturan css atau
javascript berlebihan. Mereka hanya perlu menentukan gadget atau elemen apa yang
ingin ditampilkan dalam bentuk HTML standart bootstrap yang sangat simple.
Misalkan dulu untuk menambahkan menubar di blogspot, maka perlu
menyisipkan file CSS, HTML bahkan JavaScript untuk effect tertentu. Kemudian
ketika ingin menambahkan dropdown menu, maka per widget, paling tidak butuh
menambahkan CSS dan HTML lagi. Belum lagi jika ingin lebih menarik akan
dibutuhkan javascript tambahan. Begitu seterusnya setiap penambahan widget selalu
dibutuhkan banyak kode. Tapi setelah instalasi bootstrap, hanya perlu menambahkan
kode HTML nya saja.
 30

7.2 Struktur dan Fungsi BootStrap

Bootstrap merupakan framework untuk membangun desain web secara
responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan
ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile
device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita
sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila
dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa
beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis
ataupun statis.
Bootstrap adalah modular dan pada dasarnya terdiri dari serangkaian yang
menerapkan berbagai komponen toolkit. Sebuah stylesheet disebut bootstrap.Less
mencakup komponen-komponen stylesheet. Pengembang dapat menyesuaikan
Bootstrap file itu sendiri, memilih komponen yang ingin mereka gunakan dalam
proyek mereka.Penyesuaian yang mungkin sampai batas tertentu melalui stylesheet
konfigurasi pusat. Perubahan lebih mendalam yang mungkin oleh deklarasi kurang.
Penggunaan bahasa stylesheet kurang memungkinkan penggunaan variabel, fungsi
dan operator, penyeleksi bersarang, serta disebut mixin.
Sejak versi 2.0, konfigurasi Bootstrap juga memiliki khusus "Customize"
pilihan dalam dokumentasi. Selain itu, pengembang memilih pada formulir komponen
yang diinginkan dan menyesuaikan, jika perlu, nilai-nilai berbagai pilihan untuk
kebutuhan mereka. Paket kemudian dihasilkan sudah termasuk style sheet CSS pre-
built.
Sistem grid dan desain responsif datang standar dengan 1170 pixel lebar, tata
letak jaringan. Atau, pengembang dapat menggunakan variabel-lebar tata letak. Untuk
kedua kasus, toolkit memiliki empat variasi untuk menggunakan resolusi yang berbeda
dan jenis perangkat: ponsel, portrait dan landscape, tablet dan PC dengan resolusi
rendah dan tinggi.Setiap variasi menyesuaikan lebar kolom.

Gambar 7.1 BootStrap

 31

7.3 Fitur – Fitur Pada BootStrap

Seperti framework – framework lainnya, BootStrap juga memiliki beberapa
fitur yang dapat digunakan untuk membuat sebuah tampilan web dengan mudah,
diantaranya yaitu
1. css/bootstrap.css berisi style dasar (reset, layout, typography, button) bawaan
bootstrap.
2. ss/bootstrap-responsive.css berisi setting responsive desain. Kita bisa memakainya
bersama bootstrap.css untuk membuat style bootstrap menjadi responsive.
3. css/bootstrap-min.css
4. css/bootstrap-responsive-min.css versi compressed dari bootstrap.css dan
bootstrap-responsive.css
5. img/glyphicons-halflings.png
6. img/glyphicons-halflings-white.png, adalah icon yang digunakan pada bootstrap
dengan teknik spriting.
7. js/bootstrap.js
8. js/bootstrap-min.js adalah javascript untuk mengaktifkan berbagai fitur keren
bawaan bootstrap.

7.4 Kelebihan dan Kekurangan BootStrap

Karna begitu banyaknya yang menggunakan BootStrap untuk membuat
tampilan web, tentu saja BootStrap memiliki banyak kelebihan yang mempermudah
pengguna, tetapi juga tidak dipungkiri BootStrap juga memiliki beberapa kekurangan.
1. Kelebihannya yaitu dibangun menggunakan less, sebuah teknologi CSS yang
sederhana dan mudah untuk digunakan, less juga menawarkan lebih banyak
kekuatan dan fleksibilitas dari CSS pada umumnya, dengan less, pengembang
dapat mengakses dengan mudah informasi dan fungsi warna, variabel, dan operasi
penggunaan.
2. Kekurangan nya yaitu minim gambar karena memanfaatkan CSS3, belum mampu
memberikan tampilan yang sesuai di semua browser, membuat kita menjadi kurang
kreatif karena terpaku dengan coding yang dikembangkan oleh developer.
 BAB 8
UI DESIGN

8.1 Pengenalan UI Design

UI (User Interface) adalah bagian visual dari website, aplikasi, software, atau
hardware yang menentukan bagaimana seorang pengguna berinteraksi dengan produk
tersebut. User interface design sendiri menggabungkan konsep desain visual, desain
interaksi, dan infrastruktur informasi menjadi satu dengan tujuan untuk meningkatkan
kemudahan penggunaan sebuah produk. User Interface (UI) adalah desain antarmuka
yang berfokus pada keindahan suatu tampilan, misalnya dengan menentukan desain
dari layout dan logo, melakukan pemilihan warna yang tepat dan melakukan hal-hal
lainnya yang dapat membuat tampilan website atau aplikasi menjadi semakin menarik,
sehingga pengguna pun betah untuk berlama-lama dalam website ataupun aplikasi
tersebut. Secara teknis, empat komponen dasar pembentuk user interface adalah:
1. Tata letak, penempatan elemen UI yang digunakan
2. Warna, warna dari desain antar muka secara umum
3. Tipografi, kombinasi huruf yang digunakan di user interface
4. Grafik, ikon yang digunakan sebagai ilustrasi penggunaan system

Gambar 8.1 UI Design

8.2 Jenis – Jenis UI Design

Jenis-jenis user interface dilihat dari wujudnya berupa hardware ataupun
software, jika dalam wujud hardware user interface adalah berupa keyboard, mouse,
 33

camera, monitor, speaker, microphone, dan juga wujud dari device lainnya, sedangkan
user interface dalam wujud software adalah sebagai berikut

8.2.1 Command Line Interface

Command line interface (CLI) adalah jenis user interface di mana pengguna
harus mengetikkan perintah untuk berinteraksi dengan perangkat atau aplikasi.
Umumnya, tipe UI tersebut jarang ditemui untuk produk yang menyasar pengguna
awam. Sebab, kebanyakan perangkat dan aplikasi menggunakan graphical user
interface karena lebih mudah dioperasikan pengguna secara umum. Walau demikian,
command line interface tetap digunakan di perangkat dan program tertentu, seperti
Command Prompt Windows dan Terminal Linux. Kedua program tersebut biasanya
digunakan dalam pengelolaan jaringan dan web hosting yang fokus pada fungsi
dibanding tampilan.
Keunggulan command line interface adalah kinerjanya yang sangat ringan
karena berupa baris tulisan saja. Meski begitu, pengguna CLI harus hafal perintah-
perintah yang bisa digunakan di sebuah program. Pasalnya, kesalahan penulisan
membuat perintah tidak dapat dijalankan.

8.2.2 Graphical User Interface (GUI)

Graphical user interface adalah jenis user interface yang memungkinkan Anda
berinteraksi dengan objek visual, termasuk tombol, menu, dan tab, untuk mencapai
tujuan tertentu. Sebagian besar perangkat dan aplikasi menggunakan GUI karena
kemudahan penggunaannya. Misalnya, pengguna komputer Windows cukup
mengarahkan kursor dan klik tombol Start untuk menampilkan daftar aplikasi.
Selain mudah untuk dioperasikan, hasil dari sebuah tindakan di graphical user
interface bisa pengguna lihat. Dengan demikian, pengguna awam pun bisa dengan
cepat memahami dampak interaksi dengan masing-masing elemen UI. Namun, GUI
bisa membingungkan penggunanya apabila tidak ditata dengan baik. Misalnya, sebuah
website yang menampilkan banyak menu sekaligus, sehingga pengunjung harus
mencari menu yang mereka butuhkan.
 34

8.2.3 Menu-Driven Interface

Menu-driven interface adalah GUI yang bergantung hanya pada rangkaian
menu dalam pengoperasiannya. Masing-masing menu mengarahkan pengguna ke
halaman lain yang berisi menu lanjutan atau tujuan yang ingin dicapai pengguna.
Contoh umum menu-driven interface adalah menu pengaturan di smartphone Anda.
Ketika klik menu tersebut, Anda akan menemukan submenu yang berisi pengaturan
berbagai fitur perangkat, termasuk suara, tampilan, dan jaringan.
Layaknya GUI, menu-driven interface mudah dipahami pengguna. Hanya saja,
jenis user interface tersebut bisa merepotkan pengguna yang ingin melakukan tindakan
sederhana. Misalnya, pengguna harus melalui beberapa halaman menu untuk
mengecilkan ukuran tulisan di smartphone-nya.

8.2.4 Form-Based Interface

Form-based interface berupa formulir untuk diisi pengguna. Jenis user
interface ini umumnya merupakan bagian dari tipe UI lainnya, contohnya GUI di
halaman log in dan sign up website atau aplikasi.
Namun, ada juga aplikasi dan website yang menggunakan form-based interface
saja. Contohnya adalah Google Forms yang tujuannya memang untuk membuat dan
menampilkan formulir.

8.2.5 Touch User Interface

Touch user interface adalah GUI yang menggunakan input sentuhan layar.
Dibandingkan dengan GUI yang menggunakan input mouse dan keyboard, touch user
interface lebih praktis. Contohnya, pengguna cukup menyentuh sebuah menu alih-alih
harus mengarahkan kursor terlebih dahulu.
Kelebihan lainnya, touch UI mendukung beberapa jenis gestur sentuhan.
Misalnya, Anda bisa menyentuh ikon aplikasi selama beberapa waktu untuk
menampilkan opsi terkait aplikasi tersebut. Selain itu, Anda bisa menggunakan dua
jari untuk memperbesar dan mengecilkan halaman website di browser.
 35

8.2.6 Conversational User Interface

Jika pernah menggunakan fitur voice command seperti Google Assistant di
Android atau Siri di iPhone, itu adalah contoh conversational UI. Jenis user interface
tersebut memungkinkan Anda untuk mengoperasikan perangkat dengan mengutarakan
perintah dengan suara Anda. Perintah yang bisa diberikan untuk conversational UI
cukup beragam. Mulai dari yang sederhana seperti menanyakan tanggal hari ini,
hingga yang lebih rumit seperti membuat daftar belanjaan atau pengingat.
Agar bisa memiliki fasilitas conversational UI, perangkat menggunakan
kecerdasan buatan yang dilatih untuk memahami perintah. Tentunya, penggunaan
kecerdasan buatan tidak luput dari tantangan. Contohnya, harus melafalkan perintah
dengan jelas agar fitur voice command bisa tahu keinginan kita. Meski begitu, kualitas
conversational user interface kian diperbarui, sehingga mampu memahami berbagai
konteks dan nada bicara.

8.2.7 Mobile User Interface

Mobile user interface adalah jenis UI khusus untuk perangkat mobile. Oleh
karena itu, elemen-elemennya disesuaikan untuk layar perangkat mobile yang lebih
kecil daripada desktop. Pengoperasian mobile user interface mengutamakan sentuhan
pada layar, seperti touch UI. Namun, terdapat juga dukungan untuk input tambahan,
seperti keyboard.

8.3 Karakteristik UI Design

Di luar sana ada berbagai informasi yang menyarankan teknik dan pola desain
interface yang dianggap baik dan benar. Tetapi kita juga perlu checklist karakteristik
apa saja yang sebenarnya membuat sebuah UI dibilang bagus.
1. Jelas
Memiliki UI yang jelas adalah salah satu elemen penting dalam desain user
interface. Tentunya tujuan dari desain UI adalah agar orang-orang bisa
menggunakan dan berinteraksi dengan sistem dengan mudah. Jika orang-orang
tidak bisa mengerti bagaimana cara menggunakan dan menavigasi website mereka
pasti akan bingung.
2. Ringkas
 36

Tentunya memiliki UI yang jelas akan membuat UX bagus, tetapi juga harus hati-
hati agar penjelasan tidak terlalu panjang. Kalau meletakkan definisi dan
penjelasan pada setiap bagian website, website akan terlihat lebih berantakan.
Kemungkinan besar dengan bertumbuhnya website, interface juga akan terus
berkembang. Kalau meletakkan terlalu banyak penjelasan, kamu nantinya akan
menghabiskan waktu membaca penjelasannya. UI boleh jelas, tapi juga harus
singkat. Kalau memang diperlukan penjelasan, usahakan agar bisa menjelaskannya
dalam satu kalimat. Jika bisa memberi label hanya dengan satu kata itu tentunya
akan lebih baik.
3. Responsif
Pertama, responsive berarti cepat. Interface website harus bisa bekerja dengan
cepat. Kalau perlu menunggu sebuah website loading lama pasti kita juga malas
kan. Jika interface bisa loading dengan cepat tentunya user experience juga akan
semakin baik. Arti lain dari responsive pada UI juga harus bisa memberitahu user
apa yang sedang terjadi di halaman itu. Misalnya, jika seorang user mengklik suatu
tombol di website, apakah mereka sudah berhasil menekan tombol tersebut?
Mungkin text pada tombol bisa menjadi kata “loading” jika mereka sudah berhasil
menekan tombolnya. Bisa juga menggunakan progress bar seperti loading Gmail
sebagai indikator kalau website sedang loading.
4. Konsisten
Dalam mengembangkan user interface, konsistensi pada interface dapat membantu
user untuk mengerti pola. Dari satu interface, mereka bisa mempelajari apa
kegunaan tombol, tabs, icons, dan berbagai elemen yang ada pada interface
tersebut. Jika mereka nantinya menemukan interface yang mirip, mereka bisa
mengerti apa kegunaan elemen-elemen yang ada pada interface tersebut. Dengan
begitu, mereka bisa mengerjakan sesuatu dengan lebih cepat dan mempelajari
fitur-fitur baru dengan lebih cepat.

5. Menarik
Yang dimaksud dengan menarik disini adalah interface menarik untuk digunakan.
Memang kalau bisa membuat UI simple, mudah digunakan, efisien, dan
responsive, kamu sudah memiliki UI yang baik. Tetapi kalau juga bisa
 37

membuatnya menarik tentunya akan lebih asik untuk digunakanka, juga akan
membuat customer lebih senang menggunakan website.
6. Efisien
Agar bisa membuat UI yang efisien perlu tahu dulu apa yang ingin user capai dan
biarkan mereka melakukan langkah-langkahnya tanpa banyak masalah. Kita perlu
mengidentifikasi bagaimana website atau aplikasi bekerja. Apa saja fungsinya dan
apa kegunaannya. Buat interface yang memudahkan user untuk mencapai tujuan
mereka.
7. Intuitif
Tampilan desain UI dikatakan baik jika desain tersebut intuitif. Maksudnya, ketika
mereka menggunakan produk digital kita, mereka tidak perlu berpikir tentang apa
yang mereka lakukan.

8.4 Manfaat UI Design

Keseluruhan, UI design yang baik bukan hanya tentang tampilan visual yang
menarik, tetapi juga tentang menciptakan pengalaman yang efisien, efektif, dan
memuaskan bagi pengguna. Berikut manfaat penting UI Design
1. Peningkatan Pengalaman Pengguna (User Experience)
Desain yang baik memastikan pengguna merasa nyaman dan mudah dalam
menggunakan aplikasi atau situs web. Ini meningkatkan kepuasan pengguna dan
kemungkinan untuk kembali menggunakan layanan yang sama di masa depan.
2. Memudahkan Interaksi
Desain yang terfokus pada pengguna membuat interaksi antara pengguna dan
aplikasi menjadi lebih mudah dipahami. Hal ini mengurangi kesalahan dan
kebingungan pengguna dalam menggunakan platform tersebut.
3. Meningkatkan Retensi Pengguna
UI yang baik membantu mempertahankan pengguna, mengurangi tingkat putus
dan meningkatkan retensi. Pengguna akan lebih cenderung memilih platform yang
menawarkan pengalaman pengguna yang baik.
4. Efisiensi Penggunaan
Desain yang baik dapat meningkatkan efisiensi dalam penggunaan aplikasi atau
situs web. Pengguna dapat menyelesaikan tugas dengan lebih cepat dan mudah.
 38

5. Meningkatkan Konversi
Pada aplikasi bisnis atau e-commerce, UI yang baik dapat meningkatkan tingkat
konversi. Hal ini dapat berupa peningkatan penjualan, langganan, atau interaksi
positif lainnya.
6. Penghematan Waktu dan Biaya
Desain yang baik dapat mengurangi waktu yang dibutuhkan untuk pelatihan
pengguna, mengurangi kesalahan pengguna, dan pada akhirnya menghemat biaya
pengembangan atau dukungan pelanggan.
7. Peningkatan Reputasi dan Branding
UI yang baik dapat meningkatkan citra merek dan reputasi bisnis. Pengalaman
yang positif akan meningkatkan persepsi positif pengguna terhadap merek.
8. Keterlibatan Pengguna yang Lebih Tinggi
Desain yang menarik, intuitif, dan responsif mendorong keterlibatan pengguna
yang lebih tinggi, baik dalam hal interaksi maupun penggunaan secara berulang.
 BAB 9
PROJECT

9.1 Penjelasan Project

Pada project ini, kami mendesign sebuah web project Restaurant yang dimana
disana bermanfaat untuk melihat macam macam menu, dan juga dapat memesannya
secara langsung menggunakan web project tersebut. Kelompok kami beranggotakan :
1. Najwa Azkia Nasution yang bertugas mendesign Logo dan mendesign halaman
satu web pada projek
2. Naiya Salsabila yang bertugas mendesign halamam kedua sampai ketiga web pada
projek
3. Putri Aulya Ayu Syahpitri bertugas mendesig halaman selanjutnya web pada
projek
Berikut ini adalah logo dari projek web kami :

Gambar 9.1 Logo web projek

Alasan kami mendesign logo seperti ini karena kami tidak ingin mengikuti atau
meniru logo - logo restaurant yang sudah ada dan sudah terkenal, kami ingin membuat
logo ini dengan sendiri. Alasan kedua itu adalah huruf N& P merupakan hurup
gabungan dari nama nama anggota yang terlibat dalam pembuatan project, N
merupakan nama dari NAJWA & NAIYA, sedangkan P meruapakan nama dari
PUTRI.
 40

9.2 Fitur Fitur Pada Projek Web

Pada web project Restaurant yang sudah dipilih kami akan menampilkan
beberapa contoh fitur yang akan dibuat dan akan ada pada web tersebut dimana
setiap fitur akan mempunyai kegunaan kegunaanya sendiri. Berikut adalah fitur –
fitur yang ada pada web projek kami :
1. Home

Gambar 9.2 Home

Home adalah bagian tampilan awal pada saat masuk ke web project.
2. Pencarian

Gambar 9.4 Pencarian

Fitur ini akan membantu dalam mencari menu makanan yang ada di Restaurant
dengan mudah, sesuai apa yang kita inginkan.
3. Order

Gambar 9.5 Order

Order adalah bagian dimana kita akan menambahkan orderan yang kita inginkan
dan yang kita mau.
 41

9.3 Tampilan Projek

Berikut adalah tampilan dari projek kami :
1. Tampilan awal web restaurant NP

Gambar 9.6 Tampilan awal web restaurant NP

Pada tampilan awal web restaurant NP Terdapat Logo restaurant Np, tertera Tab
Home, Dishes, About, Menu, Review, Orderdan tertera Menu search, suka, dan
Keranjang.
2. Tampilan menu search restaurant NP
Pada tampilan menu search restaurant NP kita dapat mencari apa yang di inginkan.
Terdapat tombol close untuk menutup menu search.

Gambar 9.7 Tampilan menu search restaurant NP

 42

3. Tampilan menu makanan spesial restaurant NP

Gambar 9.8 Tampilan menu spesial restaurant NP

Pada tampilan menu spesial restaurant NP terdapat beberapa contoh menu

makanan yang di rekomendasikan. Untuk menampilkan dengan cara yang
menarik yaitu dengan cara mengslide kekanan ataupun ke kiri pada menu
makannya.
4. Tampilan button dishes
Tampilan Bott om Dishes Menampilkan beberapa menu makanan yang terdapat
penjelasannya. Terdapat penjelasan berapa bintangnya lalu terdapat tombol order
untuk mengorder makanan dan juga tertera berapa harga dari menu makanan
tersebut

Gambar 9.9 tampilan button dishes

 43

5. Tampilan button about

Gambar 9.10 tampilan button about

Pada tampilan button about terdapat suatu menu makanan yang di

rekomendasikan dan menjelaskan terbuat dari apa apa saja makanan itu, disana
juga terdapat lansung tampilan dapat di antar, berapa lama pelayanannya dan lain
lain.
6. Tampilan button menu
Tampilan button menu menampilkan beberapa menu makanan yang terdapat
penjelasannya, terdapat penjelasan berapa bintangnya, harganya, dan terbuat dari
apa lalu terdapat tombol order untuk mengorder makanan dan juga tertera berapa
harga dari menu makanan tersebut.

Gambar 9.11 tampilan button menu

 BAB 10
PENUTUP

10.1 Kesimpulan
Dalam makalah pemrograman web ini, berbagai konsep dan teknologi yang
menjadi fondasi dalam pengembangan aplikasi web telah dijabarkan. Beberapa
kesimpulan yang diperoleh dari makalah ini antara lain.
3. Pentingnya Kepahaman Terhadap Bahasa Pemrograman, seperti memahami
HTML, CSS, merupakan fondasi utama yang diperlukan dalam pembuatan
aplikasi web yang efektif dan menarik.
4. Peran Framework dan Library, misalnya pemanfaatan library seperti Bootstrap
memberikan kemudahan dalam pengembangan aplikasi web yang responsif dan
dinamis.
5. Kepentingan pengelolaan keamanan aplikasi web dan optimisasi kinerja menjadi
aspek krusial yang harus dipertimbangkan dalam setiap tahap pengembangan.

10.2 Saran
Dari makalah ini, beberapa saran dapat diajukan untuk pengembangan lebih
lanjut dalam pemrograman web seperti terus tingkatkan pemahaman terhadap bahasa
pemrograman dan konsep fundamental pemrograman web untuk memperluas
kemampuan dalam merancang aplikasi yang kompleks dan aman, selain memahami
dasar-dasar bahasa pemrograman, eksplorasi lebih lanjut terhadap berbagai framework
dan library dapat memperkaya keterampilan dalam membangun aplikasi web yang
efisien dan responsive, serta fokus pada keamanan dan kinerja dengan memperhatikan
aspek keamanan aplikasi web dan melakukan optimisasi kinerja secara terus-menerus
guna menjamin pengalaman pengguna yang lebih baik.
 DAFTAR PUSTAKA

https://www.dewaweb.com/blog/pengertian-website-lengkap/
https://www.hostinger.co.id/tutorial/apa-itu-html
https://www.biznetgio.com/news/apa-itu-hperlink
https://www.petanikode.com/html-tag-elemen-atribut/
https://itkoding.com/tag-atribut-elemen-kode-html/
https://freesiswa.blogspot.com/p/041b-pembuatan-list-dan-tabel-pada-html.html
https://www.petanikode.com/html-link/
https://nurhafiza14205081ptibootstrap.blogspot.com/
https://www.eplusgo.com/cara-penulisan-kode-css/
https://www.petanikode.com/css-selektor/
https://www.niagahoster.co.id/blog/user-interface/