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. 0konten yang ditampilkan 1 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: 5, 6, 7, 8, 9. Daftar Kode HTML Lengkap (Tag HTML dan Fungsinya)Kode Tag HTMLFungsi<!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 akronimKumpulan 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 dan diakhiri dengan tag penutup yaitu 3 yang mengapit kontennya yaitu “ 2“.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 3 dengan atribut 4 untuk menentukan letak file gambarnya. Kemudian ditambahkan tanda slash 5 setelahnya. Simak juga struktur dasar html.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 <h1> dan <p>. teks biasa. <h1>elemen pertama.</h1> <p>elemen kedua.</p> Tampilan di browser: Penjelasan: Elemen <h1> 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 2 dan 7.teks biasa. <b>elemen pertama.</b> <i>elemen kedua.</i> Tampilan di browser: Penjelasan: Elemen 2 adalah jenis inline elemen. Jadi akan ditampilkan disamping “teks biasa”. Begitu juga elemen 7 karena juga inline elemen maka juga ditampilkan disamping 2. 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 1 dan 2. 1 digunakan untuk memberi informasi tambahan alamat url Google sedangkan 2 gunakan untuk menambahkan informasi tambahan tooltip saat mouse diarahkan ke link tersebut.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 FungsinyaAtributFungsinyaidMenentukan id unik elemen.classMenentukan nama class yang digunakan pada CSS.styleMenentukan gaya CSS secara inline (langsung).titleMenentukan tooltip atau teks saat mouse berada di atas elemen tersebut.accesskeyMenentukan tombol pintas untuk mengaktifkan / memfokuskan elemen.contenteditableMenentukan apakah konten elemen dapat diedit atau tidak.data-*Menyimpan data khusus pribadi ke halaman atau aplikasi.dirMenentukan arah teks untuk konten dalam suatu elemen.draggableMenentukan apakah suatu elemen dapat diseret atau tidak.dropzoneMenentukan zona drop pada aksi drag and drop.hiddenMenentukan bahwa suatu elemen tidak ditampilkan.langMenentukan bahasa konten elemen.spellcheckMenentukan apakah elemen harus diperiksa ejaan dan tata bahasanya atau tidak.tabindexMenentukan urutan tab dari suatu elemen.translateMenentukan apakah konten elemen harus diterjemahkan atau tidak.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. Sebuah elemen HTML dimana penulisannya diawali dengan dan diakhiri dengan tanda adalah?Tag adalah sebuah penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat dengan kurung siku ( <...> ), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut. Contoh: <p> , <a> , <body> , <head> , dan sebagainya. Tag selalu ditulis berpasangan.
Elemen HTML apa saja?Elemen-Elemen Pada HTML. HEAD. Head berfungsi untuk mengidentifikasi header web yang berisikan informasi tentang web. ... . BODY. ... . Menu. ... . Image. ... . Tabel. ... . tag HTML dimulai dengan kode apa?Secara umum penulisan tag pada html itu berpasang- pasangan dimulai dengan <tag_pembuka> Isi dari konten </tag_penutup> , Jadi yang dimaksud dengan pengertian elemen pada HTML adalah satu blok code yang dimulai dari tag pembuka hingga tag penutup, namun ada juga tag yang dalam penulisannya berdiri sendiri seperti < ...
Bagaimana cara penulisan yang benar dalam penulisan HTML?Berikut ini beberapa saran yang perlu diikuti agar bisa menulis tag dengan benar:. Tag-tag wajib. Ada beberapa tag yang wajib ada di HTML. ... . 2. Gunakan Huruf Kecil. Hindari menggunakan huruf besar dalam menuliskan naama tag dan sebaiknya gunakan huruf kecil saja. ... . Pastikan Menutup Tag dengan Benar.. |