Thursday, December 18, 2014

Tag small HTML

Tag <small> digunakan untuk membuat ukuran font lebih kecil dari ukuran default yang ditampilkan browser. Untuk HTML5, tag <small> digunakan untuk menulis catatan singkat, keterangan hak cipta dan sejenisnya yang tidak terlalu perlu ditonjolkan dari teks lainnya.

Contoh:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag small html</title>
        </head>
    <body>
    <p>Ini adalah teks ukuran default browser IE.<br><br>
    <small>Sedangkan teks ini dengan tag small.</small></p>
    </body>
</html>


Output:
Tampilan tag small di IE (Internet Explorer).
Referensi tulisan:
  1. ; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 19 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

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.

Thursday, December 11, 2014

Tag samp HTML

Tag <samp> HTML digunakan untuk menampilkan contoh output program komputer. Hal ini biasanya ditampilkan dalam jenis font default browser (dalam hal ini font Lucida Console).

Contoh:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag samp html</title>
        </head>
    <body>
    <p>Ini teks normal (default font) di browser IE</p>
    <p><samp>Ini tampilan teks dengan tag samp</samp></p>
    </body>
</html>


Output:
Tampilan tag samp di IE.
Referensi tulisan:
  1. <samp>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 12 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Monday, December 8, 2014

Tag q HTML

Tag <q> digunakan menandai teks sebagai kutipan singkat. Kutipan singkat artinya kutipan tidak berbentuk paragraf tetapi beberapa kata saja. Untuk kutipan panjang gunakan tag <blockquote>.

Atribut tag <q>:

cite: Link (url) artikel yang dijadikan sebagai kutipan.

Contoh:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag q html</title>
        </head>
    <body>
    Facebook merupakan media sosial nomor satu di dunia.
    <q cite="http://id.wikipedia.org/wiki/Facebook,_Inc.">Facebook melakukan penawaran umum perdana pada tanggal 1 Februari 2012.</q>
    </body>
</html>


Output:
Output tag q di Firefox.
Referensi tulisan:
  1. <q>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 09 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Friday, December 5, 2014

Tag progress HTML

Tag <progress> digunakan untuk menampilkan suatu proses task (tugas) yang sedang berlangsung. Contoh sederhananya, bayangkan ketika Anda mengcopy suatu file ke flashdisk, saat proses copy berlangsung, itu ada progress bar (warna hijau) yang bergerak ke arah kanan menunjukkan tahap proses pengopian.

Proses copy file dengan progress bar warna hijau.
Beberapa atribut tag <progress>:

max : nilai maksimal yang menandakan proses selesai.
value : nilai proses yang sedang berlangsung (sedang dikerjakan).

Note: Progress bar HTML hanya bersifat statis, progress bar tidak bergerak sesuai tahap proses tugas yang dikerjakan, jika ingin membuatnya bergerak (dinamis) dengan tambahan javascript, silahkan pelajari di sini.

Contoh tag <progress> HTML (statik): progress.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag progress html</title>
        </head>
    <body>
        Contoh tag progress:<br />
        <progress value="90" max="150">90 %</progress>
    </body>
</html>


Output:
Tampilan tag <progress> di Firefox.
Referensi tulisan:
  1. <progress>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 06 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Thursday, December 4, 2014

Tag pre HTML

Tag <pre> digunakan untuk menampilkan teks apa adanya, artinya teks yang diapitnya yang diketik di editor (contoh Notepad++) ditampilkan persis sama di browser. Spasi kosong dan baris baru pun dianggap sebagai pemformatan.
Contoh: pre.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag pre</title>
        </head>
    <body>
        <pre>
            Teks ini   akan ditampilkan di browser
            seperti ini juga.
               Oke!
        </pre>

    </body>
</html>


Output:
Tampilan tag pre di Firefox.
Tag pre juga sangat membantu ketika menuliskan kode di browser; misalnya kode css. Seperti diketahui, agar kode css mudah dibaca maka baris-baris kode ditulis menjorok ke dalam untuk menandakan satu blok.
Contoh: pre2.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag pre</title>
        </head>
    <body>
        <pre>
            p{
                font-size:12px;
            }
           
            body{
                margin:0 auto;
                width: 900px;
            }
        </pre>

    </body>
</html>


Output:
Pemformatan persis seperti saat ditulis di editor.
Referensi tulisan:
  1. <pre>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 04 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Monday, December 1, 2014

Tag option HTML

Tag <option> digunakan untuk membuat daftar item-item pada tag<select>, <datalist> dan <optgroup>. Tag option memiliki tag pembuka (<option>) dan penutup (</option>).

Beberapa atribut tag option:

disabled: Jika atribut ini dipakai maka pilihan daftar tidak bisa dipilih. Sebagian browser menampilkan pilihan dengan warna abu-abu, menandakan dalam kondisi tidak bisa dipilih.

label: Atribut untuk memberi kategori (label) dari daftar pilihan. Misalnya kategori buah berisi daftar; pisang, semangka, apel, jeruk dan lainnya.

selected: Atribut ini dideklarasikan untuk menentukan suatu daftar pilihan dalam kondisi terpilih.

value: Atribut ini berisi nilai dari suatu daftar pilihan yang akan disimpan ke database (jika dikombinasikan ke php). Jika tidak dideklarasikan, maka nilai defaultnya adalah teks di antara tag option.

Contoh:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag option</title>
        </head>
    <body>
    <select>
      <optgroup label="Sayuran">
        <option value="bayam">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 selected>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 "Kacang kedelai" dalam posisi terpilih.
Referensi tulisan:
  1. <option>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 02 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.