Apakah Atribut HTML?
Atribut HTML adalah pengubah dari jenis elemen HTML. Atribut baik memodifikasi fungsi default jenis unsur atau menyediakan fungsionalitas untuk jenis elemen tertentu tidak dapat berfungsi dengan benar tanpa mereka. Dalam sintaks HTML, atribut ditambahkan ke tag HTML awal.Atribut HTML adalah informasi tambahan yang diberikan untuk elemen yang dituliskan pada tag pembuka. Cara penulisannya adalah nama_atribut=”value_atribut”.
Satu elemen bisa ditambahkan beberapa atribut sekaligus. Ingat, value_atribut harus diapit dengan petik ganda atau bisa juga petik tunggal.
Penulisan atribut pada HTML diawali dengan penulisan tag, didalam tag berikan atribut dan element dari tag itu sendiri berikut contoh penulisan atribut pada HTML :
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.
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.
<tag_pembuka> konten yang ditampilkan </tag_penutup>
Satu elemen bisa ditambahkan beberapa atribut sekaligus. Ingat, value_atribut harus diapit dengan petik ganda atau bisa juga petik tunggal.
Penulisan atribut pada HTML diawali dengan penulisan tag, didalam tag berikan atribut dan element dari tag itu sendiri berikut contoh penulisan atribut pada HTML :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2 align="center">Pengenalalan atribut HTML</h2>
</body>
</html>
- <h2> adalah tag heading 2
- align adalah nama dari atribut
- center adalah nilai dari atribut
- Pengenalan atribut adalah element dari tag h2
Daftar Atribut HTML Lengkap dan Fungsinya
| Atribut | Fungsinya |
|---|---|
| id | Menentukan id unik elemen. |
| class | Menentukan nama class yang digunakan pada CSS. |
| style | Menentukan gaya CSS secara inline (langsung). |
| title | Menentukan tooltip atau teks saat mouse berada di atas elemen tersebut. |
| accesskey | Menentukan tombol pintas untuk mengaktifkan / memfokuskan elemen. |
| contenteditable | Menentukan apakah konten elemen dapat diedit atau tidak. |
| data-* | Menyimpan data khusus pribadi ke halaman atau aplikasi. |
| dir | Menentukan arah teks untuk konten dalam suatu elemen. |
| draggable | Menentukan apakah suatu elemen dapat diseret atau tidak. |
| dropzone | Menentukan zona drop pada aksi drag and drop. |
| hidden | Menentukan bahwa suatu elemen tidak ditampilkan. |
| lang | Menentukan bahasa konten elemen. |
| spellcheck | Menentukan apakah elemen harus diperiksa ejaan dan tata bahasanya atau tidak. |
| tabindex | Menentukan urutan tab dari suatu elemen. |
| translate | Menentukan apakah konten elemen harus diterjemahkan atau tidak. |
Apa itu Tag HTML?
Tag HTML adalah teks khusus yang digunakan untuk menandai suatu konten yang menentukan bagaimana aplikasi web browser menampilkan konten tersebut secara visual. Konten yang dimaksud dapat berupa teks, gambar, audio, ataupun video.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.
<tag_pembuka> konten yang ditampilkan </tag_penutup>
<tag>Objek yang diisi</tag>
Penjelasan:
- <tag> adalah tag pembuka
- </tag> adalah tag penutup
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: <br />, <hr />, <img />, <input />, <embed />.
Daftar Kode HTML Lengkap (Tag HTML dan Fungsinya)
| Kode Tag HTML | Fungsi |
|---|---|
| <!DOCTYPE> | Menentukan jenis dokumen |
| <html> | Pembuka dan penutup HTML |
| <head> | Menentukan informasi halaman |
| <title> | Menentukan judul halaman |
| <body> | Tempat menampilkan konten |
| <h1>..</h6> | Membuat judul teks |
| <p> | Menentukan paragraf |
| <hr> | Mebuat garis horizontal |
| <!–…–> | Membuat komentar |
| <b> | Menebalkan teks |
| <blockquote> | Menentukan kutipan dari sumber lain |
| <code> | Menentukan kode komputer |
| <em> | Membuat teks miring atau ditekankan |
| <i> | Membuat teks miring |
| <pre> | Menentukan teks diformat |
| <q> | Menentukan kutipan pendek |
| <s> | Mencoret teks |
| <small> | Menentukan teks yang lebih kecil |
| <strong> | Membuat teks tebal atau teks penting |
| <sub> | Menentukan teks langganan |
| <sup> | Menentukan teks superscript |
| <time> | Menentukan tanggal / waktu |
| <u> | Membuat teks garis bawah |
| <form> | Menentukan formulir HTML |
| <input> | Membuat form input |
| <textarea> | Membuat form teks yang lebih besar |
| <button> | Menentukan tombol yang dapat diklik |
| <select> | Menentukan daftar drop-down |
| <option> | Menentukan opsi dalam daftar drop-down |
| <label> | Menentukan label untuk elemen input |
| <iframe> | Menentukan bingkai inline |
| <img> | Menentukan gambar |
| <canvas> | Digunakan untuk menggambar grafik |
| <figure> | Menentukan konten mandiri |
| <svg> | Menentukan wadah untuk grafik SVG |
| <audio> | Menentukan konten suara |
| <source> | Menentukan banyak sumber multimedia |
| <a> | Mendefinisikan hyperlink |
| <link> | Menentukan hubungan antara dokumen dan sumber daya eksternal |
| <nav> | Menentukan link navigasi |
| <ul> | Menentukan daftar tidak terurut |
| <ol> | Menentukan daftar yang terurut |
| <li> | Menentukan item pada list |
| <dl> | Menentukan daftar deskripsi |
| <dt> | Menentukan istilah / nama dalam daftar deskripsi |
| <dd> | Menentukan deskripsi istilah / nama dalam daftar deskripsi |
| <table> | Menentukan tabel |
| <th> | Menentukan header dalam tabel |
| <tr> | Menentukan baris dalam tabel |
| <td> | Menentukan sel atau kotak dalam tabel |
| <thead> | Mengelompokkan konten header dalam sebuah tabel |
| <tbody> | Mengelompokkan konten isi dalam tabel |
| <tfoot> | Mengelompokkan konten footer dalam sebuah tabel |
| <style> | Menentukan informasi gaya untuk dokumen |
| <div> | Membagi halaman dalam blok |
| <span> | Membagi halaman dalam blok kecil |
| <header> | Menentukan header untuk bagian halaman |
| <footer> | Menentukan footer untuk bagian halaman |
| <main> | Menentukan konten utama halaman |
| <section> | Menentukan bagian dalam halaman |
| <artikel> | Menentukan artikel |
| <aside> | Menentukan konten selain dari konten halaman |
| <meta> | Menentukan metadata halaman |
| <script> | Menentukan skrip |
| <noscript> | Menentukan konten alternatif untuk pengguna yang tidak mendukung skrip |
| <embed> | Menentukan wadah untuk aplikasi eksternal |
| <object> | Menentukan objek yang disematkan |
| <caption> | Menentukan keterangan tabel |
| <cite> | Menentukan judul sebuah karya |
| <abbr> | Menentukan singkatan atau akronim |
Apa itu Element HTML?
Elemen HTML adalah semua kode HTML yang dimulai dari tag pembuka hingga tag penutup.Terdapat 2 jenis elemen yaitu elemen normal dan elemen tunggal atau elemen kosong (void element).
1. Elemen Normal
Cara penulisan untuk elemen normal adalah dimulai dari tag pembuka dan diakhiri dengan tag penutup.<nama_tag>isi konten</nama_tag>
Contoh penerapan:
<b>konten dengan tulisan tebal</b>
Penjelasan:
Kode HTML diatas adalah contoh elemen untuk membuat tulisan tebal dimulai dari tag pembuka yaitu <b> dan diakhiri dengan tag penutup yaitu </b> yang mengapit kontennya yaitu “konten dengan tulisan tebal“.
2. Elemen Tunggal atau Elemen Kosong
Elemen 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.<img src="googleimage.jpg" />
Penjelasan:
Kode diatas adalah untuk menampilkan gambar. Tag yang digunakan adalah tag img dengan atribut src untuk menentukan letak file gambarnya. Kemudian ditambahkan tanda slash / setelahnya. Simak juga struktur dasar html.
