Belajar Dasar HTML

Perjalanan pertama seseorang yang ingin belajar web development biasanya dimulai dengan belajar membuat HTML. Begitupun dengan saya.
HTML merupakan dasar dari sebuah halaman web yang kita lihat. Apasih HTML itu? Kita akan pelajari bersama..

Pengertian HTML

Apa itu HTML?

HTML atau Hypertext Markup Language adalah sebuah bahasa markup yang digunakan untuk membuat kerangka suatu web. HTML inilah yang menyusun kerangka suatu web dan nantinya akan kita lihat dari suatu browser.

HTML bisa dikatakan bukan bahasa pemrograman, karena hanya membuat struktur dari halaman web. Tidak seperti bahasa pemrograman yang memiliki perintah perulangan, pengkondisian dan lain sebagainya.

Di era seperti sekarang hampir tidak ada web yang dibuat murni hanya dengan HTML saja. Biasanya HTML akan ditemani oleh CSS dan Javascript untuk mendukung tampilan suatu web agar lebih menarik dan interaktif.

Maka dari itu, biasanya ketika orang ingin mengerti tentang web development, diawali dengan belajar HTML terlebih dahulu. Setelah itu bisa dilanjutkan dengan memahami CSS dan Javascript.

Menjalankan HTML

Karena HTML bukan bahasa pemrograman, maka kita hanya perlu browser saja untuk menjalankannya. 

Lalu bagaimana membuat file HTML-nya?

Caranya cukup mudah. Kita bahkan bisa menggunakan notepad biasa untuk membuatnya. Tapi ketika kita benar-benar terjun ke dunia web development, saran saya tetap gunakan text editor yang mumpuni untuk web development. 

Untuk membuat file html, cukup gunakan text editor untuk membuat file dengan ekstensi .html. Kemudian file tersebut sudah dapat dibuka pada browser.

Lalu apa isinya? Kita akan pelajari bersama..

Tag, Elemen dan Attribute HTML 

Dalam HTML kita akan berkutat dengan tag, elemen dan attribute. Oleh karena itu penting bagi kita untuk mengerti dasar akan 3 hal tersebut.

Pengertian Tag HTML

Dalam bahasa markup, kita perlu memberitahu browser fungsi dari suatu elemen. Apakah elemen itu berfungsi sebagai paragraf, list atau judul. Dalam hal ini, dibutuhkan yang namanya tag.

Dalam HTML, tag ditulis berpasangan, yaitu tag pembuka dan tag penutup. Tag juga ditulis dengan menggunakan kurung siku < dan >. Contohnya seperti ini..

<pembuka>Sebuah elemen</penutup>

Dari contoh diatas, kita melihat ada tag pembuka dan tag penutup. tag pembuka ditulis dengan <tag> dan tag penutup ditulis dengan </tag>.

Tentunya contoh tag diatas bukan tag sesungguhnya. Berikut contoh nyata tag dalam HTML.

<h1>Ini adalah judul</h1>

<p>Ini adalah suatu paragraf</p>

Dari contoh diatas, dapat dilihat bahwa tag pembuka dan tag penutup selalu mengunakan nama tag yang sama.
Dalam beberapa kasus, ada yang dikenal dengan self closing tag. Dimana tag tersebut dibuka dan ditutup dalam satu tag saja. Misalnya

<br/>

<hr/>

Pengertian Elemen HTML

Elemen bisa dikatakan adalah isi dari suatu tag pembuka dan tag penutup. Kita lihat contoh dibawah.

<h1>Ini adalah judul</h1>

Dari contoh tersebut, Ini adalah judul merupakan elemen dari tag h1. Namun dalam beberapa kasus, elemen suatu tag bisa juga adalah tag lain. Misalnya..

<h1>Ini adalah judul <span>Subjudul</span></h1>

Perhatikan contoh diatas, isi elemen tidak hanya suatu text tapi juga terdapat tag HTML yang lain yaitu span.

Pengetian Attribute HTML

Atribut merupakan informasi tambahan yang diberikan pada suatu tag. Fungsinya bermacam-macam ada yang digunakan sebegai selector untuk css dan javascript, ada yang digunakan sebagai atribut utama dari  suatu tag dan lain sebagainya.

Biasanya atribut ditulis dengan name="value". Dimana name adalah nama dari suatu atribut, dan value adalah isi/nilai dari suatu atribut. Kita lihat contoh dibawah.

<h1 id="judul">Sebuah judul</h1>

Dari contoh diatas, kita melihat tambahan id="judul". Dimana, id merupakan nama dari suatu atribut, dan judul merupakan isi dari atribut tersebut. 

Struktur Dasar HTML

Oke, setelah mengenal beberapa komponen HTML diatas, sekarang saatnya kita mempelajari bagaimana struktur dasar suatu HTML.

Setiap halaman HTML setidaknya memiliki struktur dasar yang sama. Kital lihat contoh berikut

<!DOCTYPE html>
<html>
    <head>
        <title>Kodehero - Belajar HTML</title>
    </head>
    <body>
        <h1>Judul Post</h1>
        <p>Saya bisa menjadi web developer.</p>
    </body>
</html>

Dari struktur diatas, kita melihat ada beberapa tag utama yang sebaiknya ada dalam suatu halaman web, yaitu: DOCTYPE, html, head dan body.
Jika kalian buka pada browser, maka akan muncul tampilan sebagai berikut.

Tampilan kode html pada browser

Lah? Kok cuma keluar dikit, padahal yang ditulis banyak banget? Tenang, semua yang kita tulis diatas memang hanya bagian elemennya saja yang akan ditampilkan ke browser. Untuk lebih jelasnya, kita akan bahas satu persatu tag diatas.

Tag <!DOCTYPE>

DOCTYPE atau yang juga dikenal sebagai Document Type Declaration, berfungsi untuk memberitahu browser dokumen yang kita tulis berjenis apa. Dalam contoh kasus diatas, kita menuliskan HTML sebagai jenis dokumennya.

Tag <html>

Tag html ini merupakan tag utama yang memiliki tujuan untuk membuka seluruh tag lain dalam suatu halaman web. Makanya bisa kita lihat tag html ditutup dibagian paling akhir dari suatu dokumen.

Tag <head>

Ibarat manusia, HTML juga memiliki kepala. Fungsinya untuk mendefinisikan isi suatu halaman web. Misal berisi meta dari halaman tersebut, memanggil file css atau javascript pendukung dan lain sebagainya.
Dalam contoh diatas, saya menampilkan tag title yang merupakan salah satu kebutuhan suatu dokumen juga. Sebenarnya tidak ditulispun tidak akan masalah, namun sebaiknya dalam suatu halaman web tetap ditulis titlenya. Title ini nantinya yang akan muncul pada tab browser anda.

Tampilan title HTML

Tag <body>

Setalah kepala, HTML juga memiliki badannya. Tag body inilah yang nantinya berisi berbagai macam isi dari suatu halaman web. Oleh karena itu apa yang kita tulis di bagian body akan ditampilkan pada browser.

Isi dari body pun berbagai macam, dalam contoh diatas saya hanya menampilkan suatu judul dan paragraf, namun kenyataannya bagian body bisa memanggil css maupun javascript, menampilkan footer, link, navigasi dan lain sebagainya.

Kesimpulan

Untuk tahap awal, mungkin cukup itu saja yang perlu diketahui tentang HTML dasar. Selanjutnya kita akan membahas lebih jauh lagi tentang HTML ini. Jika kalian butuh referensi apa saja tag HTML yang ada dan attribute pendukungnya kalian bisa mengunjungi web w3schools.
Oke sekian dulu, semoga bisa bermanfaat dan tentunya membantu temen temen semua untuk bisa belajar web development.
Bantu share artikel ini, supaya teman teman kalian juga bisa belajar web development khususnya HTML.
Terima kasih, dan sampai jumpa!