Wednesday, November 26, 2014

Tag optgroup HTML

Tag <optgroup> digunakan untuk mengelompokkan jenis data per grup di dalam tag <select>. Tag select digunakan untuk membuat daftar pilihan dalam combox box, namun tidak per grup. Tag optgroup membuat data tampil per jenis. Misalnya, nama buah, nama sayur, nama kacang-kacangan.

Atribut tag optgroup:
label = nama (jenis) grup.
option = nama (nilai) data daftar grup.
disabled = pilihan tidak diaktifkan.

Contoh: optgroup.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag optgroup html</title>
        </head>
    <body>
    <select>
      <optgroup label="Sayuran">
        <option>Bayam</option>
        <option>Daun ubi</option>
        <option>Kol</option>
      </optgroup>
      <optgroup label="Buah">
        <option>Pisang</option>
        <option>Mangga</option>
        <option>Pepaya</option>
      </optgroup>
      <optgroup label="Kacang-kacangan">
        <option>Kacang hijau</option>
        <option>Kacang tanah</option>
        <option>Kacang kedelai</option>
      </optgroup>
      <optgroup label="Lainnya" disabled>
        <option>Lainnya 1</option>
        <option>Lainnya 2</option>
        <option>Lainnya 3</option>
      </optgroup>
    </select>

    </body>
</html>


Output:

Pilihan Lainnya dinonaktifkan.
Ket: Kode html di atas menggunakan 4 grup dengan masing-masing 3 nilai per grup. Jika ingin suatu grup dinonaktifkan, maka tambahan disabled setelah nama grup. Perhatikan potongan kode <optgroup label="Lainnya" disabled>. Selamat mencoba!

Referensi tulisan:
  1. <optgroup>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 27 Nopember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Sunday, November 23, 2014

Tag noscript HTML

Tag <noscript> digunakan untuk mendeteksi dukungan browser terhadap javascript. Javascript merupakan bahasa pemrograman web yang membuat halaman web lebih interaktif.

Browser tidak mendukung javascript karena dua kondisi; pertama, karena pengguna menonaktifkan dukungan javascript di browser, kedua browser itu sendiri memang tidak mendukung javascript.

Penulisan tag <noscript>:
- Sintax: <noscript>...</noscript>
- Tanda titik-titik diganti dengan teks (informasi), link, gambar atau lainnya yang memberitahu pengunjung web bahwa browser yang digunakannya tidak mendukung javascript.

Contoh:
noscript.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag noscript html</title>
        </head>
    <body>
        <noscript>Maaf, mohon aktifkan javascript di browser Anda.</noscript>
        <p>Ini teks lain...</p>
    </body>
</html>


Output jika browser mendukung java script:

Namun jika browser tidak mendukung java script:

Selamat mencoba!

^ Baca juga: Tag optgroup HTML.

Referensi tulisan:
  1. <noscript>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 24 Nopember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Wednesday, November 19, 2014

Tag meter HTML

Tag <meter> HTML5 digunakan untuk mewakili nilai skala, baik bilangan bulat atau pecahan. Nilai skala ini mempunyai batas maksimum - tetapi nilai sebenarnya bisa hanya sepertiga, setengah atau nilai lainnya. Misalnya, hardisk Anda kapasitasnya 100 Gb (Gigabyte) tetapi hanya terisi 10 Gb. Untuk menggambarkan 10 Gb dalam 100 Gb bisa dibuat dengan tag meter.

Tampilan tag meter berupa persegi panjang berukuran kecil, warna abu-abu sebagai kapasitas maksimum dan warna hijau berarti nilai yang sebenarnya.

Contoh: meter.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag meter html</title>
        </head>
    <body>
        <p>Kapasitas hardisk Anda (100 Gb) setelah terisi: <meter max="100" value="10">10 Gb</meter></p>
    </body>
</html>

Output:
Tampilan tag meter di Mozilla Firefox.
Atribut-atribut tag meter:
value= nilai meter sebenarnya.
min= nilai minimal (jika dibutuhkan).
max= nilai maksimal meter.

Contoh 2: meter2.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag meter html</title>
        </head>
    <body>
        <p>Daya baterai ponsel Anda telah kritis: <meter min="4" max="100" value="8"></meter> segera lakukan isi ulang.</p>
    </body>
</html>


Output:

^Baca juga: Tag noscript HTML.

Referensi tulisan:
  1. <meter>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 19 Nopember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
  2. The HTML5 meter Element; ditulis oleh: Guest Author, css-tricks.com, diakses 19 Nopember 2014.

Sunday, November 16, 2014

Tag mark HTML

Tag <mark> digunakan untuk menandai teks di halaman web. Teks yang ditandai berarti penting dan memudahkan melihatnya di antara teks lain.

Contoh mark di dalam bentuk benda adalah menandai teks dalam bacaan dengan Stabilo. Kata atau kalimat yang ditandai menandakan penting dan jika telah ditandai, tidak sulit mencarinya di lain waktu.

Teks yang ada di dalam tag mark ditampilkan dalam warna latar kuning. Jika ingin menukar warnanya, sesuaikan dengan css.

Tag mark memiliki pembuka dan penutup. <mark> dan </mark>.

Contoh: mark.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag mark html</title>
        </head>
    <body>
    <p>Apa yang dicita-citakan langsung dipraktekkan,
    bukan sekedar dibayangkan. Tak masalah prosesnya sedikit lambat
    karena ada prioritas lain yang lebih penting. <mark>Jalanin aja..</mark>
    </body>
</html>


Output:
Teks jalanin aja di mark.
Untuk mengganti warna latar mark, berikut contohnya dengan menyesuaikan warna di css: mark2.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag mark html</title>
            <style type="text/css">
            mark{background-color:#C3ED43;}
            </style>
        </head>
    <body>
    <p>Apa yang dicita-citakan langsung dipraktekkan,
    bukan sekedar dibayangkan. Tak masalah prosesnya sedikit lambat
    karena ada prioritas lain yang lebih penting. <mark>Jalanin aja..</mark>
    </body>
</html>


Output:
Warna latar menjadi hijau.
^ Baca juga: Tag meter HTML.

Referensi tulisan:
  1. <mark>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 16 Nopember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Friday, November 14, 2014

Tips: Tulis Kode HTML Sedikit Demi Sedikit dan Lihat Hasilnya

Halo pelajar html! Kali ini penulis berbagi tips tentang menulis (mengetik) kode html. Meskipun kode html tidak menimbulkan pesan eror ketika lupa menutup tag atau salah mengetik tag, tetapi jika menulis kode langsung banyak akan susah nanti mencari kesalahannya di mana saat hasil/tampilan di browser tak sesuai harapan. Untuk itulah penulis sarankan bagi pemula agar menulis kode html sedikit demi sedikit agar mudah dalam mencari letak kesalahan kode.

Contohnya ketika membuat tabel dengan tag <table>, setelah membuat satu baris dan satu kolom, langsung lihat hasilnya di browser, apakah sudah benar atau masih salah. Jika sudah, lanjut lagi ke kolom kedua atau baris kedua dan seterusnya. Untuk membuat tabel baca artikel ini. Kesalahan yang sering terjadi saat membuat tabel ketika memecah baris (rowspan) dan memecah kolom (colspan), sehingga saat bekerja di bagian ini perlu melihat hasilnya, jika sudah benar baru beranjak ke kolom atau baris selanjutnya.

Cara yang sama berlaku juga ketika Anda membangun web dari desain yang telah dibuat, misalnya desain yang digambar di atas kertas atau yang dibuat dengan aplikasi pengolah gambar seperti Corel Draw dan Photoshop. Baris demi baris kode ditulis dan dilihat hasilnya apakah sudah sesuai desain atau tidak.

Jika Anda memang menggunakan editor (tempat penulisan kode) berbayar seperti Adobe Dreamweaver, aplikasi ini dilengkapi fitur yang bisa langsung melihat hasil kode html. Namun, jika Anda tidak sanggup membayar lisensi, Anda tidak perlu khawatir. Notepad++ jadi solusi, gratis dan 'ringan' dalam prosesnya, tapi itu tadi tidak dilengkapi fitur seperti Adobe Dreamweaver, maka solusinya menulis kode sedikit demi sedikit dan lihat hasilnya. Link download Notepad++ di sini.

Menulis kode html dengan Notepad++.
Teknik yang dijelaskan dari awal juga berlaku saat Anda sedang ujian di kampus atau di sekolah. Seperti diketahui, saat ujian biasanya timbul perasaan tegang dan gugup. Jika saat itu Anda telah menulis kode html sedemikian banyak tetapi saat dilihat hasilnya di browser tidak sesuai harapan, itu bisa membuat frustasi. Untuk mencari letak kesalahan sulit karena sudah terlalu banyak baris kode yang diteliti dari awal sampai akhir. Makanya, ditulis sedikit demi sedikit, jika tampilan tak sesuai harapan langsung perbaiki, setelah itu melangkah mulus ke tahap selanjutnya. Semoga membantu!

^Baca juga: Tag mark html.

Tuesday, November 11, 2014

Tips: Mengecek Apakah Penutup Tag Berlebih

Halo yang sedang belajar HTML! Ketika Anda telah selesai mengetik beberapa baris HTML dan merasa lengkap tag pembuka dan penutupnya dan melihat hasil (tampilan) di browser persis seperti apa yang diharapkan itu sudah menyenangkan hati. Tetapi ada baiknya Anda memeriksa apakah ada tag penutup yang berlebih, artinya satu tag memiliki 2 tag penutup, padahal harusnya satu tag pembuka dan hanya satu tag penutup.

Sebelum membahas lebih jauh, ada beberapa tag yang memang tidak membutuhkan tag penutup, contohnya <br> untuk enter (baris baru), <hr> untuk membuat garis horizontal, <link> untuk menampilkan file dari suatu lokasi (folder) misalnya css dan tag <img> untuk menampilkan gambar.

Kita balik lagi ke topik, misalnya Anda menggunakan tag yang membutuhkan tag penutup seperti tag <table> untuk membuat tabel termasuk di dalamnya <tr> (baris baru), <td> (kolom baru). Contoh: tabel.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Test penutup tag</title>
        </head>
    <body>
    <table border="1" width="400px">
        <tr>
            <td>Kolom pertama</td>
            <td>Kolom kedua</td>
            <td>Kolom ketiga</td>
        </tr>
        <tr>
            <td>Kolom keempat</td>
            <td>Kolom kelima</td>
            <td>Kolom keenam</td>
        </tr>
    </table>

    </body>
</html>


Output:

Baris kode di atas telah memiliki tag penutup, artinya sudah sesuai standar. Sekarang kita sengaja lebihkan tag penutup tabel</table> menjadi dua, pada potongan kode berikut:

        <tr>
            <td>Kolom keempat</td>
            <td>Kolom kelima</td>
            <td>Kolom keenam</td>
        </tr>
    </table>
    </table>



Nah, sangat mudah mendeteksi tag berlebih ini dengan browser, misalnya Firefox. Dengan cara klik kanan di area kosong pada tampilan tabel.html, kemudian pilih View Page Source seperti gambar berikut:

Jika browser menggunakan bahasa Indonesia, maka menjadi "Tampilkan kode sumber"
Anda akan melihat tulisan warna merah yang menandakan tag </table> berlebih, yang seharusnya satu saja, karena hanya satu tag pembuka <table>.

Tips ini juga berlaku untuk tag lain yang memerlukan tag penutup.
Itulah tips sederhana yang bisa Anda praktektan, jadi daripada melihat satu per satu tag, lebih baik menerapkan cara di atas. Jauh lebih hemat waktu. Selamat mencoba.

^Baca juga: Tips menulis kode html untuk pemula.

Friday, November 7, 2014

Tag kbd HTML

Tag kbd (keyboard) merupakan HTML elemen input dalam inline untuk menuliskan perintah keyboard yang ditampilkan dalam font (jenis huruf) monospace.

Inline artinya teks ditampilkan tetap satu baris dengan teks sebelumnya.

Contoh perintah keyboard adalah Ctrl+S untuk menyimpan, Ctrl+V untuk menempel, Ctrl+C untuk menggandakan.

Untuk membedakan jenis huruf dari beberapa perintah keyboard ini maka dianjurkan diletakkan dalam tag <kbd>.

Contoh: kbd.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag kbd HTML</title>
        </head>
    <body>
        <p>Untuk menyimpan dokumen gunakan perintah <kbd>Ctrl+S</kbd> <br />
        Untuk menempel dokumen gunakan perintah <kbd>Ctrl+V</kbd> <br />
        Untuk memindahkan dokumen gunakan perintah <kbd>Ctrl+X</kbd> <br />
        Untuk menggandakan dokumen gunakan perintah <kbd>Ctrl+C</kbd> <br />
        Untuk membuka dokumen gunakan perintah <kbd>Ctrl+O</kbd>
        </p>

    </body>
</html>


Output:

Hasil tampilan di browser.
^Baca juga: Tips: Mengecek tag penutup berlebih.

Referensi tulisan:
  1. <kbd>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 08 Nopember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Tuesday, November 4, 2014

Tag ins HTML

Tag <ins> digunakan untuk menginformasikan bahwa suatu data telah ditambahkan ke dokumen. Teks yang berada di dalam tag ins otomatis ditampilkan dengan garis bawah. Tag ins diawali tag pembuka (<ins>) dan tag penutup (</ins>).

Contoh: ins.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag ins HTML</title>
        </head>
    <body>
        <ins>Sukses, teks telah ditambahkan.</ins>
    </body>
</html>


Output:

Tag ins mempunyai dua atribut:
- cite: Atribut cite berisi url (link) yang menginformasikan alasan penambahan teks. Penulisan: <ins cite="url.html">Sukses, teks telah ditambahkan</ins>. url html diganti dengan url sebenarnya.
- datetime: Atribut datetime berisi informasi waktu kapan teks ditambahkan. Contohnya bisa dilihat di sini.

^Baca juga: Tak kbd HTML.

Referensi tulisan:
  1. <ins>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 04 Nopember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.