Modul HTML: Belajar HTML dari Nol bersama wiBlogger.com

TERGET
  • Mengerti tentang peranan HTML, CSS dan Javascript sebagai pembangun halaman web
  • Mengerti tentang bagaimana cara menerapkan CSS dan Javascript pada HTML
  • Mampu membuat halaman web sederhana
  • Mengetahui materi-materi terkait lainnya yang dibutuhkan dalam pembelajaran HTML, CSS dan Javascript


PENGANTAR
Pengetahuan tentang HTML merupakan hal yang sangat penting dalam menjalankan kegiatan blogging. Sebagai seorang blogger, kita setidaknya mengerti tentang dasar-dasar penulisan HTML, bagaimana cara menerapkan CSS, serta berbagai rules lainnya.

Saya belum pernah belajar web programming sebelumnya, apakah baik jika mulai belajar dari HTML?

Ya, dalam web programming, HTML adalah materi yang tepat untuk dipelajari diawal. Kenapa? HTML merupakan kemampuan front-end developer. Sederhananya, sebelum kita dapat memproduksi sesuatu (dengan kemampuan back-end programming), kita harus paham dulu tentang apa yang akan kita produksi. Selain itu, 3 bahasa yang akan anda pelajari pada sisi front-end ini akan menjadi pondasi yang sangat penting jika anda hendak mendalami back-end programming.

Materi:
  1. Tentang Front-end dan Back-end dalam Web programming
  2. Tentang HTML, CSS, Javascript sebagai pembangun halaman web


Mulai Membuat Dokumen HTML

Untuk memperkuat pemahaman anda, kita akan mulai materi ini dengan membuat sebuah dokumen HTML sederhana. Setiap materi akan dijelaskan secara bertahap. Pastikan anda mengikuti semua praktek di bawah. Hal ini karena selain pada modul HTML ini, file HTML yang dibuat juga akan digunakan pada Modul CSS yang akan anda jumpai pada tahap selanjutnya.

Persiapan

  1. HTML Editor Pada panduan ini, kita akan menggunakan VS Code sebagai HTML editor. Ini merupakan salah satu program HTML Editor yang populer saat ini.

  2. Web Browser Pada panduan ini, kita akan menggunakan Google Chrome.

  3. Folder Latihan Buat sebuah folder baru yang akan digunakan sebagai tempat untuk menyimpan berbagai file yang akan dibuat pada pembelajaran HTML yang akan dijumpai pada poin-poin selanjutnya - (Lihat).


Membuat dokumen HTML

Buka Folder Latihan pada VS Code
  1. Buka VS Code, menuju toolbar File > Open Folder - (Lihat).
  2. Navigasi menuju Folder Latihan yang tadi telah disiapkan pada tahap Persiapan - (Lihat).
  3. Sampai disini, folder telah terbuka pada VS Code - (Lihat).


Buat File HTML Dasar
  1. Sorot folder latihan > New File, beri nama index.html - (Lihat).
  2. Copy dan paste HTML Dasar di bawah pada kode area - (Lihat).

    HTML Dasar 
      
<!DOCTYPE html>
<html>
  <head>
  	<title>Belajar HTML</title>
  </head>
  <body>
    <p>Modul HTML</p>
	<p>Modul Belajar HTML Mulai dari Nol</p>
  </body>
</html>


Buka HTML pada Browser
  1. Klik kanan pada file index.html dan pilih Open In Default Browser - (Lihat).
  2. File index.html akan terbuka pada browser. Kurang lebih seperti berikut: Lihat.


Mulai Memahami HTML

Pada modul ini, fokus utama yang akan dicapai adalah pemahaman dasar seputar HTML, mulai dari konsep, sistem browser dalam menampilkan HTML, serta bagian-bagian pada HTML yang perlu diketahui. Setelah membaca semua materi pada modul ini (serta materi-materi terkait yang diberikan melalui link), anda diharapkan memiliki pondasi yang kuat untuk dapat memahami berbagai tutorial atau materi pembelajaran seputar HTML.


Elemen HTML

HTML adalah bahasa markup yang tersusun atas elemen-elemen HTML. Elemen HTML didefiniskan (dibuat) dengan Tag HTML. Beberapa contoh elemen HTML adalah seperti html, head, body, title, h1, p dan masih banyak lagi. Untuk daftar lengkap elemen HTML bisa dilihat pada halaman: Daftar Elemen HTML.

Sintak/Cara Penulisan 
      
      	<elemen>Konten</elemen>

Keterangan:
  • elemen adalah nama elemen. Bersifat Case Insensitive dan Predefined (kita hanya bisa menggunakan nama elemen yang telah diizinkan/disediakan oleh HTML).
  • <elemen> adalah tag pembuka (start tag)
  • </elemen> adalah tag penutup (closing tag).

    Apakah semua elemen harus ditutup?

    Ya, sebagian besar elemen HTML harus ditutup. Meskipun pada HTML5 (HTML versi terbaru) penulisan tag penutup bersifat opsional, namun hal ini sangat tidak dianjurkan. Jadi, tetap tutup semua tag.

    Terdapat juga sebagian kecil elemen HTML yang bersifat Self-Closing - Selengkapnya.


Struktur Dasar Dokumen HTML

Pada HTML Dasar sebelumnya, terdapat beberapa elemen yang selalu tersedia pada dokumen HTML. Elemen-elemen ini disebut sebagai Struktur Dasar Dokumen HTML atau Struktur Minimum Dokumen HTML.

Struktur Dasar Dokumen HTML 
  
<!DOCTYPE html>
<html>
  <head>
  	<title>Belajar HTML</title>
  </head>
  <body>
    Konten yang ditampilkan pada layar browser
  </body>
</html>

Keterangan:
  • <DOCTYPE html> Kode yang mendefinisikan tipe dan versi dokumen. Kode ini harus diletakkan pertama kali - Selengkapnya Tentang Deklarasi HTML5.
  • html Tepat setelah doctype, kode diteruskan dengan elemen html. ini adalah elemen akar (root element). Elemen-elemen HTML lainnya harus diletakkan di dalam elemen ini.
  • head Elemen yang menampung berbagai informasi atau konfigurasi terkait dokumen HTML. Hal ini seperti misalnya judul, deskripsi dan lain sebagainya. Konten pada elemen ini tidak akan ditampilkan pada layar browser.
  • title Elemen yang mengatur judul dokumen. Konten yang terdapat pada elemen ini akan ditampilkan sebagai judul pada Tab browser - (Lihat).
  • body Merupakan Tubuh HTML. Konten pada elemen inilah yang akan ditampilkan pada layar browser.


Terkait Blogger.com
Jika struktur minimum dokumen HTML mewajibkan beberapa elemen di atas, kenapa pada pembuatan postingan di blogger.com html bisa ditulis tanpa elemen-elemen di atas?

Pada pembuatan postingan di blogger.com, yang kita buat bukanlah dokumen HTML melainkan elemen-elemen HTML. Sistem blogger akan meletakkan elemen-elemen yang kita masukkan pada post editor ke suatu lokasi (sesuai tema/template yang digunakan) yang merupakan sub dari elemen body. Jadi jelas, kita tidak perlu atau bahkan tidak boleh menyertakan elemen-elemen di atas ke dalam post editor.


Cara Browser Merender HTML

Sistem browser dalam membaca dan menampilkan dokumen HTML
Masih merujuk pada struktur minimum dokumen HTML di atas, terdapat 2 elemen utama. Dua elemen ini adalah head dan body.

  • head Elemen ini berisi berbagai elemen lainnya yang bertindak sebagai informasi atau konfigurasi. Disini, anda mungkin bingung tentang apa yang dimaksud dengan "informasi atau konfigurasi". Untuk lebih jelasnya, sebagai contoh, salah satu elemen yang sering digunakan pada elemen head adalah elemen meta untuk mendefinisikan status akses indeks mesin pencari (apakah mesin pencari boleh mengindeks halaman atau tidak). 

          
<!DOCTYPE html>
<html>
  <head>
  	<title>Belajar HTML</title>
	<meta name="robots" content="noindex"/>
  </head>
  <body>
    Konten yang ditampilkan pada layar browser
  </body>
</html>

    Konfigurasi pada elemen meta ini akan dibaca oleh robot mesin pencari untuk menentukan apakah halaman bersangkutan akan diletakkan pada database mereka atau tidak.

  • body Elemen ini merupakan Tubuh dokumen HTML. Konten yang terdapat di dalam elemen inilah yang ditampilkan pada layar browser.


Atribut HTML

Atribut HTML merupakan deklarasi data pada elemen HTML. Atribut memberikan informasi terkait elemen HTML yang bersangkutan, baik itu sebagai informasi wajib maupun hanya sebagai informasi tambahan.

Sintak 
  
  <elemen nama-atribut="value">Konten</elemen>

Keterangan:
  • nama-atribut bersifat predefined.
  • value adalah nilai (data).
  • Setiap elemen html bisa memiliki satu atau lebih atribut.
  • Deklarasi atribut diletakkan di dalam tag pembuka.
  • Deklarasi value bisa dilakukan menggunakan Single quote (') atau Double quote (").
  • Untuk deklarasi lebih dari satu atribut, pisahkan dengan spasi.


Contoh: 
  
  <p id="paragraf1">Konten</p>

Pada kode di atas, id="paragraf1" merupakan contoh penerapan atribut HTML. HTML5 juga memungkinkan pendefinisian atribut tanpa mengunakan quote. 

	  
      <p id=paragraf1>Konten</p>

Hal ini tidak dianjurkan, tetap gunakan quote dalam mendeklarasikan atribut.


Macam-macam Atribut

Terdapat 3 jenis atribut HTML, tiga jenis atribut ini adalah Atribut Wajib, Atribut Khusus dan Atribut Umum (Global).

  1. Atribut Wajib Atribut yang hanya tersedia untuk elemen-elemen tertentu saja dan harus didefinisikan. Contoh atribut wajib HTML adalah atribut href untuk elemen a (link). 

    	  
<a href="https://www.wiblogger.com">wiBlogger.com</a>
    href merupakan atribut yang mendefinisikan tujuan link. Browser akan membuka URL pada atribut ini ketika link diklik.


    Apa yang terjadi jika atribut wajib tidak didefinisikan?

    HTML akan tidak valid (tidak benar) dan browser akan merender elemen yang bersangkutan sebisa yang mereka bisa lakukan. Pada kasus ini, elemen mungkin ditampilkan tidak seperti yang seharusnya.

  2. Atribut Khusus Atribut yang hanya tersedia untuk elemen-elemen tertentu saja dan bersifat optional (bisa didefinisikan dan bisa tidak). Contoh atribut khusus adalah atribut target untuk elemen a. 

    	  
<a href="https://www.wiblogger.com" target="_blank">wiBlogger.com</a>
    target="_blank" mengintruksikan browser untuk membuka link pada tab baru. Tanpa atribut ini, link tetap akan bekerja sebagaimana mestinya (terbuka pada tab yang sama).

  3. Atribut Global Atribut yang tersedia untuk semua elemen dan bersifat opsional. Contoh atribut global adalah seperti title, class, id, dan masih banyak lagi - Daftar Atribut Global HTML.


SELENJUTNYA
Sampai pada paragraf ini, anda sudah memiliki pemahaman dasar tentang HTML serta beberapa materi terkait HTML. Pada hasil pembuatan HTML Dasar yang telah kita buat di atas, tampilan HTML masih sangat sederhana. Selanjutnya, kita akan mempelajari bagaimana cara menerapkan CSS serta materi-materi terkait CSS untuk mendesain halaman HTML - Mulai Belajar CSS.
Komentar