Halo, Gabuters!
Di tengah ramainya AI dan vibe coding sekarang, membuat aplikasi web rasanya semakin mudah. Tinggal kasih instruksi seperti:
"Buatkan saya aplikasi pencatatan keuangan yang punya halaman login, dashboard, dan laporan bulanan."
Tunggu sebentar, tahu-tahu sudah muncul aplikasi yang kelihatannya cukup meyakinkan.
Keren? Tentu saja.
Tapi kemudian muncul pertanyaan: kalau AI sudah bisa membuat aplikasi untuk kita, apakah kita masih perlu belajar ngoding dan memahami bagaimana sebuah aplikasi bekerja?
Menurut saya, masih.
Bukan berarti kita harus hafal semua syntax atau menolak menggunakan AI. Saya sendiri justru melihat AI sebagai alat yang sangat membantu ketika ngoding.
Tapi ada bedanya antara AI membantu kita membuat aplikasi dengan kita sama sekali tidak tahu apa yang sebenarnya dibuat oleh AI.
Ibaratnya kita naik kendaraan. Kita memang tidak harus bisa membuat mesin sendiri untuk bisa berkendara. Tapi paling tidak kita perlu tahu mana gas, mana rem, dan apa yang harus dilakukan kalau tiba-tiba ada lampu merah menyala di dashboard.
Begitu juga dengan web development.
Kita tidak harus menguasai semuanya terlebih dahulu sebelum menggunakan AI. Tapi memahami dasarnya akan membantu kita memberikan instruksi yang lebih baik, memahami apa yang dibuat, mengetahui bagian mana yang harus diubah, dan yang tidak kalah penting: punya gambaran ketika sesuatu tiba-tiba error.
Nah, di tulisan ini kita belum akan banyak ngoding.
Saya ingin mengajak Gabuters melihat gambaran besarnya terlebih dahulu: sebenarnya sebuah aplikasi web itu dibangun dari apa, dan bagaimana bagian-bagiannya bekerja sama?
Kita mulai dari bentuk yang paling sederhana.
Bayangkan kita ingin membuat sebuah halaman web sederhana.
Isinya cuma:
BapakGabut
Ngoding, main game, dan ngulik apa saja.
Belum ada tombol aneh-aneh, belum ada login, belum ada data pengguna. Kita cuma ingin membuka browser dan melihat tulisan tersebut.
Untuk membuat halaman seperti ini, kita bisa memulainya hanya dengan sebuah file bernama:
index.html
Nah, sekarang kita bertemu dengan istilah pertama: HTML.
HTML atau HyperText Markup Language digunakan untuk mendefinisikan struktur dan isi sebuah halaman web.
flowchart LR
A[index.html] --> B[Browser]
B --> C[Halaman Web]
Kita membuat file HTML, kemudian browser seperti Chrome, Firefox, Edge, dan lainnya membaca file tersebut lalu menampilkannya sebagai halaman web.
Di dalam HTML kita bisa menentukan bahwa bagian tertentu adalah judul, paragraf, gambar, tombol, link, tabel, form, dan berbagai elemen lainnya.
Kalau dianalogikan dengan rumah, untuk sementara kita bisa menganggap HTML sebagai struktur rumahnya.
Ada pintu di sini, jendela di sana, kamar di sebelah sini, dan ruang tamu di sebelah sana.
Sebenarnya dengan ini saja kita sudah punya halaman web.
Masalahnya, tampilannya mungkin masih sangat sederhana.
Kita ingin menentukan warna, ukuran tulisan, posisi elemen, jarak antarbagian, dan sebagainya.
Berarti kita membutuhkan sesuatu untuk mengatur tampilannya.
Di sinilah kita bertemu dengan istilah berikutnya: CSS.
CSS atau Cascading Style Sheets digunakan untuk mengatur bagaimana elemen-elemen halaman tadi ditampilkan.
Misalnya kita ingin:
Hal-hal seperti itu bisa kita atur menggunakan CSS.
flowchart LR
HTML[HTML - Struktur] --> Browser
CSS[CSS - Tampilan] --> Browser
Browser --> Page[Halaman Web]
Untuk sementara, gampangnya:
HTML menentukan apa yang ada di halaman.
CSS menentukan bagaimana tampilannya.
Sampai di sini sebenarnya kita sudah bisa membuat banyak jenis halaman web.
Company profile sederhana, halaman informasi, landing page, dokumentasi, blog statis, dan berbagai halaman lainnya bisa dibuat dengan kombinasi keduanya.
Tapi kemudian kita mulai punya keinginan lain.
Bagaimana kalau ketika tombol diklik, sebuah menu terbuka?
Bagaimana kalau pengguna memilih kategori tertentu, kemudian isi halaman berubah?
Atau bagaimana kalau kita ingin menghitung sesuatu secara otomatis?
Halaman kita sekarang tidak cukup hanya ada dan terlihat bagus.
Kita ingin halaman tersebut bisa melakukan sesuatu.
Di sinilah kita mulai berkenalan dengan JavaScript.
Untuk pengenalan awal ini, kita bisa menganggap JavaScript sebagai bagian yang mengatur perilaku atau interaksi pada halaman.
Misalnya kita punya tombol:
Tampilkan Produk
Ketika tombol itu diklik, kita ingin daftar produk muncul.
JavaScript dapat mendeteksi bahwa pengguna menekan tombol tersebut, kemudian menjalankan perintah yang sudah kita buat.
flowchart LR
HTML[HTML - Struktur] --> Browser
CSS[CSS - Tampilan] --> Browser
JS[JavaScript - Interaksi] --> Browser
Browser --> Page[Halaman Interaktif]
Tentunya kemampuan JavaScript jauh lebih luas daripada sekadar menangani tombol.
Tapi kita belum perlu membahas semuanya sekarang.
Untuk sementara, cukup pegang tiga gambaran sederhana:
HTML β struktur
CSS β tampilan
JavaScript β interaksi
Nanti kita akan mengulik masing-masing lebih dalam di tulisan tersendiri.
Sekarang halaman kita sudah punya struktur, tampilannya sudah bagus, dan bahkan sudah bisa berinteraksi dengan pengguna.
Tapi kita akan menemukan masalah baru.
Dari mana datanya?
Anggap kita sedang membuat halaman daftar produk.
Untuk aplikasi sederhana, kita bisa saja menulis datanya langsung seperti ini:
const produk = [
{ nama: "Keyboard", harga: 300000 },
{ nama: "Mouse", harga: 150000 }
];
Tidak ada masalah.
Kita punya dua produk, kemudian JavaScript menampilkan keduanya ke halaman.
Selesai.
Tapi bagaimana kalau aplikasinya mulai berkembang?
Produknya bukan dua, tetapi 10.000.
Ada produk baru.
Ada produk yang dihapus.
Harga berubah.
Stok berubah.
Ada pengguna baru.
Ada transaksi baru setiap hari.
Apakah setiap ada perubahan harga kita akan membuka kode aplikasi, mencari produknya, mengganti nilainya, lalu menerbitkan ulang aplikasi?
Sepertinya kita mulai membutuhkan tempat yang memang dirancang untuk menyimpan dan mengelola data.
Nah, kebutuhan inilah yang membawa kita ke istilah berikutnya: database.
Database digunakan untuk menyimpan dan mengelola data yang dibutuhkan aplikasi.
Kalau sebelumnya kita menulis:
const produk = [
{ nama: "Keyboard", harga: 300000 }
];
nantinya informasi produk tersebut bisa disimpan sebagai data di database.
Bukan cuma produk.
Aplikasi bisa memiliki data pengguna, transaksi, pesanan, komentar, artikel, dan berbagai data lainnya sesuai kebutuhan.
Ketika harga berubah, kita memperbarui datanya.
Ketika ada produk baru, kita menambahkan data baru.
Ketika pengguna membuka aplikasi, aplikasi bisa mengambil data yang saat itu tersedia.
Sampai sini mungkin kelihatannya sederhana:
"Kalau begitu halaman web tinggal mengambil data dari database, kan?"
Nah, tidak sesederhana itu.
Kita masih membutuhkan satu bagian lagi.
Bayangkan database kita berisi data pengguna.
Ada nama, email, password, transaksi, dan berbagai informasi lainnya.
Tentu kita tidak ingin browser pengguna bebas membuka database lalu berkata:
"Saya minta semua datanya, ya."
π
Selain mengambil data, aplikasi juga punya berbagai aturan.
Misalnya:
Kita membutuhkan bagian yang menangani proses-proses tersebut di belakang layar.
Bagian inilah yang mulai memperkenalkan kita pada backend.
flowchart LR
User[Pengguna] --> Browser
Browser --> Backend[Backend / API]
Backend --> DB[(Database)]
DB --> Backend
Backend --> Browser
Misalnya Gabuters membuka halaman produk.
Browser bisa meminta:
"Tolong kasih saya daftar produk."
Permintaan tersebut dikirim ke backend.
Backend memproses permintaan itu dan mengambil data yang diperlukan dari database.
Database mengembalikan datanya ke backend.
Backend kemudian mengirimkan data yang diperlukan kembali ke browser.
Barulah browser menampilkannya kepada pengguna.
Bagian aplikasi yang berhubungan langsung dengan apa yang dilihat dan digunakan pengguna biasanya kita sebut frontend.
Sementara bagian yang bekerja di belakang layar tadi kita sebut backend.
Nanti kita akan bertemu lagi dengan istilah seperti server dan API.
Untuk sekarang belum perlu dipusingkan.
Yang penting Gabuters sudah punya gambaran:
ada bagian yang dilihat pengguna, ada bagian yang bekerja di belakang, dan ada tempat untuk menyimpan datanya.
Kita mulai tadi hanya dengan keinginan menampilkan sebuah tulisan.
Lalu kita membutuhkan struktur.
Kita bertemu HTML.
Kita ingin tampilannya lebih bagus.
Kita bertemu CSS.
Kita ingin halaman bisa melakukan sesuatu.
Kita bertemu JavaScript.
Kita mulai punya banyak data yang harus disimpan.
Kita bertemu database.
Dan ketika aplikasi perlu mengambil serta memproses data tersebut, kita mulai mengenal backend.
flowchart LR
User[Pengguna] --> Browser
subgraph Frontend
HTML[HTML]
CSS[CSS]
JS[JavaScript]
end
Browser --> Frontend
Frontend --> API[Backend / API]
API --> DB[(Database)]
DB --> API
API --> Frontend
Gabuters membuka aplikasi melalui browser.
Di sisi frontend, HTML membentuk struktur halaman, CSS mengatur tampilannya, dan JavaScript menangani berbagai interaksi serta logika di sisi browser.
Ketika membutuhkan data atau proses dari server, frontend berkomunikasi dengan backend.
Backend menjalankan proses yang diperlukan dan dapat berkomunikasi dengan database.
Hasilnya kemudian dikembalikan ke frontend untuk ditampilkan kepada pengguna.
Apakah semua aplikasi web di dunia persis seperti diagram tersebut?
Tentu tidak.
Ketika nanti belajar lebih jauh, Gabuters akan menemukan banyak istilah dan teknologi lain.
Tapi tidak perlu buru-buru ke sana.
Untuk sekarang, kalau Gabuters sudah memahami gambaran di atas, itu sudah cukup.
Setelah membaca sampai sini, istilah-istilah yang tadi belum kita kenal mulai punya tempatnya masing-masing.
HTML.
CSS.
JavaScript.
Frontend.
Backend.
Database.
Nanti akan ada istilah lain lagi. Banyak malah. π
Tapi kita tidak perlu mempelajari semuanya sekaligus.
Saya lebih suka melihat proses belajar web development sebagai sebuah perjalanan.
Dan perjalanan akan lebih mudah kalau kita punya peta.
flowchart TD
WEB[Belajar Web Development]
WEB --> HTML[HTML]
WEB --> CSS[CSS]
WEB --> JS[JavaScript]
WEB --> BE[Backend / API]
WEB --> DB[Database]
Detailnya tidak perlu dimasukkan ke diagram agar tetap mudah dibaca, terutama dari HP.
Yang nantinya akan kita ulik antara lain:
Yang nantinya akan kita ulik antara lain:
Yang nantinya akan kita ulik antara lain:
Yang nantinya akan kita ulik antara lain:
Yang nantinya akan kita ulik antara lain:
Tidak perlu dihafalkan.
Dan ini juga bukan checklist yang harus Gabuters selesaikan dalam seminggu.
Anggap saja sebagai peta.
Kalau suatu saat kita sedang belajar JavaScript lalu bertemu istilah API, kita sudah punya gambaran kira-kira API berada di bagian mana.
Begitu juga ketika suatu saat kita menemukan error database, setidaknya kita tahu database bukan bagian yang mengatur warna tombol di halaman.
Kedengarannya sepele, tapi memahami batas-batas seperti ini akan sangat membantu ketika aplikasi mulai membesar.
Sekarang kita kembali ke pertanyaan di awal.
Kalau AI sudah bisa membantu membuat aplikasi, buat apa kita belajar cara kerjanya?
Justru menurut saya AI membuat pemahaman dasar menjadi semakin berguna.
Misalnya kita meminta AI membuat aplikasi dan kemudian muncul error.
Kalau kita sama sekali tidak memahami struktur aplikasi, mungkin yang bisa kita lakukan hanya:
"Masih error, tolong perbaiki."
Masih error.
"Belum bisa."
Masih error lagi.
"Coba perbaiki lagi."
Kadang berhasil.
Kadang error-nya malah pindah ke tempat lain. π
Tapi setelah memahami gambaran yang baru saja kita bahas, kita setidaknya bisa mulai mempersempit masalah.
Tampilannya berantakan?
Mungkin kita perlu melihat bagian yang mengatur tampilannya.
Tombol bisa diklik tapi tidak terjadi apa-apa?
Mungkin kita perlu melihat bagian yang menangani interaksinya.
Halaman sudah benar tetapi data tidak muncul?
Mungkin kita perlu melihat komunikasi ke backend.
Backend berjalan tetapi datanya salah?
Mungkin kita perlu melihat prosesnya atau data yang tersimpan.
Kita belum tentu langsung tahu cara memperbaikinya.
Dan itu tidak masalah.
Bedanya, sekarang kita punya gambaran harus mulai melihat ke mana.
AI tetap bisa membantu.
Bahkan mungkin AI akan menulis sebagian besar kode yang kita gunakan.
Tapi sekarang Gabuters punya peta untuk memahami apa yang sedang dikerjakan bersama AI tersebut.
Jadi menurut saya kita tidak perlu memilih antara:
"belajar ngoding" atau "pakai AI".
Kita bisa melakukan keduanya.
Gunakan AI untuk membantu dan mempercepat pekerjaan, tapi tetap pelajari dasar-dasarnya supaya kita memahami apa yang sedang kita bangun.
Kalau setelah membaca sampai sini Gabuters merasa:
"Oh, ternyata kira-kira begitu bagian-bagian sebuah aplikasi web saling terhubung."
Berarti tujuan tulisan ini sudah tercapai.
Kita memang belum benar-benar belajar membuat HTML.
Belum mengatur tampilan dengan CSS.
Belum belajar JavaScript.
Belum membuat backend.
Dan belum menyimpan data ke database.
Itu memang disengaja.
Tulisan ini adalah peta awal sebelum kita mulai berjalan.
Di tulisan-tulisan berikutnya, kita akan mulai membongkar bagian-bagian tersebut satu per satu. Mulai dari membuat halaman web sederhana, mempercantik tampilannya, membuatnya interaktif, sampai akhirnya membuat aplikasi yang bisa menyimpan dan mengambil data.
Tidak perlu buru-buru.
Kita ulik pelan-pelan.
Namanya juga BapakGabut. π
]]>Halo, Gabuters!
Di tulisan sebelumnya kita sudah melihat gambaran besar tentang bagaimana sebuah aplikasi web bekerja.
Kita bertemu HTML, CSS, JavaScript, backend, sampai database.
Banyak?
Lumayan. π
Tapi tenang, kali ini kita tidak akan membahas semuanya.
Kita akan mulai dari satu target yang jauh lebih sederhana:
membuat halaman web pertama kita sendiri.
Tidak ada login.
Tidak ada database.
Bahkan belum ada warna-warni.
Target kita cuma satu. Ketika sebuah file dibuka menggunakan browser, kita ingin muncul tulisan:
Halo, Gabuters!
Ini halaman web pertama saya.
Kedengarannya sederhana?
Memang.
Tapi dari halaman sesederhana inilah kita akan mulai memahami bagaimana sebuah website dibuat.
Untuk mengikuti tulisan ini, sebenarnya kita tidak membutuhkan banyak hal.
Cukup dua:
Untuk code editor, di seri ini saya akan menggunakan Visual Studio Code, atau biasanya cukup disebut VS Code.
Kenapa VS Code?
Sebenarnya bukan karena membuat HTML wajib menggunakan VS Code.
Bahkan kalau mau nekat, kita bisa membuat HTML menggunakan Notepad. π
Tapi ketika nanti kode kita mulai bertambah, code editor akan memberikan banyak kemudahan. Misalnya warna pada kode, bantuan penulisan, pencarian file, sampai berbagai fitur tambahan yang akan kita temui pelan-pelan.
Jadi daripada nanti pindah-pindah, kita mulai menggunakan code editor dari sekarang.
Kalau VS Code sudah ada di komputer Gabuters, bagian ini bisa langsung dilewati.
Kalau belum, buka halaman resmi Visual Studio Code:
https://code.visualstudio.com/
Download versi yang sesuai dengan sistem operasi yang digunakan, lalu jalankan installer-nya.
Untuk pengguna Windows, pada dasarnya kita bisa mengikuti pilihan instalasi yang tersedia dan melanjutkannya sampai selesai.
Setelah terpasang, buka VS Code.
Tampilannya mungkin terlihat cukup ramai kalau baru pertama kali melihatnya.
Tenang.
Kita belum perlu memahami semua tombol yang ada di sana.
Untuk sekarang, kita cuma membutuhkan tempat untuk membuat dan mengedit file.
Catatan: Kita juga belum perlu memasang extension apa pun. VS Code bawaan sudah cukup untuk mengikuti artikel ini.
Nah, alat tempurnya sudah siap.
Sekarang kita bisa mulai membuat sesuatu.
Sebelum membuat file, buat sebuah folder baru di komputer.
Namanya bebas. Tapi supaya gampang mengikuti artikel ini, kita gunakan:
belajar-html
Lokasinya juga bebas.
Boleh di Documents, Desktop, atau folder khusus tempat Gabuters menyimpan project.
Setelah itu buka VS Code.
Pilih:
File β Open Folder
Kemudian pilih folder belajar-html yang baru saja dibuat.
Sekarang VS Code sedang membuka folder tersebut sebagai tempat kita bekerja.
Foldernya masih kosong.
Wajar.
Kita memang belum membuat apa-apa. π
Sekarang buat sebuah file baru di dalam folder belajar-html.
Beri nama:
index.html
Perhatikan bagian belakangnya:
.html
Bagian tersebut memberi tahu bahwa file yang kita buat adalah sebuah file HTML.
Sedangkan index hanyalah nama file.
Nanti kita akan sering bertemu file bernama index.html, tetapi untuk
sekarang tidak perlu terlalu memikirkan kenapa namanya sering index.
Yang penting kita sudah punya satu file:
belajar-html/
βββ index.html
Dan file inilah yang akan menjadi halaman web pertama kita.
Buka index.html di VS Code, kemudian tuliskan:
<h1>Halo, Gabuters!</h1>
<p>Ini halaman web pertama saya.</p>
Simpan file tersebut.
Di Windows, kita bisa menggunakan:
Ctrl + S
Sekarang buka folder belajar-html menggunakan File Explorer.
Double-click index.html.
Browser seharusnya terbuka dan menampilkan:
Ini halaman web pertama saya.
Kalau tulisan tersebut sudah muncul di browser...
selamat. π
Memang belum cantik.
Bahkan mungkin kelihatannya seperti website tahun 90-an.
Tapi jangan diremehkan.
Gabuters baru saja membuat sebuah halaman web.
Tidak ada server.
Tidak ada framework.
Tidak ada proses instalasi yang aneh-aneh.
Untuk halaman sederhana ini, alurnya kira-kira seperti berikut:
flowchart LR
File[index.html] --> Browser
Browser --> Page[Halaman Web]
Kita membuat file index.html, browser membacanya, kemudian browser
menampilkan hasilnya sebagai halaman web.
Sederhana, kan?
Sekarang coba kita lihat lagi kode yang tadi dibuat:
<h1>Halo, Gabuters!</h1>
<p>Ini halaman web pertama saya.</p>
Kita menulis:
<h1>Halo, Gabuters!</h1>
dan browser menampilkannya sebagai sebuah heading atau judul.
Sedangkan:
<p>Ini halaman web pertama saya.</p>
ditampilkan sebagai paragraf.
Kok browser tahu?
Karena kita memberikan penanda pada tulisan tersebut.
Coba lihat bagian ini:
<h1>
dan:
</h1>
Keduanya disebut tag.
Tag pertama membuka bagian tersebut:
<h1>
Kemudian kita punya isinya:
Halo, Gabuters!
dan tag berikutnya menutupnya:
</h1>
Gampangnya, kita sedang memberi tahu browser:
βBrowser, tulisan ini adalah heading utama.β
Begitu juga ketika kita menulis:
<p>Ini halaman web pertama saya.</p>
Kita sedang memberi tahu browser:
βKalau yang ini sebuah paragraf.β
Browser kemudian membaca struktur yang kita berikan dan menentukan bagaimana bagian-bagian tersebut ditampilkan.
Dan sekarang kita mulai masuk ke inti pembahasan kita.
HTML adalah singkatan dari HyperText Markup Language.
HTML digunakan untuk memberikan struktur dan makna pada isi sebuah halaman web.
Misalnya kita ingin mengatakan:
βIni judul.β
βIni paragraf.β
βIni gambar.β
βIni link.β
βIni daftar.β
HTML menyediakan cara untuk memberi struktur tersebut.
Itulah kenapa HTML disebut sebagai markup language atau bahasa markup.
Kita memberikan semacam penanda pada konten supaya browser memahami struktur dokumennya.
Ada satu hal yang juga sering membingungkan ketika baru mulai belajar:
HTML bukan bahasa pemrograman.
HTML tidak kita gunakan untuk membuat logika seperti:
βKalau pengguna sudah login, tampilkan halaman ini.β
atau:
βKalau total belanja lebih dari Rp500.000, berikan diskon.β
Untuk hal-hal seperti itu nanti kita membutuhkan teknologi lain.
Untuk sekarang tugas HTML lebih sederhana:
menentukan struktur dan makna dari konten halaman kita.
Kode yang kita buat tadi memang bisa dibuka oleh browser:
<h1>Halo, Gabuters!</h1>
<p>Ini halaman web pertama saya.</p>
Tapi sebuah dokumen HTML biasanya memiliki struktur yang lebih lengkap.
Sekarang ubah isi index.html menjadi:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Website Pertama Saya</title>
</head>
<body>
<h1>Halo, Gabuters!</h1>
<p>Ini halaman web pertama saya.</p>
</body>
</html>
Kelihatannya langsung jauh lebih banyak. π
Tenang.
Kita tidak perlu menghafalnya.
Mari kita lihat gambaran besarnya saja.
<!DOCTYPE html><!DOCTYPE html>
Bagian ini memberi tahu browser bahwa dokumen yang sedang dibaca menggunakan HTML modern.
Untuk sekarang, cukup biasakan menaruhnya di bagian paling atas dokumen HTML.
<html><html lang="id">
Bagian ini membungkus dokumen HTML kita.
lang="id" memberi informasi bahwa bahasa utama halaman tersebut adalah
bahasa Indonesia.
Kita belum membahas bagian lang="id" secara detail karena itu
berkaitan dengan sesuatu yang disebut attribute.
Nanti kita akan bertemu dengannya lagi.
<head>Kemudian ada:
<head>
<meta charset="UTF-8">
<title>Website Pertama Saya</title>
</head>
head berisi berbagai informasi mengenai halaman kita.
Sebagian besar informasi di dalamnya tidak tampil sebagai isi utama halaman.
Contohnya:
<title>Website Pertama Saya</title>
Coba lihat tab browser setelah file disimpan dan browser di-refresh.
Seharusnya sekarang muncul tulisan:
Website Pertama Saya
Sedangkan:
<meta charset="UTF-8">
membantu browser memahami karakter teks yang digunakan oleh halaman kita.
Untuk sekarang biarkan saja bagian itu seperti adanya.
Kita belum perlu nyemplung ke pembahasan encoding hanya karena ingin menampilkan tulisan βHalo, Gabuters!β. π
<body>Terakhir kita punya:
<body>
<h1>Halo, Gabuters!</h1>
<p>Ini halaman web pertama saya.</p>
</body>
Nah, bagian inilah yang berisi konten utama halaman kita.
Judul.
Paragraf.
Nantinya gambar, link, tombol, daftar, dan berbagai isi halaman lainnya juga akan banyak berada di sini.
Kalau disederhanakan:
HTML
βββ head β informasi tentang halaman
βββ body β isi halaman
Untuk artikel pertama ini, pemahaman tersebut sudah cukup.
Jangan cuma membaca kode saya.
Coba utak-atik sedikit. π
Ubah bagian:
<body>
<h1>Halo, Gabuters!</h1>
<p>Ini halaman web pertama saya.</p>
</body>
menjadi:
<body>
<h1>BapakGabut</h1>
<p>Ngoding, main game, dan ngulik apa saja.</p>
</body>
Kemudian:
simpan file β kembali ke browser β refresh.
Tulisan berubah?
Kalau iya, Gabuters sekarang sudah melakukan salah satu siklus yang akan sangat sering dilakukan ketika membuat halaman web:
flowchart LR
Code[Ubah HTML] --> Save[Simpan]
Save --> Refresh[Refresh Browser]
Refresh --> Result[Lihat Hasil]
Result --> Code
Ubah kode.
Simpan.
Refresh.
Lihat hasilnya.
Tidak sesuai?
Ubah lagi.
Simpan lagi.
Refresh lagi.
Begitu terus sampai tiba-tiba sadar sudah jam dua pagi. π
Selamat datang di dunia ngoding.
Kalau sekarang Gabuters melihat halaman yang baru dibuat dan berpikir:
βKok cuma tulisan hitam dengan background putih?β
Betul.
Memang begitu. π
Tapi itu bukan berarti HTML kita salah.
Ingat kembali pembahasan sebelumnya.
HTML bertugas memberikan struktur dan makna pada halaman.
Kalau kita ingin mengatur warna, ukuran, jarak, posisi, background, dan berbagai urusan penampilan lainnya, kita akan membutuhkan sesuatu yang lain.
Namanya CSS.
Tapi jangan buru-buru ke sana.
Untuk sekarang biarkan website kita jelek dulu.
Kita masih belajar membangun rumahnya. Urusan cat tembok belakangan. π
Sebelum mulai mempercantik halaman, masih ada beberapa hal tentang HTML yang perlu kita pahami.
Sampai sini kita sebenarnya baru benar-benar menggunakan beberapa tag HTML.
Kita sudah tahu bahwa:
<h1>Judul</h1>
digunakan untuk heading utama.
Dan:
<p>Paragraf</p>
digunakan untuk paragraf.
Tapi sebuah halaman web tentunya tidak hanya berisi judul dan paragraf.
Bagaimana kalau kita ingin membuat link?
Menampilkan gambar?
Membuat daftar?
Atau memberikan informasi tambahan pada sebuah tag?
Untuk melakukan itu, kita perlu mengenal lebih banyak tag HTML.
Kita juga akan mulai bertemu dua istilah lain:
element dan attribute.
Itulah yang akan kita ulik di tulisan berikutnya:
Mengenal Tag, Elemen, dan Atribut HTML.
Untuk sekarang tidak perlu buru-buru.
Kalau Gabuters sudah berhasil membuat index.html, membukanya di
browser, mengubah isinya, lalu melihat hasil perubahannya...
berarti target kita kali ini sudah tercapai.
Dari sebuah file kosong, sekarang kita sudah punya halaman web pertama.
Memang masih jelek.
Tapi setidaknya jelek buatan sendiri. π
Kita lanjutkan dari sini.
]]>Ini adalah artikel pertama untuk menguji struktur konten BapakGabut.
Kalau tulisan ini muncul di kategori Programming, berarti sistem kategori sudah berjalan dengan benar.
]]>