HTML merupakan bahasa markup yang wajib dipelajari, bagi yang mau menjadi web developer. Karena HTML merupakan bahasa markup dasar untuk membuat sebuah situs web di internet. Mungkin jika kamu seorang teknisi IT, HTML tidak akan asing terdengar. Pada pertemuan ini, kita akan benar-benar membahas dari dasar hingga anda bisa membuat halaman HTML sendiri.

Apa itu HTML?

HTML atau HyperText Markup Language merupakan sebuah bahasa markup untuk membuat halaman web. Jadi, HTML itu adalah sebuah bahasa yang menggunakan markup atau penanda untuk membuat halaman web. Penanda atau markup ini, nanti akan kita sebut dengan Tag. HTML berperan untuk menentukan struktur konten dan tampilan dari sebuah web. Jika Diibaratkan, HTML itu seperti batu bata untuk membangun rumah. Batu bata ini dapat disusun, hingga menjadi fondasi dasar.

Hubungan HTML dengan CSS dan Javascript

Dalam membuat halaman web, HTML tidak sendirian. Ada bahasa lain lagi yang menjadi pelengkapnya, yakni CSS dan Javascript. CSS adalah bahasa markup khusus yang digunakan untuk memperindah tampilan web. Lalu Javascript bertugas untuk membuat halaman web menjadi hidup. Karena dengan Javascript, kita dapat menentukan fungsi-fungsi maupun efek yang akan diterapkan di website.

Oh iya, pada tutorial ini. Kita akan fokus dulu membahas HTML. Jika kamu ingin belajar CSS dan Javascript, silakan buka:

Sejarah dan Asal-usul HTML

Awal kemunculan HTML dimulai dari tahun 1980. Saat itu seorang ilmuan bernama Tim Berners-Lee sedang bekerja di CERN. CERN sendiri bukanlah perusahaan yang berkaitan tentang teknologi maupun internet. CERN adalah singkatan dari bahasa prancis: Conseil Européen pour la Recherche Nucléaire yang berarti Komisi Eropa untuk Penelitian Fisika Nuklir. Para peneliti di CERN membutuhkan sebuah cara atau sistem agar bisa saling berbagi dokumen hasil penelitian. Tim kemudian mencoba membuat ENQUIRE. Ini adalah software hypertext yang akan digunakan untuk berbagi dokumen. Lalu di tahun 1989, Tim memperkenalkan ide tentang hypertext berbasis internet. Ini nantinya akan menjadi cikal-bakal HTML. Tim kemudian memulai proyek baru dengan rekannya Robert Cailliau yang merupakan system engineer di CERN. Akan tetapi proyek ini tidak resmi diadopsi oleh CERN. Pada akhir tahun 1991, Tim Berners-Lee menerbitkan dokumen yang berjudul: “HTML Tags”. Dokumen ini berisi penjelasan tentang 18 tags awal yang menjadi konsep dasar HTML. HTML sebenarnya dirancang berdasarkan pada konsep bahasa markup yang dikenal dengan SGML (Standard Generalized Markup Language). SGML adalah sebuah standar internasional untuk membuat dokumen dengan tanda (markup) seperti paragraf, list, heading, dan lain-lain. Bisa dikatakan HTML adalah implementasi dari SGML. Kalau kita lihat, beberapa tag seperti title, p, li, dan h1 sampai h6 berasal dari SGML. Namun, tidak semua yang ada di HTML berasal dari SGML. Salah satunya adalah Hyperlink, yang murni hasil pemikiran Tim Berners-Lee. Ide tentang HTML ini kemudian disebarkan ke dalam sebuah mailing list dan segera menjadi perhatian berbagai ilmuwan komputer di seluruh dunia.

Perkembangan dan Versi HTML

HTML punya beberapa versi, dari versi yang paling tua hingga yang terbaru. Berikut ini perkembangan versi HTML:

  • [Draft] HTML 1.0 (Juni 1993) adalah versi HTML pertama, namun tidak resmi dirilis;
  • HTML 2.0 (24 November 1995) adalah versi HTML kedua yang resmi pertama kali beredar di pasaran dan dirilis oleh IETF;
  • [Draft] HTML 3.0 (28 Maret 1995) versi ini gagal beredar, karena banyak perubahan yang memicu perdebatan;
  • HTML 3.2 (14 Januari 1997) versi resmi yang dirilis W3C pertama kali.
  • HTML 4.0 (24 April 1998) versi pengembangan dari yang sebelumnya;
  • HTML 4.01 (24 Desember 1999) versi perbaikan dari HTML 4.0;
  • XHTML 1.0 (26 Januari 2000) pengembangan dari HTML 4.01 dengan mengadopsi XML;
  • XHTML 2.0 (Augustus 2002—Juli 2006) versi kedua dari XHTML;
  • HTML 5 (28 Oktober 2014) versi html saat ini.

Versi [draft] adalah versi yang tidak resmi dirilis ke pasaran. Bentuknya cuma masih dalam draft spesifikasi saja.

Tidak ada yang menggunakan versi [draft] untuk membuat web. versi yang akan kita gunakan adalah HTML 5.

Adapun peralatan yang harus anda persiapkan untuk mengembangkan HTML:

Teks Editor untuk Menulis HTML

Teks editor akan kita gunakan untuk menulis kode-kode HTML. Kamu bebas menggunakan teks editor apapun. Penulis sangan merekomendasikan untuk menggunakan teks editor Visual Studio Code karena memiliki dukungan yang lengkap untuk peengembangan web.

Web Browser untuk Membuka HTML

Web browser akan kita gunakan untuk membuka HTML. Kamu juga bebas menggunakan web browser apapun. disarankan untuk menggunakan web browser versi terbaru untuk mendapatkan hasil yang maksimal ketika melakukan pengembangan. Bisa menggunakan Google Chrome ataupun Microsoft Edge

Membuat Dokumen HTML Pertama

Mari kita mulai dengan membuka teks editor, lalu tulislah kode berikut.

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Learn HTML</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

Setelah itu, simpan dengan nama index.html. Lalu cobalah buka file index.html dengan web browser maka lihat hasilnya.

Selamat! 🎉 Anda berhasil membuat halaman web pertama dengan HTML.

Hal-Hal Penting

Ada beberapa hal penting yang perlu diperhatikan dalam membuat HTML.

Extensi file HTML

Setiap file HTML harus berekstensi .html, .xhtml (untuk XHTML), dan .htm saja. Jika tidak menggunakan ekstensi ini, maka html tidak akan bisa dibaca oleh web browser.

Nama Khusus untuk Homepage

Jika kamu ingin membuat halaman untuk homepage, maka sebaiknya gunakan nama index.html. Karena ia akan otomatis dibuka saat website dikunjungi. Contohnya, saat kamu membuka blog.zulma.id maka file HTML yang akan dibuka adalah index.html yang berada di server Zulma Blog.

Hindari Beberapa Hal ini.

  • Penggunaan Spasi
    Nama file HTML biasanya akan tercantum pada URL, maka sebaiknya hindari menggunakan spasi pada nama file HTML, agar URL yang dibentuk lebih bagus. Spasi pada URL, biasanya akan otomatis diubah menjadi %20.

  • Spasi pada URL
    Sebagai ganti spasi, kamu bisa gunakan tanda min (-) atau underscore (_). Berikanlah nama file HTML dengan file yang biasa, hindari menggunakan huruf besar, campuran dari huruf besar dan kecil, dan juga menggunakan simbol.

    Contoh:

    1
    2
    HeLLoWORLD.html
    da*#$.html

    Meskipun nama ini bisa valid, tapi kurang bagus untuk dibaca. baik oleh manusia, maupun mesin.

Struktur Kode HTML

Struktur dasar kode HTML

Penulisan kode HTML selalu dimulai dengan deklarasi DOCTYPE, lalu menuliskan tag html dan di dalamnya terdapat tag head dan body.

Kalau kita perhatikan. struktur dasar kode HTML terdiri dari tiga bagian penting:

  • Bagian Deklarasi
  • Bagian HEAD
  • Bagian BODY

Mari kita bahas satu-per-satu:

Bagian Deklarasi

Coba perhatikan kode pada baris pertama: <!DOCTYPE html>.

Ini adalah tag deklarasi untuk menyatakan tipe dokumen dan versinya. Pada contoh di atas, kita menyatakan dokumen ini bertipe HTML dan versinya adalah HTML 5. Untuk menggunakan HTML versi 4.x cara deklarasinya berbeda dengan versi HTML 5.

Contoh untuk HTML 4.01:

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Terlihat panjang bukan? Lalu apakah boleh kita tidak menulis kode <!DOCTYPE html> ini? Boleh-boleh saja. Dokumen HTML-nya akan tetap bisa dibuka di web browser. Tapi, ini tentunya akan melanggar aturan standar yang dibuat W3C. dan juga kita bisa mengecek. apakah HTML yang ditulis sudah benar atau tidak di https://validator.w3.org/.

Berikutnya, di bawah tag deklarasi <!DOCTYPE html> terdapat tag pembuka untuk HTML:

1
<html lang="en">

Tag html diatas wajib ada di setiap dokumen HTML. Pada tag ini, kita memberikan atribut lang=”en” untuk menyatakan kalau konten dokumen HTML ini akan menggunakan bahasa inggris. Di dalam tag html ini, terdapat dua tag penting lagi. yakni: tag head dan tag body. Setelah itu barulah terakhir tag HTML ditutup dengan /html.

Bagian HEAD

Bagian HEAD adalah bagian kepala dari HTML. Dimulai dari tag head dan ditutup dengan /head.

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
<head>
   <title>Belajar HTML #01</title>
</head>
<body>
   <p>Hello World!</p>
</body>
</html>

Pada bagian HEAD, biasanya digunakan untuk menuliskan tag-tag yang akan dibaca oleh mesin.

Seperti:

  • Tag meta untuk SEO;
  • Tag title untuk judul;
  • Tempat menulis kode CSS dan Javascript;
  • dan lain-lain.

Berikut ini adalah kode HTML untuk menampilkan ikon. taruh kode berikut didalam tag head:

1
2
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">

Bagian BODY

Bagian BODY adalah bagian yang akan ditampilkan pada web browser. Penulisannya di mulai dari tag body dan ditutup dengan /body.

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
<head>
   <title>Belajar HTML #01</title>
</head>
<body>
   <p>Hello World!</p>
</body>
</html>

Di sinilah nanti kita akan banyak menuliskan konten dengan berbagai macam tag. Saat ini kita baru mengisinya dengan tag p. Tag p adalah tag yang digunakan untuk membuat paragraf.

Tag, Elemen dan Attribut

Tag, elemen, dan atribut merupakan tiga bagian penting yang ada di dalam HTML. Bagi kamu yang baru belajar HTML, wajib hukumnya untuk mengetahui ketiga Hal ini.

Apa itu Tag?

Tag adalah sebuah penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat dengan kurung sudut (<…>), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut.

Contoh: p, a, body, head, dan sebagainya.

Tag selalu ditulis berpasangan. Ada tag pembuka dan ada tag penutupnya. Namun, ada juga beberapa tag yang tidak memiliki pasangan penutup. Tag penutup ditulis dengan menambahkan garis miring (/) di depan nama tag.

Penulisan tag pada HTML

Setiap tag memiliki fungsi masing-masing. Ada yang digunakan untuk membuat judul, membuat link, membuat paragraf, heading, dan lain-lain. Pada awalnya HTML cuma punya 18 tag. Sekarang HTML sudah punya sekitar 250 tag. Lalu apa semua tag ini harus kita hafal? Jawabannya adalah Tidak harus. Cukup ketahui tag-tag dasar dan tag yang sering digunakan saja. Berikut ini daftar tag-tag dasar, yang menurut saya harus kamu ingat.

Tag Deskripsi atau fungsi
html untuk memulai dokumen HTML
head untuk membuat bagian head
body untuk membuat bagian body
h1 sampai h6 untuk membuat heading pada artikel
p untuk membuat paragraf

Beberapa tag ini sudah kita coba pada tutorial pertama dan juga ada yang belum. untuk lebih lanjut nanti akan diperkenalkan tag-tag lain yang umum digunakan dalam pembuatan web.

Cara Menulis Tag HTML yang Benar!

Beberapa orang kadang sering salah dalam menuliskan tag. Ada yang lupa menutup, ada yang salah mengetik namanya, dan semacamnya.

Berikut ini beberapa saran yang perlu diikuti agar bisa menulis tag dengan benar:

Tag-tag wajib

Ada beberapa tag yang wajib ada di HTML. Tag ini harus kamu tulis. kalau tidak, bisa jadi kode HTML-mu akan error menurut validator W3C.

Berikut ini daftar tag yang wajib ada di HTML:

1
2
3
4
5
- <!DOCTYPE html> — untuk deklarasi type dokumen;
- <html> — tag utama dalam HTML;
- <head> — untuk bagian kepala dari dokumen;
- <title> — untuk judul web;
- <body> — untuk bagian body dari dokumen.

Gunakan Huruf Kecil

Hindari menggunakan huruf besar dalam menuliskan nama tag dan sebaiknya gunakan huruf kecil saja. Huruf kecil lebih gampang diketik dan juga akan membuat kode HTML terlihat lebih bersih dan rapi.

Contoh baik:

1
2
3
<body>
    <p>Belajar tentang tag di HTML</p>
</body>

Contoh buruk:
1
2
3
<BODY>
    <P>Belajar tentang tag di HTML</P>
</BODY>

Khusus untuk tag !DOCTYPE html. wajib ditulis menggunakan huruf besar. Sebenarnya bisa juga dengan huruf kecil dan akan valid menurut validator W3C. Tetapi untuk dokumen XHTML, menggunakan DOCTYPE dengan huruf kecil akan mengakibatkan error.

Pastikan Menutup Tag dengan Benar

Tag HTML nantinya akan ditulis bertumpuk-tumpuk. Artinya, di dalam tag ada tag lagi. Kadang kita sering salah dalam menutup tag yang bertumpuk ini. Akibatnya, kode HTML kita tidak valid. Tag yang pertama dibuat, harus ditutup terakhir. Bukan ditutup pertama.

Contoh:

1
<i><b><u>memasak</u></b></i>

Tag i ditutup terakhir, karena ia yang ditulis pertama. Lalu tag /u ditutup pertama kali karena ia berada di dalam tag b dan i.

Apa itu Element?

Element dalam HTML adalah sebuah komponen yang menyusun dokumen HTML. Element kadang juga disebut sebagai node, karena ia merupakan salah satu jenis node yang menyusun dokumen HTML dalam diagram HTML tree. Pada diagram tersebut, terdapat tiga macam node. yakni: Node elemen, Node atribut, dan Node teks. Elemen dibentuk dari tag pembuka, isi tag, dan tag penutup. Kadang juga ditambahkan beberapa atribut.

Contoh:

1
<p align="center">Hello World!</p>

Pada contoh di atas, terdapat satu elemen p dengan atribut align=”center” dan memiliki isi berupa teks, yakni Hello World!. Elemen tidak selalu berisi teks, kadang ia juga akan berisi elemen lain. Ini biasanya kita sebut dengan nested element atau elemen di dalam elemen.

Element pada HTML

Element HTML ada banyak jenisnya. Ada elemen khusus untuk teks, ada elemen untuk multimedia, script, tabel, metadata, dll. Setiap element akan dipelajari secara bertahap. Semua jenis element HTML bisa kamu baca di sini: HTML elements reference. Beberapa elemen HTML kadang ditambahkan atribut sebagai pelengkap.

Apa itu Atribut?

Atribut adalah kata kunci khusus yang berada di dalam tag pembuka. Atribut juga disebut sebagai modifier yang akan menentukan perilaku dari elemen.

Atribut dalam HTML

Atribut dapat ditambahkan pada elemen manapun. Ada juga elemen yang mewajibkan menggunakan atribut seperti elemen a, img, video, dll.

Contoh:

1
<a href="https://zulma.id">Zulma.id</a>

Tag a adalah tag untuk membuat link. Tag ini mewajibkan menambahkan atribut href untuk menyatakan halaman tujuan dari link. Jumlah atribut pada elemen bisa lebih dari satu.

Contoh:

1
<img src="gambar.jpg" width="100" height="100" />

Atribut src adalah atribut khusus untuk tag img yang fungsinya untuk menentukan gambar yang akan ditampilkan. Lalu atribut width dan height adalah atribut yang mengatur ukurannya.

Jenis-jenis Atribut HTML

Tiap-tiap elemen kadang memiliki atribut khusus yang hanya bisa digunakan pada elemen tersebut. Ada juga atribut yang bersifat global dan bisa ditambahkan ke semua elemen.

Berikut ini jenis-jenis atribut yang harus diketahui:

Atribut Global

Atribut Global adalah atribut yang bisa ditambahkan pada semua elemen HTML.

Berikut ini daftar atribut global dan fungsinya:

Nama Atribut Deskripsi atau fungsi
accesskey Menentukan tombol shortcut untuk mengaktifkan atau fokus pada elemen
class Menentukan class CSS yang akan digunakan
contenteditable Menentukan isi elemen bisa diedit atau tidak
data-* Digunakan untuk menyimpan data
dir Menentukan arah teks dari elemen (kiri ke kanan atau sebaliknya)
draggable Menentukan apakah elemen bisa di drag atau tidak
hidden untuk menyembunyikan elemen
id Menentukan id unik untuk elemen
lang Menentukan bahasa yang digunakan untuk isi elemen
spellcheck Menentukan apakah isi elemen harus dilakukan pengejaan grammar atau tudak
style Menentukan inline CSS untuk elemen
tabindex Menentukan urutan atau indeks tab dari elemen (saat tombol tab ditekan)
title Menentukan informasi tambahan tentang elemen
translate Menentukan apakah konten dari elemen bisa diterjemahkan atau tidak

Atribut Event

Atribut event adalah atribut yang digunakan untuk menentukan aksi yang akan dilakukan saat terjadi sesuatu pada elemen. Atribut ini nanti akan banyak digunakan pada pemrograman Javascript.

Berikut ini daftar atribut event saat terjadi sesuatu pada Jendela browser:

Nama Atribut Nilai Fungsi: Menjalankan script
onafterprint kode javascript setelah dokumen dicetak
onbeforeprint kode javascript sebelum dokumen dicetak
onbeforeunload kode javascript sebelum saat dokumen tidak ter-load
onerror kode javascript saat terjadi error
onhashchange kode javascript saat terjadi perubahan pada bagian anchor di URL
onload kode javascript setelah loading selesai
onmessage kode javascript saat ada pesan
onoffline kode javascript saat tiba-tiba offline
ononline kode javascript saat tiba-tiba online
onpagehide kode javascript saat user tidak sedang membuka halaman web
onpageshow kode javascript saat user membuka kembali halaman web
onpopstate kode javascript saat history browser berubah
onresize kode javascript saat ukuran jendela browser berubah
onstorage kode javascript saat area penyimpanan (Web Storage) di-update
onunload kode javascript saat web browser ditutup

Selain atribut tersebut, masih banyak lagi atribut event yang lainnya.

Atribut Khusus

Atribut khusus adalah atribut yang hanya bisa dipakai pada elemen tertentu dan kadang atribut ini tidak bisa digunakan pada elemen yang lain.

Contoh:

Nama Atribut Bisa dipakai di tag
src audio, embed, iframe, img, dll
href a, link
action form
autoplay audio, video

Cara Menulis Atribut

Penulisan atribut sebenarnya cukup mudah. kita hanya perlu menambahkannya pada tag pembuka dengan format seperti ini:

1
<h1 atribut="nilai"></h1>

Namun, ada beberapa hal yang perlu diperhatikan agar penulisannya benar dan valid:

Gunakan Huruf Kecil

Menulis atribut dengan huruf besar sah-sah saja, dan bahkan valid menurut validator W3C. Tapi lebih disarankan menggunakan huruf kecil. Karena lebih umum digunakan dan juga mudah terbaca.

Contoh baik:

1
<p align="center">Belajar HTML di Blog Zulma</p>

Contoh buruk:

1
<p ALIGN="CENTER">Belajar HTML di Blog Zulma</p>

Gunakan Tanda Petik

Gunakan tanda petik untuk mengisi nilai atribut yang mengandung teks. Mengapa? Karena jika terdapat lebih dari satu kata, ia akan menciptakan spasi dan akan dianggap sebagai atribut baru.

Contoh baik:

1
<h1 title="tutorial HTML untuk pemula">Belajar HTML</h1>

Contoh buruk:

1
<h1 title=tutorial HTML untuk pemula>Belajar HTML</h1>

Tanda petik yang digunakan, boleh petik ganda (“) dan juga petik tunggal (‘). Untuk nilai angka, boleh pakai tanda petik dan juga boleh tidak.

Contoh:

1
<img src="gambar.jpg" width=120 height=120 />

Lalu, untuk atribut yang bernilai boolean (true dan false). nilainya boleh ditulis dan boleh tidak.

Contoh:

1
2
<input type="text" required="true" />
<input type="text" required />

Penggunaan Spasi

Jika ada atribut yang memiliki lebih dari satu nama, maka ia ditulis dengan tanda min (-), bukan spasi.

Contoh:

1
<img data-src="gambar.jpg" />

Lalu, spasi juga digunakan untuk memisahkan dua atau lebih atribut.

Contoh:

1
<img class="lazyload" data-src="gambar.jpg" src="placeholder.jpg" />

Bisa juga ditulis seperti ini:

1
2
3
<img class="lazyload" 
data-src="gambar.jpg" 
src="placeholder.jpg" />

Conclusion

Elemen adalah komponen yang menyusun dokumen HTML. Sedangkan Tag adalah penanda untuk memulai dan mengakhiri elemen. Lalu atribut adalah modifier untuk menentukan perilaku elemen. selanjutnya kita akan berkenalan dengan elemen-elemen dasar di HTML seperti paragraf, heading, list, tabel, link, form, dan lain-lain.