Tujuan Pembelajaran
Setelah mengikuti pertemuan ini, mahasiswa mampu menjelaskan pengertian web, membedakan website statis dan dinamis, bekerja dengan struktur dasar dokumen HTML, serta membuat halaman web pertama.
Apa itu Web dan Cara Kerjanya
World Wide Web (WWW) adalah kumpulan halaman yang saling terhubung dan dapat diakses melalui internet menggunakan browser. Setiap halaman memiliki alamat unik yang disebut URL (Uniform Resource Locator). Prosesnya dimulai ketika pengguna mengetik alamat di browser, kemudian browser mengirim permintaan ke server, server membalas dengan dokumen HTML, dan browser merender hasilnya ke layar.
HTTP atau HTTPS adalah protokol yang mengatur komunikasi antara browser dan server. HTTPS berbeda dari HTTP karena data yang dikirim sudah dienkripsi sehingga lebih aman. Pemahaman dasar ini penting supaya Anda tahu mengapa sebuah website bisa tampil dan apa saja komponen di baliknya.
Website Statis dan Dinamis
Website statis menyajikan konten yang sama untuk setiap pengunjung. Kontennya sudah ditulis langsung di dalam file HTML sehingga tidak berubah kecuali file itu diedit. Website dinamis, sebaliknya, mengambil data dari basis data atau dari kode yang berjalan di server sehingga kontennya bisa berbeda sesuai permintaan pengguna.
Web Programming pada tingkat ini fokus pada HTML, CSS, dan JavaScript untuk membangun website statis yang responsif dan profesional. Meski statis, fondasi ini menjadi dasar untuk belajar bahasa server belakangan.
Struktur Dasar HTML
HTML adalah singkatan dari HyperText Markup Language. HTML menggunakan elemen yang ditulis di antara tanda lebih kecil dan lebih besar. Setiap elemen biasanya memiliki tag pembuka, isi, dan tag penutup. Satu dokumen HTML minimal memiliki beberapa bagian wajib seperti DOCTYPE, html, head, dan body.
DOCTYPE memberitahu browser bahwa dokumen ini versi HTML5. Bagian head berisi judul halaman dan informasi meta, sedangkan bagian body berisi seluruh isi yang tampil ke pengunjung. Contoh struktur dasar adalah sebagai berikut.
<code class="language-html"><!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Halaman Pertama Saya</title> </head> <body> <h1>Halo Dunia!</h1> <p>Ini halaman web pertama saya.</p> </body> </html></code>
Tag Umum dan Atribut
HTML menyediakan berbagai tag untuk teks, daftar, dan gambar. Tag <h1> sampai <h6> digunakan untuk judul dengan tingkat ukuran berbeda, <p> untuk paragraf, dan <a> untuk tautan yang membutuhkan atribut href. Tag <img> membutuhkan atribut src untuk lokasi gambar dan alt sebagai teks pengganti.
Atribut adalah informasi tambahan di dalam tag pembuka yang melengkapi perilaku elemen. Beberapa elemen seperti <br> dan <hr> tidak memiliki tag penutup karena disebut elemen kosong.
<code class="language-html"><a href="https://example.com">Kunjungi situs</a> <img src="foto.jpg" alt="Foto profil" width="200"></code>
Langkah Praktik
Buka editor teks seperti Visual Studio Code atau Notepad++. Buat folder bernama latihan di komputer Anda, lalu buat file baru bernama index.html di dalamnya. Salin struktur dasar di atas, simpan, kemudian buka file tersebut dengan browser untuk melihat hasilnya.
Ubah judul, tambah satu paragraf baru, dan tambahkan tautan ke halaman lain. Simpan lalu segarkan browser dengan menekan tombol F5. Perhatikan bagaimana perubahan kecil langsung terlihat di layar.
Konsep Kunci
- World Wide Web (WWW) adalah kumpulan halaman yang saling terhubung dan dapat diakses melalui internet menggunakan browser.
- Setiap halaman memiliki alamat unik yang disebut URL (Uniform Resource Locator).
- Prosesnya dimulai ketika pengguna mengetik alamat di browser, kemudian browser mengirim permintaan ke server, server membalas dengan dokumen HTML, dan browser merender hasilnya ke layar.
- HTTP atau HTTPS adalah protokol yang mengatur komunikasi antara browser dan server.
- HTTPS berbeda dari HTTP karena data yang dikirim sudah dienkripsi sehingga lebih aman.
- Pemahaman dasar ini penting supaya Anda tahu mengapa sebuah website bisa tampil dan apa saja komponen di baliknya.
- Website statis menyajikan konten yang sama untuk setiap pengunjung.
- Kontennya sudah ditulis langsung di dalam file HTML sehingga tidak berubah kecuali file itu diedit.
- Website dinamis, sebaliknya, mengambil data dari basis data atau dari kode yang berjalan di server sehingga kontennya bisa berbeda sesuai permintaan pengguna.
- Web Programming pada tingkat ini fokus pada HTML, CSS, dan JavaScript untuk membangun website statis yang responsif dan profesional.
Contoh Kode
<code class="language-html"><p>Page content goes here.</p> <h1>Main Title</h1> <h2>Sub Title</h2></code>
<code class="language-html"><ul> <li>Item one</li> <li>Item two</li> </ul></code>
World Wide Web (WWW) adalah kumpulan halaman yang saling terhubung dan dapat diakses melalui internet menggunakan browser. Setiap halaman memiliki alamat unik yang disebut URL (Uniform Resource Locator). Prosesnya dimulai ketika pengguna mengetik alamat di browser, kemudian browser mengirim permintaan ke server, server membalas dengan dokumen HTML, dan browser merender hasilnya ke layar.
Latihan
Buat satu halaman HTML berjudul Profil Saya yang berisi nama, satu paragraf deskripsi singkat tentang diri Anda, dan satu tautan menuju halaman penutup. Pastikan semua tag ditutup dengan benar dan dokumen valid sesua struktur yang diajarkan.