HTML memiliki struktur dasar yang penting untuk diketahui oleh setiap pengembang web. Struktur dasar ini meliputi tag, element, dan atribut. Dalam artikel ini, kita akan membahas secara rinci mengenai bagaimana memahami struktur dasar HTML.
|
| Gambar 2.1 : Ilustrasi Memahami Struktur Dasar HTML |
Struktur dasar HTML adalah dasar dari setiap halaman web dan menentukan bagaimana halaman web akan ditampilkan dan berfungsi. Struktur dasar HTML terdiri dari tag HTML yang digunakan untuk membuat element dan memformat konten pada halaman web.
Setiap tag HTML memiliki fungsi dan atribut tertentu yang dapat digunakan untuk memodifikasi tampilan dan fungsionalitas dari elemen. Struktur dasar HTML harus dipahami dan diterapkan dengan benar agar halaman web yang dibuat dapat ditampilkan dengan benar pada berbagai perangkat dan browser.
Daftar Isi
Tag HTML
Tag HTML adalah kode yang digunakan dalam pembuatan halaman web untuk menentukan bagaimana elemen yang akan ditampilkan pada halaman. Setiap tag memiliki fungsi dan atribut yang berbeda-beda.
Misalnya, tag <p> digunakan untuk membuat paragraf, tag <h1> digunakan untuk membuat heading, tag <img> digunakan untuk memasukkan gambar, dan masih banyak lagi. Setiap tag HTML harus dibuka dan ditutup dengan menggunakan kurung siku "<>".
Element HTML
Element HTML adalah unsur-unsur yang membentuk sebuah halaman web. Setiap elemen memiliki tag HTML yang digunakan untuk membentuk dan mengatur tampilan elemen tersebut. Element HTML bisa berupa teks, gambar, tabel, form, dll. Setiap elemen memiliki atribut yang menentukan bagaimana elemen tersebut akan ditampilkan pada halaman web, seperti ukuran, warna, posisi, dll.
Elemen HTML harus ditutup dengan tag penutup yang sesuai, misalnya :
- Elemen paragraf, dibuat menggunakan tag <p>, misalnya :
<p> ini adalah paragraph </p> - Elemen heading, dibuat menggunakan tag <h1> sampai dengan <h6>, misalnya :
<h1> ini adalah judul halaman 1 </h1> <h2> ini adalah judul halaman 2 </h2> <h3> ini adalah judul halaman 3 </h3> <h4> ini adalah judul halaman 4 </h4> <h5> ini adalah judul halaman 5 </h5> <h6> ini adalah judul halaman 6 </h6> - Elemen gambar, dibuat menggunakan tag <img>, misalnya :
<img src="gambar.jpg" alt="Gambar">
Atribut HTML
Atribut HTML adalah tambahan informasi yang ditambahkan pada tag HTML untuk menentukan bagaimana elemen tersebut akan ditampilkan pada halaman web. Setiap elemen memiliki atribut yang berbeda-beda, dan atribut ini ditulis dalam tag dengan format nama atribut="nilai".
Beberapa atribut HTML yang sering digunakan antara lain:
- class: atribut ini digunakan untuk menentukan kelas elemen, yang bisa digunakan untuk membuat gaya dengan CSS.
- id: atribut ini digunakan untuk menentukan identitas unik dari elemen, yang bisa digunakan untuk membuat gaya dengan CSS atau untuk mengakses elemen dengan JavaScript.
- style: atribut ini digunakan untuk menentukan gaya elemen dengan inline CSS.
- src: atribut ini digunakan untuk menentukan sumber dari elemen, misalnya sumber gambar atau video.
- alt: atribut ini digunakan untuk menentukan teks alternatif dari elemen, misalnya jika gambar tidak bisa dimuat.
- href: atribut ini digunakan untuk menentukan tautan dari elemen, misalnya pada tag <a> atau <link>.
- width dan height: atribut ini digunakan untuk menentukan ukuran elemen, misalnya pada tag <img> atau <table>.
- type: atribut ini digunakan untuk menentukan tipe elemen, misalnya tipe input pada tag <input>.
- value: atribut ini digunakan untuk menentukan nilai elemen, misalnya nilai dari input pada tag <input>.
- name: atribut ini digunakan untuk menentukan nama elemen, yang bisa digunakan untuk mengirim data ke server pada form.
Atribut HTML sangat berguna untuk menentukan bagaimana elemen tersebut akan ditampilkan dan bekerja pada halaman web. Menentukan atribut yang tepat membuat halaman web menjadi lebih baik dalam hal estetika dan fungsionalitas.
Contoh Struktur Dasar HTML
Berikut adalah contoh bagaimana membuat halaman web sederhana menggunakan tag, element, dan atribut HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Halaman Web</title>
</head>
<body>
<h1>Judul Halaman Web</h1>
<p class="isi-paragraf">Ini adalah paragraf pertama dalam halaman web.</p>
<p id="paragraf-kedua">Ini adalah paragraf kedua dalam halaman web.</p>
</body>
</html>
Pada contoh di atas, kita menggunakan tag <!DOCTYPE html> untuk menentukan bahwa halaman web ini dibuat menggunakan HTML5. Kemudian, kita memiliki tag <html> sebagai tag pembuka dan penutup halaman web. Dalam tag <head>, kita menentukan judul halaman web menggunakan tag <title>. Dalam tag <body>, kita menambahkan judul halaman web menggunakan tag <h1> dan beberapa paragraf menggunakan tag <p>. Kita juga menambahkan atribut class pada salah satu paragraf dan atribut id pada paragraf lainnya.
Dengan memahami struktur dasar HTML, tag, element, dan atribut, kita dapat membuat halaman web yang dinamis dan berguna. Selalu ingat untuk mengikuti standar HTML dan menggunakan tag, element, dan atribut dengan benar agar halaman web yang dibuat dapat ditampilkan dengan benar pada berbagai perangkat dan browser.
Kesimpulan
Struktur dasar HTML sangat penting untuk dipahami sebelum membuat halaman web. Dengan memahami tag, element, dan atribut, kita dapat membuat halaman web yang dinamis dan berguna serta dapat ditampilkan dengan benar pada berbagai perangkat dan browser.