Blog Belajar HTML: January 2015

Wednesday, January 28, 2015

Tag ol HTML5

Tag <ol> digunakan untuk membuat daftar berurutan, disebut juga ordered-list. Pada HTML5 tag <ol> mempunyai 2 atribut baru yaitu reversed dan start. Reversed menentukan urutan item-item dalam keadaan terbalik, urutan terakhir ada di urutan pertama. Atribut reversed bernilai boolean, true atau false. Sedangkan atribut start menentukan penomoran awal yang tidak biasa, misalnya mulai dari 2 atau 3.

Berlaku juga untuk penomoran huruf (A,B,C) dan angka Roman (I,II,III), tetapi ditampilkan dalam angka, artinya C sama dengan 3 atau III. Seperti diketahui, ol type ada 4 macam selain angka (type="1"), yaitu type="A", type="a", type="I", type="i". Nilai default adalah type="1", jika type lain tidak dideklarasikan.

Contoh atribut start : olstart.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag ol reversed start</title>
        </head>
    <body>
        <p>Contoh atribut start angka.</p>
        <ol start="3">
            <li>Pisang</li>
            <li>Jambu</li>
            <li>Terong</li>
        </ol>
        
        <p>Contoh atribut start huruf.</p>
        <ol type="A" start="3">
            <li>Pisang</li>
            <li>Jambu</li>
            <li>Terong</li>
        </ol>
        
        <p>Contoh atribut start romawi.</p>
        <ol type="I" start="3">
            <li>Pisang</li>
            <li>Jambu</li>
            <li>Terong</li>
        </ol>
    </body>
</html>

Output:

Semua nomor awal setara 3.

Contoh ol reversed: olreversed.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag ol reversed start</title>
        </head>
    <body>
        <p>Contoh atribut start angka.</p>
        <ol start="3" reversed="true">
            <li>Pisang</li>
            <li>Jambu</li>
            <li>Terong</li>
        </ol>
        
        <p>Contoh atribut start huruf.</p>
        <ol type="A" start="3">
            <li>Pisang</li>
            <li>Jambu</li>
            <li>Terong</li>
        </ol>
        
        <p>Contoh atribut start romawi.</p>
        <ol type="I" start="3" reversed="true">
            <li>Pisang</li>
            <li>Jambu</li>
            <li>Terong</li>
        </ol>
    </body>
</html>

Output:

Penomoran jadi terbalik.

Referensi tulisan:

<ol>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 28 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Sunday, January 25, 2015

Tag select required HTML5

Tag <select> HTML5 mempunyai atribut required yang mengharuskan pilihan tidak boleh kosong - pilihan yang dipilih harus mempunyai nilai. Misalnya tag select berisi option pertama kosong, kedua jeruk, ketiga jambu, keempat apel. Jika dipilih pilihan pertama maka tampilan select timbul warna pink tanda peringatan pilihan tak boleh kosong.

Atribut required bernilai boolean, true jika diaktifkan dan false jika sebaliknya.

Contoh: srequired.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag select required</title>
            <style>
                select{width: 90px; padding: 4px}
            </style>
        </head>
    <body>
        <h2>Contoh penerapan tag select required</h2>
        <select name="pilihan" required="true">
            <option></option>
            <option value="opsi1">Jeruk</option>
            <option value="opsi2">Jambu</option>
            <option value="opsi3">Apel</option>
        </select>
    </body>
</html>

Output:

Pilihan ke-3 dipilih.

Ketika pilihan pertama dipilih, kemudian klik sembarang (pindah kursor). Maka tampilan select berubah.

Referensi tulisan:

<select>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 25 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Thursday, January 22, 2015

Tag button autofocus HTML5

Pada HTML5, tag <button> memiliki atribut autofocus. Saat Anda muat halaman dan ditampilkan, fokus kursor akan berada di button. Misalkan pada halaman ada text field, textarea, select maka akan tetap button yang menjadi fokus kursor. Hanya ada satu button yang bisa memakai atribut autofocus.

Atribut autofocus bernilai boolean, true jika autofocus dan false jika tidak.

Contoh: buttonfocus.html


<!DOCTYPE HTML>

    <html>

        <head>

            <title>Contoh tag buton autofocus</title>

        </head>

    <body>

        <input type="text" /><br />

        <textarea></textarea> <br />

        <select>

            <option>List 1</option>

            <option>List 2</option>

            <option>List 3</option>

        </select><br /><br />

        <button name="btn" autofocus="true">Go</button>

    </body>

</html>

Button dalam keadaan focus ditandai dengan timbulnya warna biru di sekitar pinggir button:

Output autofocus di Firefox 40.

Referensi tulisan:

<button>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 23 Januari 2015.blockquote>About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Wednesday, January 21, 2015

Tag em HTML

Tag <em> digunakan untuk menandai penekanan kata dalam kalimat. Dalam bahasa Inggris atau bahasa Indonesia penekanan kata bertujuan untuk memberi tahu pembaca bahwa kata-kata itu perlu diperhatikan sehingga pembaca mudah memahami. Tag <em> menghasilkan tulisan miring.

Contoh: em.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag em download</title>
        </head>
    <body>
        Anisah sangat cantik, <em>apalagi</em> saat ia mengenakan hijab.
        <br />
        Anak itu hidupnya sangat <em>sederhana</em> padahal orang tuanya <em>kaya raya</em>.
    </body>
</html>

Output:

Tampilan di Firefox.

<i> vs <em>
Tag <i> dan <em> secara hasil visual terlihat sama, yaitu menampilkan tulisan miring. Tetapi berdasrkan makna berbeda. Tag <em> lebih kepada penekanan kata tetapi tag <i> tidak memperhatikan penekanan kata seperti hanya menandai kata asing, nama buku, judul film.

Referensi tulisan:

<em>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 22 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Penekanan Pada Kalimat Efektif; ditulis oleh: Fauziah Husnaa, fa-husnaa.blogspot.com, diakses 22 Januari 2015.

Monday, January 19, 2015

Tag br HTML

Tag <br> atau breakline digunakan untuk baris baru. Tag <br> menampilkan hasil yang sama apakah pakai penutup atau tidak, <br> sama dengan <br />. Jika membuat tulisan per paragraf maka Anda bisa menggunakan tag <p> saja, karena setiap tag <p>...</p> membentuk jarak (vertikal). Namun, jika tetap menggunakan tag <br> maka gunakan 2 sekaligus (2 tag <br> setara 1 tag <p>).

Contoh tag <br>: br.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag br download</title>
        </head>
    <body>
    Bob Sadino: Wirausaha itu bukan diperbincangkan,<br />
    tetapi langsung dipraktekkan.
   
    <p>Tag p digunakan untuk membuat paragraf. Setiap paragraf
    mempunyai beberapa kalimat. Setiap kalimat mempunyai beberapa
    kata. Satu paragraf membentuk satu opini atau lebih.
    </p>
    </body>
</html>

Output:

Output br dan tag p.

Penulisan kode html apakah sebaris atau tidak, tidak mempengaruhi hasil tampilan di browser.

    Bob Sadino: Wirausaha itu bukan diperbincangkan,<br />
    tetapi langsung dipraktekkan.

Akan sama hasilnya dengan:

Bob Sadino: Wirausaha itu bukan diperbincangkan,<br /> tetapi langsung dipraktekkan.

Namun untuk mempermudah pemahaman maka kode html diketik per satu kode dalam satu baris.

Thursday, January 15, 2015

Tag a ping HTML5

Di HTML5, tag <a> memiliki atirbut ping. Saat Anda mengklik link (url) yang disertai atribut ping, maka Anda telah mengakses 2 buah link, yaitu link (utama) dan juga link pada atribut ping. Contohnya penulisannya seprti berikut: aping.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag a download</title>
        </head>
    <body>
        <a href="http://tipspengetahuan.com/home.html" ping="http://tipspengetahuan.com/track.php">Link ke tipspengetahuan.com</a>
    </body>
</html>

Saat diklik Link ke tipspengetahuan.com maka Anda juga mengakses http://tipspengetahuan.com/track.php. Akses link yang ke-2 tanpa ditampilkan prosesnya ke Anda. Lalu bagaimana mengujinya? Berikut penulis jelaskan:

1. Penulis membuat tabel tb_stas dengan field berikut:

Tabel tb_stas.

2. Rekam (tracking) akses tipspengetahuan.com/home.html. Jika setiap kali diakses, maka tambah jumlah field count dengan 1.

3. Skrip php-nya seperti berikut: track.php


<?php

define('INCLUDE_CHECK',true);

require ('classgo.php');

$execnow=new tdpgo();

$execnow->conn();

mysql_query("UPDATE tb_stas SET count=count+1, wkt=CURRENT_TIMESTAMP WHERE kat='track'");

?>

4. Selesai.

Penulis kembali mengklik link Link ke tipspengetahuan.com pada contoh aping.html maka jumlah angka field count bertambah menjadi 3, begitu seterusnya. Uji coba ini dilakukan di browser Google Chrome.

Penambahan jumlah field count.

Referensi tulisan:

<a>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 15 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
APingAttribute; ditulis oleh: Kontributor Google Code, code.google.com, diakses 15 Januari 2015.

Monday, January 12, 2015

Tag a download HTML5

Pada tag <a> HTML5 terdapat atribut dowload yang berfungsi sebagai pemberian nama file saat file hendak di dowload. Seperti diketahui, umumnya apa nama file yang berada di server itulah nama file yang Anda download, tetapi dengan atribut download Anda bisa memodifikasinya.

Contohnya, mendownload file txt dari server tipspengetahuan.com bernama note.txt. Nama awal 'note' kita ganti dengan 'File note'. Maka penulisan kodenya seperti berikut:


<a href="note.txt" download="file note">Download note.</a>

Kode di atas hanya demo. Kode ini seharusnya dicoba di web server (seperti di hosting tipspengetahuan.com), yang perlu Anda pahami adalah konsepnya.

Demo
Untuk menguji efek kode di atas, silahkan akses link: http://www.tipspengetahuan.com/membuat-tag-posting-dengan-htaccess-php-mysql-web-591.html

Di bawah gambar ada tulisan Download note klik link tersebut di samping 'Ilustrasi tagging'. Nama awalnya note.txt berubah menjadi file note saat di download.

Link download note.

Nama file berubah menjadi file note.

Selamat mencoba!

Referensi tulisan:

<a>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 13 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
HTML5 download Attribute; ditulis oleh: David Walsh, davidwalsh.name, diakses 13 Januari 2015.

Sunday, January 11, 2015

Tag Iframe Sandbox HTML5

Pada tag <iframe> HTML5 terdapat atribut sandbox yang berfungsi untuk pembatasan izin skrip tambahan pada bingkai iframe, contohnya javascript. Jika atribut sandbox diaktifkan murni tanpa value yang terdaftar maka semua pembatasan skrip ekstra dilakukan.

Contoh sederhanya, tanpa atribut sandbox Anda dapat menggukan plugin Facebook atau Twitter share untuk membagikan artikel ke media sosial meskipun sebuah situs ditampilkan dalam iframe. Lihat perbedaan berikut:

tanpa atribut sandbox: nosanbox.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag iframe sandbox</title>
        </head>
    <body>
        <iframe width="1000" height="600" src="http://tipspengetahuan.com/solusi-bagi-yang-tak-mampu-beli-gambar-untuk-postingan-tekno-3864.html"> </iframe>
    </body>
</html>

Tampilan seperti normal:

Tanpa atribut sandbox.

dengan atribut sandbox: withsandbox.html



    
        
            Contoh tag iframe sandbox


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag iframe sandbox</title>
        </head>
    <body>
        <iframe width="1000" height="600" src="http://tipspengetahuan.com/solusi-bagi-yang-tak-mampu-beli-gambar-untuk-postingan-tekno-3864.html" sandbox> </iframe>
    </body>
</html>

Tampilan:

Skrip plugin media sosial tidak dizinkan.

Selain javascript beberapa skrip yang diblokir adalah pop ups, form, pointer lock dan top navigation. Untuk mengizinkannya satu per satu, Anda dapat mendeklarasikannya di atribut sandbox:

allow-same-origin: Allows the content to be treated as being from its normal origin. If this keyword is not used, the embedded content is treated as being from a unique origin.

allow-top-navigation: Allows the embedded browsing context to navigate (load) content to the top-level browsing context. If this keyword is not used, this operation is not allowed.

allow-forms: Izinkan submit form (tag form) dalam iframe.
allow-popups: Izinkan window pop ups seperti dari window.open.
allow-scripts: Izinkan javasript di iframe.
allow-pointer-lock: Izinkan konteks browsing Pointer Lock API.
allow-same-origin: Izinkan konten di iframe seperti layaknya di situs asli.
allow-top-navigation: Bisa dibaca di sini.

Contoh penggunaan atribut, misalnya allow-same-origin allow scripts: sandboxproperti.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag iframe sandbox</title>
        </head>
    <body>
        <iframe width="1000" height="600" src="http://tipspengetahuan.com/solusi-bagi-yang-tak-mampu-beli-gambar-untuk-postingan-tekno-3864.html" sandbox="allow-same-origin allow-scripts"> </iframe>
    </body>
</html>

Untuk atribut lain, contohnya ganti allow-scripts dengan allow-forms.

Referensi tulisan:

iframe; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 11 Desember 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
HTML <iframe> sandbox Attribute; ditulis oleh: w3schools.com, w3schools.com, diakses 11 Desember 2014

Thursday, January 8, 2015

Tag var HTML

Tag <var> atau variable digunakan untuk menuliskan suatu variabel, contohnya dalam perhitungan matematika. Contoh; rumus persamaan garis lurus: y = mx + c. Output tag <var> berupa tulisan miring.

Format penulisan: <var>...</var>.

Contoh skrip: var.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag var html</title>
        </head>
    <body>
        <p>Rumus persamaan garis lurus: <var>y</var> = <var>mx</var> + <var>c</var></p>
    </body>
</html>

Output:

Tampilan tag var di Firefox.

Referensi tulisan:

<var>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 09 Januari 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Tuesday, January 6, 2015

Tag UL (Nested) HTML

Tag <ul> digunakan untuk membuat daftar tak berurutan. Artinya daftar item tidak memperhatikan urutan layaknya penomoran (angka) melainkan item-item diberi tanda bullet, circle dan square. Bullet berupa lingkaran hitam kecil penuh, circle berupa lingkaran kecil dengan warna putih ditengahnya dan square dalam bentuk persegi kecil. Jika Anda tidak menentukan salah satunya maka style bullet yang dipakai.

Daftar item-item diletakkan dalam tag <li> yang telah didahuli tag <ul>. Berikut contoh dasarnya: ul.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag ul (dasar) html</title>
        </head>
    <body>
        <p>Daftar buah-buahan:</p>
        <ul>
            <li>Apel</li>
            <li>Semangka</li>
            <li>Pisang</li>
            <li>Nangka</li>
            <li>Jambu</li>
        </ul>
    </body>
</html>

Output:

Tampilan hasil tag ul di Firefox.

Jika Anda menggunakan style circle atau square yaitu dengan mendeklarasikannya dengan list-style menggunakan css, misalnya dengan teknik secara langsung seperti berikut: ul2.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag ul (dasar) html</title>
        </head>
    <body>
        <p>Daftar buah-buahan:</p>
        <ul>
            <li style="list-style: square">Apel</li>
            <li style="list-style: square">Semangka</li>
            <li>Pisang</li>
            <li>Nangka</li>
            <li style="list-style: circle">Jambu</li>
        </ul>
    </body>
</html>

Output:

Tampilan tag ul dengan list-style.

Nested UL (UL berulang).
Nested UL adalah ketika daftar item mempunyai daftar item lagi, dengan kata lain di dalam tag <li> ada tag <ul> dan tag <li>. Anda bisa membuat UL berulang sebanyak apapun. Contohnya daftar item apel terbagi dari beberapa varietas apel, misalnya Red Delicious, Golden Delicious, Fuji, Gala dan Braeburns Washington. Yang perlu Anda pahami adalah setiap tag ada penutupnya dan harus tepat peletakannya. Contoh: ul3.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag ul (dasar) html</title>
        </head>
    <body>
        <p>Daftar buah-buahan:</p>
        <ul>
            <li style="list-style: square">Apel
                <ul>
                    <li>Red Delicious</li>
                    <li>Golden Delicious</li>
                    <li>Fuji</li>
                    <li>Gala</li>
                    <li>Braeburns Washington</li>
                </ul>
            </li>
           
            <li style="list-style: square">Semangka
                <ul>
                    <li>Semangka merah</li>
                    <li>Semangka kuning</li>
                    <li>Semangka busuk</li>
                </ul>
            </li>
           
            <li>Pisang</li>
            <li>Nangka</li>
           
            <li style="list-style: circle">Jambu
                <ul>
                    <li>Jambu monyet</li>
                   
                    <li>Jambu biji
                        <ul>
                            <li>Varietas unggul</li>
                            <li>Varietas biasa</li>
                        </ul>
                    </li>
                   
                    <li>Jambu merah</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

Output:

Output tag ul nested.

Referensi tulisan:

<ul>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 07 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Jenis Apel; ditulis oleh: 100buah.wordpress.com, 100buah.wordpress.com, diakses 07 Januari 2015.

Sunday, January 4, 2015

Tag textarea HTML5

Tag <textarea> digunakan untuk menampung teks multi baris. Pada HTML5 <textarea> ditambahkan fitur-fitur di antaranya autofocus, maxlength dan minlength. Fitur-fitur ini membuat texarea tak hanya berfungsi sebagai media penampung teks saja tetapi sudah lebih interaktif.

Atribut dasar <textarea> adalah:

cols: lebar rata-rata karakter di dalam textarea, diisi dengan nilai integer. Nilai defaultnya 20.
rows: tinggi rata-rata karakter di dalam textarea.
name: nama variabel textarea.
disabled: textarea dinonaktifkan.
readonly: teks yang ada di dalam textarea tidak dapat diedit, hanya ditampilkan saja.

Contoh: textarea.html dengan name=deskripsi, cols=22, rows=10 dan disertai teks (bawaan), bisanya kosong.


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag textarea html</title>
            <style type="text/css">
            </style>
        </head>
    <body>
        <textarea name="deskripsi" cols="22" rows="10">Ini teks di dalam textarea, jika tidak ada ini dikosongkan.</textarea>
    </body>
</html>

Output:

Output di Firefox.

Contoh 2: textarea2.html dengan atribut readonly.


<!DOCTYPE HTML>

    <html>

        <head>

            <title>Contoh tag textarea html</title>

            <style type="text/css">

            </style>

        </head>

    <body>

        <textarea name="deskripsi" cols="22" rows="10" readonly>Ini teks di dalam textarea, jika tidak ada ini dikosongkan.</textarea>

    </body>

</html>

Untuk properti disabled sama seperti contoh di atas ganti readonly dengan disabled.

Textarea HTML5
Beberapa atribut textarea pada HTML5 adalah:

autofocus: posisi kursor fokus pada textarea padanya.
maxlength: membatasi (jumlah) karakter maksimal pada textarea, diisi dengan angka bulat (integer).
minlength: membatasi (jumlah) karakter minimal pada textarea,diisi dengan angka bulat (integer).
required: mengharuskan textarea harus diisi, tidak boleh kosong. Jika kosong timbul warna latar merah jambu sebagai tanda peringatan harus diisi.
placeholder: teks penanda sebagai informasi pengisian textarea. Teks placeholder akan hilang ketika user mengisi (mengetik) teks di textarea.

Catatan: atribut-atribut di atas tidak harus semua dideklarasikan, sesuaikan dengan kebutuhan saja.

Contoh: textarea3.html dengan atribut autofocus, minlength dan required.


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag textarea html</title>
            <style type="text/css">
            </style>
        </head>
    <body>
        <textarea name="deskripsi" cols="22" rows="10">Ini teks di dalam textarea, jika tidak ada ini dikosongkan.</textarea>
        <textarea name="deskripsi" cols="22" rows="10" maxlength="200" autofocus required>Ini teks di dalam textarea kedua.</textarea>
    </body>
</html>

Untuk atribut minlength sama dengan maxlength, bila perlu tinggal ganti maxlength dengan minlength.

Contoh textarea4.html dengan atribut placeholder dengan pesan: "Isi dengan data sebenarnya" yang mengharuskan user mengisi dengan data valid (tidak asal isi).


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag textarea html</title>
            <style type="text/css">
            </style>
        </head>
    <body>
        <textarea name="deskripsi" cols="22" rows="10" maxlength="200" placeholder="Isi dengan data sebenarnya" required></textarea>
    </body>
</html>

Selesai. Selamat mencoba!

Referensi tulisan:

textarea; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 04 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.