Showing posts with label menengah. Show all posts
Showing posts with label menengah. Show all posts

Sunday, April 19, 2015

Input type tel HTML5

Input type tel khusus digunakan untuk memasukkan data nomor telepon.

Deskripsi
Nomor telepon identik dengan kode area, misalnya untuk kota Padang menggunakan 0751, sedangkan di Jakarta menggunakan 021. Contoh lain nomor ponsel diawali dengan 4 angka menandakan kode kartu provider, misalnya 0853 untuk kartu AS, 0819 untuk kartu XL. Dengan ini ditarik kesimpulan nomor telepon dan ponsel memiliki format masing-masing.

Type tel
Untuk memvalidasi nomor telepon dan ponsel yang dimasukkan pengguna maka gunakanlah atribut tel. Anda dapat menentukan format sesuai keinginan.

Format
Dari penjelasan di awal kita menarik kesimpulan untuk nomor telepon formatnya: (9999)-9999999 sementara untuk nomor ponsel (9999)-9999999. Contohnya: (0751)-6294613, untuk nomor ponsel (0853)-56972846.

Sintak
<input type="tel" pattern="pattern" name="name" required />
pattern diganti dengan pattern menggunakan Regular Expresion (RegEx). Name merupakan nama variabel input type, misalnya telepon.

Pattern
Untuk nomor telepon dengan format (9999)-9999999 adalah: \(\d\d\d\d\)-\d\d\d\d\d\d\d, sedangkan untuk nomor ponsel dengan format (9999)-9999999 adalah: \(\d\d\d\d\)-\d\d\d\d\d\d\d\d. Huruf d artinya  allow digit (hanya menerim angka).

Contoh: typetel.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Input type tel html5</title>
        </head>
    <body>
<form action="" method="POST">
<label>Nomor Telepon</label>
<input type="tel" pattern="\(\d\d\d\d\)-\d\d\d\d\d\d\d" name="telepon" placeholder="(999)-99999999" required />
<br /><br />
<label>Nomor Ponsel</label>
<input type="tel" pattern="\(\d\d\d\d\)-\d\d\d\d\d\d\d\d" name="ponsel" placeholder="(9999)-999999999" required />
        <button type="submit">Oke</button>
    </form>
    </body>
</html>

Tampilan di browser:

Nomor yang dimasukkan sesuai format.
Nomor belum memenuhi format.
Referensi tulisan:
  1. How to validate phone number in Java (regular expression); ditulis oleh: Mkyong, mkyong.com, diakses 19 April 2015.
  2. tel; ditulis oleh: Kontributor W3, docs.webplatform.org, diakses 18 April 2015. "Copyright © [2015-04] World Wide Web Consortium, (MIT, ERCIM, Keio, Beihang). http://www.w3.org/Consortium/Legal/2015/doc-license"
Posted by at 1 comment:
Labels: ,

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:
  1. Easy form validation with HTML5; ditulis oleh: Danny Markov, demo.tutorialzine.com, diakses 06 Februari 2015.
Posted by at No comments:
Labels: ,

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:
  1. <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.
Posted by at No comments:
Labels: ,

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:
  1. <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.
Posted by at No comments:
Labels: ,

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:
  1. 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.
Posted by at 2 comments:
Labels: , , ,

Monday, December 15, 2014

Tag script HTML

Tag <script> digunakan untuk menyematkan skrip pada halaman HTML atau XHTML. Skrip yang sering disematkan adalah javascript, bahasa skrip yang membuat halaman web menjadi interaktif.

Beberapa atribut tag <script>:

type : tipe sript yang disematkan, contohnya adalah: text/javascript, text/ecmascript, application/javascript, and application/ecmascript.

src : sumber atau letak skrip (eksternal). Jika berada di dalam folder, tuliskan folder dan nama file skripnya, jika skrip berupa url (link), tulis alamat lengkap url-nya.

Contoh:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag script html</title>
            <script type="text/javasript" src="file.js" />
        </head>
    <body>
    <p>Bagian body</p>
    </body>
</html>

Note: file.js hanya contoh nama file skrip js, bukan nama sebenarnya.

Jika file.js ada di dalam folder dengan nama misalnya; javasc. Maka penulisannya berubah menjadi:  <script type="text/javasript" src="javasc/file.js" />

Jika file js berada di internet (dalam url) maka tulis lengkap nama url dan nama file.js. Contohnya file.js ada di situs web.com dan di foler file: http://webku.com/file/file.js maka penulisannya adalah; <script type="text/javasript" src="http://webku.com/file/file.js" />

Referensi tulisan:
  1. <script>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 16 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

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.
Posted by at No comments:
Labels: ,

Friday, October 31, 2014

Tag footer HTML

Tag <footer> biasanya berisi informasi tentang penulis atau pemilik web/blog, data hak cipta, kebijakan, privasi dan link-link terkait. Jika menuliskan informasi alamat kantor web/blog, sertakan di dalam tag <addres>. Tag footer biasanya diletakkan di bagian paling bawah, atau di kanan atau kiri bawah halaman web/blog jika menggunakan otomatis load konten (konten di load ketika halaman di geser ke bawah), namun bisa juga di mana saja, misalnya di bagian akhir artikel (footer artikel).

Sebelum jauh mengenal tag <footer>, berikut beberapa contoh tampilan footer dari berbagai gaya tampilan:

Footer situs detik.com

Footer liputan6.com

Footer tribunnews.com berada di kanan bawah tampilan.

Footer Facebook di kanan bawah.
 Footer Twitter berada di kiri bawah.
Pada beberapa kasus, blog atau web tidak menggunakan tag <footer> sebagai penanda bahwa informasi yang terkandung di dalamnya adalah informasi bagian footer. Namun, jika Anda mengikuti aturan dasar HTML yang valid, maka tag <footer> digunakan.

Penulisan tag <footer> di awali pembuka dan penutup. Tag <footer> boleh lebih dari satu kali dideklarasikan di halaman yang sama.

Contoh penulisan standar: footer.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag footer HTML</title>
        </head>
    <body>
    <div id="header">Di sini header....</header>
    <div id="content">Di sini content web...</div>
<footer>
    <a href="about.html">Tentang</a> - <a href="privasi.html">Privasi</a> -
    <a href="kontak.html">Contact</a>
    <address>Alamat kami: Jl. Juanda Gg. Hidayah No. 5 Padang, Sumatera Barat, Indonesia.
    </address>
</footer>
    </body>
</html>

Output:


Contoh lain bisa dilihat di sini.

^Baca juga: Tag ins HTML.

Referensi tulisan:
  1. <footer>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 31 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at 1 comment:
Labels: , ,

Tuesday, October 28, 2014

Tag figure dan figcaption

Tag <figure> digunakan untuk mewakilkan gambar, ilustrasi, diagram, potongan kode, skema atau sejenisnya. Untuk menjelaskan apa maksud objek yang berada di dalam tag figure, digunakan tag <figcaption>. Tag <figcaption> bersifat opsional, jika gambar, ilustrasi, potongan kode atau sejenisnya maknanya sudah jelas, maka tak perlu ada teks keterangan yang dibuat dengan tag figcaption.

Contoh 1; <figure> tanpa figcaption dengan tag img (menampilkan gambar/foto) : figure.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag figure dan figcaption</title>
        </head>
    <body>
    <figure>
        <img src="lake_toba.jpg" alt="Danau Toba" />
    </figure>
    </body>
</html>

Note: Gambar "lake_toba.jpg" bisa diganti dengan gambar apapun yang Anda mau.

Contoh 2, figure dengan tag figcaption: figure2.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag figure dan figcaption</title>
        </head>
    <body>
    <figure>
        <img src="lake_toba.jpg" alt="Danau Toba" />
        <figcaption>Ini adalah Danau Toba, danau vulkanik dengan ukuran panjang 100 kilometer dan lebar 30 kilometer yang terletak di Provinsi Sumatera Utara, Indonesia.
        </figcaption>
    </figure>
    </body>
</html>

Tag figure caption juga bisa dalam menjelaskan potongan kode, misalnya kode html yang di bawahnya terdapat penjelasan tentangnya, sehingga pengunjung web lebih mudah memahaminya.

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag figure dan figcaption</title>
        </head>
    <body>
    <figure>
        <figcaption>Contoh potongan kode penggunaan tag figure dan figcaption: </figcaption>
            <br />
<code>
&lt;figure&gt;<br />
&lt;img src="lake_toba.jpg" alt="Danau Toba" /&gt;<br />
&lt;figcaption&gt;Ini adalah Danau Toba, danau vulkanik
dengan ukuran panjang 100 kilometer dan lebar 30 kilometer
yang terletak di Provinsi Sumatera Utara, Indonesia.<br />
&lt;/figcaption&gt;<br />
&lt;/figure&gt;
</code>
</figure>
    </body>
</html>

Output:


Referensi tulisan:
  1. <figure>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 29 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
  2. <figcaption>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 29 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
  3. Danau Toba; ditulis oleh: Kontributor Wikipedia, id.wikipedia.org, diakses 29 Oktober 2014.
Posted by at No comments:
Labels: ,

Saturday, October 25, 2014

Tag fieldset HTML

Tag <fieldset> digunakan untuk mengelompokkan beberapa beberapa kontrol pada sebuah form yang memberikan informasi tambahan tentang kontrol. Untuk memberikan nama kelompok digunakan tag <legend>. Contohnya nama fieldset 'Buah' yang di dalamnya berisi informasi macam-macam buah. Kontrol di dalam fieldset bisa berupa checkbox, radio button, text, selet dan sebagainya. Jumlahnya bisa satu atau lebih.

Contoh: fieldset.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag fieldset html</title>
            <!-- Css ini hanya tambahan, hanya untuk mempercantik tampilan
            elemen form, tidak menjadi syarat.
            -->
            <style type="text/css">
            body{background-color:#F5F5F5;}
            input{border:1px solid #BFBFBF;padding:6px;margin-bottom:5px;}
            input.sz{width:300px;}
            input:focus{border:1px solid #000;}
            </style>
        </head>
    <body>
    <form>
    <fieldset>
    <legend>Buah</legend>
    <input type="checkbox" name="pisang" value="Pisang" checked> Pisang
    <input type="checkbox" name="apel" value="Apel"> Apel
    <input type="checkbox" name="melon" value="Melon"> Melon
    <input type="checkbox" name="Pir" value="Melon"> Pir
    </fieldset>
    <br />
   
    <fieldset>
    <legend>Mata uang</legend>
    <input type="radio" name="radio1" value="Pisang" checked> Rupiah
    <input type="radio" name="radio1" value="Apel"> Dollar
    <input type="radio" name="radio1" value="Melon"> Euro
    <input type="radio" name="radio1" value="Melon"> Poundsterling
    </fieldset>
    <br />
    <fieldset>
    <legend>Klub sepakbola</legend>
    <select name="pilih">
    <option value="arsenal">Arsenal</option>
    <option value="chelsea">Chelsea</option>
    <option value="mu">Manchester United</option>
    <option value="lvpool">Liverpool</option>
    </select>
    </fieldset>
    </form>
    </body>
</html>

Output:


Di HTML5 tag fieldset mendukung fitur disabled, membuat suatu kontrol di dalam suatu fieldset tidak bisa dipilih, diedit atau berinteraksi dengannya. Sebagian besar browser menampilkannya dalam warna abu-abu.

    <fieldset disabled="disabled">
    <legend>Mata uang</legend>
    <input type="text" value="Informasi mata uang" />
    <br />
    <input type="radio" name="radio1" value="Pisang" checked> Rupiah
    <input type="radio" name="radio1" value="Apel"> Dollar
    <input type="radio" name="radio1" value="Melon"> Euro
    <input type="radio" name="radio1" value="Melon"> Poundsterling
    </fieldset>

Output:

^Baca juga: Tag <figure> dan tag <caption> HTML5.

Referensi tulisan:
  1. <fieldset>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 25 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: , ,

Sunday, October 19, 2014

Tag embed HTML

Tag <embed> digunakan untuk mengintegrasikan aplikasi eksternal atau konten interaktif, dengan kata lain plug-in. Contoh file yang dapat diembed yaitu gambar, kode program javascript, video, suara dan file css.

Atribut tag embed:
height: Ukuran tinggi resource yang diembed.
src: Sumber resource.
type: Tipe resource yang diembed, misalnya video swf, mov atau avi. Daftar tipe MIME yang dapat diembed bisa dilihat di sini.
width: Ukuran lebar resource yang diembed.

Sintax: <embed type="tipe_MIME" src="sumber_resource" width="angka" height="angka">

Contoh: embed.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag embed HTML</title>
        </head>
    <body>
    <embed type="application/x-shockwave-flash" src="videoku.swf" width="650" height="300">
    </body>
</html>

Note: "videoku.swf" silahkan diganti dengan video Anda yang memiliki ekstensi swf.

Nilai atribut width dan height pada contoh di atas dituliskan secara langsung, selain itu bisa juga diatur dengan css.

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag embed HTML</title>
            <style type="text/css">
            .embedWH{width:650px;height:300px;}
            </style>
        </head>
    <body>
    <embed type="application/x-shockwave-flash" src="videoku.swf" class="embedWH">
    </body>
</html>

^Baca juga: Tag <fieldset> dan tag <legend> untuk mengelompokkan kontrol.

Referensi tulisan:
  1. <embed>; ditulis oleh: Tim MDN (Mozilla Developer Network), developer.mozilla.org, diakses 20 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: , ,

Friday, October 17, 2014

Tag div HTML

Tag <div> mendefenisikan suatu blok pada web sebagai wadah penampung komponen web yang tidak memberikan 'efek' apapun. Berbeda dengan tag <hr>: membuat garis, <b>: membuat huruf tebal, tag div tidak memberikan efek apapun. Anda bisa langsung mengisi konten (teks, gambar, video) ke dalam tag div atau menggunakan tag-tag lain di dalamnya, seperti <p>, <a>, <table>, <em> dan tag lainnya.

Tag <div> tidak membutuhkan tag <br> untuk berpindah baris (enter), karena apa yang di bawahnya otomatis tidak akan sejajar dengannya. Berbeda dengan teks biasa, Anda butuh tag br untuk membuat baris baru.

Contoh: div.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag div HTML</title>
        </head>
    <body>
    <div>
    <p>Wiki tipspengetahuan merupakan kanal artikel dari tipspengetahuan
    yang menyajikan artikel wiki, siapapun dapat menulis dan mengeditnya
    untuk menjadi artikel sempurna.
    </p>
    </div>
    <div>
    Tipspengetahuan.com 2012-2014
    </div>
    </body>
</html>

Output:


Untuk pemformatan gunakan css, seperti mengatur nama font, ukuran font, line height (spasi vertikal teks) dan atribut css umum lainnya. Anda dapat mendeklarasikan class atau id di css yang nantinya di panggil di tag div. Ingat, jika menggunakan id(#) nama id hanya bisa sekali dipanggil di satu halaman, tetapi class(.) boleh berulang kali.

Contoh: div2.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag div HTML</title>
            <style type="text/css">
            .content{
            font-family:Tahoma;
            font-size:13px;
            line-height:17px;
            }
          
            #footer{
            font family: Georgia;
            font-size:11px;
            font-style:italic;
            }
            </style>
        </head>
    <body>
    <div class="content">
    <p>Wiki tipspengetahuan merupakan kanal artikel dari tipspengetahuan
    yang menyajikan artikel wiki, siapapun dapat menulis dan mengeditnya
    untuk menjadi artikel sempurna.
    </p>
    </div>
    <div id="footer">
    Tipspengetahuan.com 2012-2014
    </div>
    </body>
</html>

Output:


^Baca juga: Tag <embed> untuk menanamkan file dan resource interaktif.

Referensi tulisan:
  1. <div>; ditulis oleh: Kontributor MDN (Mozilla Developer Network), developer.mozilla.org, diakses 18 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

Wednesday, October 15, 2014

Tag dfn HTML

Tag <dfn> digunakan untuk mendefenisikan istilah. Untuk menghubungkan kata istilah dengan penjelasannya digunakan tag <a> yang mengarah pada halaman yang sama. Misalnya kata istilah ada di awal atau di tengah halaman kemudian penjelasan ada di bagian bawah, maka link kata istilah jika diklik maka browser akan menggeser (fokus) ke kalimat penjelas.

Untuk mengujinya teks pada halaman harus banyak (melebihi batas normal) vertical scroll bar. Contoh di bawah hanya menggunakan teks sedikit (agar contoh kode tidak terlalu panjang). Sialahkan tambahkan teks apa saja di bagian Media sosial adalah...

Tag dfn memiliki atribut id yang nilainya sama dengan nilai href pada tag a (diawali dengan tanda #). Tag dfn berhubungan dengan tag ddl-dt-dd dan tag abbr.

Contoh:

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag dfn HTML</title>
        </head>
    <body>
    <p><dfn id="dfnFb">Facebook</dfn> adalah media sosial yang diciptakan Mark Zuckerberg.
    Facebook dikenal sebagai Fb atau F mampu menghubungkan orang dari segala penjuru dunia
    selama tersedia koneksi internet.
    </p>
   
<dl>
    <dt>
        <dfn>
            <abbr title="Media Sosial">Media Sosial</abbr>
        </dfn>
    </dt>
        <dd>Media sosial adalah situs yang bisa menghubungkan, mendekatkan, memudahkan
        para penggunanya untuk berinteraksi dan berbagi, contohnya <a href="#dfnFb">Facebook</a>.
    </dd>
</dl>
    </body>
</html>

Output:

^Baca juga: Tag <div> HTML untuk membuat blok-blok.

Referensi tulisan:
  1. <dfn>; ditulis oleh: Kontributor MDN (Mozilla Developer Network), developer.mozilla.org, diakses 15 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

Saturday, October 11, 2014

Tag dl, dt dan dd HTML

Ketiga tag <dl>, <dt> dan <dd> digunakan untuk menampilkan glosarium atau menampilkan metadata. Bahasa sederhananya menuliskan istilah dan menuliskan juga pengertiaannya. Tag dl menandakan satu blok glosarium, tag dt berisi kata istilah dan tag dd berisi deskripsi dari tag dt. Teks yang berada di dalam tag dd otomatis menjorok ke dalam.

Contoh: ddd.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag dt, dl, dd HTML</title>
        </head>
    <body>
    <dl>
        <dt>Private browsing</dt>
        <dd>Mengakses internet dengan private, browser tidak akan menyimpan
        sesi, cookie, password dan data penjelajahan. Private browsing sangat
        cocok diaktifkan ketika menggunakan komputer umum.
        </dd>
    </dl>
    </body>
</html>

Ouput:

Satu deklarasi tag dd menandakan satu paragraf atau satu penjelas. Jika masih ada penjelasan lain terkait istilah, deklarasikan kembali dalam tag dd, begitu juga dengan paragraf berikutnya.

ddd2.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag dt, dl, dd HTML</title>
        </head>
    <body>
    <dl>
        <dt>Private browsing</dt>
        <dd>Mengakses internet dengan private, browser tidak akan menyimpan
        sesi, cookie, password dan data penjelajahan. Private browsing sangat
        cocok diaktifkan ketika menggunakan komputer umum.
        </dd>
        <dd>
        Untuk mengaktifkan private browsing di Mozilla Firefox,
        dari Menu pilih New Private Window.
        </dd>
    </dl>
    </body>
</html>

Output:


Jika beberapa istilah namun tetap satu deskripsi berarti tag dt lebih dari satu kali dideklarasikan dan hanya satu tag dd.

ddd3.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag dt, dl, dd HTML</title>
        </head>
    <body>
    <dl>
        <dt>Facebook</dt>
        <dt>Fb</dt>
        <dt>F</dt>
        <dd>Media sosial yang diciptakan oleh Mark Zuckerberg
        yang memudahkan semua orang di dunia dapat terhubung,
        di manapun kapan pun..
        </dd>
    </dl>
    </body>
</html>

Output:


Sedangkan untuk penggunaan medatada berikut adalah contohnya:

ddd4.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag dt, dl, dd HTML</title>
        </head>
    <body>
    <dl>
        <dt>Nama</dt>
        <dd>Erwin Sholeh Siregar</dd>
        <dt>Lahir</dt>
        <dd>24 April 1991</dd>
        <dt>Website</dt>
        <dd>tipspengetahuan.com</dd>
        <dt>Keahlian</dt>
        <dd>Web developer, penulis, blogger</dd>
    </dl>
    </body>
</html>

Output:

^Baca juga: Tag <del> HTML untuk menandai teks yang tidak berlaku lagi.

Referensi tulisan:
  1. <dl>; ditulis oleh: Kontributor MDN (Mozilla Developer Network), developer.mozilla.org, diakses 11 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: , ,

Wednesday, October 8, 2014

Tag datalist HTML5

Tag <datalist> digunakan untuk menampilkan daftar dalam sebuah kotak teks (text box). Ketika Anda mengetikkan awalan huruf yang sama dengan daftar, maka akan ditampilkan saran pilihan (mirip autocomplete). Ini memudahkan memilih satu pilihan dari sekian daftar yang tersedia.


Tag datalist digabung dengan tag <input> dengan atribut list (daftar) pilihan. Nama atribut list pada tag input menjadi nilai id pada tag datalist. Untuk isi daftar dimuat dalam tag <option> dengan atribut value. Hampir sama dengan dengan ketika Anda membuat daftar dengan tag <select> dengan atribut name dan tag option untuk menampung data daftar.

datalist.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag datalist HTML5</title>
        </head>
    <body>
<div>Dari mana Anda berasal:</div>
<input list="kota" />
<datalist id="kota">
  <option value="Medan">
  <option value="Bandung">
  <option value="Jakarta">
  <option value="Palembang">
  <option value="Padang">
  <option value="Malang">
  <option value="Madura">
  <option value="Madiun">
  <option value="Batu">
  <option value="Blitar">
  <option value="Nganjuk">
  <option value="Nabire">
  <option value="Pekanbaru">
  <option value="Pontianak">
  <option value="Pekalongan">
  <option value="Riau">
</datalist>
    </body>
</html>

^Baca juga: Tag <dl>, <dt> dan <dd> untuk membuat daftar kata istilah dan penjelasannya.

Referensi tulisan:
  1. <datalist>; ditulis oleh: Kontributor MDN (Mozilla Developer Network), developer.mozilla.org, diakses 09 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

Sunday, October 5, 2014

Tag cite HTML

Tag cite digunakan untuk menuliskan sumber kutipan. Sebagaimana diketahui, setiap karya di internet memiliki hak cipta. Untuk menghargai karya orang lain dan agar tidak disebut plagiat, harus menuliskan sumbernya. Menuliskan sumber kutipan secara online memakai tag <cite>. Berikut penjelasan w3.org tentang tag cite:
Meskipun versi sebelumnya HTML tersirat bahwa mengutip elemen dapat digunakan untuk menandai nama seseorang, penggunaan ini tidak lagi dianggap sesuai. Mengutip elemen sekarang semata-mata untuk judul yang dikutip dari karya; misalnya, judul buku, paper, esai, puisi, skor, lagu, naskah, film, acara TV, game, patung (seni rupa), lukisan, produksi teater, play, opera, musik, pameran, laporan kasus hukum, atau lainnya sejenis karya.
— cite – cited title of a work, oleh Tim W3, diakses 06 Okotber 2014.
Isi kutipan mencakup judul, nama pengarang dan url (link). Tetapi yang atribut yang memakai tag cite hanya untuk judul karya saja, selainnya tidak. Tambahkan juga atribut lainnya, seperti tanggal akses. Jika mengutip dari sumber online, gunakan tag <blockquote> pada kutipan. Contoh:

cite.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Atribut murni rtl HTML</title>
        </head>
    <body>
Penjelasan tag &lt;cite&gt; versi MDN (Mozilla Developer Network, judul artikel: &lt;cite&gt;, ditulis oleh Tim MDN, diakses 06 Oktober 2014:
<blockquote>
HTML &lt;cite&gt; Elemen (atau HTML Citation Elemen)
merupakan referensi untuk sebuah karya kreatif.
Ini harus mencakup judul karya, nama penulis, atau referensi URL,
yang mungkin dalam bentuk singkatan sesuai
dengan konvensi yang digunakan untuk penambahan kutipan metadata.
<br />
— <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite" target="_blank"><cite>&lt;cite&gt;</cite></a>, oleh Tim MDN, diakses 06 Okotber 2014.
</blockquote>
    </body>
</html>

^Baca juga: Tag <code> HTML untuk menuliskan kode program di halaman web.

Referensi tulisan:
  1. <cite>; ditulis oleh: Tim MDN, developer.mozilla.org, diakses 06 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
  2. cite – cited title of a work; ditulis oleh: Tim W3, w3.org, diakses 06 Oktober 2014.
Posted by at No comments:
Labels: , ,

Thursday, October 2, 2014

Tag bdo HTML


Tag <bdo> digunakan untuk untuk memutar arah baca teks seperti gambar di atas. Normalnya teks biasa dibaca dari kiri ke kanan, tetapi bila diterapkan tag bdo maka teks dibaca dari kanan ke kiri.

bdo.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag bdo HTML</title>
        </head>
    <body>
<p>Saya berusaha bangun pagi dengan tepat waktu.</p>
<p><bdo dir="rtl">Saya berusaha bangun pagi dengan tepat waktu.</bdo></p>
    </body>
</html> 

Tag bdo berhubungan dengan atribut dir (direction/arah teks), yaitu mengatur pembacaan arah teks, apakah dari kiri ke kanan; ltr, kanan ke kiri; rtl dan inherit. Untuk tag bdo berlaku atribut ltr. Sebagai perbandingan jika tidak memakai tag bdo, murni memakai atribut dir rtl, maka hasilnya seperti berikut:


Anda lihat tampilan di atas, teks hanya pindah ke kanan tanpa mengubah arah baca.

dirrtl.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Atribut murni rtl HTML</title>
        </head>
    <body>
<p>Saya berusaha bangun pagi dengan tepat waktu.</p>
<p dir="rtl">Saya berusaha bangun pagi dengan tepat waktu.</p>
    </body>
</html>

^Baca juga: Tag <cite> HTML untuk membuat sumber kutipan.

Referensi tulisan:
  1. direction; ditulis oleh: Tim MDN (Mozilla Developer Network, developer.mozilla.org, diakses 03 Oktober 2014.
  2. <bdo>; ditulis oleh: Tim MDN (Mozilla Developer Network, developer.mozilla.org, diakses 03 Oktober 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

Sunday, September 28, 2014

Tag audio HTML5

Tag <audio> HTML5 digunakan untuk memutar file audio di halaman web. Contoh file audio yang didukung berupa MP3, AAC, Oog, WAV. Tetapi format yang didukung hampir semua browser populer adalah formpat MP3 dan AAC. Tag <audio> menggunakan atribut src yang menunjukkan sumber dan nama audio.

Contoh sederhana (siapkan 1 file audio apa saja):

audio.html

<!DOCTYPE HTML>
    <html>
        <head>
        <title>Tag audio HTML5</title>
        </head>
    <body>
    <!--
    controls digunakan untuk menampilkan menu kontrol
    pada pemutaran audio, seperti adanya pengaturan volume
    dan play-pause
    -->
    <!--Jika Anda meletakkan file audio di dalam folder,
    tuliskan nama folder kemudian nama audio. misalnya:
    src="audio/nama_audio.m3"
    -->
    <strong>Surat Al Fatihah oleh Fahd al kanderi:</strong>
    <br />
    <br />
    <audio controls src="alfatihah_alkanderi.mp3">
    <!--Jika browser tidak mendukung tag audio, tampilkan
    peringatan
    -->
    <p>Maaf, browser Anda tidak mendukung tag audio. Update segera
    browser Anda.
    </p>
    <!--Jika ingin ketika audio di tampilkan langsung diputar,
    tambahkan atribut autoplay.
    <audio controls src="alfatihah_alkanderi.mp3" autoplay></audio>
    -->
    </audio>
</body>
</html>

Tampilan di Firefox 32.0.2:


^Baca juga: Tag <base> HTML untuk membuat alamat dasar web.

Referensi tulisan:
  1. <audio>; ditulis oleh: Tim MDN (Mozilla Developer Network), developer.mozilla.org, diakses 29 September 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
  2. HTML/Elements/audio; ditulis oleh Tim W3C, w3.org, diakses 29 September 2014.
  3. HTML5 Audio; ditulis oleh Kontributor Wikipedia, en.wikipedia.org, diakses 29 September 2014.
Posted by at No comments:
Labels: ,

Friday, September 26, 2014

Tag aside HTML 5

Aside atau as side merupakan tag HTML5 berisi informasi yang masih berkaitan dengan konten utama, tetapi beridiri sendiri. Bingung? Penulis beri contoh saja, penggunaannya untuk artikel atau informasi terkait, menu untuk share ke media sosial, penempatan iklan, informasi pemilik blog, dan informasi aplikasi web untuk ponsel pintar.

Contoh penerapan tag aside (mashable.com)

Tag <aside> dalam bahasa Indoensia diartikan "selain". Selain dari konten, tetapi masih berkaitan. Penempatannya bisa di mana saja, tak harus di side bar. Tag aside memiliki tag pembuka <aside> dan penutup </aside>. Tag aside menudukung css untuk pemformatan dan tata letak. Tag aside bisa berada di dalam tag article atau berdiri sendiri.

Contoh: aside.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag aside</title>
            <style type="text/css">
            #isi{font-family: Tahoma, Verdana; width:850px;font-size:12px;}
            #kiri{width:490px; padding:right:8px;
            display:inline-block;
            border-right:1px solid #ccc;float:left;}
            #kanan{width:330px;margin-left:20px; float:left;}
            aside.ref{background-color:#FAFAFA;}
            aside.share{background-color:#FAFAFA;
            pading:5px;width:490px; height:40px;}
            aside.author{background-color:#FAFAFA;font-size:10px;}
            </style>
        </head>
    <body>
    <div id="isi">
        <div id="kiri">
<article>
        <strong>Tag aside share: Di sini kode share ke fb, twitter, Google+</strong>
        <aside class="share">
        Fb, Google+, Twitter.
        </aside>
        <p>Muhammad bin Abdullah (lahir di Mekkah, 20 April 570 – meninggal di Madinah,
        8 Juni 632 pada umur 62 tahun) adalah seorang nabi dan rasul yang terakhir bagi
        umat Muslim. Muhammad menciptakan ajaran dan ilmu pengetahuan berupa agama Islam.
        </p>
        <p>
        Michael H. Hart dalam bukunya The 100 menilai Muhammad sebagai
        tokoh paling berpengaruh sepanjang sejarah manusia. Menurut Hart,
        Muhammad adalah satu-satunya orang yang berhasil meraih
        keberhasilan luar biasa baik dalam hal spiritual maupun kemasyarakatan.
        Hart mencatat bahwa Muhammad mampu mengelola bangsa yang awalnya egoistis,
        barbar, terbelakang, dan terpecah-belah oleh sentimen kesukuan menjadi
        bangsa yang maju dalam bidang ekonomi, kebudayaan, dan kemiliteran
        bahkan sanggup mengalahkan pasukan Romawi yang saat itu merupakan
        kekuatan militer terdepan di dunia.
        </p>
<strong>Tag aside tentang penulis:</strong>
        <aside class="author">
        Artikel ini ditulis oleh kontributor Wikipedia, dengan url: http://id.wikipedia.org/wiki/Muhammad
</aside>
</article>
        </div>
 
        <div id="kanan">
        <strong>Tag aside informasi terkait:</strong>
        <aside class="ref">
        Gelar: Khatamul Anbiya, al-Mahi, Nabi ar-Rahmah, Rasulullah/Rasul (utusan),
        An-Nabi, Syahidan (Saksi), Mubasysyiran (Pemberi kabar gembira),
        Nazhir (Pemberi peringatan), Da'i (Penyeru kepada Allah)[1] Al-Mustafa,
        Al-Amin, Shalallahu alaihi wa Salam.
        </aside>
        </div>

</div>
</body>
</html>

Tampilan:


^Baca juga: Tag <audio> HTML5 untuk memasukkan file audio ke halaman web.

Referensi tulisan:
  1. <aside>; ditulis oleh: Tim MDN (Mozilla Developer Network, developer.mozilla.org, diakses 27 September 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
  2. Muhammad, ditulis oleh Kontributor Wikipedia, id.wikipedia.org, diakses 27 September 2014.
Posted by at 1 comment:
Labels: ,
Subscribe to: Posts (Atom)