Tutorial HTML Lengkap (Indonesia)
HTML (Hypertext Markup Language) merupakan salah satu unsur terpenting dalam membangun website
HTML (Hypertext Markup Language) merupakan bahasa markup yang digunakan untuk membuat struktur halaman web. Halaman web terdiri dari:
- HTML: Struktur.
- CSS: Style.
- JavaScript: Perilaku.
HTML digunakan untuk membuat struktur/kerangka/konten pada suatu website. HTML bukanlah bahasa pemrograman karena tidak ada konsep variabel, percabangan, perulangan, fungsi, dll.
Halaman web terdiri dari berbagai element HTML. Setiap element HTML terdiri dari tag pembuka, konten, dan tag penutup.
Untuk melihat perbedaan element, tag, dan konten, mari kita lihat contoh berikut:
Hari ini saya belajar HTMLPada baris di atas, kita memiliki sebuah konten yang berisi “Hari ini saya belajar HTML”.
Jika kita ingin menampilkan konten tersebut sebagai paragraf di halaman web atau browser, maka kita harus membungkusnya menggunakan tag paragraf <p>.
<p>Hari ini saya belajar HTML</p>Membuat File HTML
HTML dituliskan di dalam file yang berekstensi .html. Kita akan membuat file html pertama kita pada bagian ini, kemudian pada bagian selanjutnya kita boleh membuat file baru atau tetap berada pada file yang sama untuk mempelajari bagian yang lain.
Buat sebuah file bernama index.html.
Kemudian buka file tersebut menggunakan text editor (sublime text 3, vscode, atom).
Tuliskan kode berikut di dalam file index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>Untuk saat ini, tidak perlu khawatir jika belum mengerti arti dari kode di atas. Kita akan belajar mengenalnya perlahan lahan pada bagian selanjutnya.
Kemudian save file tersebut. Lalu buka file tersebut pada browser (chrome, firefox) dan lihat hasilnya.
Struktur Dasar HTML
HTML memiliki struktur dasar yang harus ditulis sesuai dengan format yang sudah ada.
Kita akan melihat dan mengenali struktur dasar HTML, perhatikan kode di bawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>Kode di atas merupakan struktur dasar HTML, kita coba membahas satu per satu
<!DOCTYPE html>
Tag <!DOCTYPE html> digunakan untuk mendeklarasi versi HTML yang digunakan dan memberitahu kepada browser bahwa dokumen yang ditulis menggunakan versi HTML 5.
HTML terdiri dari berbagai versi, mulai dari versi 1 sampai 5. Versi yang terbaru adalah versi 5, dan untuk mendeklarasikan versi HTML di HTML 5 relatif lebih singkat dibangingkan versi HTML sebelumnya.
<html></html>
Tag html merupakan tag root yang menampung semua tag tag yang ada di dalam HTML. Seluruh tag yang ada harus ditulis di dalam tag html.
<head></head>
Tag head digunakan untuk menyimpan informasi yang berkaitan di dalam website seperti title (judul website), meta (informasi), css, javascript.
Tag head disimpan di dalam tag html.
<body></body>
Tag body digunakan untuk menyimpan konten yang ditampilkan di halaman browser.
Seluruh konten yang ingin kita tampilkan di dalam browser harus ditulis di dalam tag body.
Konten yang disimpan di dalam tag body ada banyak seperti paragraf, judul, list, gambar, tabel, dll. Seluruh konten yang ditampilkan di halaman browser harus dituliskan di dalam tag body.
Tag body juga harus berada di dalam tag html, sama seperti tag head.
Element, Tag, dan Atribut
Dalam menulis HTML, kita akan sering menemukan istilah istilah berikut yaitu Element, Tag, dan Atribut.
Kita harus memahami istilah tersebut sebelum belajar mengenai HTML lebih lanjut.
Element
Element merupakan serangkaian atau kumpulan dari tag pembuka, konten, dan tag penutup.
Mari kita lihat contohnya:
<p>Ini merupakah sebuah paragraf</p>Pada contoh di atas, kita melihat tag pembuka paragraf <p>, kemudian konten, serta tag penutup paragraf </p>. Keseluruhan dari itu semua disebut sebagai element.
Tag
Tag merupakan penanda yang digunakan untuk memberitahukan browser seperti apa teks atau konten ditampilkan.
Mari kita lihat contohnya:
<h1>Belajar HTML</h1>Pada contoh di atas, <h1> merupakan tag pembuka, dan </h1> merupakan tag penutup. Di antara tag pembuka dan tag penutup terdapat konten.
Tag tersebut akan menampilkan konten sebagai judul sehingga browser akan menampilkan konten dengan ukuran yang besar dan tebal.
Atribut
Atribut merupakan informasi tambahan yang terdapat pada tag pembuka.
Terdapat banyak atribut pada HTML. Jenis-jenis atribut juga terbagi menjadi 2:
- atribut global
- atribut khusus
Mari kita lihat contohnya:
<a href="https://google.com">Klik Link Ini</a>Pada contoh di atas, kita memiliki tag <a> yang digunakan untuk membuat sebuah link. Pada tag tersebut terdapat keyword href.
href ini merupakan sebuah atribut milik tag a yang digunakan untuk menentukan link yang akan dituju ketika konten diklik.
Paragraf
Tag <p> digunakan untuk membuat paragraf.
Untuk membuat paragraf, kita tinggal mengisi teks di antara tag pembuka <p> dan tag penutup </p>, seperti contoh berikut:
<p>Ini merupakan sebuah paragraf</p>Selain itu, kita juga bisa membuat lebih dari satu paragraf dengan beberapa tag <p>, seperti contoh berikut:
<p>Ini paragraf pertama</p>
<p>Ini paragraf kedua</p>Heading
Heading digunakan untuk membuat judul di dalam halaman web.
Heading di HTML terdapat 6 tingkatan, mulai dari tag <h1> sampai <h6>.
Tag heading <h1> adalah yang terbesar, sedangkan tag heading <h6> adalah yang terkecil.
Berikut contoh membuat heading dari <h1> sampai <h6>.
<h1>Ini merupakan heading 1</h1>
<h2>Ini merupakan heading 2</h2>
<h3>Ini merupakan heading 3</h3>
<h4>Ini merupakan heading 4</h4>
<h5>Ini merupakan heading 5</h5>
<h6>Ini merupakan heading 6</h6>Kita dapat membuat banyak judul di dalam halaman web, penggunaan tag heading dapat disesuaikan dengan kebutuhan halaman web.
Link
Link atau Hyperlink digunakan untuk membuat link yang mengarah ke halaman atau bagian lain ketika diklik.
Link bertujuan untuk menghubungkan antara satu halaman dengan halaman lainnya atau satu bagian dengan bagian lainnya.
Membuat link menggunakan tag <a> (disebut tag anchor).
Tag <a> membutuhkan atribut wajib href (hypertext reference) untuk menentukan alamat tujuan.
Teks yang ingin ditampilkan ditulis di antara tag pembuka <a> dan tag penutup </a>.
Berikut contoh membuat link yang mengarah ke Google:
<a href="http://google.com">Google</a>Images
Selain membuat tulisan (paragraph, heading, link), kita bisa membuat gambar di HTML.
Membuat gambar di dalam HTML menggunakan tag <img> (tag images).
Tag <img> membutuhkan atribut wajib src (source) yang berisi alamat gambar yang ingin ditampilkan.
Tag <img> bersifat empty element sehingga tidak memerlukan tag penutup.
Berikut contoh membuat gambar:
<img src="profil.png">List
List digunakan untuk membuat daftar item atau daftar list di HTML.
Dalam HTML, terdapat 2 jenis list:
- Unordered list.
- Ordered list.
Unordered List
Unordered list adalah list yang tidak berurutan. List ini ditandai dengan label tertentu sehingga urutan list tidak begitu penting.
Membuat unordered list di HTML menggunakan tag <ul>, kemudian untuk membuat list menggunakan tag <li>.
Berikut contoh membuat list yang tidak berurutan:
<ul>
<li>Buku</li>
<li>Pulpen</li>
<li>Meja</li>
</ul>Ordered List
Ordered list adalah list yang berurutan. List ini menggunakan angka atau huruf yang berurutan untuk menandakan setiap item.
Membuat ordered list menggunakan tag <ol>, sedangkan untuk membuat list menggunakan tag <li>.
Berikut contoh membuat list yang berurutan:
<ol>
<li>Bangun Subuh</li>
<li>Shalat Subuh</li>
<li>Tilawah Al-Quran</li>
</ol>Table
Tabel digunakan untuk menampilkan data yang terstruktur yang terdiri dari baris dan kolom.
Untuk membuat tabel menggunakan tag <table>, <tr>, <td>.
Setiap tag tersebut memiliki fungsi masing masing:
- Tag
<table>digunakan untuk membuat table. - Tag
<tr>digunakan untuk membuat baris. - Tag
<td>digunakan untuk membuat kolom atau data.
Sebelum membuat tabel, kita harus menentukan ada berapa baris dan kolom yang akan dibuat.
Berikut contoh membuat tabel 5 baris dan 3 kolom:
<table>
<tr>
<td>No</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>1</td>
<td>Aufa</td>
<td>Depok</td>
</tr>
<tr>
<td>2</td>
<td>Maria</td>
<td>Jakarta</td>
</tr>
<tr>
<td>3</td>
<td>Alex</td>
<td>Bandung</td>
</tr>
<tr>
<td>4</td>
<td>Lola</td>
<td>Depok</td>
</tr>
</table>