Bagian tutorial ini akan menjelaskan konsep dasar dokumen HTML dengan menyertakan beberapa contoh coding HTML yang nantinya bisa menjadi suatu tampilan yang dapat dilihat secara visual melalui web browser.
Contoh HTML Dalam Bentuk File
Dokumen HTML atau biasa disebut juga dengan file HTML disimpan dalam file berekstensi html. File dokumen HTML dimulai dengan deklarasi tipe dokumen <!DOCTYPE html>. Deklarasi tipe dokumen hanya ditulis sekali pada bagian awal file HTML. Deklarasi tipe dokumen tidak bersifat case sensitive.
Dokumen HTML terdiri dari kumpulan elemen-elemen HTML yang biasa disebut dengan istilah tag HTML. Format elemen HTML adalah sebagai berikut
<nama tag>Konten</nama tag>
Nama tag adalah nama elemen. Tag selalu dibuka dengan tag pembuka <nama tag> dan ditutup dengan tag penutup </nama tag>. Kita akan mempelajari tag lebih detil pada tutorial selanjutnya.
Dokumen HTML berada di dalam tag HTML, tag ini mempunyai tag pembuka <html> dan tag penutup </html>.
Bagian struktur dokumen HTML yang tampil pada web browser berada di dalam tag body. Tag body mempunyai tag pembuka <body> dan tag penutup tag </body>. Perhatikan contoh HTML di bawah ini.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html> Dari contoh HTML di atas kita akan membahas secara singkat elemen-elemen atau tag-tag HTML dasar.
Heading
Heading digunakan untuk membuat judul tulisan. Seperti juga tulisan pada buku maka Heading adalah tulisan untuk Bab atau Sub Bab. Heading biasanya menggunakan huruf yang lebih besar dan lebih tebal. Heading terdiri dari beberapa tag mulai dari h1 sampai h6. Tag h1 adalah tulisan heading paling besar dan tebal, sedangkan h6 adalah tulisan heading paling kecil dan tipis.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>Paragraf
Paragraf digunakan untuk membuat suatu paragraf baru pada dokumen HTML. Paragraf menggunakan tag p.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p> Link Atau Tautan
Link adalah tautan ke dokumen HTML lain. Link digunakan untuk membuka dokumen HTML lain atau halaman website lain. Link menggunakan tag a.
<a href="https://nextgen.co.id">This is a link</a>Halaman website yang akan dibuka dicantumkan dalam atribut href. Atribut digunakan untuk mendefinisikan informasi tambahan pada suatu elemen atau tag. Kita akan mempelajari tentang atribut pada tutorial selanjutnya.
Image
Image digunakan untuk menampilkan gambar. Elemen image menggunakan tag img. Image yang akan ditampilkan berada dalam atribut src. Terdapat beberapa atribut lain seperti height dan width untuk menentukan ukuran image yang akan ditampilkan.
<img src="https://nextgen.co.id/nextgen.jpg" alt="Logo Nextgen" width="104" height="142"> Cara Melihat Source Code HTML
Silahkan simak video berikut untuk berlatih melihat dan melakukan debugging pada source code HTML. Aktifkan subtitle atau caption pada youtube untuk mendapatkan penjelasan.
Tutorial setelahnya : Tag Tag HTML
Semua Tutorial HTML : Tutorial HTML