MODUL

DASAR PEMROGRAMAN
WEB
Dasar Pemrograman Web
2
MODUL 1

Apa itu Website?

Website adalah sebuah halaman yang menampilkan informasi melalui teks
atau gambar. Website dapat diakses melalui internet dengan menggunakan
browser. Website ini unik karena tiap halaman dapat saling terhubung
dengan menggunakan hypertext links. Umumnya sebuah website memuat
informasi yang disediakan secara perorangan, kelompok, atau organisasi.
Semua informasi yang tersedia pada halaman website disimpan pada server.

Website sudah berkembang sangat pesat. Sekarang, website digunakan tidak

hanya untuk media berbagi informasi atau berita. Layaknya sebuah aplikasi
pada komputer dan handphone kita, website dapat digunakan untuk
komunikasi secara real-time, mendengarkan sebuah lagu bahkan photo
editing sekarang dapat dilakukan pada sebuah website.

Website sendiri merupakan teknologi yang sudah ada sejak 30 tahun silam.
Tim Berners-Lee seorang ilmuwan inggris menemukan World Wide Web
(WWW) pada tahun 1989 ketika ia bekerja di CERN (Conseil Européen pour
la Recherche Nucléaire). Web awalnya dibuat dan dikembangkan untuk
memenuhi permintaan dalam berbagi informasi secara otomatis antar
ilmuwan di universitas dan lembaga di seluruh dunia. Web pertama di CERN
didedikasikan sebagai web pertama di dunia dan pada 2013 CERN merilis “a
project to restore this first ever website: info.cern.ch” untuk mengabadikan
website pertama di dunia. Thank you CERN! Thank you Tim Berners-Lee!

Web Server
Seperti yang sudah disebutkan sebelumnya, informasi pada sebuah website
disimpan pada server. Lantas apa itu server? Banyak yang mengira bahwa
server adalah sebuah komputer dengan performa tinggi dan berukuran

Dasar Pemrograman Web

3
besar. Hal tersebut tidak salah karena biasanya komputer yang dijadikan
server memang harus memiliki performa yang tinggi, karena selain untuk
menyimpan data (HTML, CSS dan JS disimpan di sini), server juga harus
melakukan pekerjaan yang cukup berat, yaitu menanggapi, menyediakan dan
mengelola data yang diminta oleh client. Tidak hanya satu client, bisa ratusan
bahkan ribuan.

Tetapi pengertian server sebenarnya lebih merujuk pada sebuah software

yang dapat menghubungkan sebuah komputer dengan komputer lain. Jadi
penekanan sebuah server bukan pada sebuah komputernya, melainkan pada
rule atau fungsi dari sebuah komputer tersebut.

HTTP Server
HTTP Server merupakan sebuah software yang dapat menerima transaksi
dari HyperText Transfer Protocol dalam suatu website atau biasa disebut
dengan “HTTP Server”. Banyak software yang dapat melakukan tugas
tersebut. Apache adalah salah satunya yang cukup friendly, gratis dan
tersedia untuk seluruh komputer dengan basis UNIX (termasuk MacOS) dan
juga Windows.

DNS Server
Setiap perangkat baik komputer, smartphone, modem, maupun router yang
terkoneksi internet akan memiliki IP Address. Contohnya, komputer yang
menjadi host dari dicoding.com memiliki IP 104.28.20.105, Jika kita
menggunakan IP tersebut untuk mengakses sebuah website, tentu akan
repot. Mengingat kumpulan angka memang dapat seorang manusia lakukan,
tapi bagaimana jika harus mengingat 10 IP? Untuk mengatasinya, dibuatlah
Domain Name System (DNS) yang dapat mengubah/mengarahkan website
melalui sebuah nama domain (“dicoding.com”).

Client
Jika ada penyedia (server) tentu ada pengguna bukan? Perangkat yang
meminta (request) suatu layanan tertentu ke suatu server disebut dengan
client. Browser merupakan salah satu client yang memanfaatkan HTTP
Server dalam transaksi datanya. Jelas, tujuannya adalah untuk mengolah,
menampilkan dan melakukan interaksi dengan dokumen yang disediakan
oleh web server. Layaknya sebuah pelukis, browser mampu menyajikan
informasi dalam bentuk visual yang indah, bersumber dari data mentah yang
diperoleh dari server.

Dasar Pemrograman Web

4
Server-side dan Client-side
Dalam pengembangan web, terdapat istilah “Client-Side” atau “Server-side”.
Hal ini merujuk pada sebuah proses yang dilakukan pada sisi client atau di
sisi server. Untuk client side, semua proses terjadi di sisi pengguna, client
meminta data ke server di mana data yang dikirimkan nanti diolah di sisi
client. Biasanya data yang diolah dalam bentuk HTML, CSS dan JavaScript.

Sedangkan untuk server side, semua proses yang terjadi dilakukan di sisi
server. Server side bertanggung jawab untuk merespon data yang diminta
oleh client side. Biasanya server side merupakan tempat di mana terjadinya
interaksi pada database, sehingga sisi client tidak mengetahui prosesnya dan
memang tidak boleh tahu. Client hanya diberikan sebuah data hasil olahan
dari sisi server.

Anatomi Website
Kita terbiasa dengan tampilan website yang nampak pada browser, tetapi
apakah kalian tahu bagaimana website dapat tampil demikian? Terdapat 3
(tiga) fondasi penting dalam membuat website. Yang pertama adalah HTML,
yakni salah satu markup language, yang digunakan untuk membuat struktur
dan menampilkan konten pada World Wide Web (Website). CSS dan
JavaScript merupakan fondasi lainnya yang digunakan untuk mempercantik
dan menjadikan website lebih dinamis dan interaktif.

Sama seperti halnya tubuh manusia yang disusun dari kerangka tulang,
HTML pada website berperan sebagai kerangka dasar yang digunakan dalam

Dasar Pemrograman Web

5
menampilkan visual pada website. Tapi jika hanya sebatas kerangka, seorang
manusia akan terlihat menyeramkan dan aneh bukan? Maka dari itu untuk
mempercantik tampilannya kita membutuhkan sebuah kulit. Di sinilah peran
CSS. Setelah memiliki kulit dan nampak cantik, selanjutnya kita
membutuhkan sebuah otak dan otot agar seorang manusia dapat dinamis
dan berinteraksi. Dalam website JavaScript-lah yang berperan dalam
membuat website yang dinamis dan interaktif.

Bagaimana Website bekerja?

Ketika kita mengunjungi dicoding.com, tentu kita membutuhkan sebuah
koneksi internet, karena website memerlukan sebuah web server hosting
yang dapat disimpan di mana saja. Ketika kita menuliskan “dicoding.com”
dan menekan enter pada browser, hal yang pertama dilakukan browser
adalah menghubungi Domain Name System (DNS) server untuk
mengarahkan ke alamat server. Kemudian browser mengirimkan sebuah
permintaan (request) agar server mengirimkan salinan dari informasi yang
nantinya ditampilkan pada client (browser). Jika request tersebut berhasil,
maka server menanggapi (response) permintaan tersebut dan mulai
mengirimkan salinan yang dibutuhkan secara berangsur. Browser
menggabungkan bagian-bagian informasi yang diperoleh untuk kemudian
tampil di jendela browser.

Untuk menampilkan informasi pada jendela, browser menggunakan HTML

dan CSS yang dikirimkan dari server. Dengan begitu, informasi dalam bentuk
HTML dan CSS-lah yang dikirimkan server untuk client (browser). Beberapa
halaman website juga membutuhkan informasi ekstra seperti berkas gambar,
suara atau video, tetapi berkas tersebut sebenarnya hanya ditanamkan
(embed) pada HTML. Dan beberapa halaman website sebenarnya juga
membutuhkan JavaScript untuk me-render HTML atau CSS agar dapat
menampilkan informasi secara dinamis.

Dasar Pemrograman Web

6
Apa yang kan Kita Pelajari?
Setelah mengetahui tentang anatomi dan bagaimana website bekerja, pada
kelas ini kita akan banyak mempelajari dasar HTML,CSS, dan JavaScript yang
menjadi inti dari pengembangan website.

Pada modul 2 dan 3 kita akan mempelajari rangkaian penggunaan HTML

pada website. Mulai dari pembuatan berkas HTML, mengenal dan
menggunakan elemen, menampilkan gambar dan penyusunan layout.
Kemudian pada modul 4 dan 5 kita akan mempelajari penerapan styling pada
website untuk mempercantik dan membantu dalam penyusunan website.
Sampai modul ini, kita akan membuat sebuah halaman website yang
menarik.

Pada modul 6, kita akan belajar bagaimana cara menyusun layout yang
responsif menggunakan flexbox. Dan kita juga akan praktek membuat sebuah
layout dasar kalkulator pada website.

Dan JavaScript akan dibahas pada modul 7. Di sana kita akan belajar dasar-
dasar dari bahasa pemrograman tersebut, dari pengenalan syntax,
penggunaan variabel, tipe data yang ada, iterator dll. Di sana kita juga akan
belajar bagaimana cara memanipulasi “DOM” dengan menggunakan
JavaScript sehingga dapat membuat website yang interaktif.

Pada modul 8, kita akan mempelajari cara mengelola sebuah data atau objek
pada local storage ataupun session storage dengan memanfaatkan Web
Storage. Sampai modul ini, kita akan membuat sebuah proyek kalkulator
sederhana dengan memanfaatkan Web Storage untuk menyimpan histori
perhitungannya.

Dan pada akhir pembelajaran, untuk lulus dari kelas ini, terdapat submission
alias proyek akhir yang harus Anda kirimkan. Proyek tersebut akan
kemudian kami review guna menentukan kelulusan Anda.

Sudah siap belajar dasar pemrograman website? Sebelum memulainya mari

kita persiapkan beberapa tools yang akan digunakan pada kelas ini.

Requirement Tools
Untuk mengikuti kelas ini, terdapat tools yang harus kita siapkan
sebelumnya, yaitu Text Editors dan Browser.

Dasar Pemrograman Web

7
Text Editors
Dalam mengembangkan sebuah website, tentu kita akan banyak menuliskan
sebuah kode HTML, CSS maupun JavaScript. Maka dari itu, langkah awal yang
harus kita siapkan adalah sebuah text editor. Beberapa sistem operasi
sebenarnya sudah menyediakan text editor usungannya sendiri. Contohnya
Windows memiliki Notepad, Linux memiliki Text Editors dan Macintosh
memiliki TextEdit. Ketiga aplikasi tersebut bisa kita gunakan untuk belajar
membuat sebuah website, meskipun masih banyak alternatif text editor
lainnya selama masih dapat menyimpan sebuah plain text dengan format
.html.

Perlu kita perhatikan bahwa kode yang kita tuliskan merupakan sebuah plain
text. Sehingga pastikan kita gunakan text editor yang tepat. Jangan pernah
kita gunakan Microsoft Word untuk menuliskan sebuah kode, karena aplikasi
tersebut menampilkan teks yang telah diformat atau biasa disebut dengan
rich text.

Selain text editors usungan sistem operasi yang kita gunakan, berikut tiga
text editor lainnya yang bisa kita gunakan untuk membuat sebuah website.

Visual Studio Code

Visual Studio Editor merupakan sebuah text editor yang dikembangkan oleh
Microsoft. Dalam text editor ini terdapat fitur debugging, Git control, syntax
highlighting, code completion, snippets dan code refactoring. Visual Studio
Code tersedia untuk sistem operasi Windows, Mac maupun Linux, dan
tentunya text editor ini bisa kita gunakan secara gratis. Untuk
mengunduhnya, silakan kunjungi website berikut:
https://code.visualstudio.com/

Dasar Pemrograman Web

8
Atom Editor

Atom merupakan text editor gratis dan juga open source untuk Windows,
Linux dan MacOS. Sama seperti Visual Studio Editor, kedua text editor ini
merupakan editor yang populer digunakan oleh web developer. Untuk
mengunduhnya, silakan kunjungi website berikut: https://atom.io/

Emacs

Editor ini mungkin tidak secanggih opsi-opsi sebelumnya dalam menuliskan

kode HTML, CSS dan JavaScript, namun jika kalian tertarik belajar melalui
proses tanpa fitur yang mempermudah kita dalam menuliskan sebuah kode
tersebut, maka ini merupakan text editor yang cocok untuk dicoba. Emacs
memiliki fitur yang tidak disangka-sangka untuk sebuah text editor, seperti
news reader, kalkulator dan fitur untuk enkripsi/dekripsi file. Emacs tersedia
untuk Windows, Macs maupun Linux secara gratis. Untuk mencobanya,
kalian bisa mengunjungi halaman website berikut:
https://www.gnu.org/software/emacs/

Browser
Seperti yang sudah kita ketahui, untuk mengakses website membutuhkan
sebuah browser. Tentu untuk mengembangkan website juga diperlukan
sebuah browser untuk melihat seperti apa tampak website yang sedang kita
kembangkan. Kita bisa menggunakan browser apa pun untuk mengunjungi
sebuah website, tetapi hasil yang ditampilkan mungkin dapat berbeda pada
setiap browser. Walaupun tampilan pada setiap browser berbeda, pada kelas
ini kalian tidak perlu mencobanya satu per satu untuk melihatnya pada

Dasar Pemrograman Web

9
masing - masing browser. Kami sarankan Anda untuk menggunakan browser
yang populer yaitu Google Chrome atau Mozilla Firefox.

Seperti text editor, sebenarnya sistem operasi sudah mempunyai browser

usungannya masing-masing, misal Microsoft Edge di Windows dan Safari di
MacOS. Akan tetapi kedua browser tersebut tidak memiliki fitur Developer
tools atau Dev Tools seperti yang dimiliki oleh Google Chrome dan Mozilla
Firefox.

Developer Tools atau Dev Tools merupakan suatu alat yang dapat digunakan
untuk melakukan debugging pada sebuah website. Dev Tools ini merupakan
tools yang andal dalam mencari suatu bugs dan memperbaikinya. Bahkan
kita dapat mensimulasikan tampilan website pada sebuah layar smartphone,
sehingga tak perlu repot-repot pakai smartphone untuk melihat
responsibilitas website yang kita kembangkan.

Dasar Pemrograman Web

10
MODUL 2

Introduction HTML
Seperti yang sudah kita ketahui, HTML berperan sebagai struktur untuk
membangun sebuah halaman website. Dan pada modul ini kita akan mencoba
menuliskan struktur HTML, siap? Pada akhir modul, kita akan membuat
halaman website seperti gambar berikut:

Membuat berkas HTML Pertama

Untuk langkah awal tentunya kita membuat sebuah berkas HTML. Kita akan
mencoba membuatnya dari nol dengan menggunakan alat yang ada.
Gunakanlah text editor usungan sistem operasi masing-masing agar kita tahu
bagaimana pengalaman membuat dan menuliskan sebuah kode tanpa
bantuan code completion.

Windows
Langkah awal dalam membuat berkas HTML adalah kita buka Notepad pada
komputer kita. Untuk membukanya bisa melalui beberapa cara, salah satunya
melalui fitur Run yang terdapat pada Windows.

Silakan gunakan kombinasi tombol Windows + R untuk membuka jendela

Run, kemudian tuliskan “notepad”

Dasar Pemrograman Web

11
Kemudian pilih tombol OK, lalu notepad akan muncul pada layar
komputer/laptop kita.

Selanjutnya kita salin dan tempel teks berikut pada notepad.

1. Bandung
2. Kota metropolitan terbesar di Provinsi Jawa Barat,
sekaligus menjadi ibu kota provinsi tersebut.
3.  
4.  
5. Sejarah
6. Kata Bandung berasal dari kata bendung atau bendungan
karena terbendungnya sungai Citarum oleh lava Gunung
Tangkuban Parahu yang lalu membentuk telaga. Legenda yang
diceritakan oleh orang-orang tua di Bandung mengatakan
bahwa nama Bandung diambil dari sebuah kendaraan air yang
terdiri dari dua perahu yang diikat berdampingan yang
disebut perahu bandung yang digunakan oleh Bupati Bandung,
R.A. Wiranatakusumah II, untuk melayari Ci Tarum dalam
mencari tempat kedudukan kabupaten yang baru untuk
menggantikan ibu kota yang lama di Dayeuhkolot.
7.  
8.  

Dasar Pemrograman Web

12
 9. Berdasarkan filosofi Sunda, kata Bandung juga berasal dari
kalimat Nga-Bandung-an Banda Indung, yang merupakan kalimat
sakral dan luhur karena mengandung nilai ajaran Sunda. Nga-
Bandung-an artinya menyaksikan atau bersaksi. Banda adalah
segala sesuatu yang berada di alam hidup yaitu di bumi dan
atmosfer, baik makhluk hidup maupun benda mati. Sinonim
dari banda adalah harta. Indung berarti Ibu atau Bumi,
disebut juga sebagai Ibu Pertiwi tempat Banda berada.
10.  
11.  
12. Geografis
13. Kota Bandung dikelilingi oleh pegunungan, sehingga
bentuk morfologi wilayahnya bagaikan sebuah mangkok
raksasa, secara geografis kota ini terletak di tengah-
tengah provinsi Jawa Barat, serta berada pada ketinggian
±768 m di atas permukaan laut, dengan titik tertinggi di
berada di sebelah utara dengan ketinggian 1.050 meter di
atas permukaan laut dan sebelah selatan merupakan kawasan
rendah dengan ketinggian 675 meter di atas permukaan laut.
14.  
15.  
16. Kota Bandung dialiri dua sungai utama, yaitu Sungai
Cikapundung dan Sungai Citarum beserta anak-anak sungainya
yang pada umumnya mengalir ke arah selatan dan bertemu di
Sungai Citarum. Dengan kondisi yang demikian, Bandung
selatan sangat rentan terhadap masalah banjir terutama pada
musim hujan.
17.  
18.  
19. Wisata
20. Sejak dibukanya Jalan Tol Cipularang, kota Bandung
telah menjadi tujuan utama dalam menikmati liburan akhir
pekan terutama dari masyarakat yang berasal dari Jakarta
sekitarnya. Selain menjadi kota wisata belanja, kota
Bandung juga dikenal dengan sejumlah besar bangunan lama
berarsitektur peninggalan Belanda.
21.  
22.  
23. Farm House Lembang
24. Berada di jalur utama Bandung-Lembang, Farm House
menjadi objek wisata yang tidak pernah sepi pengunjung.
Selain karena letaknya strategis, kawasan ini juga
menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan
dalam bentuk spot swafoto Instagramable.
25.  
26.  
27. Observatorium Bosscha
28. Memiliki beberapa teleskop, antara lain, Refraktor
Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg,
Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss
adalah jenis teleskop terbesar untuk meneropong bintang.
Benda ini diletakkan pada atap kubah sehingga saat teropong

Dasar Pemrograman Web

13
 digunakan, atap tersebut harus dibuka. Observatorium
Bosscha boleh dikunjungi oleh siapa pun, tanpa tiket.
Namun, bagi yang ingin menggunakan teleskop Zeiss, wajib
mendaftarkan diri. Untuk instansi atau lembaga pendidikan,
diberikan jadwal hari Selasa sampai Jumat. Sementara itu,
kunjungan individu dibuka setiap hari Sabtu.

Sehingga sekarang notepad tampak seperti gambar di bawah ini:

Simpan perubahan pada notepad dengan melakukan Save (ctrl + s pada

keyboard), kemudian pilih lokasi penyimpanan yang kita inginkan. Pada
contoh di bawah ini, berkas HTML akan disimpan pada alamat C ->
WebDasar.

Dasar Pemrograman Web

14
Lalu di dalam folder WebDasar. Kita simpan berkas dengan nama
index.html, jangan lupa pada bagian Save as type kita pilih “All Files (*.*)”
untuk tipe penyimpanannya. Setelah itu, tekan tombol Save.

Setelah berhasil menyimpan berkas index.html, berkas tersebut dapat kita

lihat pada folder yang sudah kita tentukan tadi.

Dasar Pemrograman Web

15
Selamat! Dengan begitu kita sudah membuat berkas HTML pertama. Silakan
buka berkas HTML tersebut menggunakan suatu browser (dalam contoh ini,
kita menggunakan Google Chrome), maka hasilnya akan nampak seperti ini:

Informasi yang tampil, nampak berantakan, bukan? Karena standarnya,

browser akan mengabaikan penulisan spasi yang dituliskan secara berulang,
begitu juga dengan line breaks (garis baru). Untuk menuliskan garis baru
pada HTML, kita harus menggunakan sebuah tag <br> yang akan kita bahas
pada modul 3.

Struktur dasar HTML

Website serupa berkas dokumen yang ada seperti koran, majalah atau buku.
Serupa dalam hal memiliki struktur konten layaknya dokumen sehari-hari
yang kita baca. Pada sebuah majalah terdapat judul, gambar yang
ditampilkan dan teks dalam bentuk paragraf. Terkadang, jika konten tersebut
panjang terdapat sub-judul untuk memisahkannya menjadi beberapa bagian.

Judul dan subjudul pada sebuah dokumen menggambarkan suatu hierarki

dari informasi. Misalnya, judul dengan ukuran besar merupakan judul utama
dalam sebuah konten. Kemudian diikuti dengan judul kecil di bawahnya yang
menjelaskan informasi dengan lebih mendetail lagi.

Dasar Pemrograman Web

16
Berkas HTML dasarnya memiliki struktur yang nampak seperti ini:

Kita dapat melihat bahwa struktur dasar HTML dituliskan dari beberapa
elemen. Pada setiap elemen HTML terdapat dua tag, yaitu pembuka tag <>
dan penutup tag </>. Lihat gambar berikut untuk lebih jelasnya.

Di antara tag pembuka dan penutup sebuah elemen, kita dapat meletakkan
sebuah konten. Konten dapat berupa teks ataupun sebuah elemen HTML lain.
Contohnya, elemen <html> memiliki konten yaitu elemen <head> dan juga
elemen <body>. Lalu, elemen <head> memiliki konten berupa elemen <title>
yang di dalamnya memiliki konten berupa teks dari judul halaman yang
ditampilkan. Begitu pula dengan elemen lainnya, sehingga hirarki elemen
HTML nampak seperti ini.

Dasar Pemrograman Web

17
Elemen <html>
Hirarki elemen teratas pada berkas HTML adalah elemen HTML-nya itu
sendiri. Elemen ini digunakan untuk memberitahu kepada browser bahwa ini
merupakan sebuah berkas HTML sekaligus menjadi root dari sebuah
berkasnya itu. Seluruh elemen lainnya tentunya dituliskan pada konten
elemen ini.

Elemen <head>
Elemen <head> pada berkas HTML berfungsi sebagai tempat disimpannya
informasi dari dokumen HTML. Informasi dapat berupa elemen meta, style
atau link. Dan juga pada elemen ini judul dari dokumen HTML didefinisikan
dengan menggunakan elemen <title>. Berikut contoh elemen yang berada
pada konten head:
 <title>
 <style>
 <base>
 <link>
 <meta>
 <script>
 <noscript>

Pada HTML versi 4.01, elemen <head> wajib ada dalam sebuah berkas HTML.
Berikut contoh penulisan sebuah elemen <head> beserta contoh konten di
dalamnya:

Tetapi sejak HTML5, penggunaan <head> dapat dihilangkan. Sehingga

struktur dasar berkas HTML menjadi seperti ini:

Dasar Pemrograman Web

18
Elemen <body>
Seluruh konten yang terdapat pada elemen ini akan ditampilkan pada
halaman website. Maka dari itu, elemen ini digunakan untuk menampung
seluruh konten atau elemen yang ditampilkan ke dalam jendela browser.
Silakan coba tuliskan kode berikut, simpan dalam format HTML dan jalankan
pada browser:

1. <html>
2.     <head>
3.         <title>Ini merupakan judul dari dokumen
HTML</title>
4.     </head>
5.     <body>
6.         <h1>header yang diletakan di dalam elemen body</h1>
7.         <p>Ini merupakan sebuah paragraph yang juga
diletakan pada sebuah konten body, sehingga konten ini
dapat dilihat oleh pengguna pada jendela browser.</p>
8.     </body>
9. </html>

Maka seluruh konten yang dituliskan di dalam elemen <body> akan nampak
pada browser.

Kecuali jika kita ingin menuliskan sebuah notes pada berkas HTML, kita perlu
gunakan commenting tag (<!-- -->). Semua yang dituliskan di antara tag
komentar tidak akan memberikan pengaruh apa pun, termasuk pada
tampilan di jendela browser. Pada HTML, tag komentar dituliskan seperti ini:

Dasar Pemrograman Web

19
Sebuah komentar berguna untuk memberikan label dan mengorganisir
sebuah dokumen yang panjang, terlebih ketika kita bekerja secara tim.

Identifikasi Elemen pada Halaman Website

Setelah mengetahui struktur dasar HTML, mari kita coba terapkan pada
berkas HTML yang sudah kita buat pada langkah awal. Kita buka kembali
berkas HTML tersebut dan berikan elemen dasar pada sebuah berkas HTML.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6.  
7. </body>
8. </html>
9. Bandung
10. Kota metropolitan terbesar di Provinsi Jawa Barat,
sekaligus menjadi ibu kota provinsi tersebut.
11.  
12.  
13. Sejarah
14. Kata Bandung berasal dari kata bendung atau bendungan
karena terbendungnya sungai Citarum oleh lava Gunung
Tangkuban Parahu yang lalu membentuk telaga. Legenda yang
diceritakan oleh orang-orang tua di Bandung mengatakan
bahwa nama Bandung diambil dari sebuah kendaraan air yang
terdiri dari dua perahu yang diikat berdampingan yang
disebut perahu bandung yang digunakan oleh Bupati Bandung,
R.A. Wiranatakusumah II, untuk melayari Ci Tarum dalam
mencari tempat kedudukan kabupaten yang baru untuk
menggantikan ibu kota yang lama di Dayeuhkolot.
15.  
16.  
17. Berdasarkan filosofi Sunda, kata Bandung juga berasal
dari kalimat Nga-Bandung-an Banda Indung, yang merupakan
kalimat sakral dan luhur karena mengandung nilai ajaran
Sunda. Nga-Bandung-an artinya menyaksikan atau bersaksi.
Banda adalah segala sesuatu yang berada di alam hidup yaitu
di bumi dan atmosfer, baik makhluk hidup maupun benda mati.
Sinonim dari banda adalah harta. Indung berarti Ibu atau
Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda berada.
18.  
19.  
20. Geografis
21. Kota Bandung dikelilingi oleh pegunungan, sehingga
bentuk morfologi wilayahnya bagaikan sebuah mangkok

Dasar Pemrograman Web

20
 raksasa, secara geografis kota ini terletak di tengah-
tengah provinsi Jawa Barat, serta berada pada ketinggian
±768 m di atas permukaan laut, dengan titik tertinggi di
berada di sebelah utara dengan ketinggian 1.050 meter di
atas permukaan laut dan sebelah selatan merupakan kawasan
rendah dengan ketinggian 675 meter di atas permukaan laut.
22.  
23.  
24. Kota Bandung dialiri dua sungai utama, yaitu Sungai
Cikapundung dan Sungai Citarum beserta anak-anak sungainya
yang pada umumnya mengalir ke arah selatan dan bertemu di
Sungai Citarum. Dengan kondisi yang demikian, Bandung
selatan sangat rentan terhadap masalah banjir terutama pada
musim hujan.
25.  
26.  
27. Wisata
28. Sejak dibukanya Jalan Tol Cipularang, kota Bandung
telah menjadi tujuan utama dalam menikmati liburan akhir
pekan terutama dari masyarakat yang berasal dari Jakarta
sekitarnya. Selain menjadi kota wisata belanja, kota
Bandung juga dikenal dengan sejumlah besar bangunan lama
berarsitektur peninggalan Belanda.
29.  
30.  
31. Farm House Lembang
32. Berada di jalur utama Bandung-Lembang, Farm House
menjadi objek wisata yang tidak pernah sepi pengunjung.
Selain karena letaknya strategis, kawasan ini juga
menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan
dalam bentuk spot swafoto Instagramable.
33.  
34.  
35. Observatorium Bosscha
36. Memiliki beberapa teleskop, antara lain, Refraktor
Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg,
Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss
adalah jenis teleskop terbesar untuk meneropong bintang.
Benda ini diletakkan pada atap kubah sehingga saat teropong
digunakan, atap tersebut harus dibuka. Observatorium
Bosscha boleh dikunjungi oleh siapa pun, tanpa tiket.
Namun, bagi yang ingin menggunakan teleskop Zeiss, wajib
mendaftarkan diri. Untuk instansi atau lembaga pendidikan,
diberikan jadwal hari Selasa sampai Jumat. Sementara itu,
kunjungan individu dibuka setiap hari Sabtu.

Masukkan seluruh konten pada elemen <body> agar nampak pada browser.

1. <!DOCTYPE html>
2. <html>

Dasar Pemrograman Web

21
 3. <head>
4. </head>
5. <body>
6. Bandung
7. Kota metropolitan terbesar di Provinsi Jawa Barat,
sekaligus menjadi ibu kota provinsi tersebut.
8.  
9.  
10. Sejarah
11. Kata Bandung berasal dari kata bendung atau bendungan
karena terbendungnya sungai Citarum oleh lava Gunung
Tangkuban Parahu yang lalu membentuk telaga. Legenda yang
diceritakan oleh orang-orang tua di Bandung mengatakan
bahwa nama Bandung diambil dari sebuah kendaraan air yang
terdiri dari dua perahu yang diikat berdampingan yang
disebut perahu bandung yang digunakan oleh Bupati Bandung,
R.A. Wiranatakusumah II, untuk melayari Ci Tarum dalam
mencari tempat kedudukan kabupaten yang baru untuk
menggantikan ibu kota yang lama di Dayeuhkolot.
12.  
13.  
14. Berdasarkan filosofi Sunda, kata Bandung juga berasal
dari kalimat Nga-Bandung-an Banda Indung, yang merupakan
kalimat sakral dan luhur karena mengandung nilai ajaran
Sunda. Nga-Bandung-an artinya menyaksikan atau bersaksi.
Banda adalah segala sesuatu yang berada di alam hidup yaitu
di bumi dan atmosfer, baik makhluk hidup maupun benda mati.
Sinonim dari banda adalah harta. Indung berarti Ibu atau
Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda berada.
15.  
16.  
17. Geografis
18. Kota Bandung dikelilingi oleh pegunungan, sehingga
bentuk morfologi wilayahnya bagaikan sebuah mangkok
raksasa, secara geografis kota ini terletak di tengah-
tengah provinsi Jawa Barat, serta berada pada ketinggian
±768 m di atas permukaan laut, dengan titik tertinggi di
berada di sebelah utara dengan ketinggian 1.050 meter di
atas permukaan laut dan sebelah selatan merupakan kawasan
rendah dengan ketinggian 675 meter di atas permukaan laut.
19.  
20.  
21. Kota Bandung dialiri dua sungai utama, yaitu Sungai
Cikapundung dan Sungai Citarum beserta anak-anak sungainya
yang pada umumnya mengalir ke arah selatan dan bertemu di
Sungai Citarum. Dengan kondisi yang demikian, Bandung
selatan sangat rentan terhadap masalah banjir terutama pada
musim hujan.
22.  
23.  
24. Wisata

Dasar Pemrograman Web

22
 25. Sejak dibukanya Jalan Tol Cipularang, kota Bandung
telah menjadi tujuan utama dalam menikmati liburan akhir
pekan terutama dari masyarakat yang berasal dari Jakarta
sekitarnya. Selain menjadi kota wisata belanja, kota
Bandung juga dikenal dengan sejumlah besar bangunan lama
berarsitektur peninggalan Belanda.
26.  
27.  
28. Farm House Lembang
29. Berada di jalur utama Bandung-Lembang, Farm House
menjadi objek wisata yang tidak pernah sepi pengunjung.
Selain karena letaknya strategis, kawasan ini juga
menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan
dalam bentuk spot swafoto Instagramable.
30.  
31.  
32. Observatorium Bosscha
33. Memiliki beberapa teleskop, antara lain, Refraktor
Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg,
Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss
adalah jenis teleskop terbesar untuk meneropong bintang.
Benda ini diletakkan pada atap kubah sehingga saat teropong
digunakan, atap tersebut harus dibuka. Observatorium
Bosscha boleh dikunjungi oleh siapa pun, tanpa tiket.
Namun, bagi yang ingin menggunakan teleskop Zeiss, wajib
mendaftarkan diri. Untuk instansi atau lembaga pendidikan,
diberikan jadwal hari Selasa sampai Jumat. Sementara itu,
kunjungan individu dibuka setiap hari Sabtu.
34.  
35. <body>
36. <html>

Dalam mengidentifikasi konten, carilah konten yang paling penting dan

bungkus konten tersebut dengan elemen <h1>. Jangan khawatir apabila
tampilan tidak sesuai dengan yang kita inginkan, karena nanti kalian akan
mengaturnya ketika sudah mempelajari style sheet.

Dasar Pemrograman Web

23
Setelah itu, kita berikan elemen heading dan elemen paragraf sesuai hasil
identifikasi, sehingga kode nampak seperti ini:

1. <!DOCTYPE html>

2. <html>

3. <head>

4. </head>

5. <body>

6.  

7. <h1>Bandung</h1>

8. <p>Kota metropolitan terbesar di Provinsi Jawa Barat,

sekaligus menjadi ibu kota provinsi tersebut.</p>
9.  

10. <h2>Sejarah</h2>

11. <p>Kata Bandung berasal dari kata bendung atau

bendungan karena terbendungnya sungai Citarum oleh lava

Dasar Pemrograman Web

24
 Gunung Tangkuban Parahu yang lalu membentuk telaga. Legenda
yang diceritakan oleh orang-orang tua di
12. Bandung mengatakan bahwa nama Bandung diambil dari
sebuah kendaraan air yang terdiri dari dua perahu yang
diikat berdampingan yang disebut perahu bandung yang
digunakan oleh Bupati Bandung, R.A. Wiranatakusumah II,
untuk melayari Ci Tarum dalam mencari tempat kedudukan
kabupaten yang baru untuk
13. menggantikan ibu kota yang lama di Dayeuhkolot. </p>

14.  

15. <p>Berdasarkan filosofi Sunda, kata Bandung juga

berasal dari kalimat Nga-Bandung-an Banda Indung, yang
merupakan kalimat sakral dan luhur karena mengandung nilai
ajaran Sunda. Nga-Bandung-an artinya menyaksikan atau
bersaksi. Banda adalah segala sesuatu yang berada di alam
hidup yaitu di bumi dan atmosfer, baik makhluk hidup maupun
benda mati. Sinonim dari banda adalah harta. Indung berarti
Ibu atau Bumi, disebut juga sebagai Ibu Pertiwi tempat
Banda berada.</p>
16.  

17. <h2>Geografis</h2>

18. <p>Kota Bandung dikelilingi oleh pegunungan, sehingga

bentuk morfologi wilayahnya bagaikan sebuah mangkok
raksasa, secara geografis kota ini terletak di tengah-
tengah provinsi Jawa Barat, serta berada pada
19. ketinggian ±768 m di atas permukaan laut, dengan
titik tertinggi di berada di sebelah utara dengan
ketinggian 1.050 meter di atas permukaan laut dan sebelah
selatan merupakan kawasan rendah dengan ketinggian 675
meter di atas permukaan laut.</p>
20.  

21. <p>Kota Bandung dialiri dua sungai utama, yaitu

Sungai Cikapundung dan Sungai Citarum beserta anak-anak
sungainya yang pada umumnya mengalir ke arah selatan dan
bertemu di Sungai Citarum. Dengan kondisi yang
22. demikian, Bandung selatan sangat rentan terhadap
masalah banjir terutama pada musim hujan.</p>
23.  

24. <h2>Wisata</h2>

25. <p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung

telah menjadi tujuan utama dalam menikmati liburan akhir

Dasar Pemrograman Web

25
 pekan terutama dari masyarakat yang berasal dari Jakarta
sekitarnya. Selain menjadi kota wisata belanja,
26. kota Bandung juga dikenal dengan sejumlah besar
bangunan lama berarsitektur peninggalan Belanda.</p>
27.  

28. <h3>Farm House Lembang</h3>

29. <p>Berada di jalur utama Bandung-Lembang, Farm House

menjadi objek wisata yang tidak pernah sepi pengunjung.
Selain karena letaknya strategis, kawasan ini juga
menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan
dalam bentuk spot swafoto Instagramable.</p>
30.  

31. <h3>Observatorium Bosscha</h3>

32. <p>Memiliki beberapa teleskop, antara lain, Refraktor

Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg,
Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss
adalah jenis teleskop terbesar untuk meneropong bintang.
Benda ini diletakkan pada atap kubah sehingga saat teropong
digunakan, atap tersebut harus dibuka. Observatorium
Bosscha boleh dikunjungi oleh siapapun, tanpa tiket. Namun,
bagi yang ingin
33. menggunakan teleskop Zeiss, wajib mendaftarkan diri.
Untuk instansi atau lembaga pendidikan, diberikan jadwal
hari Selasa sampai Jumat. Sementara itu, kunjungan individu
dibuka setiap hari Sabtu.</p>
34.  

35. </body>

36. </html>

Coba save berkas HTML tersebut, kemudian coba buka pada browser.

Dasar Pemrograman Web

26
Selamat, kita sudah berhasil membuat sebuah struktur HTML dasar. Pada
modul selanjutnya, kalian akan lebih dalam mengetahui tentang elemen yang
ada pada HTML.

Berikut catatan penting yang sudah kita pelajari sejauh ini:

Website : Halaman yang menampilkan informasi melalui teks atau gambar.
Website dapat diakses melalui internet dengan menggunakan browser.
Browser : Sebuah perangkat lunak yang dapat menerjemahkan berkas
HTML, CSS dan Javascript yang di dapat dari server untuk ditampilkan dalam
bentuk halaman website.
HTTP Server : Server berperan pada sebuah website sebagai sebuah
software yang dapat menerima transaksi dari HyperText Transfer Protocol.
DNS Server : Server yang dapat mengubah/mengarahkan website melalui
sebuah nama domain.
Client : Perangkat yang meminta (request) suatu layanan tertentu ke suatu
server.
HTML : Salah satu markup language, yang digunakan untuk membuat
struktur dan menampilkan content pada World Wide Web (Website).
CSS : Bahasa yang digunakan untuk mengatur dan mempercantik tampilan
pada website.
JavaScript : Bahasa pemrograman yang digunakan untuk membantu website
menampilkan informasi secara dinamis.
Text Editor : Sebuah perangkat lunak yang digunakan untuk mengelola plain
text. Kode HTML, CSS dan Javascript dituliskan menggunakan perangkat ini.

Dasar Pemrograman Web

27
Plain text : Teks yang tidak terformat. Format teks yang digunakan dalam
menuliskan berkas HTML, CSS dan Javascript.
Rich text : Teks terformat. Format teks yang digunakan ketika kita
menuliskan dengan menggunakan Microsoft Word atau teks editor berbasis
WYSIWYG [What You See Is What You Get].
Element : Sebuah komponen pada HTML yang ditandai dengan tag pembuka
dan penutup.

Dasar Pemrograman Web

28