loading...
Pada artikel sebelumnya kita telah mencoba membuat dan menjalankan file HTML di web browser untuk pertama kalinya walaupun kita belum mengetahui maksud dari kode-kode HTML tersebut. Nah, sebagai lanjutannya kita akan mempelajari aspek penting dari sebuah halaman website, yakni pengertian Tag, Elemen, dan Atribut pada HTML. Ketiganya merupakan dasar dari terbentuknya sebuah halaman web yang kita lihat di internet.
Tutorial sebelumnya: Cara membuat dan menjalankan file HTML untuk pertama kali
Tag adalah sebuah tanda yang digunakan HTML untuk memberitahukan kepada web browser untuk apa fungsi dari sebuah teks. Apakah teks tersebut ditulis sebagai sebuah paragraf, list, atau sebagai link. Tanda ini lah yang dikenal dengan istilah Tag. Di dalam HTML hampir semua tag yang ada ditulis secara berpasangan, yakni tag pembuka dan tag penutup. Penulisan tag berada di antara dua buah kurung siku (< dan >).
Objek yang akan dikenai perintah tag harus berada di antara tag pembuka dan tag penutup. Objek yang dimaksud di sini bisa berupa teks, gambar, maupun video. Untuk lebih jelasnya silakan dilihat format dasar penulisan tag pada HTML berikut:
Berikut adalah beberapa contoh penulisan tag dalam HTML:
1. Contoh pertama
Keterangan:
Pada contoh ini kita menggunakan tag p yang berfungsi untuk membuat paragraf. <p> adalah tag pembuka, sedangkan </p> adalah tag penutup. Perbedaan antara keduanya terletak pada tanda forward slash (/). Sedangkan teks “Ini adalah sebuah paragraf” merupakan objek yang dikenai perintah tag. Sehingga pada web browser hasilnya akan terlihat seperti ini:
Ini adalah sebuah paragraf
2. Contoh ke-2
Keterangan:
Berikut hasilnya di web browser:
Kalimat ini ditulis dengan teks biasa. Sedangkan yang ini ditulis dengan huruf miring. Dan yang ini menggunakan huruf tebal.
Catatan:
Penulisan HTML tidak case-sensitive (tidak membedakan antara huruf kecil dengan huruf besar), ini artinya penulisan <p> akan dianggap sama dengan <P>.
Ada beberapa tag yang tidak memiliki pasangan (tag pembuka dan tag penutup), seperti <br> untuk break (pindah baris baru) atau <hr> untuk membuat horizontal line (garis horizontal). Tag ini dikenal dengan sebutan void tag atau self closing tag. Untuk penulisannya bisa ditulis dengan <br> atau <br />.
Element merupakan isi dari tag yang berada di antara tag pembuka dan tag penutup, juga termasuk tag itu sendiri dan atribut yang dimilikinya. Untuk lebih jelasnya silakan perhatikan contoh di bawah ini:
Keterangan:
Pada contoh di atas bisa kita lihat bahwa "<p> Ini adalah paragraf 1 </p>" merupakan element p. Element tidak hanya berisi teks, namun bisa juga berisi tag lain seperti “<p> Ini adalah <b>paragraf 2 </b</p>”.
Hasilnya akan terlihat seperti ini:
Ini adalah paragraf 1
Ini adalah paragfraf 2
Atribut merupakan informasi tambahan yang diberikan kepada tag. Informasi yang dimaksud bisa berupa perintah untuk warna dari teks, ukuran huruf teks, menentukan posisi teks, dan masih banyak lagi. Setiap atribut memiliki pasangan berupa nama dan nilai atau ditulis dengan name="value". Penulisan value harus diapit dengan tanda kutip, bisa menggunakan tanda kutip satu (') atau tanda kutip dua ("). Untuk lebih jelasanya mari kita lihat contoh penulisan kodenya di bawah ini:
Keterangan:
Pada contoh di atas bisa kita lihat bahwa align=”center” adalah atribut. Align merupakan nama dari atribut, sedangkan center adalah nilai atau value dari atribut tersebut. Ini berarti HTML memerintahkan kepada web browser bahwa paragraf tersebut diposisikan di tengah halaman atau rata tengah.
Di dalam HTML terdapat banyak atribut yang beberapa di antaranya hanya cocok untuk tag tertentu saja. Selain itu, perlu diketahui juga bahwa tidak semua tag yang membutuhkan atribut, namun di dalam pemrograman web kita akan sering menjumpai sebuah tag yang menggunakan atribut untuk manipulasi halaman web menggunakan JavaScript maupun CSS.
Sampai di sini kita telah mempelajari salah satu bagian terpenting dalam HTML, yaitu Pengertian Tag, Element, dan Atribut di dalam HTML. Untuk tutorial HTML dasar berikutnya kita akan mempelajari Struktur Dasar HTML.
Tutorial sebelumnya: Cara membuat dan menjalankan file HTML untuk pertama kali
Pengertian Tag Pada HTML
Tag adalah sebuah tanda yang digunakan HTML untuk memberitahukan kepada web browser untuk apa fungsi dari sebuah teks. Apakah teks tersebut ditulis sebagai sebuah paragraf, list, atau sebagai link. Tanda ini lah yang dikenal dengan istilah Tag. Di dalam HTML hampir semua tag yang ada ditulis secara berpasangan, yakni tag pembuka dan tag penutup. Penulisan tag berada di antara dua buah kurung siku (< dan >).
Objek yang akan dikenai perintah tag harus berada di antara tag pembuka dan tag penutup. Objek yang dimaksud di sini bisa berupa teks, gambar, maupun video. Untuk lebih jelasnya silakan dilihat format dasar penulisan tag pada HTML berikut:
<tag_pembuka>Objek</tag_penutup>
Berikut adalah beberapa contoh penulisan tag dalam HTML:
1. Contoh pertama
<p> Ini adalah sebuah paragraf </p>
Keterangan:
Pada contoh ini kita menggunakan tag p yang berfungsi untuk membuat paragraf. <p> adalah tag pembuka, sedangkan </p> adalah tag penutup. Perbedaan antara keduanya terletak pada tanda forward slash (/). Sedangkan teks “Ini adalah sebuah paragraf” merupakan objek yang dikenai perintah tag. Sehingga pada web browser hasilnya akan terlihat seperti ini:
Ini adalah sebuah paragraf
2. Contoh ke-2
<p>Kalimat ini ditulis dengan teks biasa. <i>Sedangkan yang ini ditulis dengan huruf miring</i>. <b>Dan yang ini menggunakan huruf tebal</b></p>
Keterangan:
- Tag <i> berfungsi untuk memberikan perintah kepada web browser untuk menampilkan teks dengan bentuk garis miring (i singkatan dari italic).
- Tag <b> berfungsi untuk menebalkan tulisan (b singkatan dari bold)
Berikut hasilnya di web browser:
Kalimat ini ditulis dengan teks biasa. Sedangkan yang ini ditulis dengan huruf miring. Dan yang ini menggunakan huruf tebal.
Catatan:
Penulisan HTML tidak case-sensitive (tidak membedakan antara huruf kecil dengan huruf besar), ini artinya penulisan <p> akan dianggap sama dengan <P>.
Ada beberapa tag yang tidak memiliki pasangan (tag pembuka dan tag penutup), seperti <br> untuk break (pindah baris baru) atau <hr> untuk membuat horizontal line (garis horizontal). Tag ini dikenal dengan sebutan void tag atau self closing tag. Untuk penulisannya bisa ditulis dengan <br> atau <br />.
Pengertian Elemen Pada HTML
Element merupakan isi dari tag yang berada di antara tag pembuka dan tag penutup, juga termasuk tag itu sendiri dan atribut yang dimilikinya. Untuk lebih jelasnya silakan perhatikan contoh di bawah ini:
<p> Ini adalah paragraf 1 </p> <p> Ini adalah <b>paragraf 2 </b></p>
Keterangan:
Pada contoh di atas bisa kita lihat bahwa "<p> Ini adalah paragraf 1 </p>" merupakan element p. Element tidak hanya berisi teks, namun bisa juga berisi tag lain seperti “<p> Ini adalah <b>paragraf 2 </b</p>”.
Hasilnya akan terlihat seperti ini:
Ini adalah paragraf 1
Ini adalah paragfraf 2
Pengertian Atribut Pada HTML
Atribut merupakan informasi tambahan yang diberikan kepada tag. Informasi yang dimaksud bisa berupa perintah untuk warna dari teks, ukuran huruf teks, menentukan posisi teks, dan masih banyak lagi. Setiap atribut memiliki pasangan berupa nama dan nilai atau ditulis dengan name="value". Penulisan value harus diapit dengan tanda kutip, bisa menggunakan tanda kutip satu (') atau tanda kutip dua ("). Untuk lebih jelasanya mari kita lihat contoh penulisan kodenya di bawah ini:
<p align="center"> Paragraf ini berada di tengah halaman</p>
Keterangan:
Pada contoh di atas bisa kita lihat bahwa align=”center” adalah atribut. Align merupakan nama dari atribut, sedangkan center adalah nilai atau value dari atribut tersebut. Ini berarti HTML memerintahkan kepada web browser bahwa paragraf tersebut diposisikan di tengah halaman atau rata tengah.
Di dalam HTML terdapat banyak atribut yang beberapa di antaranya hanya cocok untuk tag tertentu saja. Selain itu, perlu diketahui juga bahwa tidak semua tag yang membutuhkan atribut, namun di dalam pemrograman web kita akan sering menjumpai sebuah tag yang menggunakan atribut untuk manipulasi halaman web menggunakan JavaScript maupun CSS.
Sampai di sini kita telah mempelajari salah satu bagian terpenting dalam HTML, yaitu Pengertian Tag, Element, dan Atribut di dalam HTML. Untuk tutorial HTML dasar berikutnya kita akan mempelajari Struktur Dasar HTML.
loading...
0 Komentar Pengertian Tag, Elemen, dan Atribut pada HTML Beserta Contohnya
Post a Comment