Blog Belajar HTML: December 2014

Wednesday, December 31, 2014

Tag sup HTML

Tag <sup> atau Superscript digunakan untuk menaikkan karakter lebih tinggi dari karakter di sampingnya. Contohnya menulis kesetaraan nilai energi dan massa oleh Einstein E=mc2. Angka 2 perlu dinaikkan lebih tinggi dari huruf c atau m, untuk itulah dibutuhkan tag sup.

Maka penulisannya dalam bentuk file html; sup.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag sup html</title>
        </head>
    <body>
        <p>Albert Einstein menemukan rumus fenonemal: E=mc<sup>2</sup></p>
    </body>
</html>

Output:

Tampilan tag sup di Firefox.

sup versi css
Efek tag sub juga bisa dibuat dengan css menggukan properti vertical-align: super. vertical-align artinya rata teks pada posisi vertikal dan super adalah nilainya. Super diartikan berada (lebih) di atas. Skrip; supcss.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag sup html</title>
            <style type="text/css">
                span.teksup{
                vertical-align:super;
                }
            </style>
        </head>
    <body>
        <p>Albert Einstein menemukan rumus fenonemal: E=mc<span class="teksup">2</span></p>
    </body>
</html>

Output:

Output tag sup versi css.

Referensi tulisan:

Playit Vertical Align CSS; ditulis oleh: W3Schools.com, w3schools.com, diakses 01 Januari 2015.
E=mc²; ditulis oleh: Kontributor Wikipedia, id.wikipedia.org, diakses 01 Januari 2015.

Sunday, December 28, 2014

Tag sub HTML

Tag <sub> atau Subscript digunakan untuk menampilkan huruf/angka lebih rendah dari karakter sebelum atau sesudahnya. Contohnya saat penulisan rumus kimia: H2O, di mana angka 2 ditampilkan turun ke bawah (lebih kecil).

Penulisan sintax: <sub>huruf/angka</sub>. Contoh; sub.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag sub html</title>
        </head>
    <body>
        <p>Rumus kimia air adalah: H<sub>2</sub>O</p>
    </body>
</html>

Output:

Output tag sub di Firefox.

Versi css
Untuk hasil yang hampir sama Anda juga bisa membuatnya dalam versi css yaitu menggunakan style vertical-align: sub seperti berikut: subcss.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag sub html</title>
            <style type="text/css">
            span.teksub{
                vertical-align:sub;
            }
            </style>
        </head>
    <body>
        <p>Rumus kimia air adalah: H<span class="teksub">2</span>O</p>
    </body>
</html>

Output:

Output dengan style vertical align di Firefox.

Referensi tulisan:

<sub>; ditulis oleh: Kontributor MDN, developer.mozill.org, diakses 29 Desember 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Thursday, December 25, 2014

Tag strong HTML

Tag <strong> digunakan untuk menandai teks yang dianggap penting dan biasanya ditampilkan dalam huruf tebal.

Contoh: strong.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag strong html</title>
        </head>
    <body>
        <p>Yang terpenting bukanlah engaku pintar atau tidak,
        tetapi yang penting adalah engkau <strong>berusaha dan tidak menyerah</strong>.
        Karena banyak orang yang pintar saja tetapi tak cukup sukses.
    </body>
</html>

Output:

Output tag strong di Firefox.

Jika Anda berpikir, tag <strong> dan <b> sama-sama menghasilkan efek huruf tebal, lalu mengapa ada 2 (tag strong dan b)? Menurut penulis kesimpulannya adalah tag <strong> digunakan untuk kata-kata yang sifatnya penting untuk diperhatikan dalam sebuah kalimat atau paragraf.

Namun tag <b> tidak harus seperti itu, Anda bisa saja memberikan tag <b> pada nama produk dalam sebuah riview atau pada kata kunci pada halaman abstrak atau teks lain yang mana pembaca tidak harus memfokuskan perhatian terhadap teks itu.

Referensi tulisan:

<strong>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 25 Desember 2014.
HTML/Elements/b; ditulis oleh: Kontributor W3, w3.org, diakses 25 Desember 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Sunday, December 21, 2014

Output tag span.

Diaplikasikan dalam Css.
Sama seperti tag lain pada umumnya, tag <span> juga diaplikasikan dengan css, misalnya menambahkan warna latar menjadi kuning:

span2.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag span html</title>
            <style type="text/css">
            span{background-color: yellow;
            }
            </style>
        </head>
    <body>
    <span>Teks ini dalam tag span. Ditampilkan seperti teks biasa.</span>
    <span>Lagi ini teks dalam span</span>
    <br />
    <i>Lihat bedanya dengan tag div</i>
    <div>Teks pertama dalam tag div</div>
    <div>Teks lainnya dalam tag div juga</div>
    </body>
</html>

Output:

Penambahan warna latar.

Referensi tulisan:

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

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:

; 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:

<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:

<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:

<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:

<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

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:

<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

Pilihan "Kacang kedelai" dalam posisi terpilih.

Referensi tulisan:

<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.

Wednesday, December 31, 2014

Tag sup HTML

Sunday, December 28, 2014

Tag sub HTML

Thursday, December 25, 2014

Tag strong HTML

Sunday, December 21, 2014

Tag span HTML

Thursday, December 18, 2014

Tag small HTML

Monday, December 15, 2014

Tag script HTML

Thursday, December 11, 2014

Tag samp HTML

Monday, December 8, 2014

Tag q HTML

Friday, December 5, 2014

Tag progress HTML

Thursday, December 4, 2014

Tag pre HTML

Monday, December 1, 2014

Tag option HTML