Home / HTML / Belajar HTML- Web Browser dan Text Editor

Belajar HTML- Web Browser dan Text Editor

Sebelum mulai menulis kode HTML, kita harus mempersiapkan perangkat yang dibutuhkan, yakni web browser dan text editor. Terdapat beragam aplikasi web browser dan text editor yang bisa dipilih, dan sebagian besar diantaranya bisa didapat dengan gratis. Dalam bab ini kita akan membahas tentang web browser dan text editor yang ‘layak’ digunakan

untuk proses pembuatan web (web development)

1. Mempersiapkan Web Browser

Untuk menjalankan HTML, kita butuh web browser. Web browser adalah program yang akan menerjemahkan kode-kode HTML dan menampilkannya menjadi halaman website. Saya yakin aplikasi web browser sudah terinstall di komputer anda, apakah itu Google Chrome atau Mozilla Firefox. Kedua web browser ini merupakan web browser terbaik untuk pengembangan web. Keduanya juga selalu mengikuti standar dan fitur terbaru HTML (selama anda rajin men-updatenya). Selain Google Chrome dan Mozilla Firefox, masih terdapat web browser lain yang bisa digunakan, seperti Internet Explorer, Opera dan Apple Safari. Walaupun tidak harus, saya menyarankan anda untuk menginstall kelima web browser ini.
Tujuannya, untuk melihat bagaimana kode HTML yang kita buat ditampilkan pada masingmasing web browser.

Untuk mendownload web browser ini, silahkan mengunjungi situs resminya di alamat berikut:
Google Chrome1, Mozilla Firefox2, Opera3, Internet Explorer4, Apple Safari5.

 

Khusus untuk web browser Apple Safari for Windows, Apple telah lama tidak men-update web browsernya sehingga kemungkinan terdapat beberapa fitur yang belum didukung oleh web browser ini (Apple hanya mengupdate Safari untuk Mac OS dan iOS). Web browser Internet Explorer (IE) juga sebaiknya tidak dipakai lagi dalam proses pengembangan
web. Microsoft sendiri sudah meninggalkan IE dan menggantinya dengan Microsoft Edge6 yang menjadi web browser default Windows 10. IE hanya cocok untuk proses percobaan, yakni melihat seperti apa tampilan halaman web untuk web browser “jadul”.

2. Firefox Developer Edition

Mozilla juga merilis Firefox Developer Edition7 yang ditujukan khusus untuk web developer. Secara umum tampilan dan fitur Firefox Developer Edition hampir sama dengan Firefox ‘biasa’ (plus dengan theme warna biru gelap). Mozilla mengatur shortcut yang berkaitan dengan pengaksesan kode agar lebih mudah dicapai. Web browser ini sepenuhnya terpisah dari Firefox biasa, sehingga anda bisa memiliki 2 buah web browser Firefox secara bersamaan.

Belajar HTML- Web Browser dan Text Editor

3. Online installer vs Offline installer

Jika anda menginstall web browser dari link diatas, hampir semuanya berukuran kecil (dibawah 1 MB). File ini disebut juga dengan istilah online installer, yang artinya program kecil tersebut akan mendownload aplikasi sebenarnya pada saat proses instalasi. Umumnya aplikasi web browser berukuran sekitar 30-40 MB.

Apabila anda menginginkan file installer yang bisa diinstall tanpa koneksi internet, silahkan mencarinya di Google menggunakan keyword “offline installer” atau “standalone installer”. Sebagai contoh, untuk mencari installer Google Chrome, silahkan ketik di google: “Google Chrome standalone installer”.

4. Pangsa Pasar Web Browser

Web browser apa yang paling banyak digunakan saat ini? Jawaban singkatnya adalah: Google Chrome. Untuk mengetahui web browser apa saja yang paling banyak digunakan, kita bisa melihat hasil riset situs trend web browser seperti: Statcounter, W3Counter atau Netmarketshare

Belajar HTML- Web Browser dan Text Editor

Grafik diatas adalah persentase penggunaan web browser sepanjang tahun 2017 (Januari – Desember) di seluruh dunia yang dianalisis oleh Statcounter. Hasil diatas sudah gabungan antara pengguna desktop dengan mobile. Terlihat bahwa Google Chrome merupakan pemimpin pangsa pasar web browser saat ini dengan penggunaan 53% lebih. Artinya, setengah pengguna internet di dunia menggunakan Google Chrome. Setelah itu diikuti oleh Safari dan UC Browser. Besar kemungkinan kedua web browser ini berasal dari smartphone Apple serta smartphone android yang menggunakan UC Browser.

Bagaimana dengan Indonesia?

Belajar HTML- Web Browser dan Text Editor

Hasilnya juga tidak berbeda. Google Chrome tetap menjadi web browser yang paling banyak digunakan. Kemudian diikuti oleh UC Browser dan Opera. Sebagai perbandingan, berikut data statistik web browser yang dipakai oleh pengunjung situs beliprogram.com sepanjang tahun 2017:

Belajar HTML- Web Browser dan Text Editor

Hasil ini seragam dengan riset dari Statcounter, dimana hampir setengah pengunjung duniailkom menggunakan Google Chrome. Hanya saja untuk posisi kedua dan ketiga dihuni oleh Mozilla Firefox dan UC Browser.

5. Dukungan Web browser untuk HTML5

Dalam buku ini, kita akan membahas banyak materi tentang HTML hingga fitur terbaru dalam HTML5. Khusus untuk ini, web browser ‘lawas’ tidak bisa memahami HTML5. Jika anda menggunakan web browser seperti Internet Explorer 6 atau 7 untuk membuka halaman web yang dibuat dengan HTML5, terdapat kemungkinan halaman tersebut ditampilkan ‘berbeda‘, bahkan gagal tampil sama sekali.

Sebagai pertimbangan, berikut adalah dukungan web browser secara umum untuk HTML5:

  • Web browser Google Chrome dan Mozilla Firefox telah lama mendukung HTML5. Kedua web browser ini juga secara rutin mengeluarkan update dan memiliki fitur untuk update otomatis. Jika terdapat pengguna yang masih menggunakan versi lama, biasanya akan ditampilkan instruksi untuk segera mendownload versi terbaru. Secara garis besar, kedua web browser ini mendukung penuh HTML5.
  • Walaupun tidak terlalu banyak digunakan, web browser Apple Safari dan Opera juga sudah lama mendukung HTML5. Versi ‘tua‘ dari kedua web browser ini relatif jarang dijumpai, sehingga aman untuk HTML5.
  • Web browser bawaan smartphone atau tablet mungkin memiliki keterbatasan dalam fitur HTML5. Namun karena perangkat ini terus berkembang dan oleh pembuat aplikasi (google dan apple) juga selalu mengikuti perkembangan. Secara perlahan web browser ini juga mendukung penuh HTML5.
  • Web browser Internet Explorer (IE) mungkin akan menjadi masalah. IE versi 9 ke bawah tidak mendukung sebagian besar fitur HTML5. Masalah ini diperparah karena versi ‘tua‘ dari IE masih banyak terinstall pada komputer Windows. Ditambah lagi pada beberapa sistem operasi Windows, IE tidak dapat di update ke versi terbaru. Sebagai contoh, Windows XP membawa IE versi 6, dan hanya bisa ditingkatkan hingga ke versi 8.

6. Mengenal Menu Developer Tools

Walaupun kita dapat melihat kode-kode HTML dari sebuah website dengan cara klik kanan dan memilih menu view source, web browser modern juga menyertakan menu khusus untuk menelusuri kode-kode HTML. Menu ini sering disebut dengan Developer Tools. Cara paling cepat untuk mengaksesnya adalah dengan menekan kombinasi tombol CTRL+Shift+i. Silahkan anda melihat-lihat fitur yang ada. Fitur ini khusus dirancang untuk web programmer agar bisa melihat kode website dengan lebih mudah. Kita bahkan bisa mengedit langsung kode HTML dari menu developer tools. Menu Developer Tools sangat berguna terutama jika anda sudah mempelajari CSS dan JavaScript. Karena fiturnya yang cukup banyak, anda perlu beberapa saat untuk mempelajarinya.

7. Memilih Text Editor

Sebagaimana yang akan kita pelajari nanti, pada dasarnya file HTML hanyalah file teks biasa. Untuk membuat kode HTML, kita bisa menggunakan aplikasi text editor. Text editor adalah aplikasi yang berfungsi untuk membuat dan mengedit file text. Salah satu contoh text editor adalah aplikasi Notepad bawaan Windows. Namun Notepad ini kurang cocok digunakan untuk pemrograman. Terdapat banyak aplikasi text editor khusus pemrograman yang tersedia di internet dan mayoritas bisa didapat dengan gratis. Salah satunya adalah Notepad++ yang akan saya gunakan sepanjang pembahasan buku ini. Saya memilih Notepad++ karena ringan dan berukuran kecil (hanya sekitar 5MB). Aplikasi ini sudah lebih dari cukup untuk membuat file HTML. Sebagai alternatif, aplikasi text editor gratis lainnya adalah Atom, Komodo Edit, Bracket, VS Code, atau Aptana Studio. Untuk list lengkap mengenai aplikasi text editor dapat anda lihat di wikipedia.

 

8. Adobe Dreamweaver

Salah satu aplikasi populer yang cukup ‘melegenda’ terutama bagi pemula web programming adalah Adobe Dreamweaver. Dreamweaver merupakan aplikasi canggih dengan fitur melimpah untuk pembuatan web. Dreamweaver termasuk kelompok aplikasi yang dikenal dengan sebutan WYSIWYG (What You See Is What You Get), dimana kita bisa merancang tampilan website dengan cara ‘drag and drop’, yakni menggambar tampilan web secara visual tanpa harus mengetahui kode program dibalik itu (walaupun dreamweaver juga menyediakan fitur coding yang sangat lengkap). Dibalik keunggulannya, menurut saya Dreamweaver tidak cocok untuk proses belajar. Aplikasi ini cenderung ‘berat’ dan berharga jutaan rupiah untuk versi legalnya. Dreamweaver lebih cocok digunakan jika anda telah memahami kode-kode program yang ada dibaliknya (dan mampu membeli versi original).

Belajar HTML- Web Browser dan Text Editor

Saat ini versi terakhir dari Dreamweaver adalah Adobe Dreamweaver CC18. Aplikasi ini hanya bisa didapat dengan cara berlangganan dengan biaya Rp 269.800 per bulan. Daripada menggunakan program bajakan, lebih baik mencari alternatif lain. Sangat jarang saya melihat lowongan kerja programmer yang mensyaratkan paham Dreamweaver. Bahkan akan menjadi nilai minus jika anda hanya bisa membuat program dari Dreamweaver saja.

9. Text Editor vs HTML Editor

Anda mungkin penasaran kenapa kita menggunakan Text Editor, bukannya HTML Editor. HTML Editor adalah aplikasi yang bisa membuat HTML dengan mudah bahkan tanpa perlu memahami kode-kode di dalamnya. Contoh HTML Editor adalah Adobe Dreamweaver atau Microsoft Frontpage / Microsoft Expression Web (tidak dikembangkan lagi). Sama seperti Adobe Dreamweaver, aplikasi ini tidak ‘pas’ untuk belajar, karena akan menghasilkan kode-kode HTML secara instan. HTML editor lebih cocok jika anda telah mengetahui kode-kode HTML dan ingin dengan cepat membangun website. Jika belum memahami HTML, aplikasi ini malah akan membuat bingung jika terjadi kesalahan atau jika ingin menambahkan fitur baru ke dalam halaman web.

Belajar HTML- Web Browser dan Text Editor

10. Menjalankan File HTML Pertama Anda

Sebelum menutup bab ini, kita akan langsung mencoba menulis dan menjalankan file HTML. Teks editor yang saya gunakan adalah Notepad++. Jika anda belum menginstall aplikasi ini, silahkan download di http://notepad-plus-plus.org/download19. 

Pada saat buku ini direvisi, versi terakhir dari Notepad++ adalah versi 7.5.4. Besar kemungkinan versi Notepad++ yang anda temui lebih baru dari ini.

Belajar HTML- Web Browser dan Text Editor

Proses instalasi Notepad++ hampir sama dengan program-program lain. Silahkan anda ikuti proses instalasi dan biarkan setingan default. Apabila sudah selesai, tampilan awal Notepad++ akan tampak seperti gambar dibawah ini.

Belajar HTML- Web Browser dan Text EditorLangkah berikutnya adalah mempersiapkan folder dimana file-file HTML akan diletakkan. Lokasi folder ini bebas dan tidak harus berada di dalam folder khusus. Agar mudah diakses,
saya membuat folder belajar_html di drive D, sehingga alamatnya adalah: D:\belajar_html.

Selanjutnya, kembali ke aplikasi Notepad++, buat file baru, pilih menu File->New ketikkan kode berikut ini (atau boleh juga di copy-paste):


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
      <title>Belajar HTML</title>
  </head>
<body>
   <h1>Belajar HTML</h1>
   <p>Hello World…</p>
</body>
</html>


Belajar HTML- Web Browser dan Text Editor

Pada tahap ini anda tidak perlu memahami kode program diatas, kita akan membahasnya dengan detail sepanjang buku ini. Langsung saja save dengan menekan tombol CTRL+S, atau pilih menu File->Save. Cari lokasi folder belajar_html, kemudian ganti nama file menjadi hello_world.html dan klik Save.

Belajar HTML- Web Browser dan Text Editor

Sesaat setelah anda menyimpan file, kode-kode di dalam Notepad++ akan menjadi berwarna. Hal ini merupakan salah satu fitur standar dari aplikasi text editor khusus programming. Pewarnaan kode ini dikenal dengan istilah syntax highlighting. Ini sangat memudahkan kita dalam membuat perintah HTML. Jika terdapat warna yang tidak pas atau beda, besar kemungkinan ada sesuatu yang salah ketik.

Belajar HTML- Web Browser dan Text Editor

Untuk menjalankan file HTML ini anda bisa langsung buka folder belajar_html menggunakan windows explorer, kemudian double click file hello_world.html. Hasilnya akan ditampilkan ke dalam web browser.

Belajar HTML- Web Browser dan Text Editor

Sebagai alternatif, anda bisa buka web browser terlebih dahulu, misalkan Mozilla Firefox, lalu di bagian address bar silahkan ketik alamat D:\belajar_html\hello_world.html dan tekan Enter

Selamat! anda telah berhasil menjalankan file HTML pertama anda!

Dari percobaan ini kita dapat melihat bahwa setiap halaman HTML harus diakhiri dengan ekstensi .html. Anda mungkin juga akan menemukan beberapa file HTML yang berakhiran .htm. Akhiran ini adalah ekstensi HTML untuk Windows versi lama.

Agar dapat diakses dari web browser, sebuah file HTML harus ditulis tanpa spasi. Sebagai pemisah kata, spasi bisa diganti dengan tanda garis bawah / underscore ( _ ), atau tanda penghubung / hypen ( – ).

11. Teks Editor Alternatif: Komodo Edit

Salah satu alasan saya menggunakan Text editor Notepad++ adalah aplikasinya ringan, sangat cepat dan berukuran kecil. Tapi tidak jarang ada yang ‘protes’ kenapa tampilannya terkesan jadul.

Sebagai alternatif, anda bisa mencoba Komodo Edit. Teks editor ini juga bisa didapat dengan gratis di: komodoide.com/komodo-edit21. Saat buku ini saya revisi, versi terakhir adalah 11.0.2, berukuran sekitar 75MB.

Belajar HTML- Web Browser dan Text Editor

Silahkan ikuti proses instalasi seperti biasa. Biarkan seluruh settingan dalam keadaan default. Komode Edit terlihat lebih modern daripada Notepad++. Jika anda menggunakan Windows 8 atau Windows 10, tampilan jendelanya sangat mirip dengan theme sistem operasi tersebut. Anda juga bisa mengubah warna background menjadi putih, hitam maupun kombinasi warna lain. Caranya, klik icon hamburger di sisi kanan atas, cari menu Tools -> Color Scheme Editor. Pilih warna theme yang diinginkan dari menu Color Scheme.

Belajar HTML- Web Browser dan Text Editor

12. Teks Editor Alternatif: Atom

Komodo Edit sebenarnya sangat bagus dan ringan, namun text editor ini tapi tidak terlalu banyak dipakai. Sebenarnya ini lebih ke preferensi masing-masing. Untuk edit kode program yang kecil, saya lebih suka pakai Notepad++ karena ringan dan simple. Namun jika anda ingin memakai text editor yang lebih populer, saya merekomendasikan Atom. Teks editor ini bisa didapat dengan gratis di: atom.io22 dengan ukuran file instalasi sekitar 135 MB. Atom merupakan text editor open source yang didukung oleh GitHub Inc.

Belajar HTML- Web Browser dan Text Editor

Silahkan ikuti proses instalasi seperti biasa. Biarkan seluruh settingan dalam keadaan default.

Belajar HTML- Web Browser dan Text Editor

Secara bawaan, Atom menggunakan tema “gelap” yang menjadi standar editor programming modern. Salah satu alasannya, agar mata kita tidak cepat lelah jika dibandingkan dengan tampilan yang terang (putih). Meskipun demikian, tema tampilan ini nantinya bisa diganti. Salah satu keunggulan Atom adalah banyaknya plugin yang tersedia (dikenal juga sebagai packages). Package ini ibarat aplikasi tambahan yang berguna untuk menambah fitur-fitur baru ke dalam Atom. Misalkan kita banyak membuat kode program menggunakan Bootstrap (salah satu framework CSS), tersedia berbagai packages untuk mempermudah pengetikan kode program. Sebagai informasi tambahan, text editor Atom sebenarnya sebuah “web browser khusus”. Aplikasi ini dikembangkan dari Chromium dan Node.js. Chromium sendiri merupakan sebuah project untuk pengembangan web browser Google Chrome.

13. Bagaimana dengan Sublime Text?

Jika anda sudah malang melintang di web programming atau mengikuti berbagai tutorial yang ada di internet, saya yakin banyak yang merekomendasikan text editor Sublime Text. Tidak dapat dipungkiri bahwa Sublime Text merupakan text editor yang sangat populer, bahkan mungkin bisa dibilang sebagai text editor yang paling banyak dipakai oleh web programmer professional.

Belajar HTML- Web Browser dan Text Editor

Kenapa saya tidak merekomendasikannya? Alasan satu-satunya adalah karena masalah lisensi. Sublime Text tidak gratis, tetapi teks editor berbayar. Harga lisensinya saat ini US $80, atau sekitar 1 juta rupiah. Terbilang cukup mahal apalagi bagi mahasiswa dan pelajar. Tapi bukankah Sublime Text bisa di download dengan gratis? Betul, anda bisa mendownload Sublime Text di web resminya di www.sublimetext.com23. Akan tetapi ini merupakan versi evaluasi, dimana nanti akan muncul jendela “iklan” secara berkala. Meskipun tidak ada batas waktu penggunaan, di website sublimetext.com tertulis bahwa “Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use”. Kalau diterjemahkan kira-kira menjadi “Sublime Text bisa di download dan dicoba dengan gratis, tetapi lisensi harus dibeli untuk penggunaan berkali-kali (continued use)”.

Belajar HTML- Web Browser dan Text Editor

Daripada menyalahi aturan lisensi (atau yang lebih parah pakai versi bajakan untuk menghilangkan jendela iklan) saya sarankan untuk memakai text editor lain, kecuali anda sanggup membeli lisensi resmi dari Sublime Text. Berita baiknya, tidak sedikit programmer yang mengatakan bahwa dalam berbagai hal, Atom sudah bisa menyamai Sublime Text. Bahkan ada yang pindah dari Sublime Text ke Atom. Jadi, jika anda saat ini menggunakan Sublime Text bajakan, ada baiknya mencoba teks editor lain yang gratis (agar lebih berkah). Atom merupakan salah satu kandidat terbaik

v

 

 

About admin

Check Also

Sejarah dan Perkembangan Bahasa HTML

Belajar HTML – Title Element

Tag <title> mungkin menjadi tag paling penting di bagian <head>. Tag ini berfungsi untuk menampilkan …

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *