Cara menggunakan details html

Kita lanjutkan tutorial tentang dasar-dasar HTML, yaitu tentang Meta data. HTML memungkinkan kita untuk menambahkan Meta data pada halaman web, yaitu berupa informasi penting tentang dokumen tersebut. Elemen pada Meta data ini bisa digunakan untuk menggambarkan properti dari halaman HTML seperti nama pembuat, kata kunci dan sebagainya.

Kita bisa memasukkan satu atau lebih tag Meta pada sebuah halaman HTML berdasarkan informasi apa yang akan ditambahkan pada halaman tersebut. Catatan bahwa Meta data tidak tampil pada halaman web ketika diakses.

Cara menambahkan tag Meta

Tag yang digunakan adalah <meta>. Diletakkan pada bagian atas dari struktur halaman HTML yaitu di antara <head> dan </head>.  Tag Meta ini memiliki atribut atau properti, diantaranya adalah name, content, scheme, http-equiv.

AtributKeterangan
name Nama dari tag Meta. Bisa diisi apa saja; biasanya berisi author, keywords, description dan lain-lain.
content Isi dari properti.
scheme Berisi skema untuk menginterpretasikan isi dari properti yang sudah diatur sebelumnya.
http-equiv Digunakan untuk merespon pesan http di header. Misal http-equiv bisa digunakan untuk me-refresh halaman, bisa juga untuk mengatur cookie. Isi yang bisa atur adalah content-type, expires, refresh dan set-cookie.

Mengatur kata kunci

Untuk mengatur kata kunci digunakan keywords pada atribut name. Kemudian pada atribut content diisi dengan kata kunci yang diinginkan. Jika kata kunci lebih dari 1, gunakan tanda koma. Cara penulisannya seperti ini: <meta name="keywords" content="kata, kunci, letakkan, di sini">.

Contohnya: <meta name="keywords" content="tutorial web, tutorial android, belajar adminer, bisnis online">

Mengatur deskripsi halaman

Biasanya pada halaman web juga ditambahkan deskripsi yang berisi ringkasan atau penjelesan singkat dari halaman web. Deskripsi bisa dibuat berbeda-beda untuk setiap halaman. Dan deskripsi ini biasa digunakan oleh mesin pencari untuk melakukan indexing halaman-halaman web. Dengan deskripsi ini maka halaman web kita bisa lebih mudah diindex dan muncul di halaman pencarian.

Cara penulisannya sama dengan cara mengatur kata kunci, menggunakan atribut name dengan isi description dan content diisi dengan ringkasan halaman web. Ini bentuk penulisannya: <meta name="description" content="ringkasan halaman web">.

Contohnya: <meta name="description" content="Tag Meta HTML diperlukan untuk optimasi SEO (Search Engine Optimization)">

Silahkan ketik kode berikut untuk contoh keywords dan description. Simpan dengan nama file 33-html-meta-keywords-description.html:

<!DOCTYPE html>
<html>
<head>
   <title>Meta Keywords dan Description</title>
   <meta name="keywords" content="tutorial web, tutorial android, belajar adminer, bisnis online">
   <meta name="description" content="Tag Meta HTML diperlukan untuk optimasi SEO (Search Engine Optimization)">
</head>
<body>
   <h2>Menambahkan Meta Keywords dan Description</h2>
   <p>Meta keywords dan description digunakan oleh mesin pencari untuk mengindex halaman-halaman web. Biasanya dimaksimalkan untuk optimasi mesin pencari (SEO), agar halaman web bisa tampil di halaman awal hasil pencarian.</p>
</body>
</html>

Lihat tampilannya di halaman sebelah.


#HTML
Cara menggunakan details html

Jika kamu diminta menuliskan daftar barang yang harus dibeli pada dengan HTML..

..apa yang akan kamu lakukan?

Mungkin kamu bisa membuatnya seperti ini:

<h2>Daftar Barang untuk diblie:</h2>
<p>- Flashdisk 64GB</p>
<p>- Kabel Data USB 3.0</p>
<p>- Kertas A4</p>

Hasilnya memang akan terlihat seperti sebuah list.

Cara menggunakan details html

Tapi, ini bukanlah cara membuat list yang benar di HTML.

Elemen List di HTML

HTML sudah menyediakan elemen untuk membuat list. Ada tiga macam jenis list yang bisa dibuat di HTML:

  1. Ordered List adalah list yang terurut;
  2. Unordered List adalah list yang tak terurut;
  3. dan Descriptiona List adalah list yang berisi definisi.

Mari kita bahas satu-per-satu…

1. Ordered List di HTML

Ordered list dibuat dengan tag <ol>. Lalu di dalamnya diisi dengan item-item yang akan dimasukkan ke dalam list. Item dibuat dengan tag <li> (list item).

Cara menggunakan details html

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Membuat Ordered List</title>
</head>

<body>
    <h2>Buah Favoritku:</h2>
    <ol>
        <li>Jeruk</li>
        <li>Durian</li>
        <li>Pisang</li>
        <li>Pepaya</li>
        <li>Mangga</li>
    </ol>
</body>
</html>

Hasilnya:

Cara menggunakan details html

List diatas diurutkan berdasarkan angka dari 1, 2, 3, sampai 5.

Lalu bagaimana kalau kita ingin menggunakan huruf seperti a, b, c atau angka romawi seperti I, II, III?

Gampang..

Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada tag ol dan berikut ini nilai yang bisa diberikan:

  • a untuk alfabet a, b, c, dan seterusnya;
  • A untuk alfabet A, B, C, dan seterusnya;
  • i untuk angka romwari i, ii, iii, dan seterusnya;
  • I untuk angka romwari I, II, III, dan seterusnya.

Contoh:

<!DOCTYPE html>
<html>

<head>
    <title>Ordered List dengan Atribut Type</title>
</head>

<body>
    <h3>List dengan type alfabet</h3>
    <ol type='a'>
        <li>Tutorial List di HTML</li>
        <li>Tutorial Link di HTML</li>
        <li>Tutorial Tabel di HTML</li>
    </ol>
    <h3>List dengan type alfabet kapital (huruf besar)</h3>
    <ol type='A'>
        <li>Tutorial List di HTML</li>
        <li>Tutorial Link di HTML</li>
        <li>Tutorial Tabel di HTML</li>
    </ol>
    <h3>List dengan type romawi</h3>
    <ol type='i'>
        <li>Tutorial List di HTML</li>
        <li>Tutorial Link di HTML</li>
        <li>Tutorial Tabel di HTML</li>
    </ol>
    <h3>List dengan type romawi kapital</h3>
    <ol type='I'>
        <li>Tutorial List di HTML</li>
        <li>Tutorial Link di HTML</li>
        <li>Tutorial Tabel di HTML</li>
    </ol>
</body>

</html>

Hasilnya:

Cara menggunakan details html

2.Unordered List di HTML

Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya. Unordered list dibuat dengan tag <ul> dan untuk item-nya dibuat juga dengan tag <li>.

Cara menggunakan details html

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Membuat Unordered List</title>
</head>

<body>
    <h2>Bahasa Pemrograman untuk dipelajari:</h2>
    <ul>
        <li>Javascript</li>
        <li>PHP</li>
        <li>Java</li>
        <li>Python</li>
        <li>Kotlin</li>
    </ul>
</body>
</html>

Hasilnya:

Cara menggunakan details html

Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita juga bisa menggantinya dengan atribut type.

Berikut ini nilai yang bisa diberikan untuk atribut type:

  • square untuk simbol persegi;
  • disc (default) untuk simbol lingkaran disc;
  • none tidak memakai simbol;
  • circle untuk simbol lingkaran;

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Membuat Unordered List</title>
</head>

<body>
    <h2>Bahasa Pemrograman untuk dipelajari:</h2>
    <ul type="square">
        <li>Javascript</li>
        <li>PHP</li>
        <li>Java</li>
        <li>Python</li>
        <li>Kotlin</li>
    </ul>
    <h2>Framework untuk dipelajari:</h2>
    <ul type="circle">
        <li>Vuejs</li>
        <li>Svelte</li>
        <li>Reactjs</li>
    </ul>
    <h2>Tools untuk dipelajari:</h2>
    <ul type="none">
        <li>Gulp</li>
        <li>NPM</li>
        <li>Js Lint</li>
    </ul>
    <h2>Pelajari juga:</h2>
    <ul type="disc">
        <li>JSON</li>
        <li>XML</li>
        <li>Markdown</li>
    </ul>
</body>
</html>

Hasilnya:

Cara menggunakan details html

Selain menggunakan type, kita juga bisa menggunakan gambar.

Ini dilakukan dengan style CSS.

Contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Membuat Unordered List</title>
</head>

<body>
    <h2>Bahasa Pemrograman untuk dipelajari:</h2>
    <ul style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico)">
        <li>Javascript</li>
        <li>PHP</li>
        <li>Java</li>
        <li>Python</li>
        <li>Kotlin</li>
    </ul>
</body>
</html>

Hasilnya:

Cara menggunakan details html

3. Description List di HTML

Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu.

Ada tiga tag yang digunakan untuk membuat description list:

  • <dl> (description list) tag untuk memulai description list;
  • <dt> (description term) tag untuk membuat kata yang akan dideskripsikan;
  • <dd> (description description) tag untuk membuat penjelasan dari kata.

Format penulisannya seperti ini:

Cara menggunakan details html

Contoh:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Membuat Description List</title>
</head>

<body>
    <h2>Daftar istilah:</h2>
    <dl>
        <dt>Kopi</dt>
        <dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.</dd>
        <dt>Kopi Black Magic</dt>
        <dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.</dd>
        <dt>White Coffee</dt>
        <dd>Kopi berwarna putih, kandungan kafeinnya sedikit.</dd>
        <dt>Kopi++</dt>
        <dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.</dd>
    </dl>
</body>

</html>

Hasilnya:

Cara menggunakan details html

List di dalam List (Nested List)

List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan unordered list.

Caranya, list yang di dalam ditulis di dalam tag <li>.

Contoh:

<!DOCTYPE html>
<html lang='en'>

<head>
    <title>List di dalam List</title>
</head>

<body>
    <h2>Distro Linux dan Keluarganya</h2>
    <ol>
        <li>Debian
            <ul>
                <li>Ubuntu</li>
                <li>Mint</li>
                <li>elementaryOS</li>
            </ul>
        </li>
        <li>RedHat
            <ul>
                <li>Fedora</li>
            </ul>
        </li>
        <li>Slackware</li>
    </ol>
</body>

</html>

Hasilnya:

Cara menggunakan details html

Apa Selanjutnya?

Materi tentang list sampai di sini ya..

Intinya:

Kamu harus tahu cara membuat list, baik itu ordered list, unordered list, dan juga description list.

Jika masih bingung, silahkan tanyakan di komentar.

Selanjutnya silahkan pelajari:

  • Belajar HTML #10: Membuat Tabel pada HTML

Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Apa itu detail tag?

HTML <details> merupakan element interaktif yang digunakan untuk menentukkan rincian (detail) konten tambahan yang dapat ditampilkan atau disembunyikan oleh user.

Tag apa saja yang ada di HTML?

Berikut ini daftar tag yang wajib ada di HTML:.
<! DOCTYPE html> — untuk deklarasi type dokumen;.
<html> — tag utama dalam HTML;.
<head> — untuk bagian kepala dari dokumen;.
<title> — untuk judul web;.
<body> — untuk bagian body dari dokumen..

Langkah langkah membuat website dengan HTML?

Cara Membuat Halaman Web Sederhana dengan HTML.
Buka editor teks. ... .
Atur jenis dokumen untuk HTML. ... .
Tambahkan tab judul untuk halaman web kamu. ... .
Ketik di bawah tag "Head" yang tertutup. ... .
Selanjutnya membuat judul halaman. ... .
Tambahkan judul tambahan jika kamu mau. ... .
Membuat paragraf. ... .
Mengubah warna teks..

Apa itu DT HTML?

HTML elemen dalam tag <dt> merupakan judul daftar sedangkan elemen yang berada di dalam tag <dd> adalah penjelasan (deskripsi) dari isi konten datanya.