Memasang Browser

Editor menulis kode, sedangkan program yang membaca kode tersebut lalu menampilkannya sebagai halaman web adalah browser. Dalam istilah teknis, browser bekerja sebagai runtime bagi halaman web: program yang menjalankan dokumen HTML mulai dari teks mentah hingga menjadi tampilan yang dilihat pengunjung. Pada Chapter ini kita memahami peran tersebut, membandingkan pilihan browser utama, lalu memasangnya di Windows, macOS, dan Linux.

Peran Browser sebagai Runtime #

File HTML hanyalah teks biasa yang tidak dapat dijalankan oleh sistem operasi. Ketika browser membukanya, browser menguraikan setiap tag, menyusun struktur dokumen di memori, lalu merendernya menjadi teks, gambar, dan tata letak yang terlihat. Proses inilah yang membuat browser disebut runtime.

Chrome dan Edge memproses HTML dengan mesin Blink, Firefox dengan Gecko, sedangkan Safari dengan WebKit. Karena mesinnya berbeda, dua browser dapat menampilkan file yang sama dengan hasil yang serupa, tetapi tidak jarang berbeda pada detail kecil.

Pilihan Browser Utama #

Empat browser berikut paling umum dipakai saat ini. Tabel berikut merangkum mesin dan ketersediaannya:

Chrome, Firefox, dan Edge tersedia di ketiga sistem operasi, sedangkan Safari hanya untuk perangkat Apple. Pasangan paling praktis untuk pemula adalah Chrome sebagai browser utama dan Firefox sebagai browser kedua, karena keduanya memakai mesin berbeda sehingga hasil uji saling melengkapi.

Mengapa Menguji di Lebih dari Satu Browser #

Bayangkan Budi membuka halaman latihannya di Chrome dan semuanya tampil sempurna. Siti membuka file yang sama memakai Firefox dan menemukan jarak antar paragraf yang sedikit berbeda. Perbedaan ini wajar karena setiap mesin browser merender dokumen dengan cara internal yang tidak identik.

Karena itu, biasakan membuka halaman kita di minimal dua browser setiap menyelesaikan satu latihan. Perbedaan tampilan dengan begitu terlihat lebih awal dan dapat diperbaiki saat masalahnya masih kecil. Pengujian lintas browser dibahas lebih dalam pada section tersendiri.

Cara Memasang Browser #

Pasang hanya dari situs resmi pembuat browser, bukan situs pihak ketiga, agar berkas pemasang bebas dari program tambahan. Langkahnya singkat untuk setiap sistem operasi:

1. Windows #

Windows sudah menyertakan Edge, sehingga kita tinggal memasang browser kedua seperti Chrome atau Firefox. Unduh berkas pemasang dari situs resminya, lalu ikuti langkah pada jendela pemasangan hingga selesai.

2. macOS #

macOS sudah menyertakan Safari. Untuk browser tambahan, unduh berkas .dmg dari situs resminya, lalu seret ikon browser ke folder Applications; browser siap diluncurkan dari Launchpad.

3. Linux #

Sebagian besar distribusi Linux menyediakan browser di repositori resminya. Pada Ubuntu dan turunannya, kita dapat memasang Firefox lewat terminal:

sudo apt install firefox-esr

Perintah di atas memasang Firefox dari repositori distribusi, sehingga pembaruannya ikut tertangani oleh sistem. Distribusi lain menyediakan berkas .deb, .rpm, atau flatpak di situs resmi browser.

Versi Terbaru dan Browser EOL #

Browser modern diperbarui otomatis beberapa minggu sekali, pola yang disebut evergreen. Versi terpasang dapat diperiksa lewat menu bantuan, misalnya Help > About Google Chrome, yang sekaligus memicu pembaruan. Selalu memakai versi terbaru karena setiap pembaruan membawa perbaikan keamanan dan dukungan fitur HTML terkini.

Sebaliknya, browser EOL (end of life) tidak lagi menerima pembaruan; Internet Explorer yang dukungannya diakhiri pada 2022 adalah contohnya. Browser EOL rentan terhadap celah keamanan dan tidak merepresentasikan perilaku web modern, sehingga jangan dipakai untuk menguji halaman kita.

Menguji Hasil Pemasangan #

Setelah browser terpasang, kita memverifikasinya dengan file kecil. Simpan kode berikut sebagai cek-browser.html, lalu buka di kedua browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Cek Browser</title>
</head>
<body>
  <h1>Browser kita siap dipakai</h1>
  <p>Buka file ini di Chrome dan Firefox, lalu bandingkan tampilannya.</p>
</body>
</html>

Output yang Dihasilkan:

Di setiap browser yang dibuka:
  - Judul besar "Browser kita siap dipakai" tampil di bagian atas
  - Satu paragraf instruksi di bawahnya
  - Teks "Cek Browser" pada tab browser

Kode di atas memakai struktur bawaan dari Chapter Apa itu HTML?. Saat mengujinya, perhatikan bahwa heading dan paragraf tampil serupa di kedua browser dan tidak ada pesan galat di Console. Bila halaman tampil benar di Chrome dan Firefox, lingkungan pengujian kita lengkap dan kita siap menulis file HTML dari nol pada Chapter Membuat File HTML.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Installing software
• MDN Web Docs — Browsing the web
• MDN Web Docs — Pengenalan pengujian lintas browser

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Cek Browser</title>
</head>
<body>
  <h1>Browser kita siap dipakai</h1>
  <p>Buka file ini di Chrome dan Firefox, lalu bandingkan tampilannya.</p>
</body>
</html>