Belajar HTML Lengkap Part 2 : Mengenal Tag, Element Dan Atribut HTML
Setelah sebelumnya saya telah membahas mengenai pengertian HTML, membahas tentang aplikasi apa saja yang di butuhkan untuk belajar HTML, cara membuat serta menjalankan HTML. Pada episode kali ini kita akan membahas lebih dalam lagi mengenai HTML namun pada tahap ini masih permulaan teman-teman jadi pastikan kalian tetap semangat sampai dengan menyelesaikan episode-episode yang telah kami sediakan. Dan apa saja yang akan di bahas pada episode kali ini ? pada episode kali ini kita akan membahas apa yang dimaksud dengan Tag, Elemen, dan Atribut pada HTML langsung saja teman-teman berikut ulasanya untuk anda.
Pengertian Tag HTML
Seperti yang teman-teman ketahui jika kalian sudah membaca artikel sebelumnya bahwasanya HTML itu merupakan sebuah bahasa Markup alias penanda jadi pada file HTML untuk memberitahukan pada browser setiap teks yang di tulis pada HTML itu di berikan penanda atau Tag yang fungsi nya memberikan instruksi kepada browser selaku pembaca kode HTML agar memperlakukan setiap teks yang diapit oleh Tag HTML di berlakukan seperti yang di inginkan contohnya untuk menjadikan sebuah teks sebagai link, menjadikan teks bergaris bawah, tebal atau lainya.
Dan setiap Tag yang kita buat pada kode HTML memiliki Tag Pembuka dan juga Tag Penutup, Namun tidak semuah tag yang tersedia pada HTML itu memiliki Tag Penutup karena ada juga yang tidak memiliki penutup. Untuk penulisannya sendiri pada setiap Tag yang ada di HTML di awali dengan "<namatag" kurung siku buka lalu di ikuti dengan "objeknya" kemudian "namatag/>" backslah dan kurung siku tutup untuk menutupnya.
<tag_pembuka> object yang ingin diberi perintah </tag_penutup><p> Ini adalah sebuah paragraf </p>
<p> ini merupakan Tag pembuka, tag ini berfungsi untuk memberikan instruksi pada browser bahwa teks yang di apit nya sebagai paragraf. </p> dan yang ini adalah Tag penutup, bedanya dengan tag pembuka ialah terletak pada "/" forward slash
Dalam HTML tag dapat berisi juga tag-tag lain dan misalkan disini saya berikan contoh saya ingin membuat paragraf yang berisi teks miring, bergaris bawah dan tebal maka berikut ini contohnya :
<p>Contoh paragaraf, dalam paragraf yang saya buat terdiri dari teks <i>Miring / Italic</i> lalu ada <u>Bergaris Bawah / Under Line</u> dan juga <b>Teks Tebal / Bold</b></p>.
Jika kalian ingin melihat hasilnya bisa juga menggunakan Editor Online yang sudah kami sediakan tinggal salin kode di atas dan paste. Ketika teman-teman lupa menuliskan tag penutup pada umumnya browser akan tetap menampilkan hasil dari kode yang telah kita buat, dan terkadang akan tampak membuat kita bingung karena tidak menunjukan letak kesalahannya dan tetap menampilkan hasil pada browser teman-teman yang seolah-olah kita memberikan tag penutup padahal kita melupakan nya. Ada bermacam-macam tag dalam HTML dan mungkin tabel berikut dapat membantu teman-teman :
Tag Pada HTML Beserta Fungsinya
| Nama Tag | Keterangan / Kegunaan |
|---|---|
| Basic | |
| <!DOCTYPE> | Tag untuk menentukan tipe dokumen |
| <html> | Tag untuk membuat sebuah dokumen HTML |
| <title> | Tag untuk membuat judul dari sebuah halaman |
| <body> | Tag untuk membuat tubuh dari sebuah halaman |
| <h1> to <h6> | Tag untuk membuat heading |
| <p> | Tag untuk membuat paragraf |
| <br> | Memasukan satu baris putus |
| <hr> | Tag untuk membuat perubahan dasar kata didalam isi |
| <!--...--> | Tag untuk membuat komentar |
| Formatting | |
| <acronym> | Tag untuk membuat sebuah akronim (tidak disupport lagi di HTML5) |
| <abbr> | Tag untuk membuat sebuah singkatan |
| <address> | Tag untuk membuat kontak alamat |
| <b> | Tag untuk membuat huruf bercetak tebal |
| <bdi> | Mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luarnya (tag baru HTML5) |
| <bdo> | Mengganti arah teks |
| <big> | Tag untuk membuat text berhuruf besar (tidak disupport lagi di HTML5) |
| <blockquote> | Tag untuk membuat sebuah bagian text yang dikutip dari sumber lain |
| <center> | Tag untuk membuat jajaran teks menjadi ditengah (tidak disupport lagi di HTML5) |
| <cite> | Tag untuk membuat judul karya |
| <code> | Tag untuk membuat potongan kode komputer di antara text |
| <del> | Tag untuk membuat teks yang telah dihapus dari dokumen |
| <dfn> | Tag untuk membuat sebuah istilah definisi |
| <em> | Tag untuk membuat penekanan teks (tidak disupport lagi di HTML5) |
| <font> | Tag untuk membuat font, warna, dan ukuran untuk teks (tidak disupport lagi di HTML5) |
| <i> | Tag untuk membuat sebuah bagian dari teks yang disesuaikan dengan mood |
| <ins> | Tag untuk membuat teks yang telah dimasukkan ke dalam dokumen |
| <kbd> | Tag untuk membuat input keyboard |
| <mark> | Tag untuk membuat teks yang disorot / ditandai (tag baru HTML5) |
| <meter> | Tag untuk membuat pengukuran skalar |
| <pre> | Tag untuk membuat teks terformat |
| <progress> | Memperlihatkan kemajuan tugas (tag baru HTML5) |
| <q> | Tag untuk membuat kutipan pendek |
| <rp> | Tag untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby (tag baru HTML5) |
| <rt> | Tag untuk membuat sebuah anotasi / pengucapan karakter (untuk tipografi Asia Timur) |
| <ruby> | Tag untuk membuat sebuah anotasi ruby (untuk tipografi Asia Timur) (tag baru HTML5) |
| <s> | Tag untuk membuat teks yang tidak lagi benar |
| <samp> | Tag untuk membuat contoh keluaran dari program komputer |
| <small> | Tag untuk membuat teks kecil |
| <strike> | Tag untuk membuat teks yang di coret tengah (tidak disupport lagi di HTML5) |
| <strong> | Tag untuk membuat teks penting |
| <sub> | Tag untuk membuat teks subskrip (seperti dalam penulisan Jat Kimia) |
| <sup> | Tag untuk membuat teks superscripted (seperti dalam penulisan akar kuadrat) |
| <time> | Tag untuk membuat tanggal / waktu (tag baru HTML5) |
| <tt> | Tag untuk membuat teks teletype (tidak disupport lagi di HTML5) |
| <u> | Tag untuk membuat teks yang memiliki Gaya yang berbeda dari teks biasa lainnya |
| <var> | Tag untuk membuat sebuah variabel |
| <wbr> | Tag untuk membuat kemungkinan garis-putus |
| Forms | |
| <form> | Tag untuk membuat sebuah form HTML untuk input pengguna |
| <input> | Tag untuk membuat sebuah kontrol input |
| <textarea> | Tag untuk membuat sebuah kontrol input multibaris (text area) |
| <button> | Tag untuk membuat sebuah tombol yang dapat diklik |
| <select> | Tag untuk membuat sebuah daftar drop-down |
| <optgroup> | Tag untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down |
| <option> | Tag untuk membuat pilihan dalam daftar drop-down |
| <label> | Tag untuk membuat sebuah label untuk sebuah elemen <input> |
| <fieldset> | Grup unsur terkait dalam bentuk |
| <legend> | Tag untuk membuat sebuah caption untuk sebuah elemen <fieldset>, < figure>, atau <details> |
| <datalist> | Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru HTML5) |
| <keygen> | Tag untuk membuat key-pair generator kolom input (tag baru HTML5) |
| <output> | Tag untuk membuat hasil penghitungan (tag baru HTML5) |
| Frames | |
| <frame> | Tag untuk membuat sebuah window (bingkai) dalam sebuah frameset (tidak disupport lagi di HTML5) |
| <frameset> | Tag untuk membuat satu set bingkai (tidak disupport lagi di HTML5) |
| <noframes> | Tag untuk membuat sebuah konten alternatif untuk pengguna yang tidak mendukung frame (tidak disupport lagi di HTML5) |
| <iframe> | Tag untuk membuat sebuah bingkai |
| Images | |
| <img> | Tag untuk membuat gambar |
| <map> | Tag untuk membuat gambar-peta |
| <area> | Tag untuk membuat area dalam gambar-peta |
| <canvas> | Digunakan untuk menggambar grafik, melalui scripting (JavaScript ) (tag baru HTML5) |
| <figcaption> | Tag untuk membuat sebuah caption untuk elemen <figure> (tag baru HTML5) |
| <figure> | Menentukan konten mandiri (tag baru HTML5) |
| Audio/Video | |
| <audio> | Tag untuk membuat isi suara (tag baru HTML5) |
| <source> | Tag untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio>) (tag baru HTML5) |
| <track> | Tag untuk membuat trek teks untuk elemen media (<video> dan <audio>) (tag baru HTML5) |
| <video> | Tag untuk membuat sebuah video atau film (tag baru HTML5) |
| Links | |
| <a> | Tag untuk membuat hyperlink |
| <link> | Tag untuk membuat hubungan antara dokumen dan sumber daya eksternal (paling sering digunakan untuk link ke style sheet) |
| <nav> | Tag untuk membuat navigasi link (tag baru HTML5) |
| Lists | |
| <ul> | Tag untuk membuat daftar dengan selain nomor |
| <ol> | Tag untuk membuat daftar dengan nomor |
| <li> | Tag untuk membuat sebuah item daftar |
| <dir> | Tag untuk membuat sebuah daftar direktori (tidak disupport lagi di HTML5) |
| <dl> | Tag untuk membuat sebuah daftar definisi |
| <dt> | Tag untuk membuat istilah (item) dalam daftar definisi |
| <dd> | Defines a description of an item in a definition list |
| <menu> | Tag untuk membuat deskripsi dari item dalam daftar definisi |
| <command> | Tag untuk membuat sebuah tombol perintah bahwa seorang pengguna dapat meminta (tag baru HTML5) |
| Tables | |
| <table> | Tag untuk membuat tabel |
| <caption> | Tag untuk membuat sebuah caption tabel |
| <th> | Tag untuk membuat sebuah sel header tabel |
| <tr> | Tag untuk membuat baris dalam sebuah tabel |
| <td> | Tag untuk membuat sel dalam sebuah tabel |
| <thead> | Mengelompokan isi header dalam sebuah tabel |
| <tbody> | Mengelompokanisi tubuh dalam sebuah tabel |
| <tfoot> | Mengelompokan isi footer dalam sebuah tabel |
| <col> | Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup> |
| <colgroup> | Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat |
| Style/Sections | |
| <style> | Tag untuk membuat informasi style untuk dokumen |
| <div> | Tag untuk membuat sebuah bagian dalam dokumen |
| <span> | Tag untuk membuat sebuah bagian dalam dokumen |
| <header> | Tag untuk membuat sebuah header untuk dokumen atau bagian (tag baru HTML5) |
| <footer> | Tag untuk membuat footer untuk dokumen atau bagian (tag baru HTML5) |
| <hgroup> | Pengelompokan elemen heading (<h1> sampai <h6>) (tag baru HTML5) |
| <section> | Tag untuk membuat bagian dalam dokumen (tag baru HTML5) |
| <article> | Tag untuk membuat sebuah artikel (tag baru HTML5) |
| <aside> | Tag untuk membuat konten lain selain dari konten halaman (tag baru HTML5) |
| <details> | Tag untuk membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan (tag baru HTML5) |
| <dialog> | Tag untuk membuat sebuah kotak dialog atau jendela (tag baru HTML5) |
| <summary> | Tag untuk membuat sebuah judul terlihat untuk elemen <detil> (tag baru HTML5) |
| Meta Info | |
| <head> | Tag untuk membuat informasi tentang dokumen |
| <meta> | Tag untuk membuat metadata tentang dokumen HTML |
| <base> | Menentukan URL dasar / target untuk semua URL relatif dalam dokumen |
| <basefont> | Menentukan standar warna, ukuran, dan font untuk semua teks dalam dokumen (tidak disupport lagi di HTML5) |
| Programming | |
| <script> | Tag untuk membuat script di sisi klien |
| <noscript> | Tag untuk membuat sebuah konten alternatif bagi pengguna yang tidak mendukung script di sisi klien |
| <applet> | Tag untuk membuat sebuah java applet yang ditanam (tidak disupport lagi di HTML5) |
| <embed> | Tag untuk membuat sebuah wadah untuk aplikasi eksternal (non-HTML) (tag baru HTML5) |
| <object> | Tag untuk membuat sebuah objek yang ditanam |
| <param> | Tag untuk membuat sebuah parameter untuk objek |
| Sumber : http://w3function.com | |
Itulah tadi tabel yang berisi tag-tag pada HTML beserta dengan fungsinya yang mungkin dapat teman-teman pelajari.
Pengertian Element Pada HTML
Element adalah susunan dari tag pembuka hingga tag penutup, di dalam sebuah elemen juga dapat berisi beberapa element lainya (Element HTML Bersarang).
<p>Contoh paragaraf</p>
Pada sepenggal kode di atas mulai dari <p>Contoh paragraf</p> ini merupakan element p jadi yang di sebut dengan element ialah isi dari tag dan termasuk tag itu sendiri. Berikut contoh element yang berisi element lain.
<p>Contoh paragaraf <i>miring</i></p>Pengertian Atribut Pada HTML
Atribut adalah suatu informasi yang di tambahkan di dalam tag pembuka untuk menginstruksikan pada browser seperti memberikan warna, ukuran gambar, ketebalan dan lain sebagainya. Cara penulisan atribut di tulis di dalam tag pembuka lalu kemudian nama atributnya kemudian di isi dengan nilainya.
<nama_tag nama_atribut="nilai">Konten</nama_tag><a href="https://ngodingtah.blogspot.com">ini adalah link</a>
Sedikit catatan teman-teman tidak semua tag membutuhkan atribut, namun kalian akan sering bertemu tag yang berisi atribut seperti id dan juga class yang di gunakan untuk menggabungkan dengan javascript, CSS, PHP dan lainya yang nantinya dapat memanipulasi halaman web.
Oke mungkin hanya ini yang dapat di bahas pada episode kita kali ini, Silahkan pelajari dan cermati tentang pengenalan Tag, Element dan juga Atribut. Teman-teman bisa lanjut ke episode berikutnya jika sudah cukup memahami, sampai jumpa di episode berikutnya.
Incoming Search Terms :
→ apa yang dimaksud tag, elemen, dan atribut dalam html ?
→ pengertian tag, elemen, dan atribut pada html
→ perbedaan tag, element dan atribut dalam html
→ penjelasan tag, element, dan attribute dalam html
→ atribut html lengkap
→ kumpulan tag html dan contohnya
→ elemen dasar html
→ pengertian tag html
→ contoh tag html
→ atribut elemen gambar
→ contoh tag html lengkap
→ tag html dan penjelasannya
→ belajar dasar html lengkap pemula dari nol awal
→ Rio Ananda Putra
0 Response to "Belajar HTML Lengkap Part 2 : Mengenal Tag, Element Dan Atribut HTML"
Post a Comment