Pembelajaran HTML 02 Struktur Dasar Tag Atribut dan Element

Pada materi kedua html ini, saya akan memfokuskan pada pembahasan penulisan html. Dan pembahasan awal akan mengenai pengertian tag, element dan attribut yang berfungsi sebagai sebuah inti untuk membangun html. Pada materi sebelumnya Pembelajaran HTML 01 Pengenalan Kilat HTML kamu sudah diperkenalkan mengenai html dan sekilas koding atau strukturnya.

1. Pengertian Tag

Sebelumnya file index.html yang sudah saya jelaskan pada materi pembelajaran 01 html sebelumnya, kamu bisa melihat bahwa file HTML ditulis dengan menggunakan tanda-tanda seperti <html>,<head>, <body>atau . Tanda-tanda ini dikenal dengan sebutan HTML tag.

Tag di dalam HTML bertujuan untuk menyampaikan ke web browser (chrome, firefox, dsbnya) apa dan bagaimana sebuah teks harus ditampilkan. Seperti pada materi Pembelajaran HTML 01 Pengenalan Kilat HTML , file HTML hanyalah sebuah file text biasa. Web browser lah yang akan memproses file tersebut dan menampilkan hasilnya.

Sebagian besar tag-tag HTML ditulis secara berpasangan, yang terdiri dari tag pembuka dan tag penutup. Tag pembuka ditulis menggunakan kurung siku, seperti . Sedangkan tag penutup ditulis dengan menambahkan tanda garis miring atau slash seperti .

Tanda p disini berarti paragraf, dimana kita memberitahukan kepada web browser bahwa seluruh teks yang berada diantara tag pembuka dan tag penutup adalah sebuah paragraf.

Sebagai contoh, jika saya ingin membuat struktur teks yang terdiri dari 2 paragraf, maka saya menulisnya sebagai berikut:

<p>Ini adalah paragraf pertama</p>
<p>Ini adalah paragraf kedua </p>

Jadi pada saat web browser membaca kode diatas, teks diantara tag dan tag akan ditampilkan sebagai paragraf yang terpisah.

Setiap tag memiliki fungsi dan peran masing-masing. Total, terdapat sekitar seratusan tag di dalam HTML. Walaupun HTML memiliki banyak tag, tidak semuanya harus digunakan. Sebagai contoh, tag akan sangat sering kita jumpai, tetapi tag relatif jarang ditemukan. Dalam pembelajaran di artikel-artikel yang saya buat, saya akan mencoba menjelaskan tag-tag yang sering digunakan, nanti kedepannya saya akan membuat artikel tersendiri yang membahas ratusan tag yang ada dan fungsinya. Untuk menjalankan tugasnya, tag HTML memerlukan atribut.

2. Pengertian Atribut

Atribut adalah informasi tambahan yang ditulis pada tag pembuka. Fungsi dari atribut ini bermacam-macam tergantung nilai dan pada tag mana ia ditempatkan. Beberapa atribut bersifat umum dan bisa digunakan dalam seluruh tag (dikenal sebagai global atribut), tetapi kebanyakan hanya berfungsi untuk tag tertentu saja.

Atribut terdiri dari sepasangan nama atribut dan nilai atribut. Sebagai contoh, untuk menambahkan atribut class dengan nilai pertama ke dalam tag , cara penulisannya adalah sebagai berikut:

<p class="pertama"> Paragraf pertama untuk kalimat </p>

Penulisan nilai dari atribut boleh menggunakan tanda kutip dua ( � ) seperti diatas, atau boleh juga menggunakan tanda kutip satu ( � ) seperti contoh berikut:

<p class='pertama'> Paragraf pertama untuk kalimat </p>

Dalam HTML, penulisan nilai atribut diantara tanda kutip sebenarnya bersifat opsional (boleh tidak ditulis). Contoh diatas juga bisa dibuat sebagai berikut:

<p class=pertama> Paragraf pertama untuk kalimat </p>

Penulisan nilai atribut tanpa tanda kutip seperti ini tidak salah dan tetap valid di dalam HTML. Akan tetapi, jika nilai atribut terdiri dari 2 kata atau lebih, maka kita harus menggunakan tanda kutip, seperti contoh berikut:

<p class="pertama penting"> Paragraf pertama untuk kalimat yang penting </p>

3. Pengertian Element

Dan yang terakhir berkaitan dengan tag dan atribut adalah element. Di dalam HTML, element adalah satu bagian utuh yang terdiri dari tag, atribut, dan seluruh teks yang berada di antara tag pembuka dan penutup. Agar lebih jelas, konsep dari element ini dapat anda lihat dalam gambar dibawah ini.

Dari gambar diatas kita dapat melihat bahwa element mencakup tag, atribut dan seluruh isi dari tag tersebut, termasuk jika didalamnya juga terdapat tag lain.

Pembelajaran Selanjutnya?

Dengan ini pembelajaran materi kedua mengenai html sudah selesai. Kamu masih semangat buat belajar lanjutannya ya? ini saya spoilerkan materi selanjutnya :

Pembelajaran HTML 03 Pengenalan Struktur Dasar

Pembaca yang baik selalu meninggalkan jejak atau hanya sekedar reaction pada kolom komentar, agar saya sebagai penulis juga semangat dalam melanjutkan artikel ini. Berkomentarlah dengan baik dan sopan dan saling menghargai

Bagikan ke media sosial :