Blog Belajar HTML

Saturday, February 7, 2015

Input type email HTML5

Pada HTML elemen <input> type terdapat atribut baru yaitu email. Bidang input yang hanya menerima email. Ini sangat penting untuk memastikan yang diinput harus benar-benar email. Contohnya saat validasi pendaftaran online yang memerlukan data email.

Seperti diketahui salah satu atribut yang harus ada pada alamat email adalah tanda '@' setelah nama email, tanda dot (.) setelah penyedia layanan email, kemudian teks setelahnya, misalnya com, org, net. Inilah yang dibaca oleh atribut HTML5 ini, harus ada.

Contoh: typeemail.html


<!DOCTYPE HTML>

    <html>

        <head>

            <title>Contoh tag input type email</title>

        </head>

  <body>

    <form action="">

    Email Anda: <input type="email" name="email" required/>

    <button type="submit">Test</button>

    </form>

</body>

</html>

Output:

Pastikan yang diinput harus email.

Note: Atribut required memastikan bidang harus diisi, tidak boleh kosong.

Referensi tulisan:

Easy form validation with HTML5; ditulis oleh: Danny Markov, demo.tutorialzine.com, diakses 06 Februari 2015.

Thursday, February 5, 2015

Input type number HTML5

Pada HTML5, tag <input> memiliki atribut type baru yaitu number. Atribut number digunakan untuk memastikan inputan user hanya berupa angka, tidak diizinkan karakter lain. Atribut ini sangat penting saat validasi data, misalnya data umur. Umur bernilai angka, maka tidak menerima karakter string.

Contoh penggunaan: typeatribut.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag type atribut number</title>
        </head>
    <body>
    Masukkan umur: <input type="number" name="umur" required/>
    </body>
</html>

Output:

Tampilan di Firefox 35.01.

Anda dapat mengetik langsung angka ke dalamnya atau mengklik tanda panah atas dan panah bawah di samping kanan bidang. Arah atas untuk angka menaik, arah bawah untuk menurun.

Klik arah atas atau bawah.

Jika seandainya user memasukkan bukan angka dan mengklik sembarang di area kosong (fokus kursor berpindah dari bidang) maka timbul warna latar merah muda sebagai peringatan bahwa harus diisi dengan angka dan tidak boleh kosong.

Tidak boleh kosong dan harus diisi dengan angka.

Referensi tulisan:

Easy form validation with HTML5; ditulis oleh: Danny Markov, demo.tutorialzine.com, diakses 06 Februari 2015.

Sunday, February 1, 2015

Tag meta charset HTML5

Di HTML5, tag <meta> memiliki atribut baru yaitu charset. Charset digunakan pengkodean karakter yang digunakan dalam halaman web. Di HTML 4, charset sama dengan http-equiv content. Lihat perbedaan penulisannya di HTML5 dan HTML 4:

metahtml4.html


<!DOCTYPE HTML>
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <head>
            <title>Ini judul halaman web</title>
        </head>
    <body>
        ini bagian konten..
    </body>
</html>

metahtml5.html


<!DOCTYPE HTML>

    <html>

    <meta charset="utf-8">

        <head>

            <title>Di sini judul halaman web</title>

        </head>

    <body>

        di sini bagian konten..

    </body>

</html>

Pengkodean karakter paling populer adalah utf-8 dan sangat dirokemandasikan karena keamanannya menjanjikan dan populer. Utf-8 juga mendukung tulisan arab, jadi jika halaman web halaman Anda berisi seputar artikel agama yang memerlukan dalil Al-Qur'an dan hadits, maka utf-8 menjadi pilihan utama.

Referensi tulisan:

<meta>; ditulis oleh: Kontibutor MDN, developer.mozilla.org, diakses 01 Februari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

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.