Tag, atribut dan elemen merupakan 3 komponen utama dalam HTML. Semua kode HTML yang menyusun halaman web pasti mengandung 3 komponen ini dan ketiganya saling berkaitan. Elemen tersusun dari tag dan objek yang ada diapitnya. Sedangkan atribut memberi informasi tambahan di dalam tag. Bingung? Berikut ini gambarannya. Show
Gambar di atas adalah contoh kode HTML untuk membuat link. Elemen adalah semua kode dari awal (tag pembuka) hingga akhir (tag penutup). Sedangkan tag adalah kode yang berwarna biru yang terdiri dari tag pembuka dan tag penutup. Sedangkan atribut adalah yang berwarna merah (nama atribut) dan yang berwarna orange (nilai/value atribut). Contoh tersebut hanyalah gambaran awal dan sedikit tentang tag, atribut dan elemen. Untuk lebih jelas dalam memahami ketiga komponen tersebut baiknya kita bahas satu-persatu lebih mendalam mulai dari pengertian, fungsi hingga contoh-contohnya. Simak juga materi tentang list pada html. Apa itu Tag HTML?
Tag HTML terdiri dari tag pembuka dan tag penutup dimana diantara kedua tag tersebut terdapat konten. Penulisan tag pembuka diapit oleh kurung siku. Sedangkan tag penutup juga sama diapit oleh kurung siku namun ditambahkan slash (garis miring) di depan nama tag tersebut.
Berikut ini contoh penerapannya untuk membuat tulisan tebal:
Maka jika dijalankan di aplikasi web browser akan menjadi: ini adalah tulisan tebal Penjelasan:
Tidak semua tag yang ada pada HTML membutuhkan penutup. Terdapat beberapa tag yang cara penulisannya tanpa penutup yang dinamakan self-closing tags. Namun, dalam penulisannya dianjurkan untuk menambahkan slash sebelum penutup kurung siku. Misalnya: Daftar Kode HTML Lengkap (Tag HTML dan Fungsinya)
Kumpulan tag HTML di atas dan contohnya akan kita pelajari satu-persatu sesuai fungsinya pada pembahasan nanti. Setelah memahami tag pada HTML selanjutnya kita akan membahas hal yang dibentuk oleh tag yaitu elemen. Pelajari juga materi tentang cara membuat tabel di html. Apa itu Elemen HTML?
Jenis Elemen HTML Berdasarkan Cara PenulisannyaTerdapat 2 jenis elemen yaitu elemen normal dan elemen tunggal atau elemen kosong (void element). 1. Elemen NormalCara penulisan untuk elemen normal adalah dimulai dari tag pembuka dan diakhiri dengan tag penutup.
Contoh penerapan:
Penjelasan: Kode HTML diatas adalah contoh elemen untuk membuat
tulisan tebal dimulai dari tag pembuka yaitu 2. Elemen Tunggal atau Elemen KosongElemen tunggal/elemen kosong yang biasa disebut dengan void element memiliki cara penulisan yang berbeda. Pada jenis elemen ini tidak ada tag penutup. Sebagai gantinya, ditambahkan slash pada akhir tag pembuka. Contoh:
Penjelasan: Kode diatas adalah untuk menampilkan gambar. Tag yang
digunakan adalah tag Jenis Elemen HTML Berdasarkan TampilannyaTerdapat 2 jenis elemen jika dilihat dari tampilan pada web browser yaitu block-level elemen dan inline elemen. 1. Block-level ElemenBlock-level elemen tampilannya selalu dimulai dari baris baru. Secara default, elemen ini tidak akan berada disamping elemen sebelumnya tapi akan berada di bawah elemen sebelumnya. Contohnya elemen <h2> dan <p>. teks biasa. <h2>elemen pertama.</h2> <p>elemen kedua.</p> Tampilan di browser: Penjelasan: Elemen <h2> termasuk jenis block-level jadi akan dimulai dengan baris baru dibawah teks “teks biasa”. Begitu juga elemen <p> akan dimulai dengan baris baru karena juga termasuk jenis block-level. 2. Inline ElemenInline elemen artinya elemen sebaris. Elemen ini tidak dimulai dengan baris baru tetapi akan melanjutkan disamping elemen lain yang juga inline elemen. Contohnya adalah elemen teks biasa. <b>elemen pertama.</b> <i>elemen kedua.</i> Tampilan di browser: Penjelasan: Elemen Dalam membuat halaman web tentunya kita tidak hanya menggunakan 1 elemen. Kita dapat menumpuk dan mengkolaborasikan beberapa elemen agar menjadi halaman web yang kita inginkan. Untuk itu selanjutnya kita perlu memahami tentang elemen bersarang (nested element). Elemen Bersarang atau Nested ElementElemen bersarang atau biasa juga disebut dengan nested element adalah elemen yang didalamnya terdapat elemen lain. Dimana penulisannya harus terstruktur dan tidak boleh tumpang tindih.
Sesuai format diatas, tag yang paling dalam harus ditutup terlebih dahulu baru kemudian menutup tag diatasnya. Berikut ini contoh penerapan yang benar. <html> <body> <p> Konten halaman </p> </body> </html> Penjelasan: Kode diatas dimulai dengan tag html, didalamnya terdapat tag body. Di dalam tag body terdapat tag p untuk membuat paragraf. Agar lebih jelas berikut ini contoh penulisan elemen bersarang yang salah.
Penjelasan: Kesalahan pada contoh diatas adalah pada tata letak tag penutup html dan p. Harusnya tag p ditutup terlebih dahulu, kemudian menutup body lalu menutup tag html sesuai dengan contoh yang benar sebelumnya. Simak juga materi cara membuat iframe di html. Setelah membahas elemen selanjutnya kita akan membahas tentang informasi tambahan untuk elemen yaitu atribut. Sebernarnya apa itu atribut? Apa itu Atribut HTML?
Satu elemen bisa ditambahkan beberapa atribut sekaligus. Ingat, value_atribut harus diapit dengan petik ganda atau bisa juga petik tunggal. Contohnya:
Penjelasan: Contoh diatas adalah sebuah elemen HTML link ke Google. Pada tag pembuka terdapat tambahan 2
atribut yaitu Terdapat 2 jenis atribut pada HTML yaitu atribut global dan atribut khusus. Atribut global dapat digunakan pada semua tag atau elemen HTML. Sedangkan atribut khusus hanya dapat digunakan untuk tag yang disupport atribut tersebut. Berikut ini atribut global yang ada di HTML. Daftar Atribut HTML Lengkap dan Fungsinya
Atribut-atribut diatas hanyalah atribut global. Untuk atribut khusus yang lebih lengkap beserta fungsi dan cara penggunaannya akan kita pelajari pada materi tutorial HTML masing-masing tag beserta atributnya. Jika ada yang perlu ditanyakan, silahkan kirim di kolom komentar. Web developer yang juga suka dengan dunia sysadmin. Pernah belajar Teknik Informatika di Indonesia. Apa saja elemen dari tabel?Tabel pada dasarnya digunakan untuk mengelompokkan suatu data secara terstruktur yang terdiri dari baris, kolom dan sel. Baris, kolom dan sel pada suatu tabel ini sangat membantu dalam melihat informasi keterkaitan di dalamnya.
Apa saja elemen elemen HTML table?Element lain yang berkaitan dan digunakan dalam sebuah HTML table adalah <caption>, <col>, <colgroup>, <thead>, <tfoot> dan <tbody>. HTML table tidak boleh digunakan untuk layout halaman atau tidak tepat digunakan untuk mendesain tata letak beberapa element dalam sebuah tabel.
Apa saja atribut tabel HTML?Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:. Tag <table> untuk membungkus tabelnya.. Tag <thead> untuk membungkus bagian kepala tabel.. Tag <tbody> untuk membungkus bagian body dari tabel.. Tag <tr> (tabel row) untuk membuat baris.. Tag <td> (table data) untuk membuat sel.. Apa itu tag table pada HTML?Table pada HTML biasanya digunakan untuk pengguna sebagai membuat tampilan lebih terstruktur sesuai dengan baris dan kolom yang akan dibuat. Table dapat menggunakan tag <table>. Tag untuk mengatur baris adalah : <tr></tr>, dan tag untuk mengatur baris menjadi kolom dapat menggunakan tag <td></td>.
|