Estimasi Waktu Baca: 5 menit

Apa yang dibutuhkan?

Pertanyaan tersebut sering dilontarkan oleh para pemula yang ingin belajar membuat website. Untuk belajar membuat website pada dasarnya kita hanya membutuhkan dua tool atau peralatan yaitu,

Teks Editor

Peralatan pertama yang kita butuhkan adalah wadah untuk kita menulis kode, karena yang ditulis adalah kode html sebenarnya cukup bermodal notepad biasa juga bisa, tapi kita akan membutuhkan waktu lebih lama jika menggunakannya, karena tidak ada fitur yang mendukung kita untuk menulis kode secara efisien di situ.

Makanya pada artikel ini akan saya rekomendasikan beberapa teks editor yang tentunya gratis dan umum digunakan oleh para programmer dan pengembang web, berikut diantaranya:

  • Notepad++
  • Sublime Text
  • Visual Studio Code
  • Atom

Keempat teks editor di atas adalah yang paling sering digunakan oleh para pengembang web saat ini, jika kalian punya rekomendasi yang lain juga tidak apa-apa, dan khusus untuk pemilik laptop ‘kentang’ saya sarankan untuk memasang sublime saja karena ringan.

Peramban Website

Kedua, kita perlu memasang peramban web atau web browser di PC untuk menampilkan hasil koding html yang sudah kita tulis sebelumnya di teks editor. Ada banyak sekali peramban web di dunia ini dan semuanya dipastikan sudah mendukung HTML 5.

Beberapa peramban web yang saya rekomendasikan di sini antara lain:

  • Mozilla Firefox
  • Google Chrome
  • Opera Mini
  • Vivaldi
  • Safari (Khusus untuk pengguna OS Mac)

Untuk peforma masing-masing peramban, saya yakin kalian sudah mengetahuinya jadi bisa kalian tentukan sendiri mau yang mana. Bila ingin yang ringan gunakan saja mozilla, opera mini, atau vivaldi. Namun jika ingin yang lebih powerful gunakan saja google chrome.

Mengenal Struktur Dokumen HTML

Oke, sekarang waktunya penerapan, persiapkan teks editor dan web browser pilihan kalian, buat file baru di teks editor, kemudian ikuti langkah-langkah di bawah ini dengan perlahan.

Langkah pertama, semua dokumen HTML haruslah dimulai dengan deklarasi tipe dokumen: <!DOCTYPE html>.

Kode <!DOCTYPE html> bukanlah sebuah tag, ia hanya kode yang berfungsi untuk memberitahukan peramban web tentang versi HTML yang digunakan.


<!DOCTYPE html>

Tag sendiri sudah dijelaskan singkat di artikel sebelumnya bahwasanya ia adalah gabungan dari simbol dan huruf yang fungsinya bermacam tergantung jenis tag itu sendiri.

Kembali lagi,

Apakah boleh tidak menggunakan <!DOCTYPE html>?

Boleh saja, karena peramban web masih bisa memahami jika itu adalah dokumen HTML. TAPI, ini akan melanggar aturan standar yang sudah dibuat oleh W3C.

Selanjutnya kita DIWAJIBKAN untuk memberi tag pembuka yang digunakan untuk membuat dokumen HTML:


<!DOCTYPE html>
<html>

</html>

Tag <html> memiliki tag pembuka dan tag penutup </html>.

Kemudian di dalam tag <html> </html> terdapat dua tag yang tak kalah penting nya dengan tag <html>. Kedua tag tersebut adalah:


<!DOCTYPE html>
<html>
   <head>
       <title> </title>
   </head>

   <body>

   </body>
</html>

Tag <head> </head> digunakan untuk membuat informasi tentang dokumen HTML. Dalam tag ini kita bisa memberi judul halaman, membuat metadata, menghubungkan dokumen dengan sumber daya luar (eksternal) dan lain-lain. Pada umumnya dalam tag ini terdapat tag <title></title> yang digunakan untuk membuat judul halaman.

Tag <body> </body> digunakan untuk membuat tubuh dokumen, pada tag inilah nantinya isi dari suatu dokumen atau kita sebut konten halaman akan ditampilkan.

Bahkan ketika kalian membaca artikel ini pada dasarnya semua konten seperti judul, baris tulisan, gambar, dan lain-lain diletakkan di bagian <body>.

Lanjut! sebagai tambahan sebelum kita lihat melalui web browser, kita tambahkan dulu tag di bawah ini di dalam <body>:

  • h1 – untuk membuat judul atau heading konten
  • p – untuk membuat paragraf

Diantara tag <h> kita tulis: ‘Selamat Datang di Website Pertama Saya’. Kemudian di dalam tag <p> kita tulis: ‘Halo semua, sekarang saya sedang belajar HTML, membuat website ternyata sangat menyenangkan!’ Oh ya jangan lupa tag <title> kita beri judul halaman: ‘Halaman Depan’.

Untuk lebih jelasnya bisa lihat kode di bawah ini.


<!DOCTYPE html>
<html>
   <head>
       <title>Halaman Depan</title>
   </head>

   <body>
       <h1>Selamat Datang di Website Pertama Saya</h1>
       <p>Halo semua, sekarang saya sedang belajar HTML, membuat website ternyata sangat menyenangkan!</p>
   </body>
</html>

Menjalakan File HTML

Setelah kode ditulis seperti di atas saatnya kita mulai lihat hasilnya. Tapi sebelum itu simpan dulu file tersebut dengan nama index.html atau index.htm. Jika filenya XHTML maka gunakan .xhtml.

Ingat ya karena ini file HTML maka gunakan ektensi untuk HTML jangan yang lain.

Kenapa namanya index.html? Apa tidak boleh nama lain seperti awal.html, pertama.html, hello.html, dan lain-lain?

Boleh, kalian sangat diperbolehkan memberi nama sesuka hati kalian, namun ada juga saatnya kita sebaiknya memberi nama file dengan nama index.html.

Kapan itu?

Hal itu dilakukan ketika kalian ingin membuat halaman awal atau halaman depan website kalian. Karena dengan menggunakan nama index maka halaman yang akan dibuka pertama kali adalah halaman dengan nama tersebut.

Contoh lainnya kalian membuka situ kopiding.in di web browser, maka secara otomatis file dengan nama index akan dibuka duluan sebagai halaman default website.

Nah, selanjutnya setelah disimpan kita buka file HTML tadi, tolong kalian pastikan filenya dibuka melalui web browser, biasanya bagi pengguna yang web browser defaultnya adalah Google Chrome, logo file HTML yang sebelumnya berupa lembar kertas akan berubah menjadi logo Google Chrome.

Bagaimana apakah sama?

Memberi Nama Dokumen HTML

Saran tambahan bagi kalian jika ingin menamai file, usahakan nama file jangan diberi spasi. Sebenarnya tidak apa-apa kok ada spasi, tapi jika kita tampilkan di web browser, maka selanjutnya (perhatikan pada url) yang terjadi adalah spasi akan diubah menjadi %20.

Untuk mengelabuhinya kita ganti dengan tanda hubung (-), ada juga beberapa orang menyarankan tanda underscore (_). Namun saya lebih suka dengan tanda hubung. Karena menurut beberapa sumber, mesin pencari Google memperlakukan tanda hubung sebagai pemisah kata. Sedangkan untuk underscore mesin pencari Google tidak melakukan hal yang sama.

Kemudian hindari penggunaan huruf besar, apalagi huruf besar semua atau kombinasi huruf besar kecil. Jangan gunakan simbol atau tanda yang aneh-aneh, kecuali tanda yang sudah dijelaskan sebelumnya.

Bagaimana dengan angka? Boleh, tapi di sesi kalian belajar saja, kalau di luar itu selain tidak kepepet lebih baik cari nama lain.

Sebenarnya penamaan dokumen HTML dengan huruf besar, angka, simbol, dan lain-lain masih terbilang valid. Namun akan terlihat buruk jika dibaca manusia dan mesin.

Ada pertanyaan?

Anu bang, bagaimana cara kita melihat kode sumber HTML di web browser?

Pertanyaan yang bagus!

Melihat Kode Sumber HTML di Web Browser

Ada dua cara untuk melihat kode HTML melalui web browser yang siapa tahu bisa kalian gunakan untuk pamer ke teman-teman kalian.

Melalui Menu View Page Source

Cara pertama dengan menggunakan menu view page source atau view source, namanya sedikit berbeda antara web browser satu dengan yang lainnya. Bagaimana atau dimana kita bisa menemukan menu ini? Menu ini bisa muncul ketika kita:

  • Klik kanan pada halaman website dan pilih menu View Page Source atau View Source
  • Atau juga dapat menggunakan gabungan tombol Ctrl+u

Kedua cara di atas nantinya akan memunculkan tab baru berisi sumber kode halaman website yang terkait.

Berikut screenshotnya

Menu View Page Source di Google Chrome

Melalui Menu Inspect Elemen

Cara kedua dengan menggunakan inspect elemen, para pengembang dan programmer sering menggunakan cara ini untuk mengetes tampilan website yang dibuatnya, karena dengan menggunakan menu ini kita bisa mengubah secara langsung elemen HTML dan CSS di halaman terkait. Pengeditan tersebut tidak bersifat mutlak dan tidak mempengaruhi kode sumber asli website tersebut.

Cara memunculkannya sama dengan menu view page source:

  • Klik kanan pada halaman website dan pilih Inspect Element atau Inspect saja.
  • Atau juga dapat menggunakan gabungan tombol Ctrl+Shift+i

Berikut screenshotnya

Menu Inspect Element di Google Chrome