Pengantar Web Programming

Internet, website, halaman web, dan browser. Apakah Anda memahami

keempat istilah tersebut? Bagi Anda yang sering berselancar di browser
(peramban), tentu tidak asing lagi dengan keempat istilah tersebut. Dalam
pekerjaan di bidang apa pun, termasuk pelajar, mencari informasi di internet
(web) merupakan hal yang sangat mudah dan efektif. Bahkan, saat ini
banyak website yang sangat membantu pekerjaan manusia agar semakin
produktif. Contoh yang sangat dekat dengan kita adalah aplikasi penyusun
jadwal acara dengan Google Calendar. Sudahkah Anda mencobanya?

Pernahkah Anda bertanya-tanya berapa jumlah angka pengguna internet di

Indonesia? Berdasarkan laporan dari Simon Kemp di datareportal.com,
angka yang menunjukkan jumlah pengguna internet di Indonesia mencapai
212,9 juta dari total populasi sebesar 276,4 juta di bulan Januari 2023. Ini
merupakan angka yang sangat tinggi dan kebutuhan akan internet pun
semakin meningkat dari waktu ke waktu.
Bagi Anda yang sedang memasuki dunia web development, tentu levelnya
sudah bukan user biasa lagi. Derajat Anda akan meningkat dan memiliki
kemampuan untuk mengembangkan website yang andal. Website memiliki
peran yang sangat tinggi bagi banyak sektor dalam kehidupan manusia.
Misalnya, dalam sektor bisnis, website dapat meningkatkan angka konsumen
dengan mempromosikan produk atau jasa yang ditawarkan.

Pada beberapa materi berikutnya, Anda akan berkenalan dan memahami

cara internet bekerja, pengertian website dan halaman web, web browser
beserta cara kerjanya, web server, dan anatomi halaman website. Ini
merupakan hal yang penting untuk diketahui oleh para web developer. Jika
tidak demikian, rasanya kurang pas, bukan?

Cara Internet Bekerja

Apakah Anda tahu bagaimana website dapat diakses dan ditampilkan
dengan baik pada user? Sebagian dari Anda pasti memiliki jawaban bahwa
website akan tampil jika kita memiliki alamat website, browser, dan yang
tidak kalah penting adalah koneksi internet. Yap, hal tersebut tidaklah salah.
Jika berpikir lebih dalam, kita akan mengira bahwa ada sesuatu yang terjadi
di belakang dan tidak terlihat secara kasat mata manusia. Bagi yang belum
paham pengertian browser dan website, kita akan mengulasnya pada materi
berikutnya.
Bayangkan bahwa internet merupakan sebuah jalan yang menghubungkan
diri kita pada suatu tujuan untuk mendapatkan sesuatu yang diincar.
Contohnya, jika Anda seorang pelajar yang ingin mendapatkan banyak ilmu,
sekolah adalah jalan untuk mencapai tujuannya. Anda dapat masuk ke kelas
dan diizinkan oleh pihak sekolah untuk menimba ilmu dari seorang guru.

Analogi di atas mirip seperti website. Internet akan memberikan kemampuan

pada user untuk mengirimkan permintaan dan menerima hasil permintaan
(data) pada website. Hal ini terjadi juga pada Anda ketika mengakses website
dicoding.com. Namun, apakah Anda tahu ke mana website mengirimkan
permintaan dan dari mana data dapat diperoleh?

Sebenarnya, hal di atas terjadi karena komputer milik user terhubung dengan
komputer lain yang biasa disebut dengan server. Kedua komputer ini
berkomunikasi melalui sebuah jaringan, baik dengan kabel atau nirkabel.
Server menerima permintaan yang dikirimkan dan menanggapi hasil
permintaannya sehingga website dapat ditampilkan di komputer user.

Dengan konsep yang sederhana, bayangkanlah gambar di bawah

merupakan bagan terhubungnya dua buah komputer untuk berkomunikasi.
Lalu, bagaimana cara satu komputer dapat terhubung pada lebih dari satu
komputer lainnya? Jawabannya, Anda perlu terhubung dengan sejumlah
komputer agar dapat berkomunikasi.
Apakah Anda sudah memahami maksud dari bagan di atas? Satu komputer
yang ingin melakukan koneksi ke banyak komputer perlu menyediakan
koneksi ke sejumlah komputer tersebut. Pada akhirnya, Anda akan menemui
banyak garis-garis yang terhubung dari satu komputer ke komputer lainnya.
Hal yang sama dilakukan juga ketika komputer lain ingin terhubung.

Bagan di atas memang bukanlah cara yang efektif karena perlu mengatur
koneksi untuk masing-masing komputer. Hal ini dapat diselesaikan dengan
sebuah alat yang menghubungkan banyak komputer sekaligus. Perkenalkan,
alat bernama network switch.
Tidak hanya menghubungkan banyak komputer sekaligus, network switch
juga dapat terhubung dengan network switch lain sehingga jaringan yang
terbentuk makin besar.

Interconnection Network
Semakin besar jaringan yang diciptakan, semakin banyak komputer yang
akan terhubung dan berkomunikasi. Komputer Anda dapat terhubung dengan
komputer keluarga, teman, bahkan hingga tetangga-tetangga. Masih banyak
pula saudara-saudara kita di belahan bumi lainnya untuk bisa saling
terkoneksi. Namun, bukankah itu merupakan cara yang tidak efektif, bahkan
benar-benar mustahil jika masih menggunakan koneksi kabel atau nirkabel
bagi user? Oleh karena itu, perkenalkanlah jaringan yang
bernama Interconnection Network atau yang biasa dikenal dengan Internet.

Untuk terhubung dengan semua orang di dunia, kita dapat memanfaatkan

infrastruktur telepon yang biasanya sudah terhubung di rumah-rumah.
Kita perlu menghubungkan komputer dengan infrastruktur telepon
menggunakan alat yang dinamakan modem. Nah, apakah kita sudah dapat
berkirim pesan dengan saudara jauh sekarang? Jawabannya, masih ada
satu langkah lagi, yaitu jaringan kita perlu terhubung ke Internet Service
Provider (ISP).

ISP adalah sebuah perusahaan yang mengelola beberapa router khusus

yang saling terhubung dengan router ISP lainnya. Dengan inilah kita bisa
berkomunikasi, bahkan dengan orang di benua lainnya.

Begitulah cara internet bekerja sehingga kita bisa terhubung dengan orang
lain meskipun dalam kontinen yang berbeda. Dengan ini, Anda sudah
memiliki modal untuk memahami cara website dapat sampai pada perangkat
user.

Berikut adalah beberapa referensi lain yang dapat menambah pengetahuan

Anda.

 “Who invented the Internet? And Why?” oleh Kurzgesagt.

 “How the Internet Works in 5 Minutes” oleh Aaron.
 “How does the INTERNET work? | ICT #2” oleh Lesics.

Pada materi berikutnya, kita akan berkenalan dengan website. Sudah tidak
sabar, kan? Langsung saja beranjak ke materi selanjutnya.

Website dan Halaman Web

Adakah di antara Anda yang masih awam tentang website? Saya jamin Anda
semua sudah mengetahuinya, baik secara sadar maupun tidak sadar.
Buktinya, saat ini Anda sedang mengakses website milik Dicoding untuk
menimba ilmu dalam bidang web development. Meskipun demikian, kita akan
menggali memahami tentang website dan halaman web. Bahkan, kita akan
mengenal perbedaan antara keduanya.
Halaman Web
Halaman web merupakan halaman tunggal yang menampilkan informasi,
baik berupa teks, gambar, maupun media lainnya. Tidak hanya media yang
ditampilkan, halaman web yang dibangun dapat ditambahkan interaktivitas
menggunakan kode (JavaScript).

Berikut adalah contoh salah satu halaman web yang dapat Anda akses.
Halaman web di atas berisi banyak media yang disajikan hingga interaktivitas
pengguna yang banyak. Halaman web yang diakses akan ditampilkan oleh
browser menggunakan beberapa komponen pembangunnya. Kita akan
membahas komponen-komponen ini pada materi Anatomi Website.
Website
Jika sebelumnya Anda belajar halaman web berupa halaman tunggal,
website adalah sekumpulan halaman web yang saling terhubung. Website
bersifat unik karena setiap halaman dapat saling terhubung dengan
menggunakan hipertaut (hyperlink), baik dalam domain yang sama maupun
berbeda.

Umumnya website memuat informasi yang disediakan secara perorangan,

kelompok, atau organisasi. Semua informasi yang tersedia pada halaman
website disimpan pada server. Kita akan membahas mengenai server pada
materi berikutnya.

Perkembangan Aplikasi Web

Website merupakan teknologi yang sudah ada sejak 30 tahun silam. Tim
Berners-Lee, seorang ilmuwan Inggris menemukan World Wide Web atau
disingkat WWW pada tahun 1989 ketika ia bekerja di CERN (Conseil
Européen pour la Recherche Nucléaire). Awalnya, web 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. Selain

itu, pada tahun 2013, CERN merilis “a project to restore this first ever
website: info.cern.ch” untuk mengabadikan website pertama di dunia.
Berterimakasihlah pada CERN dan Tim Berners-Lee!
Gambar di atas adalah website pertama yang dibuat, kita bisa menjelajahinya
di info.cern.ch.

Website sudah berkembang sangat pesat. Sekarang, website tidak hanya

digunakan untuk platform berbagi informasi atau berita. Layaknya aplikasi
pada komputer dan telepon genggam, website dapat digunakan untuk
komunikasi secara real-time, menyetel sebuah rekaman audio, hingga
mengedit foto atau video.

Salah satu aplikasi berbasis web untuk melakukan pengeditan foto,

adalah pixlr.com. Tampilannya seperti gambar berikut.

Web Server
Ketika Anda mencari sesuatu dalam internet, katakanlah search engine
seperti google.com, ada data yang ditampilkan pada Anda berdasarkan hasil
pencariannya. Contoh lain, Anda sedang membeli suatu produk di e-
commerce. Anda perlu mencarinya dalam kolom pencarian pada platform
tersebut dan daftar produk yang relevan akan disajikan untuk Anda.

Namun, tahukah Anda apa yang terjadi di belakang? Bagaimana data dapat
diperoleh dan ditampilkan dalam website? Hal ini termasuk pada halaman
web yang sedang Anda akses. Kita akan membahasnya dalam materi ini.

Siklus Request dan Response

Tahukah Anda bahwa browser dapat menampilkan website dengan baik
karena mendapatkan data dari komputer lain yang biasa disebut dengan
server. Bagi komputer yang mengakses website, kita disebut sebagai client,
atau dalam hal ini adalah browser yang melakukan permintaan data.

Browser akan mengirimkan sesuatu yang bernama request pada server dan
menerima data dalam sesuatu yang bernama response sebagai hasil
tanggapan dari server. Data-data tersebut dapat berupa berkas HTML, CSS,
JavaScript, dan aset-aset lain yang dibutuhkan untuk menampilkan website.
Proses di atas dapat direpresentasikan dalam proses pemesanan makanan
di suatu restoran. Untuk mendapatkan sajian makanan dan minuman
(website), Anda (client/user) perlu melakukan pesanan kepada pelayan
restoran. Pelayan tersebut dapat diwakili sebagai browser yang akan
membuat pesanan (request) dan meneruskannya kepada seorang koki
(server). Hal ini seperti browser membuat request ke server saat user
menggunakan URL pada address bar browser. Koki akan memproses
pesanan tersebut dan segera menyediakan hasilnya (response). Dalam
waktu ini, Anda harus menunggu beberapa saat–biasanya tidak lama–untuk
mendapatkan hasilnya. Setelah itu, koki memberikan hasil pesanan kepada
pelayan dan menyajikannya kepada Anda. Sekarang, Anda dapat menikmati
hasil hidangan tersebut (website).

Peranan Web Server

Tidak sedikit orang mengira bahwa server adalah sebuah komputer dengan
performa tinggi dan berukuran besar. Hal tersebut tidak sepenuhnya salah
karena komputer server umumnya seperti demikian. Pengertian dari web
server sebenarnya lebih merujuk pada sebuah software yang dapat
menghubungkan sebuah komputer dengan komputer lain. Jadi, peranan
server mengacu pada fungsi dari sebuah komputer tersebut.

Berbicara mengenai web server, ia dapat terbagi menjadi dua hal, yaitu
hardware dan software. Bukan berarti kedua hal tersebut bekerja secara
terpisah, tetapi saling melengkapi dan bekerja sama.

Dari sisi hardware, web server merupakan komputer dengan spesifikasi yang
disesuaikan berdasarkan layanannya. Contohnya, kapasitas hard drive yang
besar akan dibutuhkan jika Anda memiliki website yang menyimpan banyak
gambar, processor bertenaga tinggi akan diperlukan ketika Anda ingin
membuat website yang memiliki proses kalkulasi kompleks, dan sebagainya.

Dari sisi software, web server merupakan komputer yang menjalankan

sebuah program agar dapat melayani (menerima atau mengirim) data melalui
jenis protokol bernama HTTP. Ini merupakan protokol standar dalam
melakukan transaksi data oleh browser. Ada banyak program agar komputer
kita dapat berkomunikasi dengan HTTP, yakni NGINX, Apache, ataupun
membuatnya sendiri dengan menggunakan bahasa pemrograman server-
side.
DNS Server
Setiap perangkat, baik komputer, smartphone, modem, maupun router yang
terkoneksi internet akan memiliki IP Address. Contohnya, komputer yang
menjadi server dari dicoding.com memiliki alamat IP sendiri. Jika
menggunakan IP tersebut untuk mengakses halaman Dicoding, tentu kita
akan sulit mengingat dan mungkin akan berubah dari waktu ke waktu.
Mengingat beberapa alamat IP mungkin masih mampu dilakukan. Namun,
bagaimana jika harus mengingat 10 alamat IP? Untuk mengatasinya, kita
menggunakan alamat yang mudah dibaca oleh manusia dan disebut domain
name.

Sebenarnya, nama domain tidak akan menggantikan peran dari IP address.

Komputer tetap menggunakan alamat IP untuk mengakses website. Namun,
bagaimana caranya nama domain dapat diterjemahkan menjadi alamat IP?
Berikut jawabannya.

Ketika user membuka website Dicoding menggunakan domain dicoding.com,

browser akan menanyakan pada komputer, apakah ia mengenali dan dapat
memberikan IP address-nya berdasarkan nama domain tersebut? Dia akan
memeriksa berdasarkan DNS cache yang ada. Jika ada, browser akan
diberikan alamat IP-nya dan menampilkan website yang diminta.

Jika komputer tidak mengenali nama domain tersebut, dia akan menanyakan
pada DNS server yang secara singkat bertugas untuk memberi tahu alamat
IP yang sesuai dari nama domain yang terdaftar padanya. Jika sudah,
browser akan diberikan alamat IP-nya dan meneruskan permintaan konten
halaman web ke web server.
Berikut adalah beberapa referensi lainnya untuk menambah wawasan Anda.

 What is a web server? dari MDN.

 How DNS Works, pemaparan yang menyenangkan tentang cara DNS
bekerja.

Web Browser
Dalam situasi bepergian menggunakan transportasi kapal, kita perlu
memasuki awak kapal melalui pelabuhan kapal. Bagaimana jika Anda naik
kapal melalui terminal bus atau stasiun? Hal tersebut tidak akan bisa, bukan?
Hal ini karena pelabuhan kapal merupakan akses satu-satunya untuk menaiki
dan melakukan perjalanan dengan kapal.

Sebagaimana website, kita memerlukan software sebagai kapal untuk

menjelajahi beragam destinasi pulau. Tidak lupa juga dengan nama domain
sebagai tiket untuk mengaksesnya.
Web browser atau disingkat browser merupakan sebuah program yang
menampilkan halaman web. Tidak hanya satu halaman web, tetapi banyak
website yang aktif di dunia ini dapat diakses oleh browser. Bahkan, halaman
web yang saling terhubung dalam satu domain yang sama juga dapat
diakses.

Ada banyak vendor-vendor browser yang dapat digunakan.

1. Mozilla Firefox
2. Google Chrome
3. Microsoft Edge
4. Opera Browser

Saat ini, Anda mungkin mengakses website ini menggunakan browser selain
yang kami sebutkan. Hal tersebut juga merupakan salah satu software
pengakses website. Jadi, silakan gunakan browser pilihan Anda.

Cara Browser Bekerja

Ketika user mengakses website dengan URL, browser akan membuat
sebuah request yang akan dikirimkan ke web server. Kemudian, web server
akan mengirimkan response berisi konten-konten yang dibutuhkan oleh
website dan browser akan memprosesnya hingga tampil website pada
perangkat user.

Browser memiliki address bar yang merupakan sebuah input bagi user untuk
menuliskan alamat website atau yang biasa disebut Uniform Resource
Locator (URL). Ada tiga bagian pada URL, yaitu protocol (https), domain
name (dicoding.com), dan file path (alamat halaman web yang sedang
ditampilkan).

Client dan web server berkomunikasi dengan protokol yang bernama

HyperText Transfer Protocol (HTTP). Ketika user membuka website dengan
URL, browser akan membuat dan mengirimkan HTTP request ke web server,
serta menerima HTTP response yang dikirimkan oleh web server sebagai
hasil request. Lalu, browser akan menampilkan halaman web berdasarkan
konten-konten yang dikirimkan (HTML, CSS, JavaScript, dsb.). Proses ini
juga bisa disebut sebagai request-response cycle.

Anatomi Website
Luar biasa! Hingga saat ini, Anda sudah memahami tentang cara internet
bekerja, website dan halaman web, serta web server. Pasti Anda sudah tidak
sabar membuat website yang bermanfaat untuk banyak orang, kan?
Masih ingat dengan website di atas? Ia adalah salah satu website untuk
melakukan pengeditan foto. Tentu, ada beberapa komponen yang
dimanfaatkan agar website dapat berjalan dengan baik dan interaktif. Nah,
sebelum terjun dalam cara pembuatan website, kita akan berkenalan terlebih
dahulu dengan beberapa komponen tersebut. Ini merupakan pengetahuan
penting yang perlu diketahui dan dipahami bagi seorang web developer. Yuk!

Pondasi Website
Pada dasarnya, website dibangun dengan tiga buah fondasi utama:

 HTML: sebuah markup language yang menentukan struktur atau

kerangka dari halaman web;
 CSS: sebuah declarative language yang memberikan gaya atau styling
agar halaman web ditampilkan lebih ciamik; dan
 JavaScript: satu-satunya programming language yang didukung oleh
browser untuk meningkatkan interaktivitas pada halaman web.

Perlu ditekankan bahwa ketiga komponen tersebut termasuk hal vital dalam
pembangunan web. Sebenarnya, kita bisa saja membangun halaman web
tanpa CSS dan JavaScript. Namun, website akan terlihat tidak menarik dan
membosankan.
Saat ini, hampir tidak ada website yang dibangun tanpa menggunakan styling
dan script (JavaScript). Oleh karena itu, jika salah satu dari ketiga komponen
tersebut dihilangkan, hasil website yang disajikan terasa tidak lengkap.

Analogi Website Terhadap Hewan

Untuk lebih memudahkan penggambaran, berikut adalah analogi dari
penerapan tiga fondasi website.
Sebagaimana tubuh hewan yang disusun dari kerangka tulang, HTML pada
website berperan sebagai kerangka dasar yang digunakan dalam
menampilkan visual pada website. Namun, jika hanya sebatas kerangka,
hewan tersebut akan terlihat seram dan aneh, bukan? Oleh karena itu, untuk
mempercantik sosoknya, kita membutuhkan sebuah kulit, bulu, warna bulu,
dsb. Di sinilah peran CSS.

Setelah memiliki kulit dan tampak cantik, selanjutnya kita membutuhkan

interaktivitas pada kucing agar dapat bergerak dan berinteraksi. Ibarat dalam
kasus ini, JavaScript-lah yang berperan dalam membuat website menjadi
dinamis dan interaktif.

Rangkuman Pendahuluan
Kita telah belajar banyak hal dalam modul Pendahuluan. Kami siapkan rangkuman materi
terhadap hal yang telah Anda pelajari selama ini. Harapannya, Anda dapat mengingat kembali
setiap materi yang disampaikan.

Cara Internet Bekerja

Internet memberikan kemampuan pada user untuk mengirimkan permintaan dan menerima hasil
permintaan (data) pada website. Hal ini terjadi karena komputer milik user terhubung dengan
komputer lain yang biasa disebut dengan server. Kedua komputer ini berkomunikasi melalui
sebuah jaringan, baik dengan kabel maupun nirkabel.

Berikut adalah perkembangan jaringan yang terjadi.

Jaringan
Jaringan
Jaringan
Jaringan
Website dan Halaman Web
Berikut adalah penjelasan singkat mengenai halaman web dan website.
Halaman Web
Halaman web merupakan halaman tunggal yang menampilkan informasi, baik berupa teks,
gambar, maupun media lainnya. Tidak hanya media yang ditampilkan, halaman web yang
dibangun dapat ditambahkan interaktivitas menggunakan kode (JavaScript).
Website
Jika sebelumnya Anda belajar halaman web berupa halaman tunggal, website adalah sekumpulan
halaman web yang saling terhubung. Website bersifat unik karena setiap halaman dapat saling
terhubung dengan menggunakan hipertaut (hyperlink), baik dalam domain yang sama maupun
berbeda.

Web Server
Mari mengetahui web server lebih dalam.

Siklus Request dan Response

Tahukah Anda bahwa browser dapat menampilkan website dengan baik karena mendapatkan
data dari komputer lain yang biasa disebut dengan server? Bagi komputer yang mengakses
website, kita disebut sebagai client, atau dalam hal ini adalah browser yang melakukan
permintaan data.

Browser akan mengirimkan sesuatu bernama request pada server dan menerima data dalam
sesuatu bernama response sebagai hasil tanggapan dari server. Data-data tersebut dapat berupa
berkas HTML, CSS, JavaScript, dan aset-aset lain yang dibutuhkan untuk menampilkan website.
Peranan Web Server
Berbicara mengenai web server, ia dapat terbagi menjadi dua hal, yaitu hardware dan software.
Bukan berarti kedua hal tersebut bekerja secara terpisah, tetapi saling melengkapi dan bekerja
sama.

Dari sisi hardware, web server merupakan komputer dengan spesifikasi yang disesuaikan
berdasarkan layanannya. Contohnya, kapasitas hard drive yang besar akan dibutuhkan jika Anda
memiliki website yang menyimpan banyak gambar.

Dari sisi software, web server merupakan komputer yang menjalankan sebuah program agar
dapat melayani (menerima atau mengirim) data melalui jenis protokol bernama HTTP. Ini
merupakan protokol standar dalam melakukan transaksi data oleh browser.
DNS Server
Sebenarnya, nama domain tidak akan menggantikan peran dari IP address. Komputer tetap
menggunakan alamat IP untuk mengakses website. Namun, bagaimana caranya nama domain
dapat diterjemahkan menjadi alamat IP? Berikut jawabannya.

Ketika user membuka website Dicoding menggunakan domain dicoding.com, browser akan
menanyakan pada komputer, apakah ia mengenali dan dapat memberikan IP address-nya
berdasarkan nama domain tersebut? Dia akan memeriksa berdasarkan DNS cache yang ada. Jika
ada, browser akan diberikan alamat IP-nya dan menampilkan website yang diminta.

Jika komputer tidak mengenali nama domain tersebut, dia akan menanyakan pada DNS server
yang secara singkat bertugas untuk memberi tahu alamat IP yang sesuai dari nama domain yang
terdaftar padanya. Jika sudah, browser akan diberikan alamat IP-nya dan meneruskan permintaan
konten halaman web ke web server.
Web Browser
Web browser atau disingkat browser merupakan sebuah program yang menampilkan halaman
web. Tidak hanya satu halaman web, tetapi banyak website yang aktif di dunia ini dapat diakses
oleh browser. Bahkan, halaman web yang saling terhubung dalam satu domain yang sama juga
dapat diakses.

Cara Browser Bekerja

Ketika user mengakses website dengan URL, browser akan membuat sebuah request yang akan
dikirimkan ke web server. Kemudian, web server akan mengirimkan response berisi konten-
konten yang dibutuhkan oleh website dan browser akan memprosesnya hingga tampil website
pada perangkat user.

Browser memiliki address bar yang merupakan sebuah input bagi user untuk menuliskan alamat
website atau yang biasa disebut Uniform Resource Locator (URL). Ada tiga bagian pada URL,
yaitu protocol (https), domain name (dicoding.com), dan file path (alamat halaman web yang
sedang ditampilkan).

Anatomi Website
Pada dasarnya, website dibangun dengan tiga buah fondasi utama:

 HTML: sebuah markup language yang menentukan struktur atau kerangka dari halaman web;
 CSS: sebuah declarative language yang memberikan gaya atau styling agar halaman web
ditampilkan lebih ciamik; dan
 JavaScript: satu-satunya programming language yang didukung oleh browser untuk
meningkatkan interaktivitas pada halaman web.

Perlu ditekankan bahwa ketiga komponen tersebut termasuk hal vital dalam pembangunan web.
Sebenarnya, kita bisa saja membangun halaman web tanpa CSS dan JavaScript. Namun, website
akan terlihat tidak menarik dan membosankan.

Untuk lebih memudahkan penggambaran, berikut adalah analogi dari penerapan tiga fondasi
website.
Pengantar HTML
Pada modul sebelumnya, Anda sudah belajar banyak hal sebagai penuntun
Anda memasuki front-end web development. Ada banyak pengetahuan yang
telah diserap, seperti cara internet bekerja, website dan halaman web, web
server, dan web browser. Selain itu, kamu juga sudah memahami anatomi
dari website sehingga memahami komponen vital pembangun website. Nah,
saat ini, seharusnya Anda sudah siap untuk memulai gathering knowledge
tentang teknik pembangunan aplikasi web.

Apakah Anda masih ingat HTML? Ia merupakan satu-satunya bahasa

markup untuk membangun struktur halaman website. Sebagaimana telah
dipelajari sebelumnya, HTML dianalogikan seperti kerangka hewan yang
menentukan bentuk tubuhnya. Hal ini menjadikan setiap hewan memiliki
bentuk yang bermacam-macam.

Nah, pada modul ini, kita akan berkenalan dengan HTML terlebih dahulu.
Namun, tenang saja. Istilah “berkenalan” mungkin terdengar seperti Anda
tidak akan mendapatkan pembahasan HTML secara dalam. Kita akan
membagi sesi pembahasan HTML menjadi dua, yaitu Pengenalan HTML
(modul yang sedang dipijak) dan Pendalaman HTML.

Pada akhir modul, kita akan membuat halaman website seperti gambar
berikut.
Halaman web di atas menampilkan artikel yang menjelaskan profil Kota
Bandung. Yap, benar. Tampilan di atas terlihat tidak menarik. Kita akan
memperindah halaman ini secara progresif pada modul-modul berikutnya.

Pada materi selanjutnya, sebelum berkenalan dengan HTML, kita akan

sedikit pemanasan terlebih dahulu. Nah, Anda sudah tidak sabar untuk
memasuki langkah awal menjadi web developer, kan? Kami yakin, antusias
Anda untuk menjadi web developer andal sangat tinggi.

Tunggu apa lagi? Yuk, langsung menuju ke materi berikutnya.

Latihan: Membangun Halaman Web Pertama

(Halaman Profil)
Sebelumnya, Anda sudah berkenalan dengan HTML yang merupakan satu-
satunya bahasa pembangun halaman web. Langkah berikutnya, sebelum
belajar lebih jauh dengan HTML, kita akan berlatih membuat halaman web
untuk yang pertama kalinya. Menarik, bukan? Yuk, langsung saja ikuti
latihannya.

Tujuan
Dalam membuat halaman web pertama, tentunya bersinggungan dengan
HTML. Kita akan mencoba membuatnya dari nol dengan menggunakan alat
yang ada, yaitu code editor bawaan sistem operasi. Mengapa hal tersebut
perlu dilakukan? Hal ini agar kita tahu pengalaman membuat dan menuliskan
kode tanpa bantuan fitur-fitur yang powerful, seperti code completion.

Berikut adalah hasil yang didapat pada akhir latihan ini.

Alur Latihan
Berikut adalah alur latihan kali ini.

1. Membuka code editor bawaan sistem operasi.

2. Menuliskan struktur konten (kode) halaman web pada code editor.
3. Menyimpan kode yang telah ditulis dalam bentuk HTML.
 4. Menjalankan berkas HTML dalam browser (Google Chrome).

Latihan Membangun Halaman Web Pertama

Dengan beragamnya sistem operasi yang tersedia, kami menyediakan
langkah-langkah latihan menggunakan tiga buah sistem operasi. Sistem
operasi yang dimaksud adalah Windows, Linux (Ubuntu), dan MacOS. Untuk
itu, silakan ikuti langkah-langkah latihan berikut dan pilih sistem operasi yang
didukung oleh perangkat Anda.

 Windows
 Linux (Ubuntu)
 MacOS

1. Windows memiliki code editor bawaan yang bernama Notepad. Kita

akan menggunakan aplikasi tersebut untuk membuat halaman web.
Ada banyak cara yang dapat dilakukan. Salah satunya adalah melalui
fitur run command atau pencarian aplikasi–pencarian aplikasi yang
dimaksud adalah pop up yang muncul jika menekan tombol Windows
dan terdapat pencarian aplikasi padanya.

Silakan buka pencarian aplikasi tersebut dengan menekan tombol

Windows. Jika sudah, tuliskan “notepad” dan pilihan aplikasi Notepad
akan muncul. Kliklah pilihan aplikasi tersebut untuk membuka Notepad.

2. Seharusnya Notepad akan muncul pada layar laptop/komputer seperti

berikut.
3. Selanjutnya, kita akan mulai menuliskan konten untuk halaman web
kita. Sebetulnya, ada struktur yang disepakati untuk menuliskan
halaman web. Saat ini masih dalam tahap awal membuat halaman
web, jadi kita akan menuliskan kontennya secara langsung. Silakan isi
dengan konten 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.

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

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.

4. Jika sudah, seharusnya tampilan Notepad kurang lebih akan tampak

seperti gambar berikut.
5. Nah, kita sudah selesai menuliskan konten halaman web. Sekarang,
kita dapat melihat hasilnya pada browser. Namun, kita perlu
menyimpan perubahan isi berkas terlebih dahulu. Silakan lakukan
simpan berkas. Anda dapat melakukannya dengan kombinasi tombol
”CTRL + S”.

Kemudian, pilih lokasi penyimpanan yang diinginkan. Contoh pada

komputer kami, kami menyimpannya pada alamat “C -> WebDasar”.
Oleh karena itu, buka direktori “WebDasar” dengan dobel klik kiri pada
folder terkait.
6. Seharusnya, tampilannya sudah berada dalam direktori WebDasar saat
ini. Selanjutnya, kita namai berkas ini dengan “index.html” pada bagian
”File name”. Ingat! Simpan berkas dalam format HTML. Pada bagian
“Save as type”, silakan pilih “All Files (*.*)” dan Anda dapat memberinya
nama beserta formatnya secara langsung–nama dan format yang
dimaksud adalah “index.html”.
7. Jika sudah, tekan tombol “Save” untuk memproses penyimpanan
berkas.
8. Luar biasa! Berkas tersebut sudah dapat kita lihat pada folder yang kita
tentukan sebelumnya. Berikut adalah kondisi direktori WebDasar milik
kami saat ini.
9. Dengan demikian, kita selesai membuat berkas HTML pertama. Untuk
melihat hasilnya, silakan buka berkas HTML tersebut menggunakan
browser. Cara yang paling mudah adalah dobel klik berkas tersebut
dan hasilnya akan tampak seperti berikut.
 10. Selamat! Anda sudah berhasil membuat halaman web
pertama. Good job!

Bedah Kode
Kudos to you! Anda sudah berjaya membuat halaman web untuk pertama
kalinya. Kita akan membahas tahapan yang telah kita lakukan sejauh ini.

Saat ini, Anda sudah berhasil membuat dokumen HTML. Sebagai web
developer pemula, ini merupakan capaian yang baik karena Anda akan lebih
mudah menghadapi rintangan-rintangan berikutnya.

Root Project Directory

Dalam membuat halaman web, sebetulnya kita perlu menyiapkan satu hal
utama dan yang paling utama, yaitu folder proyek. Ini biasa disebut dengan
root project. Disadari atau tidak, sebetulnya kita telah menyiapkan hal
tersebut yang dinamai “WebDasar”. Nah, folder inilah tempat kita bekerja
membangun halaman web.

Folder proyek ini sebetulnya merupakan folder biasa. Folder proyek juga
biasa disebut dengan root project directory karena di dalam folder inilah kita
menyimpan seluruh berkas yang dibutuhkan untuk membuat website, salah
satunya berkas HTML.
Membuat Berkas HTML
Nama berkas HTML yang digunakan adalah index.html. Apakah di antara
Anda ada yang bertanya-tanya, mengapa kita menamainya dengan
index.html? Penamaan berkas ini dibagi menjadi dua bagian, yaitu nama dan
formatnya. Kita bahas terlebih dahulu mengenai formatnya. Format yang
digunakan adalah .html (dibaca: dot html). Ini merupakan format atau
ekstensi berkas yang tepat untuk membuat halaman web.

Itulah alasan mengenai format berkas yang digunakan. Namun, bagaimana

dengan hal yang kedua–nama berkas, yaitu index? Kita menggunakan
“index” karena ia merupakan nama berkas default dari web server jika tidak
ada berkas spesifik pada URL. Berkas tersebut akan dikirimkan dan
ditampilkan pada browser oleh web server.

Ketika mengunjungi dicoding.com, apakah ada di antara kita yang

mengetahui sebenarnya berkas apa yang ditampilkan? Tentu tidak ada yang
mengetahuinya. Namun, bisa kita pastikan bahwa web server mengirimkan
berkas index.html untuk menampilkan homepage dari Dicoding. Itulah alasan
penggunaan index sebagai nama berkasnya.

Berikut adalah perbedaan jika kita menampilkan halaman web antara

index.html dengan lainnya–misalnya example.com.

 index.html
 example.html
Anda dapat melihat perbedaan antara keduanya pada URL-nya.

Mengakses Halaman Web

Kita sudah mencoba untuk menjalankan dokumen HTML di browser yang
telah dibuat sebelumnya. Namun, apakah Anda merasa ada yang berbeda
dengan membuka website pada umumnya?
Umumnya, kita membuka website dengan menyebutkan nama domainnya.
Contohnya dicoding.com. Namun, dalam praktik ini, kita menggunakan file
sebagai skemanya untuk membaca file system dari komputer.

Silakan Anda sisakan menjadi “C:/” saja pada URL di atas. Hasilnya
seharusnya akan seperti berikut.
Untuk memahami lebih jauh terkait Uniform Resource Locator (URL), Anda
dapat membaca artikel Identifying resources on the Web dari MDN .

Berlatihnya hebat! Anda sudah berjaya membuat halaman web untuk

pertama kalinya. Ini merupakan capaian yang baik untuk menggali lebih
dalam pada pengembangan website berikutnya. Kami yakin, setelah ini Anda
akan lebih mudah dan siap dalam melewati serta menaklukkan materi-materi
berikutnya.

Yuk, lanjut ke materi berikutnya.

Latihan: Identifikasi Elemen pada Halaman Profil

Setelah mengetahui struktur dasar HTML, mari kita terapkan ilmu ini pada
halaman web yang sudah kita buat dalam latihan awal. Yuk, berlatih!

Tujuan
Pada latihan sebelumnya, konten halaman web ditampilkan dengan
berantakan dan tidak mudah dibaca. Kita tidak berekspektasi pada browser
bahwa tampilan halaman web akan mengikuti kode yang dituliskan pada
code editor. Hal ini termasuk jika kita menambahkan baris baru dan karakter
spasi pada code editor karena browser tidak akan membacanya.

Agar browser dapat mengenal setiap konten dan menampilkannya dengan

rapi, kita akan memberinya elemen yang sesuai. Judul akan menggunakan
elemen heading, paragraf akan menggunakan elemen paragraf, dsb.

Alur Latihan
Berikut adalah alur latihan kali ini.

1. Membuka hasil akhir dari latihan sebelumnya.

2. Menuliskan struktur dasar dokumen HTML pada berkas index.html.
3. Menempatkan seluruh konten pada elemen body.
4. Membungkus setiap bagian dari artikel dengan elemen yang tepat.
5. Menjalankan dokumen HTML pada browser.

Latihan Identifikasi Elemen pada Halaman Website

Pada latihan ini, kita tidak akan mengajarkan latihan untuk banyak sistem
operasi lagi karena penerapannya masih sama. Jadi, silakan sesuaikan
dengan perangkat masing-masing. Silakan ikuti beberapa langkah latihan
berikut.

1. Membuka hasil akhir pada latihan sebelumnya. Jika belum punya,

silakan siapkan proyek berisi berkas index.html dengan kode berikut.
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.

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

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.

2. Pada berkas index.html, silakan tambahkan struktur dasar dokumen

HTML di posisi teratas. Kode yang perlu ditambahkan adalah kode
bercetak tebal.
1. <!DOCTYPE html>

2. <html>

3. <head></head>

4.

5. <body>

6.

7. </body>

8. </html>

9.

10. Bandung

11. Kota metropolitan terbesar di Provinsi Jawa Barat,

sekaligus menjadi ibu kota provinsi tersebut.

12.

13.

14. Sejarah

15. 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.

16.

17.

18. 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.

19.

20.

21. Geografis

22. 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.

23.

24.

25. 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.

26.

27.

28. Wisata

29. 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.

30.

31.

32. Farm House Lembang

 33. 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.

34.

35.

36. Observatorium Bosscha

37. 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.

3. Karena seluruh konten yang ditampilkan ada dalam elemen <body>,

silakan masukkan seluruh konten artikel padanya sehingga hasil
keseluruhan kode menjadi seperti berikut.
1. <!DOCTYPE html><html>

2. <head></head>
3.

4. <body>

5. Bandung

6. Kota metropolitan terbesar di Provinsi Jawa Barat,

sekaligus menjadi ibu kota provinsi tersebut.

7.

8.

9. Sejarah

10. 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.

11.

12.

13. 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.

14.

15.

16. Geografis

17. 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.

18.

19.

20. 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.

21.

22.
23. Wisata

24. 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.

25.

26.

27. Farm House Lembang

28. 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.

29.

30.

31. Observatorium Bosscha

32. 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.

33. </body>

34. </html>

4. Selanjutnya, kita akan mengidentifikasi konten artikel ini. Carilah

konten yang paling penting atau topik utama pembahasan dari artikel
serta bungkus konten tersebut dengan elemen <h1>; lalu, konten yang
merupakan pemaparan dari topik tersebut serta bungkus konten
tersebut dengan elemen <p>; dan seterusnya.

Gambar berikut adalah hasil identifikasi dari konten artikel bandung.

5. Jika sudah, kita dapat memberi elemen heading dan elemen paragraf
sesuai dengan hasil identifikasi. Jika diimplementasikan, hasil kode
akan tampak seperti berikut.
1. <!DOCTYPE html><html>

2. <head></head>

3. <body>

4. <h1>Bandung</h1>

5. <p>

6. Kota metropolitan terbesar di Provinsi Jawa Barat,

sekaligus menjadi ibu

7. kota provinsi tersebut.

8. </p>

9.

10.

11. <h2>Sejarah</h2>

12. <p>

13. Kata Bandung berasal dari kata bendung atau

bendungan karena terbendungnya

14. sungai Citarum oleh lava Gunung Tangkuban Parahu

yang lalu membentuk

15. telaga. Legenda yang diceritakan oleh orang-orang

tua di Bandung

16. mengatakan bahwa nama Bandung diambil dari sebuah

kendaraan air yang

17. terdiri dari dua perahu yang diikat berdampingan

yang disebut perahu

18. bandung yang digunakan oleh Bupati Bandung, R.A.

Wiranatakusumah II, untuk

19. melayari Ci Tarum dalam mencari tempat kedudukan

kabupaten yang baru untuk

20. menggantikan ibu kota yang lama di Dayeuhkolot.

21. </p>

22. <p>

23. Berdasarkan filosofi Sunda, kata Bandung juga

berasal dari kalimat

24. Nga-Bandung-an Banda Indung, yang merupakan

kalimat sakral dan luhur

25. karena mengandung nilai ajaran Sunda. Nga-Bandung-

an artinya menyaksikan

26. atau bersaksi. Banda adalah segala sesuatu yang

berada di alam hidup yaitu

27. di bumi dan atmosfer, baik makhluk hidup maupun

benda mati. Sinonim dari

28. banda adalah harta. Indung berarti Ibu atau Bumi,

disebut juga sebagai Ibu

29. Pertiwi tempat Banda berada.

30. </p>

31.

32.
33. <h2>Geografis</h2>

34. <p>

35. Kota Bandung dikelilingi oleh pegunungan, sehingga

bentuk morfologi

36. wilayahnya bagaikan sebuah mangkok raksasa, secara

geografis kota ini

37. terletak di tengah-tengah provinsi Jawa Barat,

serta berada pada

38. ketinggian ±768 m di atas permukaan laut, dengan

titik tertinggi di berada

39. di sebelah utara dengan ketinggian 1.050 meter di

atas permukaan laut dan

40. sebelah selatan merupakan kawasan rendah dengan

ketinggian 675 meter di

41. atas permukaan laut.

42. </p>

43. <p>

44. Kota Bandung dialiri dua sungai utama, yaitu

Sungai Cikapundung dan Sungai

45. Citarum beserta anak-anak sungainya yang pada

umumnya mengalir ke arah

46. selatan dan bertemu di Sungai Citarum. Dengan

kondisi yang demikian,

47. Bandung selatan sangat rentan terhadap masalah

banjir terutama pada musim

48. hujan.

49. </p>

50.

51.

52. <h2>Wisata</h2>

53. <p>

54. Sejak dibukanya Jalan Tol Cipularang, kota Bandung

telah menjadi tujuan

55. utama dalam menikmati liburan akhir pekan terutama

dari masyarakat yang

56. berasal dari Jakarta sekitarnya. Selain menjadi

kota wisata belanja, kota

57. Bandung juga dikenal dengan sejumlah besar

bangunan lama berarsitektur

58. peninggalan Belanda.

59. </p>

60.

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

62. <p>

63. Berada di jalur utama Bandung-Lembang, Farm House

menjadi objek wisata

64. yang tidak pernah sepi pengunjung. Selain karena

letaknya strategis,

65. kawasan ini juga menghadirkan nuansa wisata khas

Eropa. Semua itu

66. diterapkan dalam bentuk spot swafoto

Instagramable.

67. </p>

68.

69. <h3>Observatorium Bosscha</h3>

70. <p>

71. Memiliki beberapa teleskop, antara lain, Refraktor

Ganda Zeiss, Schmidt

72. Bimasakti, Refraktor Bamberg, Cassegrain GOTO, dan

Teleskop Surya.

73. Refraktor Ganda Zeiss adalah jenis teleskop

terbesar untuk meneropong

74. bintang. Benda ini diletakkan pada atap kubah

sehingga saat teropong

75. digunakan, atap tersebut harus dibuka.

Observatorium Bosscha boleh

76. dikunjungi oleh siapapun, tanpa tiket. Namun, bagi

yang ingin menggunakan

77. teleskop Zeiss, wajib mendaftarkan diri. Untuk

instansi atau lembaga

78. pendidikan, diberikan jadwal hari Selasa sampai

Jumat. Sementara itu,

79. kunjungan individu dibuka setiap hari Sabtu.

80. </p>

81. </body>
 82. </html>

6. Silakan save perubahan yang terjadi pada berkas HTML dan buka
pada browser. Seharusnya, halaman web akan terlihat seperti berikut.

7. Kita belum selesai sampai di sini. Tidak hanya elemen <body>, untuk
memperlengkap dokumen ini, kita akan melengkapi elemen dalam
elemen <head>. Silakan tambahkan kode bercetak tebal berikut pada
index.html.
1. <!DOCTYPE html><html>

2. <head>

3. <meta charset="utf-8">

4. <title>Halaman Profil Bandung</title>

5. </head>

6. <body>

7. <!-- Kode lainnya disembunyikan... -->

8. </body>

9. </html>

8. Seharusnya tab browser Anda akan menampilkan judul webpage

dengan baik.
Bedah Kode
Bravo! Kita sudah berhasil menerapkan struktur HTML dasar pada artikel
Bandung. Pada modul selanjutnya, kalian akan lebih dalam mengetahui
tentang elemen yang ada pada HTML.

Pada latihan sebelumnya, kita sudah berhasil memiliki halaman web dengan
membuat dokumen HTML. Kita juga sudah melihat hasilnya pada browser.
Konten yang di-render pun tidak merepresentasikan hal yang dituliskan pada
code editor. Selain itu, kontennya sulit untuk dibaca, bukan? Namun, bukan
hal tersebut yang menjadi inti permasalahan.
Membangun konten halaman web tanpa menggunakan elemen HTML tidak
akan dipahami oleh browser. Untuk itu, kita perlu memanfaatkan elemen
yang tepat. Sebelum itu, kita perlu mendefinisikan struktur HTML dasar.

Struktur Dasar Dokumen HTML

Nah, pada kode di atas, kita telah memberikan beberapa elemen yang
merupakan basic structure of webpage. Di antaranya ada doctype, html,
head, dan body. Sebetulnya, jika kita tidak membuat struktur dasarnya pun
(kontennya saja), secara otomatis, browser akan membuatkan struktur
dasarnya (tanpa doctype). Browser akan langsung menempatkan isi konten
yang kita tuliskan pada elemen <body> dan elemen <head> yang kosong.
Jika kembali ke latihan pertama, Anda seharusnya mengalami hal ini karena
pada saat itu kita tidak mendefinisikan struktur dasarnya, bukan?

Anda juga dapat membuktikannya pada praktik latihan sebelumnya. Anda

dapat memeriksanya pada Developer Tools dari browser yang digunakan
(Google Chrome). Bagi pengguna Google Chrome, Anda bisa menekan
tombol F12 dan membuka tab Elements.
Menerapkan Elemen yang Sesuai
Sebelumnya, setiap konten artikel belum memiliki atau dibungkus dengan
elemen HTML. Kali ini, kita sudah berhasil memberikan setiap konten (teks)
dengan elemen HTML, mulai dari judul, paragraf, hingga subjudul.
Berdasarkan hasil identifikasi yang ditunjukkan pada gambar di atas, kita
sudah bisa melihat bahwa ada hierarki yang dibentuk. Karena artikel ini
memaparkan tentang profil Kota Bandung, kita bungkus “Bandung” dengan
elemen <h1> untuk sebagai heading utama. Bagaimana dengan kalimat
penjelas di bawahnya? Kita bungkus ia dengan elemen paragraf.

Biasanya, artikel tidak hanya memuat satu judul saja. Untuk memberikan
penjelasan yang rinci dan terpusat, kita memanfaatkan sesuatu yang disebut
subjudul. Subjudul merupakan topik turunan dari topik utama. Oleh karena
itu, kita mengidentifikasi beberapa judul lainnya dengan elemen <h2> hingga
<h3> untuk menampilkannya sebagai subjudul. Hal ini karena topik yang
dicakup masih berkaitan dengan topik utama, yaitu profil Kota Bandung.

Latihan: Identifikasi Elemen pada Halaman Profil

Setelah mengetahui struktur dasar HTML, mari kita terapkan ilmu ini pada
halaman web yang sudah kita buat dalam latihan awal. Yuk, berlatih!

Tujuan
Pada latihan sebelumnya, konten halaman web ditampilkan dengan
berantakan dan tidak mudah dibaca. Kita tidak berekspektasi pada browser
bahwa tampilan halaman web akan mengikuti kode yang dituliskan pada
code editor. Hal ini termasuk jika kita menambahkan baris baru dan karakter
spasi pada code editor karena browser tidak akan membacanya.

Agar browser dapat mengenal setiap konten dan menampilkannya dengan

rapi, kita akan memberinya elemen yang sesuai. Judul akan menggunakan
elemen heading, paragraf akan menggunakan elemen paragraf, dsb.

Alur Latihan
Berikut adalah alur latihan kali ini.

1. Membuka hasil akhir dari latihan sebelumnya.

2. Menuliskan struktur dasar dokumen HTML pada berkas index.html.
3. Menempatkan seluruh konten pada elemen body.
4. Membungkus setiap bagian dari artikel dengan elemen yang tepat.
5. Menjalankan dokumen HTML pada browser.

Latihan Identifikasi Elemen pada Halaman Website

Pada latihan ini, kita tidak akan mengajarkan latihan untuk banyak sistem
operasi lagi karena penerapannya masih sama. Jadi, silakan sesuaikan
dengan perangkat masing-masing. Silakan ikuti beberapa langkah latihan
berikut.

1. Membuka hasil akhir pada latihan sebelumnya. Jika belum punya,

silakan siapkan proyek berisi berkas index.html dengan kode berikut.
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.

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

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.

2. Pada berkas index.html, silakan tambahkan struktur dasar dokumen

HTML di posisi teratas. Kode yang perlu ditambahkan adalah kode
bercetak tebal.
1. <!DOCTYPE html>

2. <html>

3. <head></head>

4.

5. <body>

6.

7. </body>

8. </html>

9.

10. Bandung

11. Kota metropolitan terbesar di Provinsi Jawa Barat,

sekaligus menjadi ibu kota provinsi tersebut.

12.

13.

14. Sejarah

15. 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.

16.

17.

18. 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.

19.

20.

21. Geografis

22. 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.

23.

24.

25. 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.

26.

27.

28. Wisata

29. 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.

30.

31.

32. Farm House Lembang

 33. 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.

34.

35.

36. Observatorium Bosscha

37. 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.

3. Karena seluruh konten yang ditampilkan ada dalam elemen <body>,

silakan masukkan seluruh konten artikel padanya sehingga hasil
keseluruhan kode menjadi seperti berikut.
1. <!DOCTYPE html><html>

2. <head></head>
3.

4. <body>

5. Bandung

6. Kota metropolitan terbesar di Provinsi Jawa Barat,

sekaligus menjadi ibu kota provinsi tersebut.

7.

8.

9. Sejarah

10. 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.

11.

12.

13. 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.

14.

15.

16. Geografis

17. 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.

18.

19.

20. 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.

21.

22.
23. Wisata

24. 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.

25.

26.

27. Farm House Lembang

28. 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.

29.

30.

31. Observatorium Bosscha

32. 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.

33. </body>

34. </html>

4. Selanjutnya, kita akan mengidentifikasi konten artikel ini. Carilah

konten yang paling penting atau topik utama pembahasan dari artikel
serta bungkus konten tersebut dengan elemen <h1>; lalu, konten yang
merupakan pemaparan dari topik tersebut serta bungkus konten
tersebut dengan elemen <p>; dan seterusnya.

Gambar berikut adalah hasil identifikasi dari konten artikel bandung.

5. Jika sudah, kita dapat memberi elemen heading dan elemen paragraf
sesuai dengan hasil identifikasi. Jika diimplementasikan, hasil kode
akan tampak seperti berikut.
1. <!DOCTYPE html><html>

2. <head></head>

3. <body>

4. <h1>Bandung</h1>

5. <p>

6. Kota metropolitan terbesar di Provinsi Jawa Barat,

sekaligus menjadi ibu

7. kota provinsi tersebut.

8. </p>

9.

10.

11. <h2>Sejarah</h2>

12. <p>

13. Kata Bandung berasal dari kata bendung atau

bendungan karena terbendungnya

14. sungai Citarum oleh lava Gunung Tangkuban Parahu

yang lalu membentuk

15. telaga. Legenda yang diceritakan oleh orang-orang

tua di Bandung

16. mengatakan bahwa nama Bandung diambil dari sebuah

kendaraan air yang

17. terdiri dari dua perahu yang diikat berdampingan

yang disebut perahu

18. bandung yang digunakan oleh Bupati Bandung, R.A.

Wiranatakusumah II, untuk

19. melayari Ci Tarum dalam mencari tempat kedudukan

kabupaten yang baru untuk

20. menggantikan ibu kota yang lama di Dayeuhkolot.

21. </p>

22. <p>

23. Berdasarkan filosofi Sunda, kata Bandung juga

berasal dari kalimat

24. Nga-Bandung-an Banda Indung, yang merupakan

kalimat sakral dan luhur

25. karena mengandung nilai ajaran Sunda. Nga-Bandung-

an artinya menyaksikan

26. atau bersaksi. Banda adalah segala sesuatu yang

berada di alam hidup yaitu

27. di bumi dan atmosfer, baik makhluk hidup maupun

benda mati. Sinonim dari

28. banda adalah harta. Indung berarti Ibu atau Bumi,

disebut juga sebagai Ibu

29. Pertiwi tempat Banda berada.

30. </p>

31.

32.
33. <h2>Geografis</h2>

34. <p>

35. Kota Bandung dikelilingi oleh pegunungan, sehingga

bentuk morfologi

36. wilayahnya bagaikan sebuah mangkok raksasa, secara

geografis kota ini

37. terletak di tengah-tengah provinsi Jawa Barat,

serta berada pada

38. ketinggian ±768 m di atas permukaan laut, dengan

titik tertinggi di berada

39. di sebelah utara dengan ketinggian 1.050 meter di

atas permukaan laut dan

40. sebelah selatan merupakan kawasan rendah dengan

ketinggian 675 meter di

41. atas permukaan laut.

42. </p>

43. <p>

44. Kota Bandung dialiri dua sungai utama, yaitu

Sungai Cikapundung dan Sungai

45. Citarum beserta anak-anak sungainya yang pada

umumnya mengalir ke arah

46. selatan dan bertemu di Sungai Citarum. Dengan

kondisi yang demikian,

47. Bandung selatan sangat rentan terhadap masalah

banjir terutama pada musim

48. hujan.

49. </p>

50.

51.

52. <h2>Wisata</h2>

53. <p>

54. Sejak dibukanya Jalan Tol Cipularang, kota Bandung

telah menjadi tujuan

55. utama dalam menikmati liburan akhir pekan terutama

dari masyarakat yang

56. berasal dari Jakarta sekitarnya. Selain menjadi

kota wisata belanja, kota

57. Bandung juga dikenal dengan sejumlah besar

bangunan lama berarsitektur

58. peninggalan Belanda.

59. </p>

60.

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

62. <p>

63. Berada di jalur utama Bandung-Lembang, Farm House

menjadi objek wisata

64. yang tidak pernah sepi pengunjung. Selain karena

letaknya strategis,

65. kawasan ini juga menghadirkan nuansa wisata khas

Eropa. Semua itu

66. diterapkan dalam bentuk spot swafoto

Instagramable.

67. </p>

68.

69. <h3>Observatorium Bosscha</h3>

70. <p>

71. Memiliki beberapa teleskop, antara lain, Refraktor

Ganda Zeiss, Schmidt

72. Bimasakti, Refraktor Bamberg, Cassegrain GOTO, dan

Teleskop Surya.

73. Refraktor Ganda Zeiss adalah jenis teleskop

terbesar untuk meneropong

74. bintang. Benda ini diletakkan pada atap kubah

sehingga saat teropong

75. digunakan, atap tersebut harus dibuka.

Observatorium Bosscha boleh

76. dikunjungi oleh siapapun, tanpa tiket. Namun, bagi

yang ingin menggunakan

77. teleskop Zeiss, wajib mendaftarkan diri. Untuk

instansi atau lembaga

78. pendidikan, diberikan jadwal hari Selasa sampai

Jumat. Sementara itu,

79. kunjungan individu dibuka setiap hari Sabtu.

80. </p>

81. </body>
 82. </html>

6. Silakan save perubahan yang terjadi pada berkas HTML dan buka
pada browser. Seharusnya, halaman web akan terlihat seperti berikut.

7. Kita belum selesai sampai di sini. Tidak hanya elemen <body>, untuk
memperlengkap dokumen ini, kita akan melengkapi elemen dalam
elemen <head>. Silakan tambahkan kode bercetak tebal berikut pada
index.html.
1. <!DOCTYPE html><html>

2. <head>

3. <meta charset="utf-8">

4. <title>Halaman Profil Bandung</title>

5. </head>

6. <body>

7. <!-- Kode lainnya disembunyikan... -->

8. </body>

9. </html>

8. Seharusnya tab browser Anda akan menampilkan judul webpage

dengan baik.
Bedah Kode
Bravo! Kita sudah berhasil menerapkan struktur HTML dasar pada artikel
Bandung. Pada modul selanjutnya, kalian akan lebih dalam mengetahui
tentang elemen yang ada pada HTML.

Pada latihan sebelumnya, kita sudah berhasil memiliki halaman web dengan
membuat dokumen HTML. Kita juga sudah melihat hasilnya pada browser.
Konten yang di-render pun tidak merepresentasikan hal yang dituliskan pada
code editor. Selain itu, kontennya sulit untuk dibaca, bukan? Namun, bukan
hal tersebut yang menjadi inti permasalahan.
Membangun konten halaman web tanpa menggunakan elemen HTML tidak
akan dipahami oleh browser. Untuk itu, kita perlu memanfaatkan elemen
yang tepat. Sebelum itu, kita perlu mendefinisikan struktur HTML dasar.

Struktur Dasar Dokumen HTML

Nah, pada kode di atas, kita telah memberikan beberapa elemen yang
merupakan basic structure of webpage. Di antaranya ada doctype, html,
head, dan body. Sebetulnya, jika kita tidak membuat struktur dasarnya pun
(kontennya saja), secara otomatis, browser akan membuatkan struktur
dasarnya (tanpa doctype). Browser akan langsung menempatkan isi konten
yang kita tuliskan pada elemen <body> dan elemen <head> yang kosong.
Jika kembali ke latihan pertama, Anda seharusnya mengalami hal ini karena
pada saat itu kita tidak mendefinisikan struktur dasarnya, bukan?

Anda juga dapat membuktikannya pada praktik latihan sebelumnya. Anda

dapat memeriksanya pada Developer Tools dari browser yang digunakan
(Google Chrome). Bagi pengguna Google Chrome, Anda bisa menekan
tombol F12 dan membuka tab Elements.
Menerapkan Elemen yang Sesuai
Sebelumnya, setiap konten artikel belum memiliki atau dibungkus dengan
elemen HTML. Kali ini, kita sudah berhasil memberikan setiap konten (teks)
dengan elemen HTML, mulai dari judul, paragraf, hingga subjudul.
Berdasarkan hasil identifikasi yang ditunjukkan pada gambar di atas, kita
sudah bisa melihat bahwa ada hierarki yang dibentuk. Karena artikel ini
memaparkan tentang profil Kota Bandung, kita bungkus “Bandung” dengan
elemen <h1> untuk sebagai heading utama. Bagaimana dengan kalimat
penjelas di bawahnya? Kita bungkus ia dengan elemen paragraf.

Biasanya, artikel tidak hanya memuat satu judul saja. Untuk memberikan
penjelasan yang rinci dan terpusat, kita memanfaatkan sesuatu yang disebut
subjudul. Subjudul merupakan topik turunan dari topik utama. Oleh karena
itu, kita mengidentifikasi beberapa judul lainnya dengan elemen <h2> hingga
<h3> untuk menampilkannya sebagai subjudul. Hal ini karena topik yang
dicakup masih berkaitan dengan topik utama, yaitu profil Kota Bandung.

Latihan: Identifikasi Elemen pada Halaman Profil

Setelah mengetahui struktur dasar HTML, mari kita terapkan ilmu ini pada

halaman web yang sudah kita buat dalam latihan awal. Yuk, berlatih!

Tujuan

Pada latihan sebelumnya, konten halaman web ditampilkan dengan

berantakan dan tidak mudah dibaca. Kita tidak berekspektasi pada browser

bahwa tampilan halaman web akan mengikuti kode yang dituliskan pada

code editor. Hal ini termasuk jika kita menambahkan baris baru dan karakter
spasi pada code editor karena browser tidak akan membacanya.

Agar browser dapat mengenal setiap konten dan menampilkannya dengan

rapi, kita akan memberinya elemen yang sesuai. Judul akan menggunakan

elemen heading, paragraf akan menggunakan elemen paragraf, dsb.

Alur Latihan

Berikut adalah alur latihan kali ini.

1. Membuka hasil akhir dari latihan sebelumnya.

 2. Menuliskan struktur dasar dokumen HTML pada berkas index.html.

3. Menempatkan seluruh konten pada elemen body.

4. Membungkus setiap bagian dari artikel dengan elemen yang tepat.

5. Menjalankan dokumen HTML pada browser.

Latihan Identifikasi Elemen pada Halaman Website

Pada latihan ini, kita tidak akan mengajarkan latihan untuk banyak sistem

operasi lagi karena penerapannya masih sama. Jadi, silakan sesuaikan

dengan perangkat masing-masing. Silakan ikuti beberapa langkah latihan

berikut.

1. Membuka hasil akhir pada latihan sebelumnya. Jika belum punya,

silakan siapkan proyek berisi berkas index.html dengan kode berikut.

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.

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

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.

2. Pada berkas index.html, silakan tambahkan struktur dasar dokumen

HTML di posisi teratas. Kode yang perlu ditambahkan adalah kode

bercetak tebal.

1. <!DOCTYPE html>

2. <html>

3. <head></head>

4.

5. <body>
6.

7. </body>

8. </html>

9.

10. Bandung

11. Kota metropolitan terbesar di Provinsi Jawa Barat,

sekaligus menjadi ibu kota provinsi tersebut.

12.

13.

14. Sejarah

15. 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.

16.

17.

18. 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.

19.

20.

21. Geografis

22. 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.

23.

24.

25. 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.

26.
27.

28. Wisata

29. 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.

30.

31.

32. Farm House Lembang

33. 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.

34.

35.

36. Observatorium Bosscha

37. 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.

3. Karena seluruh konten yang ditampilkan ada dalam elemen <body>,

silakan masukkan seluruh konten artikel padanya sehingga hasil

keseluruhan kode menjadi seperti berikut.

1. <!DOCTYPE html><html>

2. <head></head>

3.

4. <body>

5. Bandung

6. Kota metropolitan terbesar di Provinsi Jawa Barat,

sekaligus menjadi ibu kota provinsi tersebut.

7.

8.

9. Sejarah

10. 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.

11.

12.

13. 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.

14.

15.

16. Geografis

17. 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.

18.

19.

20. 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.

21.

22.

23. Wisata

24. 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.

25.

26.

27. Farm House Lembang

28. 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.

29.

30.

31. Observatorium Bosscha

32. 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.

33. </body>

34. </html>

4. Selanjutnya, kita akan mengidentifikasi konten artikel ini. Carilah

konten yang paling penting atau topik utama pembahasan dari artikel

serta bungkus konten tersebut dengan elemen <h1>; lalu, konten yang
merupakan pemaparan dari topik tersebut serta bungkus konten

tersebut dengan elemen <p>; dan seterusnya.

Gambar berikut adalah hasil identifikasi dari konten artikel bandung.

5. Jika sudah, kita dapat memberi elemen heading dan elemen paragraf

sesuai dengan hasil identifikasi. Jika diimplementasikan, hasil kode

akan tampak seperti berikut.

1. <!DOCTYPE html><html>

2. <head></head>

3. <body>

4. <h1>Bandung</h1>

5. <p>

6. Kota metropolitan terbesar di Provinsi Jawa Barat,

sekaligus menjadi ibu

7. kota provinsi tersebut.

8. </p>

9.

10.

11. <h2>Sejarah</h2>

12. <p>

13. Kata Bandung berasal dari kata bendung atau

bendungan karena terbendungnya

14. sungai Citarum oleh lava Gunung Tangkuban Parahu

yang lalu membentuk

15. telaga. Legenda yang diceritakan oleh orang-orang

tua di Bandung
16. mengatakan bahwa nama Bandung diambil dari sebuah

kendaraan air yang

17. terdiri dari dua perahu yang diikat berdampingan

yang disebut perahu

18. bandung yang digunakan oleh Bupati Bandung, R.A.

Wiranatakusumah II, untuk

19. melayari Ci Tarum dalam mencari tempat kedudukan

kabupaten yang baru untuk

20. menggantikan ibu kota yang lama di Dayeuhkolot.

21. </p>

22. <p>

23. Berdasarkan filosofi Sunda, kata Bandung juga

berasal dari kalimat

24. Nga-Bandung-an Banda Indung, yang merupakan

kalimat sakral dan luhur

25. karena mengandung nilai ajaran Sunda. Nga-Bandung-

an artinya menyaksikan

26. atau bersaksi. Banda adalah segala sesuatu yang

berada di alam hidup yaitu

27. di bumi dan atmosfer, baik makhluk hidup maupun

benda mati. Sinonim dari

28. banda adalah harta. Indung berarti Ibu atau Bumi,

disebut juga sebagai Ibu

29. Pertiwi tempat Banda berada.

30. </p>
31.

32.

33. <h2>Geografis</h2>

34. <p>

35. Kota Bandung dikelilingi oleh pegunungan, sehingga

bentuk morfologi

36. wilayahnya bagaikan sebuah mangkok raksasa, secara

geografis kota ini

37. terletak di tengah-tengah provinsi Jawa Barat,

serta berada pada

38. ketinggian ±768 m di atas permukaan laut, dengan

titik tertinggi di berada

39. di sebelah utara dengan ketinggian 1.050 meter di

atas permukaan laut dan

40. sebelah selatan merupakan kawasan rendah dengan

ketinggian 675 meter di

41. atas permukaan laut.

42. </p>

43. <p>

44. Kota Bandung dialiri dua sungai utama, yaitu

Sungai Cikapundung dan Sungai

45. Citarum beserta anak-anak sungainya yang pada

umumnya mengalir ke arah

46. selatan dan bertemu di Sungai Citarum. Dengan

kondisi yang demikian,

47. Bandung selatan sangat rentan terhadap masalah

banjir terutama pada musim

48. hujan.

49. </p>

50.

51.

52. <h2>Wisata</h2>

53. <p>

54. Sejak dibukanya Jalan Tol Cipularang, kota Bandung

telah menjadi tujuan

55. utama dalam menikmati liburan akhir pekan terutama

dari masyarakat yang

56. berasal dari Jakarta sekitarnya. Selain menjadi

kota wisata belanja, kota

57. Bandung juga dikenal dengan sejumlah besar

bangunan lama berarsitektur

58. peninggalan Belanda.

59. </p>

60.

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

62. <p>

63. Berada di jalur utama Bandung-Lembang, Farm House

menjadi objek wisata

64. yang tidak pernah sepi pengunjung. Selain karena

letaknya strategis,
65. kawasan ini juga menghadirkan nuansa wisata khas

Eropa. Semua itu

66. diterapkan dalam bentuk spot swafoto

Instagramable.

67. </p>

68.

69. <h3>Observatorium Bosscha</h3>

70. <p>

71. Memiliki beberapa teleskop, antara lain, Refraktor

Ganda Zeiss, Schmidt

72. Bimasakti, Refraktor Bamberg, Cassegrain GOTO, dan

Teleskop Surya.

73. Refraktor Ganda Zeiss adalah jenis teleskop

terbesar untuk meneropong

74. bintang. Benda ini diletakkan pada atap kubah

sehingga saat teropong

75. digunakan, atap tersebut harus dibuka.

Observatorium Bosscha boleh

76. dikunjungi oleh siapapun, tanpa tiket. Namun, bagi

yang ingin menggunakan

77. teleskop Zeiss, wajib mendaftarkan diri. Untuk

instansi atau lembaga

78. pendidikan, diberikan jadwal hari Selasa sampai

Jumat. Sementara itu,

79. kunjungan individu dibuka setiap hari Sabtu.

 80. </p>

81. </body>

82. </html>

6. Silakan save perubahan yang terjadi pada berkas HTML dan buka

pada browser. Seharusnya, halaman web akan terlihat seperti berikut.

7. Kita belum selesai sampai di sini. Tidak hanya elemen <body>, untuk

memperlengkap dokumen ini, kita akan melengkapi elemen dalam

elemen <head>. Silakan tambahkan kode bercetak tebal berikut pada

index.html.

1. <!DOCTYPE html><html>

2. <head>

3. <meta charset="utf-8">

4. <title>Halaman Profil Bandung</title>

5. </head>

6. <body>

7. <!-- Kode lainnya disembunyikan... -->

8. </body>

9. </html>
 8. Seharusnya tab browser Anda akan menampilkan judul webpage

dengan baik.

Bedah Kode

Bravo! Kita sudah berhasil menerapkan struktur HTML dasar pada artikel

Bandung. Pada modul selanjutnya, kalian akan lebih dalam mengetahui

tentang elemen yang ada pada HTML.

Pada latihan sebelumnya, kita sudah berhasil memiliki halaman web dengan

membuat dokumen HTML. Kita juga sudah melihat hasilnya pada browser.
Konten yang di-render pun tidak merepresentasikan hal yang dituliskan pada

code editor. Selain itu, kontennya sulit untuk dibaca, bukan? Namun, bukan

hal tersebut yang menjadi inti permasalahan.

Membangun konten halaman web tanpa menggunakan elemen HTML tidak

akan dipahami oleh browser. Untuk itu, kita perlu memanfaatkan elemen

yang tepat. Sebelum itu, kita perlu mendefinisikan struktur HTML dasar.

Struktur Dasar Dokumen HTML

Nah, pada kode di atas, kita telah memberikan beberapa elemen yang

merupakan basic structure of webpage. Di antaranya ada doctype, html,

head, dan body. Sebetulnya, jika kita tidak membuat struktur dasarnya pun

(kontennya saja), secara otomatis, browser akan membuatkan struktur

dasarnya (tanpa doctype). Browser akan langsung menempatkan isi konten

yang kita tuliskan pada elemen <body> dan elemen <head> yang kosong.

Jika kembali ke latihan pertama, Anda seharusnya mengalami hal ini karena

pada saat itu kita tidak mendefinisikan struktur dasarnya, bukan?

Anda juga dapat membuktikannya pada praktik latihan sebelumnya. Anda

dapat memeriksanya pada Developer Tools dari browser yang digunakan

(Google Chrome). Bagi pengguna Google Chrome, Anda bisa menekan

tombol F12 dan membuka tab Elements.
Menerapkan Elemen yang Sesuai

Sebelumnya, setiap konten artikel belum memiliki atau dibungkus dengan

elemen HTML. Kali ini, kita sudah berhasil memberikan setiap konten (teks)

dengan elemen HTML, mulai dari judul, paragraf, hingga subjudul.

Berdasarkan hasil identifikasi yang ditunjukkan pada gambar di atas, kita

sudah bisa melihat bahwa ada hierarki yang dibentuk. Karena artikel ini

memaparkan tentang profil Kota Bandung, kita bungkus “Bandung” dengan

elemen <h1> untuk sebagai heading utama. Bagaimana dengan kalimat

penjelas di bawahnya? Kita bungkus ia dengan elemen paragraf.

Biasanya, artikel tidak hanya memuat satu judul saja. Untuk memberikan

penjelasan yang rinci dan terpusat, kita memanfaatkan sesuatu yang disebut
subjudul. Subjudul merupakan topik turunan dari topik utama. Oleh karena

itu, kita mengidentifikasi beberapa judul lainnya dengan elemen <h2> hingga

<h3> untuk menampilkannya sebagai subjudul. Hal ini karena topik yang

dicakup masih berkaitan dengan topik utama, yaitu profil Kota Bandung.
Itulah cara mengidentifikasi konten dan menerapkan elemen yang sesuai.

Sekarang, tampilan artikel sudah lebih baik dan enak dibaca, kan? Halaman

web yang kita buat memang belum terlihat cantik dan masih monoton.

Namun, jangan khawatir karena kita akan mengaturnya ketika sudah

mempelajari teknik styling ke depannya.

Kita masih belum selesai dengan HTML. Masih banyak pembahasan lainnya

yang perlu kita pelajari untuk memperkuat fundamental HTML. Anda ingin
menjadi web developer andal, kan? Nah, oleh karena itu, tetaplah semangat

dalam menuju modul berikutnya.

Daftar Modul
13% Selesai

Persiapan Belajar

Pendahuluan

Pengantar HTML

2/8
Pengantar HTML
Latihan: Membangun Halaman Web Pertama (...
Latihan: Identifikasi Elemen pada Halama...
Anatomi Elemen HTML
Attribute di Elemen HTML
Anatomi Dokumen HTML
Rangkuman Pengenalan HTML
Kuis: Pengenalan HTML

Pendalaman HTML

0/29

Pengenalan CSS

0/12

Pendalaman CSS

0/52

Layout Responsif dengan Flexbox

0/11

Penutup

0/2

Proyek Akhir

0/1
Latihan: Membangun Halaman Web Perta
Itulah cara mengidentifikasi konten dan menerapkan elemen yang sesuai.
Sekarang, tampilan artikel sudah lebih baik dan enak dibaca, kan? Halaman
web yang kita buat memang belum terlihat cantik dan masih monoton.
Namun, jangan khawatir karena kita akan mengaturnya ketika sudah
mempelajari teknik styling ke depannya.

Kita masih belum selesai dengan HTML. Masih banyak pembahasan lainnya
yang perlu kita pelajari untuk memperkuat fundamental HTML. Anda ingin
menjadi web developer andal, kan? Nah, oleh karena itu, tetaplah semangat
dalam menuju modul berikutnya.
Itulah cara mengidentifikasi konten dan menerapkan elemen yang sesuai.
Sekarang, tampilan artikel sudah lebih baik dan enak dibaca, kan? Halaman
web yang kita buat memang belum terlihat cantik dan masih monoton.
Namun, jangan khawatir karena kita akan mengaturnya ketika sudah
mempelajari teknik styling ke depannya.

Kita masih belum selesai dengan HTML. Masih banyak pembahasan lainnya
yang perlu kita pelajari untuk memperkuat fundamental HTML. Anda ingin
menjadi web developer andal, kan? Nah, oleh karena itu, tetaplah semangat
dalam menuju modul berikutnya.