Struktur dasar HTML adalah materi paling awal dalam belajar pemrograman web. Semua website pasti menggunakan HTML untuk merancang tata letak, agar terlihat rapi. Oleh karena itu, mempelajari struktur, aturan, dan cara membuat HTML dasar akan menjadi langkah pertama setiap web developer.
Di artikel ini, kamu bisa mempelajari struktur HTML dan fungsinya hingga cara membuatnya. Setiap struktur HTML dan penjelasannya akan disertai dengan contoh, agar kamu lebih mudah memahaminya.
Apa Itu HTML?
HTML adalah singkatan dari Hypertext Markup Language yang berperan sebagai pondasi utama sebuah website. Dalam web programming, HTML menjadi bahasa yang menyusun tata letak setiap elemen. Bersama dengan HTML itulah bahasa pemrograman lainnya dapat bekerja dengan baik.
Perlu kamu ketahui, bahwa HTML bukanlah bahasa pemrograman, melainkan bahasa markup. Struktur dasar HTML merupakan susunan dari berbagai tag yang bekerja seperti wadah bagi elemen web. Setiap teks, gambar, video, animasi, tombol, dan berbagai elemen lainnya dapat tersusun rapi berkat HTML.
Akan tetapi, fungsionalitas HTML terbatas hanya pada penyusunan struktur saja. HTML tidak dapat menjalankan fungsi-fungsi canggih sebagaimana yang bisa bahasa pemrograman lain lakukan. Karena itulah, sebuah web pasti menggunakan kombinasi HTML, CSS, dan setidaknya satu bahasa pemrograman tambahan.
Struktur Dasar HTML
Setelah memahami pengertian HTML, sekarang kita akan membahas tentang struktur dasarnya. Kamu bisa mempelajari struktur HTML dan penjelasannya sambil mempraktekannya langsung di code editor, agar kamu lebih cepat menguasai materi ini.
1. Struktur Dasar HTML Sederhana
HTML adalah bahasa yang relatif sederhana dan mudah dipelajari. Sebuah script HTML akan terlihat seperti di bawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar HTML #01</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Kamu bisa menyalin kode sederhana di atas, lalu menempelkannya ke text editor. Simpan file tersebut dengan ekstensi .html dan beri nama sesuka kamu. Kemudian, buka file tersebut dengan web browser untuk melihat hasilnya. Tanpa kamu sadari, kamu baru saja membuat sebuah website sederhana!
2. Mengenal Tag HTML
Jika kamu perhatikan, struktur dasar HTML pada script di atas terdiri dari beberapa tag. Sebuah tag pada bahasa HTML dapat kamu kenali dengan simbol pembuka <> dan penutup </>. Setiap jenis tag HTML memiliki fungsi yang berbeda-beda, namun format penulisannya tetaplah sama.
Tag HTML memiliki atribut yang berfungsi untuk mendefinisikan aspek-aspek tertentu. Misalnya atribut untuk mendefinisikan bahasa, mencantumkan URL, menentukan direktori gambar, mengatur ukuran, hingga mempercantik elemen.
3. Cara Menulis Struktur Dasar HTML
Untuk menulis dokumen HTML, maka kamu harus terbiasa dengan format tag. Sebuah tag umumnya dibuka dengan simbol <> dan ditutup dengan simbol </>. Di tengah kedua simbol tersebutlah kamu menulis konten yang ingin kamu tampilkan di website.
Misalnya, untuk membuat sebuah paragraf, maka kamu harus membukanya dengan tag <p>. Kemudian, kamu lanjutkan dengan menulis teks paragraf yang kamu inginkan. Lalu, tutup lagi dengan </p> di akhir baris. Jika ditulis secara lengkap, kodenya akan menjadi seperti di bawah ini:
<p>contoh teks paragraf dalam dokumen HTML</p>.
4. Document Type Declaration
Document Type Declaration (DTD) adalah bagian yang berperan sebagai deklarator tipe dokumen. DTD HTML dapat kamu tulis dengan tag <!DOCTYPE html>. Tag tersebut menjelaskan kepada browser bahwa tipe dokumen yang sedang dimuat adalah HTML5.
Jika kamu tidak menyebutkan versi HTML dalam DTD, maka browser akan secara otomatis menggunakan HTML versi 5. Jika kamu menggunakan versi HTML di bawahnya, maka kamu perlu menuliskan DTD secara spesifik. Contohnya seperti di bawah ini:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Pada contoh di atas, versi HTML yang digunakan adalah 4.01. Dalam struktur dasar HTML, DTD selalu ditulis di baris paling atas. Pelajari rekomendasi DTD HTML yang dirilis resmi oleh W3C, agar kamu dapat mencoba berbagai versi HTML.
5. Bagian HTML
Setelah memahami DTD, maka bagian selanjutnya adalah tag <html>. Tag ini wajib ada di setiap dokumen HTML dan membungkus seluruh isi halaman. Atribut yang populer dengan <html> adalah lang yang berfungsi untuk mendefinisikan bahasa. Contohnya seperti ini: <html lang=”id”>.
<html> sebagai tag pembuka harus kamu cantumkan di bagian atas, tepat di bawah DTD. Sedangkan </html> sebagai tag penutup harus kamu cantumkan di bagian paling bawah. Dengan demikian, maka semua bagian dan tag lain dalam dokumen harus berada di dalam <html> dan </html>.
6. Bagian Head
Head adalah bagian atas, alias kepala dalam sebuah website. Cara menulis head adalah dengan tag pembuka <head> dan tag penutup </head>. Di antara kedua tag tersebut, ada banyak jenis tag lain yang bisa kamu masukkan.
Tag yang pasti ada di bagian head HTML adalah judul. Informasi meta untuk SEO juga bisa kamu masukkan, jika kamu ingin mengoptimasi SEO halaman situs kamu. Selain itu, kamu juga bisa menulis kode CSS untuk desain dan JavaScript untuk fungsionalitas, agar halaman web kamu menjadi lebih modern.
Secara ringkas, daftar elemen yang bisa kamu masukkan ke dalam head HTML ialah:
<title>: Judul halaman.
<base>: Menentukan alamat default untuk semua link dalam satu halaman.
<link>: Menjelaskan hubungan sebuah dokumen dengan sumber daya eksternal. Umumnya, <link> digunakan untuk menghubungkan dokumen HTML dengan file CSS.
<meta>: Mencantumkan informasi charset, deskripsi, kata kunci, penulis, dan pengaturan viewport. Tag ini sangat penting dalam optimasi SEO.
<script>: Memuat kode JavaScript pada sisi klien.
<style>: Mengatur style halaman, seperti jenis huruf, warna, latar belakang, dan lain sebagainya.
Setelah kamu selesai menulis apa yang kamu butuhkan di bagian head, maka kamu bisa menutupnya dengan </head>, lalu masuk ke bagian selanjutnya.
7. Bagian Body
Body adalah bagian utama dalam struktur dasar HTML. Bagian ini berisi konten dan informasi utama dalam sebuah halaman website. Di bagian inilah kamu bisa memasukkan teks, gambar, video, dan jenis media lainnya.
Kamu hanya boleh mencantumkan satu body dalam dokumen HTML. Sepanjang apapun halaman yang kamu buat, semuanya harus dimuat dalam satu tag body. Oleh sebab itu, kamu harus menyusunnya dengan rapi, agar maintenance menjadi lebih mudah. Sebuah body HTML umumnya memuat elemen-elemen berikut ini:
<h1> sampai <h6>: Tag h1 sampai h6 berfungsi sebagai header dan subheader.
<p>: Paragraf sebagai inti informasi dalam format teks.
<img>: Gambar untuk memperkaya dan mempercantik halaman.
<a>: Tautan yang mengarahkan pengguna ke halaman atau situs lain.
<video>: Menyertakan video ke dalam dokumen HTML.
<table>: Membuat tabel di halaman HTML.
Selain daftar tag di atas, masih ada puluhan jenis tag lain yang bisa kamu gunakan di dalam body. Baca referensi di di situs resmi W3Schools, agar kamu bisa bereksperimen dengan lebih banyak jenis tag. Kemudian, praktekkan penggunaan tag HTML dengan tambahan atribut, agar skill kamu semakin matang.
Dengan memahami atribut yang dimiliki masing-masing tag, maka kamu bisa melakukan lebih banyak hal ke halaman website kamu. Setelah menguasai HTML level dasar, maka kamu sudah bisa membuat sebuah halaman statis berisi konten-konten dasar, seperti teks, gambar, video, tautan, dan tabel.
Sudah Memahami dan Bisa Membuat Struktur Dasar HTML?
Kamu sudah memahami fungsi, jenis tag, dan cara menulis sebuah dokumen HTML. Kamu juga sudah mempelajari bagaimana struktur dasar HTML dalam menyusun sebuah halaman website. Sekarang, siapkah kamu untuk mempraktekan tutorial di atas dan mencoba membuat dokumen HTML pertama kamu?
Posting Komentar untuk "Apa Itu Struktur Dasar HTML dan Bagaimana Cara Membuatnya?"