Belajar HTML

Modul kelas Belajar Dasar Pemrograman Web dalam bentuk cetak (buku) maupun elektronik sudah
didaftarkan ke Dirjen HKI, Kemenkumham RI. Segala bentuk penggandaan dan atau komersialisasi,
sebagian atau seluruh bagian, baik cetak maupun elektronik terhadap modul kelas Belajar Dasar
Pemrograman Web tanpa izin formal tertulis kepada pemilik hak cipta akan diproses melalui jalur
hukum.
Hak cipta dilindungi oleh Undang-Undang © Dicoding 2017 - 2023.
Pengenalan Kelas
Selamat datang di kelas Belajar Dasar Pemrograman Web!
Kelas ini adalah tahap awal dalam jalur pembelajaran Front End Web Developer yang akan memandu
Anda dalam memahami bagaimana aplikasi berbasis web dirancang dan dibangun melalui sebuah kode
program.
Peranan website di dunia ini sangat luas. Dimulai dari pertukaran informasi hingga aplikasi web yang
dapat melakukan layaknya aplikasi desktop dan seluler, seperti edit foto dan video, alat komunikasi
berupa video dan suara, dan sebagainya. Hal ini menjadi kebutuhan akan pembuatan website sangat
luas dan tingginya permintaan industri akan talenta yang mampu mengembangkan website (web
developer).
Jika Anda ingin menjadi seorang web developer, kelas ini merupakan kelas yang cocok sebagai pijakan
awal dalam meniti jalannya seorang pengembang web yang professional. Kami harap materi yang
disampaikan di kelas ini dapat dipahami dengan baik dan mudah.
Selamat belajar!
Peralatan Kelas
Untuk mengikuti kelas ini, ada beberapa alat yang harus kita siapkan. Beberapa di antaranya dapat
dilihat lebih rinci sebagai berikut.
Code Editor atau IDE
Dalam mengembangkan aplikasi, baik website maupun platform lainnya, sudah pasti developer akan
menuliskan kode-kode dalam bentuk HTML, CSS, maupun JavaScript. Semakin besar aplikasi maka
semakin banyak kode yang akan dituliskan. Oleh karena itu, kita membutuhkan Code Editor atau
Integrated Development Environment (IDE).
Sebenarnya, beberapa Sistem Operasi sudah menyediakan text editor usungannya masing-masing.
Contohnya, Windows OS memiliki Notepad, Linux OS memiliki Text Editors, dan Mac OS memiliki
TextEdit. Ketiga aplikasi tersebut dapat digunakan untuk menuliskan kode dalam pembuatan aplikasi
website. Namun, kami tidak menyarankan untuk menggunakan text editor tersebut karena tidak kaya
akan fitur-fitur seperti IDE yang dapat mempercepat proses pengembangan web.
Saat ini, banyak code editors canggih yang dapat digunakan. Berikut adalah tiga code editor yang kami
rekomendasikan untuk Anda belajar di kelas ini.
WebStorm (Jetbrains)
dos:ac5bc58f36846832d1917ccd72fdb00a20221228185950.png
Salah satu produk milik Jetbrains yang berfokus pada pengembangan web seperti HTML, CSS, dan
JavaScript. Berbagai framework JavaScript juga didukung, seperti React, Vue, Angular, dsb. IDE ini
tidaklah gratis. Namun, IDE ini dapat diperoleh secara percuma dengan memanfaatkan Student License
jika Anda seorang pelajar, mahasiswa, atau dosen. Silakan simak selengkapnya pada
jetbrains.com/webstorm.
Visual Studio Code
dos:91f04139a6d06cbf401bb52e74cc2b5b20221228190029.png
Visual Studio Code merupakan sebuah text editor yang dikembangkan oleh Microsoft. Code editor ini
memiliki banyak fitur seperti debugging, version control integration, syntax highlighting, code search,
code completion, code snippets, code refactoring, dan yang tak kalah penting adalah extensions/plugins.
Extension dapat memperkaya fitur code editor sehingga dapat memudahkan penulisan kode. Visual
Studio Code tersedia untuk sistem operasi Windows, Mac, dan Linux. Selain itu, tentunya code editor ini
dapat kita gunakan secara gratis. Silakan kunjungi pada code.visualstudio.com.
Brackets
dos:f0abc93421cb7aa50c41d8ebaa1a8c3a20221228190556.png
Brackets merupakan text editor modern yang ringan dan cukup powerful untuk digunakan. Pada
brackets terdapat fitur live preview sehingga Anda dapat melihat perubahan yang dilakukan tanpa harus
reload browser. Brackets juga merupakan project open-source yang mendapat banyak dukungan dari
para pelaku komunitas aktif. Untuk mengunduhnya, silakan kunjungi brackets.io.
Web Browser
Dalam mengakses halaman web, user akan membutuhkan web browser. Developer pun memerlukannya
untuk melihat hasil website yang dikembangkan. Berikut beberapa web browser dari berbagai vendor
yang dapat digunakan.
Mozilla Firefox
dos:a57d2b9a4121a85e497b0e3d22601be620221228192003.png
Firefox merupakan web browser usungan Mozilla. Browser ini memiliki keunggulan pada kesehatan
internet dan menjaga privasi pengguna. Firefox juga dilengkapi berbagai fitur untuk meningkatkan
produktivitas pengguna seperti Picture-in-Picture, sinkronisasi dengan perangkat mobile, tangkap
gambar layar, dsb. Silakan simak pada mozilla.org/firefox/new.
Google Chrome
dos:244511dfc97709d8fa46707c25e605da20221228192626.png
Google Chrome memiliki bermacam-macam fitur terutama dalam membantu web developer melakukan
proses pengembangan website. Alat tersebut dinamakan dengan DevTools. Dengan DevTools, developer
dapat mengubah halaman website melalui browser secara langsung dan cepat tanpa mengubah kode
yang dituliskan. Selain itu, kita dapat menganalisis dengan mudah jika ada kesalahan atau bug yang
terjadi. Silakan kunjungi halaman pada google.com/chrome.
Mekanisme Belajar
Selamat datang di Dicoding Academy. Sebelum memulai belajar di kelas ini, Anda perlu tahu tahapan
dan cara belajar serta fasilitas yang tersedia sehingga proses belajar akan lebih efektif.
Materi Pembelajaran
Materi Bacaan Elektronik
Materi yang ada dalam kelas ini mayoritas berupa teks atau tulisan. Mengapa demikian? Karena kami
menemukan bahwa dalam proses belajar di bidang pemrograman, bentuk materi pembelajaran yang
paling efektif untuk diingat, dimengerti, dan dipraktikkan adalah dalam bentuk teks.
Video
Kami memfasilitasi Anda dengan beberapa video untuk menjelaskan materi di kelas ini. Namun, kami
menyediakan format video yang berbeda-beda sehingga Anda akan menemukan video yang tidak dapat
dipercepat atau di-skip. Jadi, sebelum menonton pastikan Anda memiliki cukup waktu untuk melihat dan
mendengarkan video tersebut dengan saksama.
Forum Diskusi
Setiap kelas memiliki sebuah forum diskusi yang dapat Anda gunakan untuk bertanya dan menjawab
mengenai materi kelas. Instruktur kami yang terdiri dari Curriculum Developer dan Academy Code
Reviewer siap membantu Anda melalui forum diskusi ini. Tidak hanya kami, Anda pun dapat
berpartisipasi. Untuk meningkatkan retensi ilmu yang Anda punya, berbagi adalah salah satu kuncinya.
Jadi, silakan aktif dan saling membantu di dalam forum.
Jika Anda menemui kendala perihal situs Dicoding dan administrasi kelas, tanyakan kepada kami melalui
bot "Tanya Dibantu" di samping kiri layar ketika membuka situs Dicoding. Jangan gunakan forum diskusi
ya karena itu salah alamat.
Evaluasi Pembelajaran
Ujian (Kuis dan Ujian Akhir Kelas)

Ada berbagai jenis ujian di kelas guna mengecek pemahaman Anda pada materi pembelajaran.
Ketersediaan ujian beserta jenisnya pada setiap kelas dapat berbeda-beda. Setiap pertanyaan dalam
ujian pasti mencakup materi yang telah dibahas. Jadi, jika ada pertanyaan yang tidak bisa terjawab,
pastikan Anda mengulang kembali pembelajaran.
Submission (Proyek, Tugas, Proyek Akhir)
Praktik siswa biasanya berupa hasil coding Anda sendiri yang perlu diunggah ke platform Dicoding untuk
membuktikan bahwa Anda telah mengerti dan mengimplementasikan materi yang sudah diajarkan.
Setiap submission akan melewati proses pengecekan plagiasi secara menyeluruh dan saksama, baik oleh
sistem Dicoding maupun oleh Academy Code Reviewer. Jika terbukti siswa melakukan tindak plagiasi
ringan hingga serius, penalti berlaku (Cek Terms of Use Dicoding). Dalam kasus tertentu, siswa dapat di-
banned (dikeluarkan) sepenuhnya dari platform Dicoding. Jadi, mari lulus kelas dengan jujur lewat karya
dan pekerjaan Anda sendiri.
Informasi lebih lanjut mengenai mekanisme submission dapat Anda baca di Aturan Terkait Review
Submission Academy Dicoding.
Forum Diskusi
Seperti yang sudah kami jelaskan sebelumnya bahwa Dicoding mempunyai forum diskusi untuk setiap
kelas. Berikut adalah hal-hal yang perlu Anda ketahui sebelum berpartisipasi dalam forum diskusi.
Ekspektasi
Dengan banyaknya jumlah siswa Dicoding Academy, kami tidak mengharapkan siswa untuk membaca
semua diskusi atau komentar pada forum diskusi. Sebaliknya, bacalah hal-hal yang menurut Anda
menarik dan dapat membantu dalam menyelesaikan kelas. Lebih baik lagi, jika dapat membantu siswa
lainnya dengan memberikan jawaban dalam bidang yang Anda pahami. Berbagi dalam forum diskusi ini
juga dapat membantu meningkatkan retensi ilmu Anda.
Peraturan paling penting adalah bersikap sopan dan memperlakukan semua siswa lain dan instruktur
dengan hormat. Pelanggaran etika ini dapat berakibat pada dikeluarkannya Anda dari kelas.
Anda akan memiliki akses ke forum diskusi kelas selama Anda aktif terdaftar di kelas ini. Saat masa
belajar Anda sudah habis, forum diskusi tidak dapat diakses. Namun, jika Anda sukses menyelesaikan
kelas (lulus dan sampai mendapatkan sertifikat kompetensi dari Dicoding), Anda tetap dapat mengakses
forum diskusi kelas ini walaupun masa belajar telah habis.
Sebelum Mulai Bertanya
Sebelum membuat diskusi baru, gunakan fitur pencarian untuk cek diskusi lama terlebih dahulu karena
mungkin saja permasalahan yang ingin Anda tanyakan pernah dibahas dan dijawab solusinya dalam
forum. Dengan begitu, Anda pun tidak perlu menghabiskan waktu untuk bertanya dan menunggu
jawaban kembali.
Namun, jika tidak menemukan diskusi lama dengan topik yang sama dengan masalah Anda, silakan
membuat diskusi baru. Simak cara dan langkah berikut ini: Aturan Terkait Review Submission Academy
Dicoding.
Fitur Bermanfaat
Ini adalah fitur-fitur bermanfaat yang bisa Anda gunakan untuk mendukung kenyamanan ketika belajar
di platform Dicoding.
Mencari Posting
Anda dapat mencari topik atau diskusi menggunakan tiga cara yang tersedia pada halaman utama forum
diskusi.
Gunakan fitur “Cari Judul Diskusi” untuk mencari topik berdasarkan judul atau pertanyaannya.
Gunakan fitur “Pilih Berdasarkan Modul” untuk melihat diskusi berdasarkan modul kelasnya.
Gunakan fitur “Keyword Populer” untuk melihat diskusi berdasarkan keyword yang paling sering
ditanyakan.
Upvote dan Downvote Komentar pada Diskusi
Saat membuka sebuah diskusi, Anda akan menemukan komentar beserta jawaban dari siswa dan
instruktur di bagian bawah. Pada setiap komentar terdapat tombol panah atas (˄) dan panah bawah (˅).
Klik tombol panah atas (˄) jika Anda merasa komentar atau jawaban tersebut bijaksana, menarik, dan
bermanfaat. Gunakan tombol panah bawah (˅) jika Anda merasa komentar atau jawaban tersebut tidak
sopan, tidak membantu, atau bahkan tidak tepat.
Gunakan fitur Upvote dan Downvote ini seperti arahan di atas sehingga kualitas komentar dan jawaban
pada forum diskusi dapat terjaga dengan baik.
Approved Answer
Jika terdapat komentar/tanggapan berupa solusi terbaik dari permasalahan yang Anda tanyakan,
tandailah komentar tersebut sebagai jawaban terpilih. Caranya dengan menekan tombol “Jawaban
Terpilih” di sisi kanan atas komentar.
Fitur ini juga akan mempermudah siswa lainnya dengan pertanyaan yang sama untuk menemukan titik
terang solusinya.
Mengenal Teman Sekelas Anda
Berhubungan baik dengan teman sekelas dan instruktur merupakan bagian penting dari kelas ini karena
mereka dapat membantu jika Anda mengalami kendala dalam pemahaman materi.
Oleh karena itu, kami ingin Anda meluangkan waktu untuk mencairkan suasana dan saling mengenal.
Membangun interaksi dengan siswa lain akan membuat pengalaman belajar Anda jauh lebih
menyenangkan dan menarik.
Beberapa hal yang dapat Anda tulis pada perkenalan diri.
Siapa Anda dan dari mana Anda berasal?
Apa pekerjaan atau pendidikan Anda saat ini?
Mengapa Anda mengambil pelatihan ini? Apakah mungkin karena Anda sedang mengejar perubahan
dalam karier atau lainnya?
Ayo aktif di forum diskusi kelas ini!
Yuk, mulai dengan memperkenalkan diri Anda pada thread Perkenalan Diri berikut.
https://www.dicoding.com/academies/123/discussions/89645
Materi yang akan Dipelajari
Dalam kelas Belajar Dasar Pemrograman Web, kita akan mempelajari materi-materi dasar seputar
pemrograman di website. Materi dalam kelas ini dibagi menjadi 6 modul. Berikut adalah modul-modul
yang akan dicakup dalam kelas ini.
Modul 1: Pengenalan Website
Pada modul ini kita akan mempelajari berbagai hal seputar website seperti pengertian website, sejarah
website secara singkat, struktur pembentuk website dan client dan server.
Modul 2: Pengenalan HTML
Pada modul ini kita akan mengenal apa itu HTML, proses pembuatan dokumen HTML, struktur dasar
dokumen HTML, dan cara mengidentifikasi elemen yang tepat pada konten website.
Modul 3: Pendalaman HTML
Modul ini merupakan modul lanjutan dari modul sebelumnya yang membahas secara lebih dalam
mengenai elemen-elemen HTML. Contohnya attribute pada elemen, paragraf, heading, list, image, teks
terformat (quote, anchor, bold, dll), semantic HTML, generic element, table, special character, dan
sebagainya.
Modul 4: Pengenalan CSS
Dalam modul ini, kita akan membahas bahasa markup lainnya, yaitu Cascading Style Sheet atau disingkat
CSS. CSS adalah fondasi lanjutan dalam anatomi website setelah HTML. Kita akan mempelajari mengenai
pengenalan CSS, cara kerja CSS, pembuatan berkas CSS, penghubung dokumen HTML dengan CSS,
penulisan CSS rule, dan konsep yang diterapkan CSS.
Modul 5: Pendalaman CSS
Modul ini akan membahas secara lebih lanjut mengenai CSS. Diantara hal yang akan dibahas seperti
selector, formatting text, text styling, dimensi, warna, box model, positioning, media query, dan
sebagainya.
Modul 6: Layout Responsif dengan Flexbox
Modul ini akan membahas pengaturan posisi layout yang responsif menggunakan flexbox ketimbang
float. Flexbox atau Flexible Box merupakan alat yang dapat sangat diandalkan dalam menyusun layout
halaman web.
Materi-materi modul diatas akan dibahas secara rinci dengan bahasa yang mudah dipahami sehingga
Anda dapat memahami seluruh materi diatas dengan baik. Nikmati proses dengan mempelajari satu per
satu sampai Anda benar-benar paham. Gunakan forum diskusi jika Anda menemukan hal yang
mengganjal dalam materi.
Glosarium
Ini adalah glosarium dengan istilah umum yang digunakan dalam kelas. Anda dapat membaca sekilas
materi ini untuk mengenali istilah-istilah umum yang ada pada materi kelas ini. Selain itu, Anda juga
dapat mengunjungi kembali halaman ini setiap kali menemukan istilah yang belum dimengerti. Carilah
istilah tersebut pada laman glosarium ini untuk mengidentifikasi makna atau definisinya. Jika masih
terdapat kosakata yang tidak dipahami dan belum masuk dalam daftar ini, Anda dapat memberikan
saran melalui fitur Laporan Materi.
Browser
Browser adalah alat atau tools yang digunakan untuk mengakses atau mengembangkan website.
C
CSS
CSS atau Cascading Style Sheet adalah bahasa markup atau markup language yang digunakan untuk
mempercantik website. Bahasa ini merupakan pelengkap dari dokumen HTML.
Client
Client adalah perangkat yang memiliki kemampuan mengirimkan permintaan atau request kepada
server melalui protocol HTTP. Hasil request tersebut akan diterima oleh client jika server telah
mengirimkan tanggapan (response).
DNS
DNS atau Domain Name System adalah layanan jaringan yang berguna untuk menerjemahkan nama
domain menjadi alamat IP.
HTML
HTML atau Hyper Text Markup Language adalah bahasa markup standar untuk mengembangkan
halaman web. HTML ini akan mendeskripsikan struktur dari halaman web dan memberitahukan browser
bagaimana menampilkan konten.
HTTP Server
Server berperan pada sebuah website sebagai sebuah software yang dapat menerima transaksi dari
HyperText Transfer Protocol.
Plain Text
Plain Text adalah teks yang tak terformat. Biasanya digunakan untuk menuliskan kode program seperti
website.
Rich Text
Rich Text adalah teks yang terformat. Biasanya digunakan dalam pembuatan dokumen menggunakan
aplikasi Microsoft Word atau lainnya.
Sistem Operasi
Sistem operasi adalah sebuah perangkat lunak sistem yang mampu mengelola sumber daya dari
perangkat lunak dan perangkat keras agar dapat berjalan dengan baik serta memudahkan proses
interaksi dengan pengguna (brainware).
Text Editor
Text Editor adalah alat atau tools pengedit kode yang digunakan untuk mengembangkan website.
Website
Halaman yang menampilkan informasi kepada pengguna berupa teks atau gambar. Website dapat
diakses melalui internet dengan menggunakan browser.
WWW
WWW atau World Wide Web adalah sebuah ruang informasi yang mana direferensikan sebagai sumber
daya yang diidentifikasikan oleh pengidentifikasi global yang dinamai dengan Uniform Resource
Identifiers (URI).
Daftar Referensi
[1] CERN. “About this project”. https://first-website.web.cern.ch/first-website. Diakses pada 28 Maret

2022.
[2] Merriam-Webster, “Markup language.”. https://www.merriam-webster.com/dictionary/markup

%20language. Diakses pada 28 Maret 2022.
[3] Eric Tirado. “Learn HTML in 5 minutes”. https://www.freecodecamp.org/news/learn-html-in-5-

minutes-ccd378d2ab72/. Diakses pada 28 Maret 2022.
[4] Diskominfo Kabupaten Kubu Raya. “Bingung Apa itu DNS? Perhatikan Penjelasan Fungsi dan Cara
Kerjanya”. https://diskominfo.kuburayakab.go.id/read/58/bingung-apa-itu-dns-perhatikan-penjelasan-
fungsi-dan-cara-kerjanya. Diakses pada 28 Maret 2022.
[5] Chris Coyier. “A Complete Guide to Flexbox”. https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Diakses pada 28 Maret 2022.
[6] Mozilla Developer Network. “Flexbox”.

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox#flex_shorthand_versus_longh
and/. Diakses pada 28 Maret 2022.
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.
dos:7d47e1f00887f10ed71a960dbb6cf27e20230612141700.jpeg
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.
orang berjalan menyeberangi jalan melalui zebra cross
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.
dos:a360f6f6c815d283d34b07d3f99c179820230615104345.jpeg
Lalu, bagaimana cara satu komputer dapat terhubung pada lebih dari satu komputer lainnya?
Jawabannya, Anda perlu terhubung dengan sejumlah komputer agar dapat berkomunikasi.
dos:9275472d2774c15db5e6e2bf9e23d91220230615104444.jpeg
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.
dos:6e51f4c8303c7f632346931445423e6320230615104451.jpeg
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.
dos:fb5dff3f967d8e687a0eafe167191aae20230612142702.jpeg
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.
dos:3be181a8e5ba7b0e2e0d26114bb5d08020230615104510.jpeg
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
dos:c6893908bc56e13469f511702a72a32320230615104554.jpeg
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.
dos:01534503eeb7bfc20b9ae9741e43e70120230612143110.jpeg
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
dos:1755e6190df1a5dcfba9ed78f9b2094520230615104610.jpeg
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!
dos:27897e90cbbe64df7dab770d8f9d19d820230612143237.jpeg
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.
dos:991490ac25926780e9ac904980b1a27220230612143238.jpeg
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.
dos:4a1c793bf59bbf3b5f649e9743a3c2a320230615104719.jpeg
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.
dos:e848988c38c1089f54418cebbe066fdf20230615104733.jpeg
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.
dos:07dc0129fb041724a645102e876d855520230615104748.jpeg
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.
DgJCT_37TthxdquI75r5uxb8zGEL70Ln9JBcj3-W1w1oJoc2tZbPD2luAL6-
MOCZBVzCt3GOC3mt3trSyHL0ybOQcCr8kAQ3d-
67JaMvAqz0tpYevKS1vRTcGHAZnMZrsLUPY8evOMRCUDOQhFKoDSU
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.
Mozilla Firefox
Google Chrome
Microsoft Edge
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).
dos:c5e8668c6e9bc1de6154ca79ca0d413f20230612145116.jpeg
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?
dos:1dd5084c0c0ba381a15f74c0428640e720230612145239.jpeg
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 markup 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.
dos:44da68acdc9236cb4084fd566eb390e220230612145328.jpeg
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.
dos:82a2e7f86e16cae4a3719f391c2ebc8f20230612145356.jpeg
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 Keterangan
dos:6bee19b0262c088e3bfdb19531a103d720230621135644.jpeg
Dua buah komputer saling terhubung untuk berkomunikasi, baik menggunakan kabel atau nirkabel.
dos:6db39faa6eb29f1e315f87c405d750ef20230621135751.jpeg
Banyak komputer terhubung dengan banyak komputer juga.
dos:cc4d18052afc58fdee756cda4c5eafe820230621140030.jpeg
Jaringan ini sudah terbentuk dengan memanfaatkan network switch agar dapat terkoneksi dengan
mudah dan efisien. Bahkan, satu jaringan dengan network switch dapat terhubung dengan network
switch lain sehingga memperbesar koneksi komputer.
dos:bab5b3cea838e21a99aff8e3fc35aa2920230621140052.jpeg
Suatu jaringan dapat terhubung dengan jaringan lainnya meskipun berbeda kontinen. Ia menggunakan
Internet Service Provider (ISP) agar saling terhubung dengan router ISP lainnya.
Website dan Halaman Web
Berikut adalah penjelasan singkat mengenai halaman web dan website.

Halaman Web
dos:fbbdb03c361341e2d90635b30410d6c520230621140104.jpeg
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
dos:9954dc0c0f4350c5053783f47fcd07fd20230621140113.jpeg
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.
dos:d09d5bc0edee4f14c5f2fc365b179faa20230621140126.jpeg
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.
dos:dae00f9af95767de93359c0281d0d6f820230621140131.jpeg
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.
dos:b0e05f63db1291d5dd90114bf8807dca20230621140147.jpeg
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).
dos:1afa9a3b6fa83c1242e4f74872e6fb7620230621102418.jpeg
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 markup 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.
dos:f9a526fea49f0a5ac4ecba200ea167fa20230621102418.jpeg
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.
dos:3456ae4a1c774455d6ad47b7c432b26120230614143148.png
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.
dos:ad47a99a0b01267a96f8b33b9e54769a20230614143039.jpeg
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.
dos:df82468a75ee5dff2f7d22c94313225520230614143258.jpeg
Alur Latihan
Berikut adalah alur latihan kali ini.
Membuka code editor bawaan sistem operasi.
Menuliskan struktur konten (kode) halaman web pada code editor.
Menyimpan kode yang telah ditulis dalam bentuk HTML.
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
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.
Seharusnya Notepad akan muncul pada layar laptop/komputer seperti berikut.
dos:d648fc662d7d8dfa068afb946b52c40c20230614143713.jpeg
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.
Bandung
Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.
Sejarah
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.
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.
Geografis
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.
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.
Wisata
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.
Farm House Lembang
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.
Observatorium Bosscha
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.
Jika sudah, seharusnya tampilan Notepad kurang lebih akan tampak seperti gambar berikut.
dos:779f4412044abb198084c3ce3a038b5d20230614143805.jpeg
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.
dos:dab5bffdf58e5ddbc818e211af605da020230614143821.jpeg
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”.
dos:7426a86b17368a62ab7f76fa137d6cd720230614143947.jpeg
Jika sudah, tekan tombol “Save” untuk memproses penyimpanan berkas.
Luar biasa! Berkas tersebut sudah dapat kita lihat pada folder yang kita tentukan sebelumnya. Berikut
adalah kondisi direktori WebDasar milik kami saat ini.
dos:90d5b04f70d0201f29d2913421a0253f20230614144024.jpeg
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.
dos:d64c674cd98d7b9da4f1c8d98e01b1c520230614144041.jpeg
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
dos:ad69ec21e4c8e4ece90289d0466e519620230614145837.jpeg
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?
dos:e7b17ed23e9e2fafc797ce95c6a70c7e20230614150032.jpeg
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.
dos:1d4273687366265d4291154ae59b1d2520230614150032.jpeg
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.
Membuka hasil akhir dari latihan sebelumnya.
Menuliskan struktur dasar dokumen HTML pada berkas index.html.
Menempatkan seluruh konten pada elemen body.
Membungkus setiap bagian dari artikel dengan elemen yang tepat.
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.
Membuka hasil akhir pada latihan sebelumnya. Jika belum punya, silakan siapkan proyek berisi berkas
index.html dengan kode berikut.
Bandung
Sejarah
Geografis
hujan.
Wisata
Farm House Lembang
hari Sabtu.
Pada berkas index.html, silakan tambahkan struktur dasar dokumen HTML di posisi teratas. Kode yang
perlu ditambahkan adalah kode bercetak tebal.
<!DOCTYPE html>
<html>
<head></head>
<body>
</body>
</html>
Bandung
Sejarah
Geografis
hujan.
Wisata
Farm House Lembang
hari Sabtu.
Karena seluruh konten yang ditampilkan ada dalam elemen <body>, silakan masukkan seluruh konten
artikel padanya sehingga hasil keseluruhan kode menjadi seperti berikut.
<!DOCTYPE html><html>
<head></head>
<body>
Bandung
Sejarah
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.
Geografis
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
hujan.
Wisata
Farm House Lembang

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.
</body>
</html>
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.
dos:c93d74986053663056fd03b38021eca520230614150618.jpeg
Jika sudah, kita dapat memberi elemen heading dan elemen paragraf sesuai dengan hasil identifikasi.
Jika diimplementasikan, hasil kode akan tampak seperti berikut.
<head></head>
<body>
<h1>Bandung</h1>
<p>
Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu
kota provinsi tersebut.
</p>
<h2>Sejarah</h2>
<p>
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.
</p>
<p>
Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat
Nga-Bandung-an Banda Indung, yang merupakan kalimat sakral dan luhur
karena mengandung nilai ajaran Sunda. Nga-Bandung-an artinya menyaksikan
atau bersaksi. Banda adalah segala sesuatu yang berada di alam hidup yaitu
di bumi dan atmosfer, baik makhluk hidup maupun benda mati. Sinonim dari
banda adalah harta. Indung berarti Ibu atau Bumi, disebut juga sebagai Ibu
Pertiwi tempat Banda berada.
</p>
<h2>Geografis</h2>
<p>
Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi
wilayahnya bagaikan sebuah mangkok raksasa, secara geografis kota ini
terletak di tengah-tengah provinsi Jawa Barat, serta berada pada
ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di berada
di sebelah utara dengan ketinggian 1.050 meter di atas permukaan laut dan
sebelah selatan merupakan kawasan rendah dengan ketinggian 675 meter di
atas permukaan laut.
</p>
<p>
Kota Bandung dialiri dua sungai utama, yaitu Sungai Cikapundung dan Sungai
Citarum beserta anak-anak sungainya yang pada umumnya mengalir ke arah
selatan dan bertemu di Sungai Citarum. Dengan kondisi yang demikian,
Bandung selatan sangat rentan terhadap masalah banjir terutama pada musim
hujan.
</p>
<h2>Wisata</h2>
<p>
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
</p>
<h3>Farm House Lembang</h3>
<p>
Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata

yang tidak pernah sepi pengunjung. Selain karena letaknya strategis,
kawasan ini juga menghadirkan nuansa wisata khas Eropa. Semua itu
diterapkan dalam bentuk spot swafoto Instagramable.
</p>
<h3>Observatorium Bosscha</h3>
<p>
Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt
Bimasakti, Refraktor Bamberg, Cassegrain GOTO, dan Teleskop Surya.
Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk meneropong
bintang. Benda ini diletakkan pada atap kubah sehingga saat teropong
digunakan, atap tersebut harus dibuka. Observatorium Bosscha boleh
dikunjungi oleh siapapun, tanpa tiket. Namun, bagi yang ingin menggunakan
teleskop Zeiss, wajib mendaftarkan diri. Untuk instansi atau lembaga
pendidikan, diberikan jadwal hari Selasa sampai Jumat. Sementara itu,
kunjungan individu dibuka setiap hari Sabtu.
</p>
</body>
</html>
Silakan save perubahan yang terjadi pada berkas HTML dan buka pada browser. Seharusnya, halaman
web akan terlihat seperti berikut.
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.
<head>
<meta charset="utf-8">
<title>Halaman Profil Bandung</title>
</head>
<body>

</body>
</html>
Seharusnya tab browser Anda akan menampilkan judul webpage dengan baik.
dos:7becadfcb801031858dec3be376f5d8420230614150617.jpeg
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.
dos:cd264e5b9066e37034ced6bb88f8cf1920230614150616.jpeg
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.
dos:d7095bac468b184e3ea386f41199c99120230614150619.jpeg
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.
dos:7a84d0ad0b3ca3b10ec49a14d2fa6f1c20230614150619.jpeg
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.
dos:172ecf76e1d65e6eef461837b452da4820230614150619.jpeg
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.
Anatomi Elemen HTML
Pada hasil latihan sebelumnya, Anda sudah berhasil menjalankan halaman web pertama dengan baik.
Apakah Anda merasa bahwa membuat dokumen HTML tidak berbeda dengan membuat dokumen
biasa? Jika melihat pengalaman tersebut, sebenarnya hal tersebut memang benar.
Sudah disinggung sebelumnya bahwa ada struktur dasar dalam menyusun halaman web. Ini dibutuhkan
agar halaman web yang diakses dapat dipahami oleh browser. Namun, sebelum ke sana, kita akan
belajar mengenai elemen HTML.
Pada dasarnya, struktur dasar halaman web disusun dengan banyak elemen HTML. Oleh karena itu, kita
perlu memahami elemen HTML dan anatominya.
Apa Itu Elemen HTML
Elemen adalah salah satu bagian dari HTML dalam membangun halaman web. Ini digunakan untuk
mendefinisikan konten-konten yang ditampilkan dalam halaman web. Contohnya, kita bisa
menggunakan elemen paragraf dalam menampilkan media teks sebagai kontennya.
dos:0b14e710caec66414bac5c077733ffed20230614155217.jpeg
Gambar di atas adalah salah satu contoh elemen untuk menampilkan paragraf dalam halaman web.
Bagaimana dengan judul? Tentunya, HTML memiliki elemen khusus untuk hal tersebut. HTML memiliki
segudang elemen untuk mendukung kita dalam membuat halaman web yang baik.
Jika gambar di atas dijalankan, hasilnya seperti berikut.

dos:7bc1b73b5f5d85da19bb918925d8ee5f20230614155217.jpeg
Apabila sekilas dilihat, sebetulnya tidak ada bedanya jika kita menuliskannya tanpa elemen HTML, yaitu
menuliskan teks dalam berkas secara langsung. Mengapa hal tersebut dapat terjadi? Sebelum menjawab
pertanyaan tersebut, silakan perhatikan kode berikut.
Tanpa Elemen HTML
Dengan Elemen HTML
Ini adalah teks tanpa elemen paragraf
Hasilnya berikut.
dos:1116b3212db1f6e636b39610415b38f820230614155555.jpeg
Silakan Anda perhatikan kedua window Browser pada gambar di atas, lebih tepatnya DevTools pada
bagian tab Styles. Kita melihat ada kotak yang berwarna jingga, kuning, hijau, dan biru (bagian kotak
terdalam). Warna-warna tersebut merupakan margin, border, padding, dan konten (contohnya teks
yang akan ditampilkan). Kotak ini merupakan hasil representasi dari seluruh elemen HTML. Pembahasan
ini dinamai box model dan akan diulas lebih rinci pada modul terpisah.
Catatan:
Untuk melihat seperti yang ditunjukkan gambar di atas, Anda dapat membuka Developer Tools (Inspect
Elements) dan tab Elements serta Styles pada browser yang digunakan. Cara yang paling singkat untuk
membukanya adalah menekan tombol F12.
Nah, berbicara mengenai perbedaan antara menggunakan elemen HTML maupun tidak, kita melihat ada
perbedaan dari sisi styling. Teks yang dibungkus dengan elemen paragraf memiliki margin vertikal
sebesar 16 piksel secara bawaan, sedangkan teks yang tidak dibungkus sama sekali tidak akan memiliki
style apa pun, kecuali styling yang dimiliki oleh elemen <body>.
Dalam membangun halaman web, penggunaan elemen HTML sangatlah penting. Sebagaimana
disebutkan sebelumnya, browser akan memahami hal yang dituliskan jika kita menggunakan elemen
yang tepat. Selain itu, browser memiliki pengaturan khusus bagi masing-masing elemen HTML, seperti
styling yang diterapkan, aksesibilitas, dsb. Dibandingkan tanpa elemen, konten yang ditampilkan pun
tidak memiliki arti apa pun oleh browser.
Anatomi Elemen HTML
Kita semua sudah melihat secara sekilas rupa dari elemen HTML. Namun, ada beberapa hal untuk
membangun elemen HTML itu sendiri. Secara garis besar, berikut adalah bagan dari anatomi elemen
HTML.
dos:2a2139da159f243ece570f1c900d1e8a20230620095323.png
Pada gambar di atas, kita dapat melihat bahwa elemen HTML terdapat dua tag, yaitu tag pembuka <>
dan tag penutup </>. Di antara tag pembuka dan penutup, kita dapat meletakkan sebuah konten.
Item
Keterangan
Tag pembuka
Berisi nama dari elemen yang akan dibuat dan dibungkus dengan tanda kurung siku(<>). Contohnya
adalah <p> untuk membuat elemen paragraf yang menggunakan p sebagai nama elemennya–singkatan
dari kata paragraf dalam bahasa inggris (paragraph).
Konten
Konten dari elemen. Contohnya teks sebagai konten dari elemen paragraf.
Tag penutup
Mirip seperti tag pembuka, tetapi terdapat garis miring sebelum nama elemennya. Ini menandakan
akhir dari elemen HTML. Biasanya, kesalahan bagi web programmer pemula adalah melupakan tag ini
sehingga menyebabkan elemen tidak valid.
Elemen dalam Elemen
Selain memiliki teks sebagai konten, elemen dapat memiliki elemen lain di dalamnya atau biasa disebut
dengan child-element. Contohnya, kami memiliki elemen paragraf dengan teks sebagai konten di
dalamnya. Kami ingin memberikan format teks miring atau tebal pada beberapa kata. Berikut adalah
hasil implementasinya.
dos:d40aae4c01ab2e421d1efc8ceda0c94d20230614155838.jpeg
Hasilnya berikut.
dos:405b915f20c0264765e7fd8d6915d62820230614155838.jpeg
Itulah pembahasan mengenai anatomi elemen HTML. Elemen ini memiliki peran yang sangat besar
terhadap browser agar informasi-informasi dapat ditampilkan dengan baik. Untuk menambah wawasan,
ada sumber artikel yang menyebutkan elemen HTML. Anda dapat membuka HTML elements reference
dari MDN.
Attribute di Elemen HTML
Sebelumnya, kita sudah membahas elemen HTML beserta anatominya. Nah, ada satu bahasan lainnya
yang belum kita pelajari, yaitu atribut. Nah, mari kita simak pembahasannya.
Dalam membuat elemen HTML, ada satu hal yang dapat dilakukan, yaitu memberi atribut. Atribut dapat
memberi informasi-informasi tambahan untuk elemen HTML. Informasi ini tidak akan tampil dalam
halaman web, tetapi ia dapat menentukan perilaku elemen biasanya.
Contohnya, ada satu elemen yang berfungsi untuk menampilkan gambar sebagai konten halaman web,
yaitu <img>. Nah, kita perlu menyertakan informasi pada elemen tersebut, yaitu alamat dari gambar
yang akan ditampilkan.
dos:ca7c120f553eff399206116e79d0e4b020230614160049.jpeg
Pada gambar di atas, atribut src menentukan lokasi gambar yang akan ditampilkan pada halaman web.
Dari contoh di atas, mungkin Anda sudah terbayang bentuk penerapan atribut HTML. Namun, berikut
adalah anatomi dari atribut elemen untuk memperjelas pemahaman Anda.
dos:3ce8a0457c8eb4b99e54aaaf57775b8c20230620095546.png
Pada gambar di atas, kita memiliki atribut class. Secara singkat, atribut ini merupakan sebuah nama
identitas yang digunakan untuk menargetkan elemen dengan kode styling. Untuk pembahasan styling
akan dicakup pada modul terpisah.
Ada dua hal yang dilakukan untuk menambahkan atribut pada elemen HTML, yaitu nama atribut dan
nilainya. Ada banyak atribut yang disediakan oleh HTML. Salah satu yang terlihat sebelumnya adalah
class dan src. Terkait nilainya, Anda dapat menulisnya dengan membungkus dengan tanda kutip satu
atau dua setelah karakter sama dengan (=).
Berikut adalah beberapa atribut yang tersedia di HTML.
Attribute
Description
accesskey
Menentukan tombol shortcut untuk mengaktifkan/memfokuskan pada sebuah element.
class
Menentukan satu atau lebih classname untuk sebuah elemen.
contenteditable
Menentukan konten dari elemen merupakan konten yang dapat diubah atau tidak.
data-*
Menyimpan sebuah data pribadi khusus ke halaman atau aplikasi.
dir
Menentukan arah teks untuk konten pada suatu elemen.
draggable
Menentukan suatu elemen dapat di-drag atau tidak.
dropzone
Menentukan data yang di-drag adalah data yang disalin, dipindahkan, atau ditautkan saat dijatuhkan.
hidden
Menentukan suatu elemen ditampilkan atau tidak pada browser.
id
Menetapkan id pada elemen.

lang
Menentukan bahasa pada konten elemen.
spellcheck
Menentukan elemen harus diperiksa ejaannya dan tata bahasanya atau tidak.
style
Menentukan styling secara satu baris untuk suatu elemen.
tabindex
Menentukan urutan dari suatu elemen.
title
Menentukan informasi tambahan tentang suatu elemen.
translate
Menentukan konten elemen harus diterjemahkan atau tidak.
Itulah pembahasan mengenai anatomi elemen HTML. Elemen ini memiliki peran yang sangat besar
terhadap browser agar informasi-informasi dapat ditampilkan dengan baik. Untuk menambah wawasan,
ada artikel yang menyebutkan atribut-atribut yang dapat digunakan. Silakan kunjungi HTML attribute
reference dari MDN.
Anatomi Dokumen HTML
Website serupa dengan dokumen konvensional yang ada. Serupa dalam arti memiliki struktur konten
layaknya dokumen konvensional pada umumnya. Contohnya koran, majalah, atau buku. Selain itu, tidak
jarang juga kita sering melihat artikel. Artikel memiliki beberapa komponen atau elemen, seperti judul,
gambar, paragraf, dan sebagainya. Terkadang, jika konten artikel sangat panjang, pengelompokan akan
dilakukan pada setiap bahasan menjadi beberapa bagian dengan memanfaatkan subjudul.
Judul dan subjudul pada sebuah dokumen menggambarkan suatu hierarki informasi. Misalnya, judul
tingkat tertinggi merupakan judul utama dalam sebuah konten. Kemudian, diikuti dengan judul tingkat
lebih rendah dan menjelaskan informasi dengan lebih rinci lagi.
Pada dasarnya, dokumen HTML memerlukan struktur dasar untuk menampilkan halaman web dengan
baik. Halaman web seharusnya memiliki susunan elemen HTML yang tampak seperti berikut.
dos:1fff210dfc27c1acce236c7ace7f775720230614154432.jpeg
Pada pembahasan materi sebelumnya, kita mengetahui bahwa elemen dapat menjadi anak dari elemen
lain atau biasa disebut child-element. Nah, contoh nyata yang dapat kita lihat adalah struktur dasar
halaman web di atas. Contohnya, elemen <head> dan <body> merupakan child-element dari <html>.
Lalu, elemen <head> memiliki child-element <title> yang memiliki konten berupa teks dari judul
halaman yang ditampilkan. Elemen <body> memiliki child-element <h1> untuk menampilkan heading
dan <p> untuk menampilkan paragraf.
Hal di atas sebetulnya akan membentuk sebuah hierarki elemen atau biasa disebut dengan DOM Tree
(pohon DOM). Ini dapat Anda analogikan seperti silsilah keluarga.
dos:4847f4456d343857a8446ae1fca98e0320230620095727.png
Doctype HTML
Sederhananya, doctype dimaksudkan sebagai format atau versi HTML dan berisi sekumpulan aturan-
aturan yang perlu diikuti dalam membangun halaman web yang baik. Pada waktu lampau, dokumen
HTML disusun seperti berikut.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
Versi HTML yang digunakan dari kode di atas adalah 4. Selain itu, penulisannya pun sangat panjang dan
sulit dihafal. Sekarang, kita dapat menggunakan HTML versi 5 dengan cara yang sangat mudah dan valid.
<!DOCTYPE html>
Elemen <html>
Hierarki elemen teratas dari halaman web adalah elemen <html>. Elemen ini digunakan untuk
memberitahu browser bahwa ia merupakan sebuah berkas HTML sekaligus menjadi root dari halaman
web. Seluruh elemen lain tentunya dituliskan di dalam elemen ini (child-element).
Elemen <head>
Elemen <head> berfungsi sebagai tempat disimpannya informasi dari dokumen HTML. Informasi dapat
berupa elemen meta, style, favicon, atau link. Selain itu, kita bisa memberikan judul dari halaman web
(tab browser). Berikut adalah beberapa contoh elemen yang biasanya diletakkan dalam elemen ini.
<title>
<style>
<base>
<link>
<meta>
<script>
<noscript>
Pada HTML versi 4.01, elemen <head> wajib ada dalam sebuah berkas HTML. Berikut adalah contoh
pembuatan elemen <head> beserta kontennya.
<head>
<title>Judul Halaman Anda</title>
<style>
/* Kode CSS anda */
</style>
</head>
Namun, penggunaan <head> dapat dihilangkan sejak HTML5. Jadi, struktur dasar berkas HTML menjadi
seperti berikut.
<!DOCTYPE html>
<html>
<title>Judul Halaman</title>
<style>
/* style */
</style>
<body>
<h1>Judul Utama</h1>
<p>Sebuah paragraf</p>
</body>
</html>
Elemen <body>
Tahukah kamu, bagaimana konten dapat ditampilkan dan di mana peletakannya? Setiap konten atau
elemen dalam elemen <body> akan ditampilkan dalam halaman web. Elemen apa pun, baik gambar,
judul, daftar barang, paragraf, dsb., yang diletakkan dalam elemen ini akan muncul. Bahkan, teks yang
tak dibungkus oleh elemen sekalipun.
Silakan tuliskan kode berikut, simpan dalam format HTML, dan jalankan pada browser.
HTML
Hasilnya
<!DOCTYPE html>
<html>
<head>
<title>Judul Dokumen HTML</title>
</head>
<body>
<h1>Heading yang Diletakkan dalam Elemen Body</h1>
<p>Ini merupakan sebuah paragraf yang juga diletakkan pada elemen body. Konten ini dapat dilihat
oleh pengguna pada jendela browser.</p>
</body>
</html>
Seluruh konten yang dituliskan pada body akan ditampilkan. Namun, ada kode yang tidak akan
ditampilkan. Kode atau fitur yang dimaksud adalah komentar. Jika ingin menuliskan keterangan
tambahan pada struktur dokumen HTML, kita perlu menggunakan commenting tag. Ini dituliskan
dengan simbol  sebagai penutupnya.
Semua yang dituliskan di antara tag komentar tidak akan memberikan pengaruh apa pun, termasuk
tampilan di jendela browser. Berikut adalah contoh implementasi dari tag komentar.


Komentar berguna untuk memberikan label dan mengorganisasi sebuah dokumen yang panjang,
terlebih ketika bekerja secara tim.
Lorem Ipsum Generator
Lorem ipsum adalah teks standar yang ditempatkan untuk mendemonstrasikan elemen grafis atau
presentasi visual, seperti font, tipografi, dan tata letak. Tujuan penggunaan lorem ipsum sebagai berikut.
Sebagai pengisi sementara jika belum ada konten teks.
Jika ingin menunjukkan hasil website sementara yang mana audiens diharapkan lebih fokus kepada
elemen desain yang dipresentasikan, bukan pada isinya (teks).
Penggunaan lorem ipsum biasanya digunakan pada proses pengembangan (development). Berbagai cara
untuk membuat teks lorem ipsum dijelaskan pada poin-poin berikut.
Menggunakan Microsoft Word
Buat dokumen baru dan ketiklah kode berikut pada lembar kerja.
=lorem()
Kemudian, tekan tombol enter pada keyboard. Teks lorem ipsum akan muncul secara otomatis. Kamu
juga dapat mengatur jumlah teks yang muncul dengan cara ketik kode berikut.
=lorem("angka_paragraf", "angka_kalimat_pada_setiap_paragraf")
Contohnya, jika mengetik =lorem(3,4), teks lorem ipsum akan muncul sebanyak 3 paragraf dan masing-
masing paragraf terdapat 4 kalimat.
Generator Online
Tersedia banyak situs generator lorem ipsum gratis, seperti id.lipsum.com dan loremipsum.io.
Rangkuman Pengenalan HTML
Kita telah belajar banyak hal dalam modul Pengenalan HTML. Kami siapkan rangkuman materi terhadap
hal yang telah Anda pelajari selama ini. Harapannya, Anda dapat mengingat kembali setiap materi yang
disampaikan.
Pengantar HTML
dos:3083ee98c012e9b663e77357d5651e7220230621104419.png
Apakah Anda masih ingat HTML? Ia merupakan satu-satunya bahasa markup untuk membangun
struktur halaman website. Sebagaimana yang telah dipelajari sebelumnya, HTML analogikan seperti
kerangka hewan yang menentukan bentuk tubuhnya. Hal ini menjadikan setiap hewan memiliki bentuk
yang bermacam-macam.
Anatomi Elemen HTML
Elemen HTML adalah salah satu bagian dari HTML dalam membangun halaman web. Elemen ini
digunakan untuk mendefinisikan elemen-elemen yang ditampilkan dalam halaman web. Ada beberapa
hal untuk membangun elemen HTML itu sendiri. Secara garis besar, berikut adalah bagan dari anatomi
elemen HTML.
dos:9e25d269df3a01c7295ef7ff6b73d08520230623095734.png
Berikut adalah pembahasan dari masing-masing bagian dari bagan di atas.
Item Keterangan
Tag pembuka
Berisi nama tag dari elemen yang akan dibuat dan dibungkus dengan angle bracket (<>). Contohnya
adalah <p> untuk membuat elemen paragraf yang menggunakan p sebagai nama elemennya--singkatan
dari dalam bahasa inggris (paragraph).
Konten
Konten dari elemen. Contohnya teks sebagai konten dari elemen paragraf.
Tag penutup
Masih sama seperti tag pembuka, kecuali terdapat garis miring sebelum nama elemennya. Ini
menandakan akhir dari elemen HTML. Biasanya, kesalahan bagi web programmer pemula adalah
melupakan tag ini sehingga menyebabkan elemen tidak valid.
Attribute di Elemen HTML
Dalam membuat elemen HTML, ada satu hal yang dapat dilakukan, yaitu memberi atribut. Atribut dapat
memberi informasi-informasi tambahan untuk elemen HTML. Informasi ini tidak akan tampil dalam
halaman web, tetapi ia dapat menentukan perilaku elemen biasanya. Berikut adalah anatomi dari
atribut elemen untuk memperjelas pemahaman Anda.
dos:9da1d4c308191bbbff10a6435920afa220230623095750.png
Anatomi Dokumen HTML
Pada dasarnya, dokumen HTML memerlukan struktur dasar untuk menampilkan halaman web dengan
baik. Halaman web seharusnya memiliki susunan elemen HTML yang tampak seperti berikut.
dos:97b9889c49bad9e09a265a3c9ea1d33120230621104355.jpeg
Dokumen di atas sebetulnya akan membentuk sebuah hierarki elemen atau yang biasa disebut dengan
DOM Tree (pohon DOM). Ini dapat Anda analogikan seperti silsilah keluarga. Kurang lebih, berikut
adalah DOM Tree yang terbentuk dari dokumen HTML di atas.
dos:0f3821d245d66fccb2a3e6e48c11095d20230623095802.png0/
Pengantar Pendalaman HTML
Pada modul sebelumnya, kita telah mempelajari permukaan dari HTML. Pengetahuan tersebut sangat
dibutuhkan sebagai fondasi untuk mempelajari materi selanjutnya. Tidak kalah penting juga, itu sangat
dibutuhkan dalam membangun halaman web yang baik dan benar.
Selain mempelajari HTML, kita juga sudah berlatih dalam membangun halaman web sederhana, mulai
dari tanpa struktur dasar dokumen HTML hingga mengidentifikasi dan menerapkan elemen-elemen yang
sesuai dengan konten yang ditampilkan. Pada modul ini, kita akan menyelam lebih dalam dengan variasi
elemen pada HTML. Harapannya, kita dapat memilih elemen yang sesuai dalam menampilkan konten,
terutama ketika mengembangkan proyek latihan kita.
Beberapa hal yang akan kita pelajari sebagai berikut.
Variasi elemen seperti paragraf, heading, list, gambar, dan teks terformat.
Membangun halaman web dengan semantic HTML.
Mengelompokkan elemen dengan generic elemen.
Membuat tabel pada HTML.
Mengetahui berbagai macam elemen input untuk membuat formulir dalam halaman web.
Pada akhir modul, kita akan melanjutkan pengembangan proyek Halaman Profil dengan variasi elemen
yang telah dipelajari. Berikut adalah hasil akhir dari latihan modul ini.
xqaF3ej_LkuRBUTKphtBB9TZL_yr5HuHTM-VFhQ5S6-
3DMPAn3aF8AmyQUtVc8Rhm2uU3MDz1MTCzM2Lgs_agZ3cM8YRjGA1nkrVdNAdPy3Q5qJxYWTlERHOIG
Sog8jEK6RmSH2mq1X5RqDtiKsz_90
Sudah tidak sabar dan sangat bersemangat, kan? Langsung saja masuk ke materi berikutnya. Cus!
Paragraf
Paragraf adalah elemen paling mendasar dari sebuah dokumen teks. Pada HTML, kita bisa menunjukkan
sebuah paragraf dengan menggunakan elemen <p>. Contohnya berikut.
<p>
lava Gunung Tangkuban Parahu yang lalu membentuk telaga...
</p>
<p>
Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-Bandung-an Banda Indung,
yang merupakan kalimat sakral dan luhur karena mengandung nilai ajaran Sunda. Nga-Bandung-an
artinya menyaksikan atau bersaksi...
</p>

Belajar HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Belajar HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul kelas Belajar Dasar Pemrograman Web dalam bentuk cetak (buku) maupun elektronik sudah

Hak cipta dilindungi oleh Undang-Undang © Dicoding 2017 - 2023.

Selamat datang di kelas Belajar Dasar Pemrograman Web!

Code Editor atau IDE

Visual Studio Code

Materi Bacaan Elektronik

Ujian (Kuis dan Ujian Akhir Kelas)

Submission (Proyek, Tugas, Proyek Akhir)

Sebelum Mulai Bertanya

Upvote dan Downvote Komentar pada Diskusi

Mengenal Teman Sekelas Anda

Beberapa hal yang dapat Anda tulis pada perkenalan diri.

Siapa Anda dan dari mana Anda berasal?

Apa pekerjaan atau pendidikan Anda saat ini?

Materi yang akan Dipelajari

Modul 1: Pengenalan Website

Modul 2: Pengenalan HTML

Modul 3: Pendalaman HTML

Modul 4: Pengenalan CSS

Modul 6: Layout Responsif dengan Flexbox

[1] CERN. “About this project”. https://first-website.web.cern.ch/first-website. Diakses pada 28 Maret

[2] Merriam-Webster, “Markup language.”. https://www.merriam-webster.com/dictionary/markup

[3] Eric Tirado. “Learn HTML in 5 minutes”. https://www.freecodecamp.org/news/learn-html-in-5-

[5] Chris Coyier. “A Complete Guide to Flexbox”. https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

[6] Mozilla Developer Network. “Flexbox”.

Pengantar Web Programming

Cara Internet Bekerja

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

Website dan Halaman Web

Perkembangan Aplikasi Web

Siklus Request dan Response

Peranan Web Server

Berikut adalah beberapa referensi lainnya untuk menambah wawasan Anda.

What is a web server? dari MDN.

Ada banyak vendor-vendor browser yang dapat digunakan.

Cara Browser Bekerja

Pada dasarnya, website dibangun dengan tiga buah fondasi utama:

Analogi Website Terhadap Hewan

Cara Internet Bekerja

Berikut adalah perkembangan jaringan yang terjadi.

Banyak komputer terhubung dengan banyak komputer juga.

Website dan Halaman Web

Berikut adalah penjelasan singkat mengenai halaman web dan website.

Mari mengetahui web server lebih dalam.

Siklus Request dan Response

Cara Browser Bekerja

Pada dasarnya, website dibangun dengan tiga buah fondasi utama:

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

Latihan: Membangun Halaman Web Pertama (Halaman Profil)

Berikut adalah hasil yang didapat pada akhir latihan ini.

Berikut adalah alur latihan kali ini.

Membuka code editor bawaan sistem operasi.

Menuliskan struktur konten (kode) halaman web pada code editor.

Menyimpan kode yang telah ditulis dalam bentuk HTML.

Menjalankan berkas HTML dalam browser (Google Chrome).

Latihan Membangun Halaman Web Pertama

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

Farm House Lembang

Jika sudah, tekan tombol “Save” untuk memproses penyimpanan berkas.

Root Project Directory

Membuat Berkas HTML