Saat ini pengembangan web semakin berkembang dengan pesat. Dengan munculnya framework-framework dan library frontend seperti ReactJS dan VueJS membuat pengembangan Tampilan halaman web menjadi sangat berbeda dari sebelumnya. Namun, hal itu tak membuat anda dapat mempelajarinya tanpa dasar-dasar yang sudah ada sejak dulu seperti HTML. HTML akan tetap menjadi hal yang wajib dipelajari oleh seorang Web Developers.
Mengenal HTML
HTML atau Hypertext Markup Language adalah sebuah bahasa markup yang digunakan dalam pembuatan tampilan sebuah Website. HTML diibaratkan sebagai sebuah kerangka dalam sebuah Website. Hanya dengan HTML saja kita sudah dapat menampilkan konten yang kita inginkan. Namun, ada CSS yang dapat digunakan untuk mempercantik tampilan tersebut. Pada seri ini kita hanya akan berfokus pada HTML dalam pembuatan sebuah website.
Dalam dunia pengembangan website, Kode-kode HTML akan dirender oleh browser sehingga akan sebuah menjadi tampilan yang kita inginkan. Saat ini standarisasi HTML berada di versi ke 5, saya tidak akan membahas sejarah HTML ini. Namun, anda dapat mengunjungi halaman wikipedia untuk membaca sejarahnya.
Struktur Dasar HTML
Pada dasarnya, contoh struktur dasar html yang valid adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>First HTML Page</title>
</head>
<body>
<p>First paragraph</p>
</body>
</html>Berikut penjelasannya:
<!DOCTYPE html>Elemen yang akan memberitahu browser bahwa dokumen yang sedang dibuka ini adalah HTML, bukan dokumen lain (seperti XML yang memiliki syntax mirip HTML).<html>Merupakan tag pembuka HTML. Seluruh tag-tag html dimasukan kedalam tag ini.<head>Tag yang menjadi tempat meletakkan informasi terkait halaman, seperti: Judul halaman, Gambar untuk di sosial media dan metadata untuk SEO. Tag ini tidak akan dirender menjadi tampilan.<title>Tag yang akan berisikan judul halaman saat ini. Tag ini akan ditampilkan oleh browser sebagai judul di tab.
<body>Tag yang akan menjadi isi konten yang akan dirender menjadi tampilan. Disinilah letak seluruh tag yang akan dirender menjadi tampilan.
Sintaks Elemen HTML
Untuk elemen HTML itu sendiri, memiliki sintaks yang simpel, berikut ini adalah struktur dasar sintaks HTML:
Tag HTML dari pembuka sampai tag penutup biasa disebut dengan elemen. Dalam gambar diatas saya contohkan tag p (paragraph) yang memiliki sebuah attribut (class dengan value/isi "content"). Dan memiliki isi/children teks "Example". Lalu diikuti dengan tag penutup. Hampir semua tag HTML memiliki struktur sintaks seperti diatas.
Tag Pembuka
Tag Pembuka memberitahukan elemen apa yang sedang kita ketikan. Pada contoh diatas saya membuat elemen p yang berupa Paragraph. Untuk jenis tag lainnya akan saya jelaskan di bagian selanjutnya.
Attribut
Attribut bersifat opsional, artinya anda juga dapat hanya menuliskan kode:
<p>Example</p>Jika tidak perlu menambahkan attribut. Attribut dapat berbeda untuk setiap tagnya, contohnya tag img yang bisa menerima attribut src. yang berisikan path/url gambar yang akan ditampilkan.
Children / Isi Tag
Isi Tag dapat berupa teks maupun tag lain. Contohnya:
<div id="content">
<p>Example Paragraph</p>
</div>Ada juga tag yang tidak memiliki isi, seperti tag img
Tag Penutup
Semua tag harus ditutup (kecuali beberapa tag yang tidak memiliki isi, seperti tag img yang dapat langsung dituliskan tanpa tag penutup seperti berikut:
<img src="https://static-cdn.piksel.id/files/dd23af160e9ce7372d5223d6ac04aa8469c6b547.png">Tag HTML harus ditutup secara urut dari tag yang paling dekat ke paling jauh. Contohnya adalah sebagai berikut:
<div id="container">
<div class="content">
<span>Example Span</span>
<p>Example Paragraph <font color="green">Green</font></p>
</div>
</div>Anda tidak boleh menutup tag secara tidak urut. Hal itu akan menyebabkan HTML menjadi invalid dan browser akan membuat tampilan yang berantakan.
Membuat Hello World dengan HTML
Jika kita sedang mempelajari hal baru dalam dunia pemrograman maka ada yang kurang rasanya jika kita tidak membuat program Hello World pertama kita.
Silahkan buat file baru di komputer/laptop anda dengan ekstensi .html (misal: hello-world.html)
Informasi
Dalam dunia website, dianjurkan membuat nama sebuah file/folder tidak menggunakan karakter yang aneh-aneh. Dianjurkan nama file/folder tidak menggunakan spasi (bisa diganti dengan simbol - atau _) dan dianjurkan menggunakan lower-case alphabet. Hal ini karena implementasi case-sensitive berbeda dalam sistem operasi Windows dan Linux.
Anda dapat langsung membuat file tersebut menggunakan Notepad, VSCode, Sublime Text ataupun teks editor kesukaan anda. Anda juga dapat menggunakan Vi atau Nano di terminal jika menggunakan Linux. Buat konten file HTML Tersebut sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>Tag H1 adalah Heading (Judul) di HTML, hal ini akan saya jelaskan di pembahasan berikutnya. Jangan lupa untuk menyimpan file tersebut dengan ekstensi .html. Untuk pengguna notepad pastikan Save as type nya menjadi All Files.
Silahkan buka file yang telah anda simpan dengan cara klik dua kali di file explorer atau klik kanan, pilih Open With, pilih Browser yang ingin anda gunakan.
Anda akan mendapatkan tampilan Hello World di browser yang anda gunakan.
Selamat anda telah berhasil membuat "Hello World" pertama anda dengan HTML!
Terima kasih telah membaca artikel pertama dari seri belajar HTML. Jika memiliki kendala ataupun pertanyaan jangan ragu untuk mengisi form komentar atau menghubungi langsung media sosial saya. Semoga bermanfaat!