Skip to main content

Dokumen HTML

HTML adalah singkatan dari Hyper Text Markup Language yaitu bahasa yang kita pake untuk membuat dokumen atau halaman web. Spesifikasi termutakhir dari bahasa ini adalah versi 5 (HTML5) yang didukung semua browser moderen. Spesifikasi ini dikembangkan dan dipublikasikan oleh konsorsium yang bernama W3C (World Wide Web Consortium), sebuah konsorsium internasional yang bertujuan memformulasi & menetapkan standar web yang dipakai sebagai referensi oleh para pembuat browser.

Kerangka Dokumen​

Sebuah dokumen HTML berisi komponen-komponen yang disebut elemen. Elemen utama yang harus ada di setiap dokumen adalah html, head, & body. Minimalnya seperti ini:

<!DOCTYPE html>
<html lang="id">
  <head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Dokumen</title>
  </head>
  <body>
    <!-- konten di sini -->
    <p>Hello world</p>
  </body>
</html>
  • <!DOCTYPE html> dipakai untuk memberi tahu browser untuk menampilkan halaman/dokumen dalam mode sesuai standar HTML5.
  • Pasangan tag <html></html> adalah elemen root. Semua yang berhubungan dengan dokumen HTML harus ditulis di dalamnya. lang adalah atribut elemen ini yang bermanfaat untuk SEO (Search Engine Optimization). Dalam struktur di atas, lang="id" memberi tahu mesin pencari bahwa konten dokumen HTML ditulis dalam bahasa Indonesia.
  • Elemen head selain berisi judul dokumen (title) juga berisi elemen pendukung untuk berbagai keperluan; dari SEO sampai ringkasan untuk ditampilkan di media sosial.
  • <meta charset="utf-8" /> mendefinisikan tipe kelompok (set) karakter yang dipakai oleh dokumen. Yang paling umum adalah utf-8.
  • <meta name="viewport"> Untuk mengatur skala tampilan kalo dibuka di mobile browser. Bedanya tanpa elemen ini & yang pake elemen ini bisa diliat di gambar Scaling di bawah.
  • title berisi judul dari dokumen HTML untuk ditampilkan di tab browser & di halaman search-engine (gambar di bawah).
  • body adalah tempat di mana konten harus ditulis.
  • <!-- --> adalah tag komentar. Isi tag ini nggak ditampilkan oleh browser. Biasanya dipakai oleh developer/desainer sebagai penanda atau keterangan. Kalo halaman web di atas itu dibuka di browser, kontennya cuma teks Hello world.

Scaling

Title

Elemen​

Elemen HTML adalah unit dasar dari halaman web dan mewakili berbagai bagian konten dokumen. Contohnya elemen p untuk paragraf, h1 hingga h6 untuk judul, img untuk gambar. Elemen HTML juga punya atribut yang memberikan informasi tambahan tentang elemen tersebut atau mengubah perilakunya.

Tag​

Tag adalah sintaks (cara penulisan kode) yang digunakan untuk mendefinisikan awal dan akhir dari elemen HTML. Sebagian besar elemen HTML memiliki tag pembuka dan penutup. Tag pembuka ditulis dengan nama elemen di dalam tanda kurung sudut, seperti <p> untuk elemen paragraf. Tag penutup mirip tetapi mencakup garis miring sebelum nama elemen, seperti </p>. Beberapa elemen, seperti <img>, nggak punya tag penutup dan disebut sebagai void element.

Struktur elemen p

Sebagian elemen nggak hanya bisa diisi konten, tapi bisa juga diisi elemen lain. Elemen yang mengisi elemen lain disebut child/descendant (keturunan), elemen yang melingkupinya disebut parent (induk) atau kontainer. Dalam gambar di bawah artinya:

  • div adalah child dari main. Dengan kata lain, main adalah parent dari div.
  • p & span adalah child dari div
  • p & span adalah sibling
  • div, p, & span adalah descendant dari main

Dari sekian banyak elemen (lebih dari 100), elemen div adalah elemen generik yang paling sering dipake untuk bermacam-macam keperluan, dari menampilkan teks sampai foto profil.

Membuat Halaman Web (HTML)​

Kita coba buat dokumen HTML. Pertama, buat direktori proyek, nama dan lokasinya terserah, terus buka VS Code. Klik menu File > Open Folder & pilih direktori itu. Kalo setelah pilih folder di VS Code kalian dapat popup seperti ini, klik tombol "Yes, I trust the authors".

Trust author

Berikutnya, buat file HTML & isi dengan templat HTML bawaan VSCode. Di panel Explorer klik tombol bergambar kertas dengan tanda plus. Beri nama file-nya index.html.

Di panel editor (sebelah kanan), ketik html, pilih html:5 dari menu & tekan Enter.

Di dalam tag <body></body> ketik div*2+span*2+p terus tekan Tab. Perintah ini otomatis bikin dua div diikuti dua span & satu p. Ubah isinya masing-masing jadi seperti ini:

<body>
  <div>Ini div 1</div>
  <div>Ini div 2</div>
  <span>Ini span 1</span>
  <span>Ini span 2</span>
  <p>Ini p1</p>
</body>

Buka Halaman Web di Browser​

Sekarang kita coba buka file index.html di browser. Buka Command Palette di VS Code. Caranya kalo kalian pakai Windows/Linux tekan Ctrl+Shift+P, kalo pakai Mac Cmd+Shift+P. Terus ketik livepre di kotak inputnya & pilih menu Live Preview: Show Preview (External Browser).

Kalo muncul menu untuk pilih browser, pilih Chrome yang akan otomatis buka alamat 127.0.0.1:3000.

Ekstensi Live Preview menjalankan server lokal yang bisa kita akses di alamat 127.0.0.1 (atau localhost) & nomor port 3000. Ekstensi ini punya fitur yang umum disebut live reload, jadi kalo kita edit filenya, otomatis browser akan reload/refresh sendiri.

tip

Kita bisa juga langsung buka file HTML-nya di browser, tapi kita harus reload halamannya secara manual karena fitur live reload-nya nggak jalan.

Fitur Live Reload

Inspeksi Elemen HTML​

Semua browser punya fitur namanya Developer Tools yang bisa kita pakai untuk menginspeksi HTML, CSS, JavaScript, dan lain-lain. Untuk membuka panel ini salah satu caranya adalah klik kanan di halaman HTML terus pilih menu Inspect.

Menu Inspect

Menu Inspect ini membuka panel Elements di Developer Tools.

Coba arahkan kursor ke atas setiap elemen. Elemen yang ada di bawah kursor akan ditandai dengan highlight biru muda.

Perhatikan warna & ukuran highlight biru berbeda antara elemen div, span, & p. Untuk div & p, lebar highlight-nya penuh selebar halaman. Sementara untuk span hanya selebar isinya.

Elemen yang lebarnya selebar parent atau kontainernya disebut block element. Elemen jenis ini nggak bisa bersebelahan dengan elemen lainnya. Makanya elemen div 2 yang kedua posisinya di bawah div 1, span di bawah div 2, p di bawah span. Sebaliknya, elemen span lebarnya hanya selebar isinya, jadi span 1 & span 2 bisa bersebelahan. Elemen seperti ini disebut inline element.

Selain elemen div & p masih banyak elemen blok lain yang nanti kita bisa pakai untuk membuat website antara lain: address, article, aside, blockquote, canvas, dd, dl, dt, fieldset,footer, form, h1 - h6, header, hr, dan lain-lain. Elemen inline selain span ada button, a, img, dan lain-lain.

tip

Untuk elemen p dalam contoh di atas selain ada highlight biru, ada juga yang oranye. Bagian oranye ini menunjukkan margin vertikal standar elemen p. Margin adalah jarak dari sisi sebuah elemen dengan sisi elemen di sekitarnya atau parent-nya.

Atribut​

Setiap elemen punya atribut. Atribut yang umum dimiliki semua elemen antara lain:

  • id: identifikasi unik sebuah elemen. Dalam satu halaman web nggak boleh ada lebih dari satu elemen yang id-nya sama.
  • class: Nama kelas CSS yang diaplikasikan ke sebuah elemen. Bisa lebih dari satu.
  • style: Aturan CSS yang untuk elemen tersebut (inline style)
  • title: Informasi tambahan yang muncul dalam bentuk tooltip ketika kursor mouse ada di atasnya.