HTML ini nantinya akan digabungkan dengan teknologi atau bahasa lain untuk mempercantik dan menyempurnakan website yang ingin developer buat, seperti CSS (untuk menghias website) dan Javascript (untuk membuat website lebih pintar atau canggih). Jika kamu ingin menjadi developer website tidak cukup jika hanya belajar HTML saja, kamu juga harus belajar banyak teknologi, agar website menjadi sempurna.
Berikut ini adalah beberapa hal yang perlu kamu ketahui tentang HTML :
1. Struktur dasar HTML
Setiap halaman website dibangun dengan menggunakan HTML. Struktur atau kerangka dasar dari sebuah dokumen HTML terdiri dari tag pembuka dan penutup, yang menunjukkan awal dan akhir dari elemen HTML. Contoh tag pembuka adalah <html>, sedangkan tag penutupnya adalah </html>. perbedaan antara tag pembuka dan tag penutup ada pada garis miring (/) setelah tanda kurang dari (<). Di antara tag pembuka dan penutup ini, kamu bisa menambahkan tag lain untuk membuat struktur dan konten halaman web. Ada juga beberapa tag seperti <img /> yang tidak perlu tag penutup, karena tag itu tidak menyimpan konten di dalamnya seperti tag <html> yang harus menyimpan konten di dalamnya, tag <img /> adalah konten itu sendiri dengan menambahkan atribut ke dalamnya. Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bagian kepala halaman -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman</title>
</head>
<body>
<!-- Bagian seluruh konten halaman -->
<h1>Hello Guys, How Are You</h1>
</body>
</html>2. Tag HTML
Tag HTML adalah elemen dasar dari bahasa markup HTML. Tag HTML berisi informasi tentang bagaimana sebuah halaman web harus ditampilkan atau dibuat di browser. Ada banyak tag HTML yang bisa kamu gunakan, seperti tag <p> untuk membuat paragraf, tag <h1> untuk judul, tag <img> untuk menampilkan gambar, dan tag <a> untuk membuat hyperlink, tag <form> untuk membuat formulir, tag <table> untuk membuat tabel, dan seterusnya. Setiap tag memiliki fungsinya masing-masing, jadi developer bisa berkreasi sesuka hati untuk membuat websitenya. Contoh :
<!-- Tag <p> untuk paragraf teks -->
<p>Ini adalah contoh paragraf teks.</p>
<!-- Tag <a> untuk tautan / link -->
<a href="https://www.example.com">Ini adalah contoh tautan</a>
<!-- Tag <h1> hingga <h6> untuk judul dengan level berbeda -->
<h1>Ini adalah contoh judul level 1</h1>
<h2>Ini adalah contoh judul level 2</h2>
<h3>Ini adalah contoh judul level 3</h3>
<h4>Ini adalah contoh judul level 4</h4>
<h5>Ini adalah contoh judul level 5</h5>
<h6>Ini adalah contoh judul level 6</h6>
<!-- Tag <img> untuk menyisipkan gambar -->
<img src="gambar.jpg" alt="Ini adalah contoh gambar">3. Atribut HTML
Atribut HTML memberikan informasi tambahan tentang tag HTML. Atribut dapat digunakan untuk mengatur ukuran, warna, dan tampilan lainnya dari elemen HTML atau tag HTML. Contoh penggunaan atribut pada tag <img> : <img src=”abc” />, atribut “src” berfungsi sebagai alamat pemanggilan gambar yang mau dipanggil, entah itu dari komputer lokal maupun dari internet. Contoh :
<!-- Tag <a> dengan atribut href -->
<a href="https://www.playtech90.com">Ini adalah tautan ke blog saya</a>
<!-- Tag <img> dengan atribut src, alt, dan width -->
<img src="gambar.jpg" alt="Deskripsi gambar" width="300">
<!-- Tag <input> dengan atribut type, name, dan value -->
<input type="text" name="nama" value="PlayTech90">
<!-- Tag <button> dengan atribut onclick -->
<button onclick="handleClick()">Klik Saya</button>4. CSS dan JavaScript
CSS (Cascading Style Sheets) dan JavaScript merupakan teknologi tambahan yang digunakan untuk memperindah dan memperluas fungsionalitas dari sebuah halaman web. CSS digunakan untuk mengatur tampilan dan layout serta mempercantik halaman web, sedangkan JavaScript digunakan untuk membuat interaksi dan efek-efek yang menarik pada halaman web. Contoh :
/* CSS */
.h1 {
color: white;
font-size: 60px;
font-weight: bold;
font-family: Arial, 'sans-serif';
}// Javascript
function ubahWarna() {
var elemen = document.getElementById("judul");
elemen.style.color = "gold";
}5. Tren terbaru HTML
HTML terus berkembang dan mengikuti tren terbaru dalam dunia teknologi dan desain web. Salah satu tren terbaru adalah HTML5, yang menawarkan banyak fitur baru, banyak tag baru untuk membuat halaman web yang lebih interaktif dan dinamis. Beberapa fitur HTML5 yang populer antara lain audio dan video, formulir yang lebih interaktif, dan tampilan yang responsif untuk perangkat mobile. Contoh :
<!-- Tag <video>: Digunakan untuk menyematkan video ke dalam halaman web -->
<video src="my_journey.mp4" controls></video>
<!-- Tag <audio>: Digunakan untuk menyematkan file audio ke dalam halaman web -->
<audio src="laguku.mp3" controls></audio>
<!-- Tag <canvas>: Digunakan untuk menggambar grafis, animasi, atau visualisasi data dengan JavaScript -->
<canvas id="myCanvas" width="500" height="300"></canvas>
<!-- Tag <figure> dan <figcaption>: Digunakan untuk menyematkan konten multimedia dengan keterangan -->
<figure>
<img src="gambar.jpg" alt="Gambar Keren">
<figcaption>Keterangan Gambar</figcaption>
</figure>Berikut itulah beberapa fungsi, cara kerja, dan kegunaan HTML. Untuk lebih
mengenal HTML kamu harus mencobanya sendiri, HTML tidak bisa dipelajari dan dipahami hanya dengan membaca saja, kamu juga perlu untuk mempraktekannya. Kamu juga harus mengkombinasikannya dengan CSS dan Javascript jika ingin website yang lebih bagus dan interaktif. Sekarang kamu telah tahu apa itu HTML, sekarang apa kamu tertarik mempelajari HTML lebih dalam lagi?